/** Shopify CDN: Minification failed

Line 5231:0 Unexpected "<"
Line 5257:0 Unexpected "<"
Line 8734:3 Unexpected "="
Line 8985:0 Unexpected "<"
Line 9186:28 Unterminated string token

**/
* {
  box-sizing: border-box;
}

body {
  color: var(--color-foreground);
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
  font-variation-settings: 'slnt' 0;
}

:root {
  --hover-lift-amount: 4px;
  --hover-scale-amount: 1.03;
  --hover-subtle-zoom-amount: 1.015;
  --hover-shadow-color: var(--color-shadow);
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --surface-transition-duration: 0.3s;
  --surface-transition-timing: var(--ease-out-quad);
  --submenu-animation-speed: 360ms;
  --submenu-animation-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
}

html {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  scroll-behavior: smooth;
}

html[scroll-lock] {
  overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

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

input,
textarea,
select {
  font: inherit;
  border-radius: var(--style-border-radius-inputs);
}

input:hover,
textarea:hover {
  background-color: var(--color-input-hover-background);
}

/** override ios and firefox defaults */
select {
  background-color: var(--color-background);
  color: currentcolor;
}

.collection-card,
.featured-blog-posts-card {
  width: 100%;
  position: relative;
  height: 100%;
}

/* Editorial layout */
.resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio,
.resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
  .collection-card__image,
  .featured-blog-posts-card__image,
  .blog-placeholder-svg {
    aspect-ratio: 99;
    height: 100%;
  }

  .collection-card__inner,
  .featured-blog-posts-card__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .collection-card__content,
  .featured-blog-posts-card__content {
    flex-shrink: 0;
  }

  &:not(.collection-card--image-bg) .collection-card__content,
  .featured-blog-posts-card__content {
    height: auto;
  }
}

.collection-card__inner,
.featured-blog-posts-card__inner {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: var(--layer-flat);
  pointer-events: none;
}

.collection-card__content,
.featured-blog-posts-card__content {
  display: flex;
  position: relative;
  height: 100%;
  width: 100%;
  gap: var(--gap);
}

.collection-card__link,
.featured-blog-posts-card__link {
  position: absolute;
  inset: 0;

  /* allows focus outline to have radius in supported browsers */
  border-radius: var(--border-radius);
}

.product-card,
.collection-card,
.resource-card,
.predictive-search-results__card--product,
.predictive-search-results__card {
  position: relative;
  transition: transform var(--hover-transition-duration) var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
  z-index: var(--layer-flat);
}

.product-card__link {
  position: absolute;
  inset: 0;
}

.product-card__content {
  position: relative;
}

.product-card__content {
  cursor: pointer;
}

.product-card__content slideshow-component {
  --cursor: pointer;
}

.predictive-search-results__card .product-card,
.predictive-search-results__card .collection-card,
.predictive-search-results__card .resource-card {
  transition: none;
  will-change: auto;
}

@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card-hover-effect-lift .product-card:hover,
  .card-hover-effect-lift .collection-card:hover,
  .card-hover-effect-lift .resource-card:hover,
  .card-hover-effect-lift .predictive-search-results__card:hover {
    transform: translateY(calc(-1 * var(--hover-lift-amount)));
  }

  .card-hover-effect-lift .header .product-card:hover,
  .card-hover-effect-lift .header .collection-card:hover,
  .card-hover-effect-lift .header .resource-card:hover,
  .card-hover-effect-lift .header-drawer .product-card:hover,
  .card-hover-effect-lift .header-drawer .collection-card:hover,
  .card-hover-effect-lift .header-drawer .resource-card:hover {
    transform: none;
  }

  .card-hover-effect-scale .product-card:hover,
  .card-hover-effect-scale .collection-card:hover,
  .card-hover-effect-scale .resource-card:hover,
  .card-hover-effect-scale .predictive-search-results__card:hover {
    transform: scale(var(--hover-scale-amount));
  }

  .card-hover-effect-scale .header .product-card:hover,
  .card-hover-effect-scale .header .collection-card:hover,
  .card-hover-effect-scale .header .resource-card:hover,
  .card-hover-effect-scale .header-drawer .product-card:hover,
  .card-hover-effect-scale .header-drawer .collection-card:hover,
  .card-hover-effect-scale .header-drawer .resource-card:hover {
    transform: none;
  }

  .card-hover-effect-subtle-zoom .card-gallery,
  .card-hover-effect-subtle-zoom .collection-card__image,
  .card-hover-effect-subtle-zoom .product-card__image,
  .card-hover-effect-subtle-zoom .resource-card__image {
    overflow: hidden;
    transition: transform var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .predictive-search-results__card .card-gallery,
  .predictive-search-results__card .collection-card__image,
  .predictive-search-results__card .product-card__image,
  .predictive-search-results__card .resource-card__image {
    transition: none;
  }

  .card-hover-effect-subtle-zoom .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .resource-card:hover .resource-card__image,
  .card-hover-effect-subtle-zoom .predictive-search-results__card:hover {
    transform: scale(var(--hover-subtle-zoom-amount));
  }

  .card-hover-effect-subtle-zoom .header .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .header .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .header .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .header .resource-card:hover .resource-card__image,
  .card-hover-effect-subtle-zoom .header-drawer .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .header-drawer .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .header-drawer .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .header-drawer .resource-card:hover .resource-card__image {
    transform: none;
  }

  .predictive-search-results__card .product-card:hover,
  .predictive-search-results__card .collection-card:hover,
  .predictive-search-results__card .resource-card:hover,
  .header .product-card:hover,
  .header .collection-card:hover,
  .header .resource-card:hover,
  .header-drawer .product-card:hover,
  .header-drawer .collection-card:hover,
  .header-drawer .resource-card:hover {
    transform: none;
    box-shadow: none;
  }
}

dialog {
  /* the ::backdrop inherits from the originating element, custom properties must be set on the dialog element */
  --backdrop-color-rgb: var(--color-shadow-rgb);

  background-color: var(--color-background);
  color: var(--color-foreground);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

.wrap-text {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

p:empty {
  display: none;
}

:first-child:is(p, h1, h2, h3, h4, h5, h6),
:first-child:empty + :where(p, h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

/* Remove bottom margin from last text item, or previous to last if the last is empty */
:last-child:is(p, h1, h2, h3, h4, h5, h6),
:where(p, h1, h2, h3, h4, h5, h6):nth-child(2):has(+ :last-child:empty) {
  margin-block-end: 0;
}

/* view transitions */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  /* Keep page interactive while view transitions are running */
  :root {
    view-transition-name: none;
  }

  /* Have the root transition during page navigation */
  html:active-view-transition-type(page-navigation),
  html:active-view-transition-type(product-image-transition) {
    view-transition-name: root-custom;
  }

  ::view-transition {
    pointer-events: none;
  }

  html:active-view-transition-type(page-navigation) main[data-page-transition-enabled='true'] {
    view-transition-name: main-content;
  }

  html:active-view-transition-type(page-navigation) main[data-product-transition='true'][data-template*='product'] {
    view-transition-name: none;
  }

  ::view-transition-old(main-content) {
    animation: var(--view-transition-old-main-content);
  }

  ::view-transition-new(main-content) {
    animation: var(--view-transition-new-main-content);
  }

  html:active-view-transition-type(product-image-transition) {
    [data-view-transition-type='product-image-transition'] {
      view-transition-name: product-image-transition;
    }

    [data-view-transition-type='product-details'] {
      view-transition-name: product-details;
    }
  }

  ::view-transition-group(product-image-transition) {
    z-index: 1;
  }

  ::view-transition-group(product-image-transition),
  ::view-transition-group(product-details) {
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-old(product-image-transition),
  ::view-transition-new(product-image-transition) {
    block-size: 100%;
    overflow: hidden;
    object-fit: cover;
    animation-duration: 0.25s;
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-new(product-details) {
    animation: var(--view-transition-new-main-content);
  }
}

/* Focus */
*:focus-visible {
  outline: var(--focus-outline-width) solid currentcolor;
  outline-offset: var(--focus-outline-offset);
}

@supports not selector(:focus-visible) {
  *:focus {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }
}

.focus-inset {
  outline-offset: calc(var(--focus-outline-width) * -1);
}

/* Layout */
.content-for-layout {
  flex: 1;
}

/* Set up page widths & margins */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: 16px;
}

@media screen and (min-width: 750px) {
  .page-width-wide,
  .page-width-normal,
  .page-width-narrow,
  .page-width-content {
    --page-margin: 40px;
  }
}

.page-width-wide {
  /* NOTE: This results in a page width of 2400px because of how we set up margins with grid */
  --page-content-width: var(--wide-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-normal {
  --page-content-width: var(--normal-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-narrow,
.page-width-content {
  /* NOTE: This results in a page width of 1400px because of how we set up margins with grid */
  --page-content-width: var(--narrow-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-content {
  --page-content-width: var(--normal-content-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

/* Section width full vs. page
   The reason we use a grid to contain the section is to allow for the section to have a
   full-width background image even if the section content is constrained by the page width. Do not try
   to rewrite this to max-width: --page-width; margin: 0 auto;, it doesn't work. */
.section {
  --full-page-grid-central-column-width: min(
    var(--page-width) - var(--page-margin) * 2,
    calc(100% - var(--page-margin) * 2)
  );
  --full-page-grid-margin: minmax(var(--page-margin), 1fr);
  --full-page-grid-with-margins: var(--full-page-grid-margin) var(--full-page-grid-central-column-width)
    var(--full-page-grid-margin);

  /* Utility variable gives the grid's first column width. Provides an offset width for components like carousels */
  --util-page-margin-offset: max(
    var(--page-margin),
    calc((100% - min(var(--page-content-width), 100% - var(--page-margin) * 2)) / 2)
  );

  /* Offset for full-width sections to account for the page margin,
  used for Marquee — note that --util-page-margin-offset doesn't work here */
  --full-page-margin-inline-offset: calc(((100vw - var(--full-page-grid-central-column-width)) / 2) * -1);

  width: 100%;

  /* This is required to make background images work, which are <img> rendered absolutely */
  position: relative;

  /* Set up the grid */
  display: grid;
  grid-template-columns: var(--full-page-grid-with-margins);
  min-height: var(--section-min-height, 'auto');
}

/* Place all direct children in the center column by default */
.section > * {
  grid-column: 2;
}

/* Make the actual section background transparent, and instead apply it to a separate sibling element to enable stacking with hero shadow  */
.shopify-section:not(.header-section) :is(.section, .cart-summary) {
  background: transparent;
}

.shopify-section:not(.header-section):has(.section) {
  position: relative;
}

.shopify-section:not(.header-section) .section-background {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--layer-section-background);
}

/* For page-width sections, all content goes in the center column */
.section--page-width > * {
  grid-column: 2;
}

/* For full-width sections, content spans all columns */
.section--full-width > * {
  grid-column: 1 / -1;
}

@media screen and (max-width: 749px) {
  .section--mobile-full-width > * {
    grid-column: 1 / -1;
  }
}

/* Some page-width sections should still extend all the way to the right edge of the page, e.g. collection carousel */
.section--page-width.section--full-width-right > * {
  grid-column: 2 / 4;
}

/* For full-width sections with margin, content still spans full width but with space on the sides */
.section--full-width.section--full-width-margin > * {
  grid-column: 1 / -1;

  @media screen and (min-width: 750px) {
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
  }
}

/* Some section content break out to full width of the page */
.section > .force-full-width {
  grid-column: 1 / -1;
}

.section--height-small {
  --section-min-height: var(--section-height-small);
}

.section--height-medium {
  --section-min-height: var(--section-height-medium);
}

.section--height-large {
  --section-min-height: var(--section-height-large);
}

.section--height-full-screen {
  --section-min-height: 100svh;
}

.section-content-wrapper.section-content-wrapper {
  min-height: calc(var(--section-min-height, 'auto') - var(--section-height-offset, 0px));
  position: relative;
  width: 100%;
  height: 100%;
}

/* Utility */

.hidden {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

@media screen and (max-width: 749px) {
  .hidden--mobile,
  .mobile\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

@media screen and (min-width: 750px) {
  .hidden--desktop,
  .desktop\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

.hide-when-empty:empty {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

.visually-hidden:not(:focus, :active) {
  /* stylelint-disable-next-line declaration-no-important */
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  /* stylelint-disable-next-line declaration-no-important */
  word-wrap: normal !important;
}

@media screen and (max-width: 749px) {
  .is-visually-hidden-mobile:not(:focus, :active) {
    /* stylelint-disable-next-line declaration-no-important */
    position: absolute !important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    /* stylelint-disable-next-line declaration-no-important */
    word-wrap: normal !important;
  }
}

.contents {
  display: contents;
}

.flex {
  display: flex;
  gap: var(--gap-md);
}

.grid {
  --centered-column-number: 12;
  --full-width-column-number: 14;
  --centered: column-1 / span var(--centered-column-number);
  --full-width: column-0 / span var(--full-width-column-number);

  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 750px) {
  .grid {
    display: grid;
    gap: 0;
    grid-template-columns: var(--margin-4xl) repeat(var(--centered-column-number), minmax(0, 1fr)) var(--margin-4xl);
    grid-template-areas: 'column-0 column-1 column-2 column-3 column-4 column-5 column-6 column-7 column-8 column-9 column-10 column-11 column-12 column-13';
  }
}

@media screen and (min-width: 1400px) {
  .grid {
    grid-template-columns:
      1fr repeat(
        var(--centered-column-number),
        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
      )
      1fr;
  }
}

.flex {
  display: flex;
  gap: var(--gap-md);
}

.flip-x {
  scale: -1 1;
}

.flip-y {
  scale: 1 -1;
}

.list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.text-left {
  --text-align: left;

  text-align: left;
}

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

  text-align: center;
}

.text-right {
  --text-align: right;

  text-align: right;
}

.text-inherit {
  color: inherit;
}

.user-select-text {
  user-select: text;
}

.justify-left {
  justify-content: left;
}

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

.justify-right {
  justify-content: right;
}

.title--aligned-center {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.background-image-container {
  overflow: hidden;
  position: absolute;
  inset: 0;
  opacity: var(--image-opacity);
}

.background-image-container img,
.background-image-container svg {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.background-image-fit img,
.background-image-fit svg {
  object-fit: contain;
}

.svg-wrapper {
  color: currentcolor;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  pointer-events: none;
}

.svg-wrapper--smaller {
  width: var(--icon-size-2xs);
  height: var(--icon-size-2xs);
}

.svg-wrapper--small {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.svg-wrapper > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.relative {
  position: relative;
}

/* Icons */
.icon-success,
.icon-error {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  flex-shrink: 0;
}

.icon-success {
  color: var(--color-success);
}

.icon-error {
  fill: var(--color-error);
}

.icon-default {
  fill: currentColor;
}

[data-placeholder='true'] * {
  cursor: default;
}

slideshow-component [data-placeholder='true'] * {
  cursor: grab;
}

/* Base text and heading styles */
body,
.paragraph:not(.button),
.paragraph > *,
.text-block.paragraph :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  text-transform: var(--font-paragraph--case);
  -webkit-font-smoothing: antialiased;
  color: var(--color, var(--color-foreground));
}

/* Ensure inputs with type presets maintain minimum 16px on mobile to prevent iOS zoom */
@media screen and (max-width: 1200px) {
  input.paragraph.paragraph,
  input.paragraph.paragraph:not([type]),
  textarea.paragraph.paragraph,
  select.paragraph.paragraph {
    font-size: max(1rem, var(--font-paragraph--size));
  }
}

.paragraph > small {
  font-size: smaller;
}

/* Typography presets */

h1,
.h1.h1,
.text-block.h1 > *,
.text-block.h1 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h1--family);
  font-style: var(--font-h1--style);
  font-weight: var(--font-h1--weight);
  font-size: var(--font-h1--size);
  line-height: var(--font-h1--line-height);
  letter-spacing: var(--font-h1--letter-spacing);
  text-transform: var(--font-h1--case);
  color: var(--color, var(--font-h1-color));
}

@media screen and (max-width: 1200px) {
  input.h1.h1,
  textarea.h1.h1,
  select.h1.h1 {
    font-size: max(1rem, var(--font-h1--size));
  }
}

h2,
.h2.h2,
.text-block.h2 > *,
.text-block.h2 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h2--family);
  font-style: var(--font-h2--style);
  font-weight: var(--font-h2--weight);
  font-size: var(--font-h2--size);
  line-height: var(--font-h2--line-height);
  letter-spacing: var(--font-h2--letter-spacing);
  text-transform: var(--font-h2--case);
  color: var(--color, var(--font-h2-color));
}

@media screen and (max-width: 1200px) {
  input.h2.h2,
  textarea.h2.h2,
  select.h2.h2 {
    font-size: max(1rem, var(--font-h2--size));
  }
}

h3,
.h3,
.h3.h3,
.text-block.h3 > *,
.text-block.h3 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h3--family);
  font-style: var(--font-h3--style);
  font-weight: var(--font-h3--weight);
  font-size: var(--font-h3--size);
  line-height: var(--font-h3--line-height);
  letter-spacing: var(--font-h3--letter-spacing);
  text-transform: var(--font-h3--case);
  color: var(--color, var(--font-h3-color));
}

@media screen and (max-width: 1200px) {
  input.h3,
  textarea.h3,
  select.h3 {
    font-size: max(1rem, var(--font-h3--size));
  }
}

h4,
.h4.h4,
.text-block.h4 > *,
.text-block.h4 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h4--family);
  font-style: var(--font-h4--style);
  font-weight: var(--font-h4--weight);
  font-size: var(--font-h4--size);
  line-height: var(--font-h4--line-height);
  letter-spacing: var(--font-h4--letter-spacing);
  text-transform: var(--font-h4--case);
  color: var(--color, var(--font-h4-color));
}

@media screen and (max-width: 1200px) {
  input.h4.h4,
  textarea.h4.h4,
  select.h4.h4 {
    font-size: max(1rem, var(--font-h4--size));
  }
}

h5,
.h5.h5,
.text-block.h5 > *,
.text-block.h5 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h5--family);
  font-style: var(--font-h5--style);
  font-weight: var(--font-h5--weight);
  font-size: var(--font-h5--size);
  line-height: var(--font-h5--line-height);
  letter-spacing: var(--font-h5--letter-spacing);
  text-transform: var(--font-h5--case);
  color: var(--color, var(--font-h5-color));
}

@media screen and (max-width: 1200px) {
  input.h5.h5,
  textarea.h5.h5,
  select.h5.h5 {
    font-size: max(1rem, var(--font-h5--size));
  }
}

h6,
.h6.h6,
.text-block.h6 > *,
.text-block.h6 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h6--family);
  font-style: var(--font-h6--style);
  font-weight: var(--font-h6--weight);
  font-size: var(--font-h6--size);
  line-height: var(--font-h6--line-height);
  letter-spacing: var(--font-h6--letter-spacing);
  text-transform: var(--font-h6--case);
  color: var(--color, var(--font-h6-color));
}

@media screen and (max-width: 1200px) {
  input.h6.h6,
  textarea.h6.h6,
  select.h6.h6 {
    font-size: max(1rem, var(--font-h6--size));
  }
}

:first-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-start: 0;
}

:last-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-end: 0;
}

/* Links */
a {
  --button-color: var(--color, var(--color-primary));

  color: var(--button-color);
  text-decoration-color: transparent;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.125em;
  transition: text-decoration-color var(--animation-speed) var(--animation-easing),
    color var(--animation-speed) var(--animation-easing);
}

:is(h1, h2, h3, h4, h5, h6, p) > a:hover {
  --button-color: var(--color, var(--color-primary-hover));
}

/* Add underline to text using our paragraph styles only. */
p:not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary)),
.rte :is(p, ul, ol, table):not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary)) {
  text-decoration-color: currentcolor;

  &:hover {
    text-decoration-color: transparent;
    color: var(--color-primary-hover);
  }
}

.container-background-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

details[open] .summary-closed {
  display: none;
}

details:not([open]) .summary-open {
  display: none;
}

details[open] > summary .icon-animated > svg {
  transform: rotate(180deg);
}

/* iOS fix: hide the default arrow on the summary */
summary::-webkit-details-marker {
  display: none;
}

/* When header is transparent, pull the first main content section up to sit under the floating header */
body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child {
  margin-top: calc(var(--header-group-height) * -1);
}

body:has(.header[transparent]) #header-group > .header-section {
  z-index: var(--layer-sticky);
}

/* All other header group content should be beneath the floating header,
but above the rest of the page content */
body:has(.header[transparent]) #header-group > *:not(.header-section) {
  z-index: calc(var(--layer-sticky) - 1);
}

/* Featured collection block */
.featured-collection-block {
  width: 100%;
}

/* Product grid */
.product-grid-container {
  display: block;
  width: 100%;
  padding-block: var(--padding-block-start) var(--padding-block-end);

  @media screen and (min-width: 750px) {
    display: grid;
  }
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--product-grid-gap);
  margin: auto;
  padding: 0;
  list-style: none;
}

@media screen and (min-width: 750px) {
  .product-grid {
    grid-template-columns: var(--product-grid-columns-desktop);
  }
}

.product-grid :is(h3, p) {
  margin: 0;
}

.product-grid__item {
  border: var(--product-card-border-width) solid rgb(var(--color-border-rgb) / var(--product-card-border-opacity));
}

.product-grid--organic[product-grid-view='default'] .product-grid__item {
  height: fit-content;
}

.product-grid__card.product-grid__card {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--product-card-gap);
  align-items: var(--product-card-alignment);
  text-decoration: none;
  color: var(--color, var(--color-foreground));
  padding-block: var(--padding-block-start) var(--padding-block-end);
  padding-inline: var(--padding-inline-start) var(--padding-inline-end);
  overflow: hidden;
}

[product-grid-view='zoom-out'] .product-grid__card {
  row-gap: var(--padding-xs);
}

[product-grid-view='default'] {
  --product-grid-gap: 16px;
  --padding-block-start: 24px;
  --padding-block-end: 24px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}

[product-grid-view='default'] .product-grid__item {
  padding-block: 0;
}

[product-grid-view='mobile-single'],
.product-grid-mobile--large {
  @media screen and (max-width: 749px) {
    grid-template-columns: 1fr;
  }
}

.product-grid__card .group-block > * {
  @media screen and (max-width: 749px) {
    flex-direction: column;
  }
}

ul[product-grid-view='zoom-out'] .product-grid__card > * {
  display: none;
}

ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
  display: block;
}

[product-grid-view='zoom-out']
  .card-gallery
  > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
  display: none;
}

ul[product-grid-view='zoom-out'] .card-gallery > img {
  display: block;
}

[product-grid-view='zoom-out'] {
  --product-grid-columns-desktop: repeat(
    10,
    minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr)
  );
}

.product-grid-view-zoom-out--details {
  display: none;
}

.product-grid-view-zoom-out--details .h4,
.product-grid-view-zoom-out--details span,
.product-grid-view-zoom-out--details s {
  font-size: var(--font-size--xs);
  font-family: var(--font-paragraph--family);
}

.product-grid-view-zoom-out--details span {
  font-weight: 500;
}

.product-grid-view-zoom-out--details .h4 {
  line-height: 1.3;
  font-weight: 400;
}

.product-grid-view-zoom-out--details > span.h6,
.product-grid-view-zoom-out--details > div.h6 > product-price {
  display: inline-block;
  line-height: 0;
  margin-top: var(--margin-2xs);
}

.product-grid-view-zoom-out--details > span.h6 > *,
.product-grid-view-zoom-out--details > div.h6 > * > * {
  line-height: 1.2;
}

@media (prefers-reduced-motion: no-preference) {
  :root:active-view-transition-type(product-grid) {
    details[open] floating-panel-component {
      view-transition-name: panel-content;

      .checkbox *,
      .facets__pill-label {
        transition: none;
      }

      .facets--vertical & {
        view-transition-name: none;
      }
    }

    .product-grid {
      view-transition-name: product-grid;
    }

    footer {
      view-transition-name: footer;
    }

    .product-grid__item,
    floating-panel-component {
      transition: none;
    }
  }
}

::view-transition-group(panel-content) {
  z-index: 1;
}

::view-transition-new(product-grid) {
  animation-delay: 150ms;
  animation-name: fadeInUp;
  animation-duration: var(--animation-speed);
  animation-timing-function: var(--animation-easing);
}

results-list[initialized] {
  .product-grid__item {
    transition: opacity var(--animation-speed) var(--animation-easing),
      transform var(--animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(10px);
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Collection and product list cards have equal heights */
:is(.product-grid__item, .resource-list__item) .product-card {
  display: grid;
  height: 100%;
}

/* Video background */
.video-background,
.video-background * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video-background--cover * {
  object-fit: cover;
}

.video-background--contain * {
  object-fit: contain;
}

.text-block {
  width: 100%;
}

.text-block > *:first-child,
.text-block > *:first-child:empty + * {
  margin-block-start: 0;
}

.text-block > *:last-child,
.text-block > *:has(+ *:last-child:empty) {
  margin-block-end: 0;
}

/* This is to deal with the margin applied to the p when custom styles are enabled. The p isn't the first child anymore due to the style tag */
.text-block > style + * {
  margin-block-start: 0;
}

/* Dialog */
.dialog-modal {
  border: none;
  box-shadow: var(--shadow-popover);

  @media screen and (min-width: 750px) {
    border-radius: var(--style-border-radius-popover);
    max-width: var(--normal-content-width);
  }

  @media screen and (max-width: 749px) {
    max-width: 100%;
    max-height: 100%;
    height: 100dvh;
    width: 100dvw;
    padding: var(--padding-md);
  }
}

.dialog-modal::backdrop {
  transition: backdrop-filter var(--animation-speed) var(--animation-easing);
  backdrop-filter: brightness(1);
  background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
}

.dialog-modal[open] {
  animation: elementSlideInTop var(--animation-speed) var(--animation-easing) forwards;

  &::backdrop {
    animation: backdropFilter var(--animation-speed) var(--animation-easing) forwards;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }
}

.dialog-modal.dialog-closing {
  animation: elementSlideOutTop var(--animation-speed) var(--animation-easing) forwards;

  &::backdrop {
    opacity: 0;
  }
}

/* stylelint-disable value-keyword-case */
.dialog-drawer {
  --dialog-drawer-opening-animation: move-and-fade;
  --dialog-drawer-closing-animation: move-and-fade;
}

.dialog-drawer--right {
  --dialog-drawer-opening-animation: move-and-fade;
  --dialog-drawer-closing-animation: move-and-fade;
}
/* stylelint-enable value-keyword-case */

.dialog-drawer[open] {
  --start-x: var(--custom-transform-from, 100%);
  --end-x: var(--custom-transform-to, 0px);
  --start-opacity: 1;

  animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards;
}

.dialog-drawer[open].dialog-closing {
  --start-x: 0px;
  --end-x: 100%;
  --start-opacity: 1;
  --end-opacity: 1;

  animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
}

.dialog-drawer--right[open] {
  --start-x: -100%;
  --start-opacity: 1;
}

.dialog-drawer--right[open].dialog-closing {
  --start-x: 0px;
  --end-x: -100%;
  --start-opacity: 1;
  --end-opacity: 1;

  animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
}

/* Buttons */
.button,
.button-secondary,
button.shopify-payment-button__button--unbranded {
  --text-align: center;

  display: grid;
  align-content: center;
  text-decoration: none;
  text-align: var(--text-align);
  color: var(--button-color);
  appearance: none;
  background-color: var(--button-background-color);
  border: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  margin-block: 0;
  transition: color var(--animation-speed) var(--animation-easing),
    box-shadow var(--animation-speed) var(--animation-easing),
    background-color var(--animation-speed) var(--animation-easing);
  cursor: pointer;
  width: fit-content;
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
  padding-block: var(--button-padding-block);
  padding-inline: var(--button-padding-inline);
}

.button {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
}

.button:not(.button-secondary, .button-unstyled) {
  outline-color: var(--button-background-color);
}

.button-secondary {
  font-family: var(--button-font-family-secondary);
  text-transform: var(--button-text-case-secondary);
  border-radius: var(--style-border-radius-buttons-secondary);
}

button.shopify-payment-button__button--unbranded {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
}

textarea,
input:not([type='checkbox'], [type='radio']) {
  background-color: var(--color-input-background);
  border-color: var(--color-input-border);
}

textarea::placeholder,
input::placeholder {
  color: var(--color-input-text);
}

textarea:not(:placeholder-shown)::placeholder,
input:not(:placeholder-shown)::placeholder {
  opacity: 0;
}

/* The declaration above is messing with buttons that have an attribute of hidden as it overwrites the display value */
.button[hidden] {
  display: none;
}

.button[aria-disabled='true'],
.button-secondary[aria-disabled='true'],
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button,
button.shopify-payment-button__button--unbranded {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-primary);
}

.button:hover,
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  --button-color: var(--color-primary-button-hover-text);
  --button-background-color: var(--color-primary-button-hover-background);
  --button-border-color: var(--color-primary-button-hover-border);
}

.button-secondary {
  --button-color: var(--color-secondary-button-text);
  --button-background-color: var(--color-secondary-button-background);
  --button-border-color: var(--color-secondary-button-border);
  --button-border-width: var(--style-border-width-secondary);
}

.button-secondary:hover {
  --button-color: var(--color-secondary-button-hover-text);
  --button-background-color: var(--color-secondary-button-hover-background);
  --button-border-color: var(--color-secondary-button-hover-border);
}

/* Needed to override the default Shopify styles */
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  background-color: var(--button-background-color);
}

.button-unstyled {
  display: block;
  padding: 0;
  background-color: inherit;
  color: inherit;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-size: var(--font-paragraph--size);
}

.button-unstyled:hover {
  background-color: inherit;
}

.button-unstyled--with-icon {
  color: var(--color-foreground);
  display: flex;
  gap: var(--gap-2xs);
  align-items: center;
}

.button-unstyled--transparent {
  background-color: transparent;
  box-shadow: none;
}

/* Show more */

.show-more__button {
  color: var(--color-primary);
  cursor: pointer;
}

.show-more__button:hover {
  @media screen and (min-width: 750px) {
    color: var(--color-primary-hover);
  }
}

.show-more__label {
  text-align: start;
  font-size: var(--font-size--body-md);
  font-family: var(--font-paragraph--family);
}

.show-more__button .svg-wrapper {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.show-more[data-expanded='true'] .show-more__label--more,
.show-more[data-expanded='false'] .show-more__label--less {
  display: none;
}

.link {
  display: inline-block;
  text-align: center;
}

shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
  --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
}

.product-form-buttons:has(.add-to-cart-button.button-secondary)
  :is(shopify-accelerated-checkout, shopify-accelerated-checkout-cart) {
  --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary);
  --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
}

/* Collapsible row */

.icon-caret svg {
  transition: transform var(--animation-speed) var(--animation-easing);
}

.icon-caret--forward svg {
  transform: rotate(-90deg);
}

.icon-caret--backward svg {
  transform: rotate(90deg);
}

summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding-block: var(--padding-sm);
}

summary:hover {
  color: var(--color-primary-hover);
}

summary .svg-wrapper {
  margin-inline-start: auto;
  height: var(--icon-size-xs);
  width: var(--icon-size-xs);
  transition: transform var(--animation-speed) var(--animation-easing);
}

/* Shared plus/minus icon animations */
summary .icon-plus :is(.horizontal, .vertical),
.show-more__button .icon-plus :is(.horizontal, .vertical) {
  transition: transform var(--animation-speed) var(--animation-easing);
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  opacity: 1;
}

details[open] > summary .icon-plus .horizontal,
.details-open > summary .icon-plus .horizontal,
.show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal {
  transform: rotate(90deg);
}

details[open] > summary .icon-plus .vertical,
.details-open > summary .icon-plus .vertical,
.show-more:where([data-expanded='true']) .show-more__button .icon-plus .vertical {
  transform: rotate(90deg);
  opacity: 0;
}

/* Product Media */
media-gallery {
  display: block;
  width: 100%;
}

:where(media-gallery, .product-grid__item) {
  .media-gallery__grid {
    grid-template-columns: 1fr;
    gap: var(--image-gap);
  }
}

.product-media-gallery__slideshow--single-media slideshow-container {
  @media screen and (max-width: 749px) {
    grid-area: unset;
  }
}

:not(.dialog-zoomed-gallery) > .product-media-container {
  --slide-width: 100%;

  display: flex;
  aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio));
  max-height: var(--constrained-height);
  width: var(--slide-width, 100%);

  /* Relative position needed for video and 3d models */
  position: relative;
  overflow: hidden;

  &:where(.constrain-height) {
    /* arbitrary offset value based on average theme spacing and header height */
    --viewport-offset: 400px;
    --constrained-min-height: 300px;
    --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

    margin-right: auto;
    margin-left: auto;
  }

  @supports (--test: round(up, 100%, 1px)) {
    /* width and overflow forces children to shrink to parent width */
    --slide-width: round(up, 100%, 1px);
  }
}

media-gallery:where(.media-gallery--grid) .media-gallery__grid {
  display: none;
}

media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
  /* Needed for safari to stretch to full grid height */
  height: 100%;
}

.product-media :is(deferred-media, product-model) {
  position: absolute;
}

@media screen and (max-width: 749px) {
  .product-media-container.constrain-height {
    max-height: none;
  }
}

@media screen and (min-width: 750px) {
  .product-media-container.constrain-height {
    --viewport-offset: var(--header-height, 100px);
    --constrained-min-height: 500px;
  }

  body:has(header-component[transparent]) .product-media-container.constrain-height {
    --viewport-offset: 0px;
  }

  .media-gallery--two-column .media-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .media-gallery--large-first-image .product-media-container:first-child,
  .media-gallery--two-column .product-media-container:only-child {
    /* First child spans 2 columns */
    grid-column: span 2;
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    display: none;
  }

  media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: grid;
  }
}

.product-media-container--model {
  /* Usefull when view in your space is shown */
  flex-direction: column;
}

.shopify-model-viewer-ui__controls-area {
  bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
}

.product-media-container img {
  aspect-ratio: inherit;
  object-fit: contain;
}

.product-media-container.media-fit-contain img {
  object-position: center center;
}

.product-media-container.media-fit {
  --product-media-fit: cover;

  img {
    object-fit: var(--product-media-fit);
  }
}

/* Media gallery zoom dialog */
.product-media-container__zoom-button {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: var(--layer-flat);
  cursor: zoom-in;
  background-color: transparent;

  &:hover {
    background-color: transparent;
  }
}

zoom-dialog dialog {
  width: 100vw;
  height: 100vh;
  border: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
  max-height: 100%;
  background: #fff;
  opacity: 0;
  transition: opacity var(--animation-speed) var(--animation-easing);
  scrollbar-width: none;

  &[open] {
    opacity: 1;
  }

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }

  &::backdrop {
    background: transparent;
  }
}

/* Animate the UI elements in only after the view transition is complete */
.close-button {
  position: fixed;
  top: var(--margin-lg);
  right: var(--margin-lg);
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  z-index: var(--layer-flat);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;

  /* For the outline radius */
  border-radius: 50%;
}

/* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */

@supports not (background-color: rgb(from red 150 g b / alpha)) {
  /**
    There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround.
    Using element selector to increase specificity.
  **/

  .close-button:focus-visible {
    outline: none;
    overflow: visible;
  }

  .close-button:focus-visible::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--focus-outline-offset));
    border: var(--focus-outline-width) solid currentColor;
    border-radius: 50%;
    display: inherit;
  }
}

.dialog--closed .close-button {
  animation: elementSlideOutBottom calc(var(--animation-speed) * 0.5) var(--animation-easing) forwards;
}

.dialog-thumbnails-list-container {
  position: fixed;
  width: 100%;
  bottom: 0;
  display: flex;
  z-index: var(--layer-raised);
}

.dialog-thumbnails-list {
  --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

  position: relative;
  display: inline-flex;
  flex-direction: row;
  gap: 8px;
  bottom: 0;
  overflow-x: auto;
  opacity: 0;
  padding: var(--padding-lg);
  margin-inline: auto;
  scrollbar-width: none;
  animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
  animation-delay: calc(var(--animation-speed) * 1.5);
}

.dialog--closed .dialog-thumbnails-list {
  animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
}

@media screen and (min-width: 750px) {
  .dialog-thumbnails-list {
    position: fixed;
    flex-direction: column;
    inset: 50% var(--margin-lg) auto auto;
    right: 0;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
    animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }
}

.dialog-thumbnails-list__thumbnail {
  width: var(--thumbnail-width);
  height: auto;
  transition: transform var(--animation-speed) var(--animation-easing);
  flex-shrink: 0;
  border-radius: var(--media-radius);

  img {
    height: 100%;
    object-fit: cover;
    border-radius: var(--media-radius);
    aspect-ratio: var(--aspect-ratio);
  }

  &:is([aria-selected='true']) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: calc(var(--focus-outline-offset) / 2);
    border: var(--style-border-width) solid var(--active-thumbnail-border-color);
  }
}

@supports (anchor-name: --test) {
  .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
    --inset-offset: calc(var(--focus-outline-offset) / 2);

    content: '';
    position: absolute;
    inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
    position-anchor: --selected-thumbnail;
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: calc(var(--focus-outline-offset) / 2);
    border: var(--style-border-width) solid var(--active-thumbnail-border-color);
    border-radius: var(--media-radius);
    z-index: var(--layer-raised);
  }

  @media (prefers-reduced-motion: no-preference) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      transition-property: inset;
      transition-duration: var(--spring-d180-b0-duration);
      transition-timing-function: var(--spring-d180-b0-easing);
    }
  }

  .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
    outline: none;
    border: none;
    anchor-name: --selected-thumbnail;
  }
}

.close-button:hover {
  background-color: transparent;
  opacity: 0.8;
}

.close-button svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

/* Product media */
.product-media {
  display: flex;
  flex: 1;
}

/* If the product media is already providing an image cover, hide images provided by sibling deferred-media */
.product-media__image ~ * .deferred-media__poster-image {
  display: none;
}

/* If the product media is playing, hide the preview image */
.product-media-container:has(.deferred-media__playing) .product-media__image {
  opacity: 0;
  transition: opacity var(--animation-speed) var(--animation-easing);
}

/* Deferred media & Product model  */
:is(product-model, deferred-media) {
  /* Height needed to make sure when it's set to be stretched, it takes the full height */
  height: 100%;
  width: 100%;
  position: relative;
}

product-model model-viewer,
/* Media that have a poster button sibling providing the size should be absolute-positioned.
Otherwise, it should be a block to rely on its own size */
:is(deferred-media, product-model) > .deferred-media__poster-button ~ *:not(template) {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  /* Required to make sure the absolute position respects the padding of the wrapper: */
  padding: inherit;
}

slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
  bottom: var(--padding-sm);
  right: var(--padding-sm);
}

.dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
  /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
  bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
  right: var(--padding-lg);
}

@media screen and (max-width: 749px) {
  slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
    .shopify-model-viewer-ui__controls-area {
    /* Position the controls just above the counter */
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }
}

@media screen and (min-width: 750px) {
  slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
    .shopify-model-viewer-ui__controls-area {
    /* Position the controls just above the counter */
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls up to match the padding on the thumbnails */
    bottom: var(--padding-lg);

    /* Move the controls to the left of the thumbnails list on the right */
    right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
  }
}

:is(deferred-media, .video-placeholder-wrapper).border-style {
  /* Apply the border radius to the video */
  overflow: hidden;
}

deferred-media {
  /* The overflow hidden in the deferred-media won't let the button show the focus ring */
  &:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  @supports not selector(:focus-visible) {
    &:has(:focus) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }
}

.deferred-media__poster-button {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--video-aspect-ratio, auto);
}

.deferred-media__poster-button.deferred-media__playing {
  opacity: 0;
  transition: opacity 0.3s ease;
}

deferred-media img {
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

deferred-media iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  aspect-ratio: var(--size-style-aspect-ratio, auto);
}

deferred-media[data-media-loaded] img {
  opacity: 0;
}

.deferred-media__poster-icon,
.video-placeholder-wrapper__poster-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deferred-media__poster-icon svg,
.video-placeholder-wrapper__poster-icon svg {
  width: var(--button-size);
  height: var(--button-size);
  color: var(--color-white);
  filter: drop-shadow(var(--shadow-button));

  &:hover {
    color: rgb(var(--color-white-rgb) / var(--opacity-80));
  }

  @media screen and (min-width: 750px) {
    width: 4rem;
    height: 4rem;
  }
}

deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
  /* only apply this on the video block not product media */
  object-fit: cover;
  height: 100%;
  aspect-ratio: var(--size-style-aspect-ratio, auto);
}

.button-shopify-xr {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--padding-md);
}

.button-shopify-xr > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  margin-inline-end: var(--margin-md);
}

.button-shopify-xr[data-shopify-xr-hidden] {
  display: none;
}

/* Swatches */
.swatch {
  --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity));
  --min-width-unitless: 15.9999; /* want to avoid division by 0 */
  --min-height-unitless: 15.9999; /* want to avoid division by 0 */
  --min-height: 16px;
  --min-width: 16px;

  /* mobile values */
  --scaling-factor: 0.5;
  --max-swatch-size: 28px;
  --max-pill-size: 20px;
  --max-filter-size: 32px;

  /* From the settings */
  --offset-swatch-width: calc(var(--variant-picker-swatch-width-unitless) - var(--min-width-unitless));
  --offset-swatch-height: calc(var(--variant-picker-swatch-height-unitless) - var(--min-height-unitless));

  /**
    Offset values are obtained from the following formulas:
      offset-width = width - min-width
      offset-height = height - min-height

    The offset-scaled-width and heigth are obtained by extending the line from
    [min,min] to [W,H] and taking the intersection with a square that starts at
    [min,min] and ends at [max,max].

    The extending line forms right angle triangles with the [min,min]->[max,max]
    box that enable us to derive the following formulas

    We also want the result to always be smaller than the input (pdp > everywhere else)
    by some scaling factor.
  */
  --offset-scaled-width: calc(
    var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size)
  );
  --offset-scaled-height: calc(
    var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size)
  );
  --offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width));

  /* width = min(m + sU, (m + s * W'/H' * M'), M) */
  --swatch-width: min(
    calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px),
    calc(var(--min-width) + var(--offset-scaled-width)),
    var(--max-swatch-size)
  );

  /* height = min(m + sV, (m + s * H'/W' * M'), M) */
  --swatch-height: min(
    calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px),
    calc(var(--min-height) + var(--offset-scaled-height)),
    var(--max-swatch-size)
  );

  display: block;
  background: var(--swatch-background);
  background-position: var(--swatch-focal-point, center);
  border-radius: var(--variant-picker-swatch-radius);
  border: var(--style-border-swatch-width) var(--style-border-swatch-style) var(--color-border);
  width: var(--swatch-width);
  height: var(--swatch-height);

  /* This is different than `background-size: cover` because we use `box-sizing: border-box`,
   * doing it like makes the background clip under the border without repeating.
   */
  background-size: var(--swatch-width) var(--swatch-height);

  &.swatch--unavailable {
    border-style: dashed;
  }

  &.swatch--unscaled {
    /* for when you want fixed sizing (e.g. pdp) */
    --swatch-width: var(--variant-picker-swatch-width);
    --swatch-height: var(--variant-picker-swatch-height);
  }

  &.swatch--filter {
    --swatch-width: var(--max-filter-size);
    --swatch-height: var(--max-filter-size);

    border-radius: var(--variant-picker-swatch-radius);
  }

  &.swatch--pill {
    --swatch-width: var(--max-pill-size);
    --swatch-height: var(--max-pill-size);

    border-radius: var(--variant-picker-swatch-radius);
  }

  /* swatches in filters and pills always have a border  */
  &.swatch--filter,
  &.swatch--pill {
    --style-border-swatch-width: var(--variant-picker-border-width);
    --style-border-swatch-style: var(--variant-picker-border-style);
    --color-border: rgb(var(--color-foreground-rgb) / var(--variant-picker-border-opacity));
  }

  &.swatch--variant-image {
    background-size: cover;
  }

  @media screen and (min-width: 750px) {
    /* desktop values */
    --max-swatch-size: 32px;
    --max-pill-size: 16px;
    --max-filter-size: 28px;
    --scaling-factor: 0.65;
  }
}

.variant-picker .variant-option--buttons label:has(.swatch) {
  border-radius: var(--variant-picker-swatch-radius);
}

/* Variant option component */
.variant-option {
  --options-border-radius: var(--variant-picker-button-radius);
  --options-border-width: var(--variant-picker-button-border-width);
  --variant-option-padding-inline: var(--padding-md);
}

.variant-option + .variant-option {
  margin-top: var(--padding-lg);
}

.variant-option--swatches {
  --options-border-radius: var(--variant-picker-swatch-radius);

  width: 100%;

  overflow-list::part(list) {
    padding-block: var(--overflow-list-padding-block, 0);
    padding-inline: var(--overflow-list-padding-inline, 0);
  }
}

.variant-option--swatches > overflow-list {
  justify-content: var(--product-swatches-alignment);

  @media screen and (max-width: 749px) {
    justify-content: var(--product-swatches-alignment-mobile);
  }
}

.variant-option--buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin: 0;
  padding: 0;
  border: none;
}

.variant-option--buttons legend {
  padding: 0;
  margin-block-end: var(--margin-xs);
}

.variant-option__swatch-value {
  padding-inline-start: var(--padding-xs);
  color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
}

@media (prefers-reduced-motion: no-preference) {
  .variant-option__button-label,
  .variant-option__select-wrapper,
  .variant-option__button-label::before,
  .variant-option__button-label::after,
  .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
    .variant-option__button-label__pill,
  .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg line:last-of-type {
    transition-duration: var(--animation-speed);
    transition-timing-function: var(--animation-easing);
  }

  .variant-option__button-label__pill {
    transition-property: transform;
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg line:last-of-type {
    transition-property: clip-path;
  }

  .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
    .variant-option__button-label__pill {
    transition-property: transform;
  }

  .variant-option__button-label::after {
    transition-property: clip-path;
  }

  .variant-option__button-label::before {
    transition-property: border-color;
  }

  .variant-option__select-wrapper,
  .variant-option__button-label {
    transition-property: background-color, border-color, color;
  }
}

.variant-option__button-label {
  --variant-picker-stroke-color: var(--color-variant-border);

  cursor: pointer;
  display: flex;
  flex: 0 0 3.25em;
  align-items: center;
  position: relative;
  padding-block: var(--padding-sm);
  padding-inline: var(--padding-lg);
  border: var(--options-border-width) solid var(--color-variant-border);
  border-radius: var(--options-border-radius);
  overflow: clip;
  justify-content: center;
  min-height: 3.25em;
  min-width: fit-content;
  white-space: nowrap;
  background-color: var(--color-variant-background);
  color: var(--color-variant-text);
  gap: 0;

  &:hover,
  &:hover:has([aria-disabled='true']):has([data-option-available='false']) {
    background-color: var(--color-variant-hover-background);
    border-color: var(--color-variant-hover-border);
    color: var(--color-variant-hover-text);
  }

  /* we need something like overflow-clip-margin to use the pseudoelement but it doesn't work in Safari */

  /* so instead use the layered background image trick */
  &:not(.variant-option__button-label--has-swatch):has([data-option-available='false']) {
    border-width: 0;
  }

  /* ::after/::before act as a fake border for the button style variant */

  /* ::after is the unavailable variant border that clips in */
  &:not(.variant-option__button-label--has-swatch)::before,
  &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::after {
    content: '';
    position: absolute;
    inset: 0;
    border: var(--options-border-width) solid var(--color-selected-variant-border);
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(var(--clip, 0 0 0 0));
  }

  &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::before {
    inset: 0;
  }

  &:not(.variant-option__button-label--has-swatch)::before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 0);
    border-color: var(--color-variant-border);
    inset: calc(var(--options-border-width) * -1);
  }

  &:has(:checked):not(.variant-option__button-label--has-swatch, :has([data-option-available='false']))::before {
    border-color: var(--color-selected-variant-border);
  }

  /* setting left/right accounts for variant buttons of different widths */
  &:not(:has(:checked)):has(~ label > :checked),
  &:has(:checked):has(~ label > [data-previous-checked='true']) {
    .variant-option__button-label__pill {
      right: 0;
      left: unset;
    }
  }

  &:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']),
  &:has(:checked) ~ label {
    .variant-option__button-label__pill {
      left: 0;
      right: unset;
    }
  }

  &:not(:has(:checked)):has(~ label > :checked) {
    --pill-offset: calc(100% + 1px);
  }

  &:has(:checked) ~ label {
    --pill-offset: calc(-100% - 1px);
  }

  &:has([data-current-checked='true']):first-of-type
    ~ label:last-of-type:not(.variant-option__button-label--has-swatch),
  &:not(:has(:checked)):has(~ label > :checked):not(.variant-option__button-label--has-swatch) {
    --clip: 0 0 0 100%;
  }

  &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(
      .variant-option__button-label--has-swatch
    ),
  &:has(:checked) ~ label:not(.variant-option__button-label--has-swatch) {
    --clip: 0 100% 0 0;
  }

  &:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill {
    width: max(var(--pill-width-current, 100%), var(--pill-width-previous, 100%));
  }

  @media screen and (min-width: 750px) {
    padding: var(--padding-xs) var(--variant-option-padding-inline);
  }
}

/* wrap around only for 3 or more variants in a row */

/* the more complex selector rules here produce the wrap around effect for first/last variants */
.variant-option--buttons:has(:nth-of-type(3)) {
  .variant-option__button-label:has([data-current-checked='true']):first-of-type ~ label:last-of-type {
    --pill-offset: calc(100% + 1px);
  }

  .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(
      ~ label:last-of-type > :checked
    ) {
    --pill-offset: calc(-100% - 1px);
  }
}

.variant-option__button-label__pill {
  background: var(--color-selected-variant-background);
  position: absolute;
  top: calc(var(--options-border-width) * -1);
  bottom: calc(var(--options-border-width) * -1);
  border-radius: inherit;
  pointer-events: none;
  width: 100%;
  transform: translateX(var(--pill-offset, 0));
}

.variant-option__button-label__text {
  pointer-events: none;
  text-align: start;
  text-wrap: auto;
  z-index: 2;
}

.variant-option--equal-width-buttons {
  --variant-min-width: clamp(44px, calc(var(--variant-option-padding-inline) * 2 + var(--variant-ch)), 100%);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), 1fr));

  .variant-option__button-label {
    min-width: var(--variant-min-width);
  }

  .variant-option__button-label__text {
    text-align: center;
    text-wrap: balance;
  }
}

.variant-option__button-label:has(:focus-visible) {
  --variant-picker-stroke-color: var(--color-foreground);

  border-color: var(--color-foreground);
  outline: var(--focus-outline-width) solid var(--color-foreground);
  outline-offset: var(--focus-outline-offset);
}

.variant-option__button-label--has-swatch {
  --focus-outline-radius: var(--variant-picker-swatch-radius);

  padding: 0;
  border: none;
  flex-basis: auto;
  min-height: auto;
}

/* Override global label:has(input) display rule with higher specificity */
.variant-option__button-label--has-swatch:has(input) {
  display: block;
}

.variant-option__button-label:has(:checked) {
  color: var(--color-selected-variant-text);
  border-color: var(--color-selected-variant-border);
}

.variant-option__button-label:has(:checked):hover {
  border-color: var(--color-selected-variant-hover-border);
  color: var(--color-selected-variant-hover-text);

  .variant-option__button-label__pill {
    background-color: var(--color-selected-variant-hover-background);
  }
}

.variant-option__button-label:has([data-option-available='false']) {
  color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
}

.variant-option__button-label--has-swatch:hover {
  outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
  outline-offset: var(--focus-outline-offset);
}

.variant-option__button-label--has-swatch:has(:checked) {
  --focus-outline: var(--focus-outline-width) solid var(--color-foreground);

  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

/* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */
@supports not (background-color: rgb(from red 150 g b / alpha)) {
  /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/
  .variant-option__button-label--has-swatch:has(:checked),
  .variant-option__button-label:has(:focus-visible) .swatch {
    outline: none;
    position: relative;
    overflow: visible;
  }

  .variant-option__button-label--has-swatch:has(:checked)::after,
  .variant-option__button-label:has(:focus-visible) .swatch::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--focus-outline-offset));
    border: var(--focus-outline);
    border-radius: var(--focus-outline-radius, 50%);
    background-color: transparent;
    display: inherit;
  }
}

.variant-option__button-label:has([data-option-available='false']):has(:checked) {
  background-color: inherit;
  color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
}

.variant-option__button-label input {
  /* remove the checkbox from the page flow */
  position: absolute;

  /* set the dimensions to match those of the label */
  inset: 0;

  /* hide it */
  opacity: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  border: none;
  border-radius: 0;
  background: transparent;
  appearance: auto;
  display: block;
  cursor: pointer;
}

.variant-option__button-label svg {
  position: absolute;
  left: var(--options-border-width);
  top: var(--options-border-width);
  height: calc(100% - (var(--options-border-width) * 2));
  width: calc(100% - (var(--options-border-width) * 2));
  cursor: pointer;
  pointer-events: none;
  stroke-width: var(--style-border-width);
  stroke: var(--variant-picker-stroke-color);
}

.variant-option__button-label:not(.variant-option__button-label--has-swatch) svg {
  stroke: var(--color-variant-border);

  line {
    stroke-width: var(--options-border-width);
  }

  line:last-of-type {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(var(--clip, 0 0 0 0));
    stroke: rgb(var(--color-variant-text-rgb) / 1);
  }
}

.sticky-content {
  position: sticky;
  top: var(--sticky-header-offset, 0);
  z-index: var(--layer-flat);
}

@media screen and (min-width: 750px) {
  .sticky-content--desktop,
  .sticky-content--desktop.full-height--desktop > .group-block {
    position: sticky;
    top: var(--sticky-header-offset, 0);
    z-index: var(--layer-flat);
  }
}

.price,
.compare-at-price,
.unit-price {
  white-space: nowrap;
}

.unit-price {
  display: block;
  font-size: min(0.85em, var(--font-paragraph--size));
  color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}

.tax-note.tax-note.tax-note {
  font-size: min(0.85em, var(--font-paragraph--size));
  font-weight: var(--font-paragraph--weight);
  color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}

product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
  margin-block: 0;
}

.compare-at-price {
  opacity: 0.4;
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
}

.card-gallery {
  position: relative;
}

@container (max-width: 70px) {
  .card-gallery:hover .quick-add__button {
    display: none;
  }
}

/* Hide "Add" button when "Choose" button is shown */
[data-quick-add-button='choose'] add-to-cart-component {
  display: none;
}

/* Hide "Choose" button when "Add" button is shown */
[data-quick-add-button='add'] .quick-add__button--choose {
  display: none;
}

/* Drawer */
.drawer {
  background-color: var(--color-background);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  z-index: var(--layer-raised);
  transform: translateX(-120%);
  transition: transform var(--animation-speed) var(--animation-easing);
}

.drawer[data-open='true'] {
  transform: translateX(0);
}

.drawer-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--drawer-header-block-padding) var(--drawer-inline-padding);
}

.drawer__title {
  font-size: var(--font-h2--size);
  margin: 0;
}

.drawer__close {
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
}

.drawer__content {
  display: block;
  padding: var(--drawer-content-block-padding) var(--drawer-inline-padding);
  width: 100%;
}

/* Background overlay */
.background-overlay {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-overlay-color, rgb(0 0 0 / 15%));
  }
}

/* Spacing style */
.spacing-style {
  --spacing-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --spacing-scale: var(--spacing-scale-default);
  }

  /* Must disable this, when you use these with calc and another unit type, things break — see logo.liquid */
  /* stylelint-disable length-zero-no-unit */
  --padding-block: 0px;
  --padding-block-start: var(--padding-block, 0px);
  --padding-block-end: var(--padding-block, 0px);
  --padding-inline: 0px;
  --padding-inline-start: var(--padding-inline, 0px);
  --padding-inline-end: var(--padding-inline, 0px);
  --margin-block: 0px;
  --margin-block-start: var(--margin-block, 0px);
  --margin-block-end: var(--margin-block, 0px);
  --margin-inline: 0px;
  --margin-inline-start: var(--margin-inline, 0px);
  --margin-inline-end: var(--margin-inline, 0px);
}

.spacing-style,
.inherit-spacing {
  padding-block: calc(var(--padding-block-start) + var(--section-top-offset, 0px)) var(--padding-block-end);
  padding-inline: var(--padding-inline-start) var(--padding-inline-end);
  margin-block: var(--margin-block-start) var(--margin-block-end);
  margin-inline: var(--margin-inline-start) var(--margin-inline-end);
}

/* Size style */
.size-style {
  width: var(--size-style-width-mobile, var(--size-style-width));
  height: var(--size-style-height-mobile, var(--size-style-height));

  @media screen and (min-width: 750px) {
    width: var(--size-style-width);
    height: var(--size-style-height);
  }
}

/* Custom Typography style */
.custom-typography,
.custom-typography > * {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  text-transform: var(--text-transform);
  text-wrap: var(--text-wrap);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
}

.custom-typography {
  h1 {
    line-height: var(--line-height--display, var(--line-height));
  }

  h2,
  h3,
  h4 {
    line-height: var(--line-height--heading, var(--line-height));
  }

  p {
    line-height: var(--line-height--body, var(--line-height));
  }
}

.custom-font-size,
.custom-font-size > * {
  font-size: var(--font-size);
}

.custom-font-weight,
.custom-font-weight > * {
  font-weight: var(--font-weight);
}

/* Border override style */
.border-style {
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);
  border-radius: var(--border-radius);
}

/* Gap scaling style */
.gap-style,
.layout-panel-flex {
  --gap-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --gap-scale: var(--spacing-scale-default);
  }
}

.layout-panel-flex {
  display: flex;
  gap: var(--gap);
  height: 100%;
}

.layout-panel-flex--row {
  flex-flow: row var(--flex-wrap);
  justify-content: var(--horizontal-alignment);
  align-items: var(--vertical-alignment);
}

.layout-panel-flex--column {
  flex-flow: column var(--flex-wrap);
  align-items: var(--horizontal-alignment);
  justify-content: var(--vertical-alignment);
}

@media screen and (max-width: 749px) {
  .mobile-column {
    flex-flow: column nowrap;
    align-items: var(--horizontal-alignment);
    justify-content: var(--vertical-alignment-mobile);
  }

  .layout-panel-flex--row:not(.mobile-column) {
    flex-wrap: var(--flex-wrap-mobile);

    > .menu {
      flex: 1 1 min-content;
    }

    > .text-block {
      flex: 1 1 var(--max-width--display-tight);
    }

    > .image-block {
      flex: 1 1 var(--size-style-width-mobile-min);
    }

    > .button {
      flex: 0 0 fit-content;
    }
  }
}

@media screen and (min-width: 750px) {
  .layout-panel-flex {
    flex-direction: var(--flex-direction);
  }
}

/* Form fields */
.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--animation-speed) ease;
}

.field__input {
  flex-grow: 1;
  text-align: left;
  border-radius: var(--style-border-radius-inputs);
  transition: box-shadow var(--animation-speed) ease, background-color var(--animation-speed) ease;
  padding: var(--input-padding);
  box-shadow: var(--input-box-shadow);
  background-color: var(--color-input-background);
  color: var(--color-input-text);
  border: none;
  outline: none;
  font-size: var(--font-paragraph--size);

  &:autofill {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }
}

.field__input:is(:focus, :hover) {
  box-shadow: var(--input-box-shadow-focus);
  background-color: var(--color-input-hover-background);
}

.field__input--button-radius {
  border-radius: var(--style-border-radius-buttons-primary);
}

.field__input--button-padding {
  padding-inline: var(--padding-3xl);
}

.field__label {
  color: rgb(var(--color-input-text-rgb) / var(--opacity-80));
  font-size: var(--font-paragraph--size);
  left: var(--input-padding-x);
  top: 50%;
  transform: translateY(-50%);
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--animation-speed) ease, font-size var(--animation-speed) ease;
}

/* RTE styles */
.rte,
.shopify-policy__title {
  :is(h1, h2, h3, h4, h5, h6) {
    margin-block: clamp(1.5rem, 1em * 3.3, 2.5rem) var(--font-heading--spacing);
  }

  :first-child:is(p, h1, h2, h3, h4, h5, h6),
  :first-child:empty + :is(p, h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0;
  }

  ul,
  ol {
    margin-block-start: 0;
    padding-inline-start: 1.5em;
  }

  /* Only apply margin-block-end to the higher level list, not nested lists */
  :is(ul, ol):not(:is(ul, ol) :is(ul, ol)) {
    margin-block-end: 1em;
  }

  blockquote {
    margin-inline: 1.5em 2.3em;
    margin-block: 3.8em;
    padding-inline-start: 0.8em;
    border-inline-start: 1.5px solid rgb(var(--color-foreground-rgb) / var(--opacity-25));
    font-style: italic;
    font-weight: 500;
  }

  .rte-table-wrapper {
    overflow-x: auto;
  }

  table {
    /* stylelint-disable-next-line declaration-no-important */
    width: 100% !important;
    border-collapse: collapse;
  }

  tr:not(:has(td)),
  thead {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    font-weight: bold;
    text-transform: uppercase;
  }

  tr:has(td) {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  th,
  td {
    text-align: start;
    padding-inline: var(--padding-md);
    padding-block: var(--padding-sm);
  }
}

.shopify-policy__container {
  padding-block: var(--padding-xl);
}

.checkbox {
  --checkbox-top: 50%;
  --checkbox-left: 1.5px;
  --checkbox-offset: 3px;
  --checkbox-path-opacity: 0;
  --checkbox-cursor: pointer;

  position: relative;
  display: flex;
  align-items: center;

  &:has(.checkbox__input:checked) {
    --checkbox-path-opacity: 1;
  }

  &.checkbox--disabled {
    --checkbox-cursor: not-allowed;
  }
}

.checkbox__input {
  position: absolute;
  opacity: 0;
  margin: 0;
  padding: 0;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  aspect-ratio: unset;
  border: none;
  border-radius: 0;
  background: transparent;
  appearance: auto;
  display: block;
  cursor: pointer;

  /* Outline is on the SVG instead, to allow it to have border-radius */
  &:focus-visible {
    outline: none;
  }

  &:focus-visible + .checkbox__label .icon-checkmark {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  &:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground);
    border-color: var(--color-foreground);
  }

  &:disabled + .checkbox__label .icon-checkmark {
    background-color: var(--input-disabled-background-color);
    border-color: var(--input-disabled-border-color);
  }
}

.checkbox__label {
  position: relative;
  display: inline-flex;
  cursor: var(--checkbox-cursor);
  line-height: var(--checkbox-size);
  min-width: var(--minimum-touch-target);
}

.checkbox .icon-checkmark {
  height: var(--checkbox-size);
  width: var(--checkbox-size);
  flex-shrink: 0;
  border: var(--checkbox-border);
  border-radius: var(--checkbox-border-radius);
  background-color: var(--color-background);
}

.checkbox__label-text {
  padding-inline-start: var(--checkbox-label-padding);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkbox .icon-checkmark path {
  stroke: var(--color-background);
  opacity: var(--checkbox-path-opacity);
  transition: opacity var(--animation-speed) var(--animation-easing);
}

.checkbox__input:disabled + .checkbox__label {
  color: var(--input-disabled-text-color);
}

/* Radio buttons and checkboxes - shared base styles */
:where(input[type='radio']),
:where(input[type='checkbox']) {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  aspect-ratio: 1;
  margin: 0;
  margin-inline-end: var(--padding-3xs);
  padding: 0;
  border: var(--checkbox-border);
  appearance: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

/* Radio buttons */
input[type='radio'] {
  border-radius: var(--style-border-radius-50);
  background: transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='radio']):checked {
  border-color: var(--color-foreground);
  background: var(--color-background);
}

:where(input[type='radio']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--checkbox-size) / 2);
  height: calc(var(--checkbox-size) / 2);
  background: var(--color-foreground);
  border-radius: var(--style-border-radius-50);
  transition: background 0.2s ease;
}

:where(input[type='radio']):disabled {
  border-color: var(--input-disabled-border-color);
  background-color: var(--input-disabled-background-color);
  cursor: not-allowed;
}

:where(input[type='radio']):disabled:checked::after {
  background: var(--input-disabled-background-color);
}

:where(input[type='radio']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='radio']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: var(--color-background);
}

:where(input[type='radio']):not(:disabled):hover:checked::after {
  background: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

/* Checkboxes */
:where(input[type='checkbox']) {
  border-radius: var(--checkbox-border-radius);
  background-color: var(--color-background);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='checkbox']):checked {
  background-color: var(--color-foreground);
  border-color: var(--color-foreground);
}

:where(input[type='checkbox']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  background-color: var(--color-background);
  mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

:where(input[type='checkbox']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='checkbox']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

:where(input[type='checkbox']):disabled {
  background-color: var(--input-disabled-background-color);
  border-color: var(--input-disabled-border-color);
  cursor: not-allowed;
}

:where(input[type='checkbox']):disabled:checked::after {
  background-color: var(--input-disabled-text-color);
}

/* Shared styles for radio buttons and checkboxes */
:where(input[type='radio']) + label,
:where(input[type='checkbox']) + label {
  display: inline;
  vertical-align: middle;
  cursor: pointer;
}

:where(input[type='radio']):disabled + label,
:where(input[type='checkbox']):disabled + label {
  color: var(--input-disabled-text-color);
  cursor: not-allowed;
}

/* Flexbox for labels wrapping radio buttons or checkboxes */
label:has(input[type='radio']),
label:has(input[type='checkbox']) {
  display: inline-flex;
  align-items: center;
  gap: var(--padding-2xs);
  cursor: pointer;
}

label:has(input[type='radio']:disabled),
label:has(input[type='checkbox']:disabled) {
  cursor: not-allowed;
}

/* Override for swatch labels to maintain block display */
.variant-option__button-label--has-swatch:has(input[type='radio']) {
  display: block;
}

/* Add to cart button */
.button[id^='BuyButtons-ProductSubmitButton-'] {
  position: relative;
  overflow: hidden;
}

/* Cart items component */
.cart-items-component {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Cart bubble */
.cart-bubble {
  --cart-padding: 0.2em;

  position: relative;
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  border-width: 0;
  display: flex;
  line-height: normal;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-button-text);
  padding-inline: var(--cart-padding);
}

.cart-bubble[data-maintain-ratio] {
  aspect-ratio: 1;
}

.cart-bubble[data-maintain-ratio] .cart-bubble__background {
  border-radius: var(--style-border-radius-50);
}

.cart-bubble__background {
  position: absolute;
  inset: 0;
  background-color: var(--color-primary-button-background);
  border-radius: var(--style-border-radius-lg);
}

.cart-bubble__text {
  font-size: var(--font-size--3xs);
  z-index: var(--layer-flat);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cart typography */
.cart-primary-typography {
  font-family: var(--cart-primary-font-family);
  font-style: var(--cart-primary-font-style);
  font-weight: var(--cart-primary-font-weight);
}

.cart-secondary-typography {
  font-family: var(--cart-secondary-font-family);
  font-style: var(--cart-secondary-font-style);
  font-weight: var(--cart-secondary-font-weight);
}

/* Quantity selector */
.quantity-selector {
  --quantity-selector-width: 124px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-input-text);
  background-color: var(--color-input-background);
  border: var(--style-border-width-inputs) solid var(--color-input-border);
  border-radius: var(--style-border-radius-inputs);
  flex: 1 1 var(--quantity-selector-width);
  align-self: stretch;
  transition: background-color var(--animation-speed) var(--animation-easing);

  &:hover {
    background-color: var(--color-input-hover-background);
  }
}

.product-form-buttons:has(.add-to-cart-button.button-secondary) .quantity-selector {
  border-radius: var(--style-border-radius-buttons-secondary);
}

.quantity-selector :is(.quantity-minus, .quantity-plus) {
  /* Unset button styles */
  padding: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  flex-shrink: 0;
  color: var(--color-input-text);
}

.quantity-selector .quantity-minus {
  border-start-start-radius: var(--style-border-radius-inputs);
  border-end-start-radius: var(--style-border-radius-inputs);
}

.quantity-selector .quantity-plus {
  border-start-end-radius: var(--style-border-radius-inputs);
  border-end-end-radius: var(--style-border-radius-inputs);
}

.product-details .quantity-selector,
.quick-add-modal .quantity-selector {
  border-radius: var(--style-border-radius-buttons-primary);
}

.product-details .quantity-selector .quantity-minus,
.quick-add-modal .quantity-selector .quantity-minus {
  border-start-start-radius: var(--style-border-radius-buttons-primary);
  border-end-start-radius: var(--style-border-radius-buttons-primary);
}

.product-details .quantity-selector .quantity-plus,
.quick-add-modal .quantity-selector .quantity-plus {
  border-start-end-radius: var(--style-border-radius-buttons-primary);
  border-end-end-radius: var(--style-border-radius-buttons-primary);
}

.quantity-selector .svg-wrapper {
  transition: transform var(--animation-speed) var(--animation-easing);
}

.quantity-selector svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

:is(.quantity-minus, .quantity-plus):active .svg-wrapper {
  transform: scale(0.9);
}

.quantity-selector input[type='number'] {
  margin: 0;
  text-align: center;
  border: none;
  appearance: none;
  max-width: calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2);
  border-radius: var(--style-border-radius-buttons);
  color: var(--color-input-text);
  background-color: transparent;
}

/* Chrome, Safari, Edge, Opera */
.quantity-selector input[type='number']::-webkit-inner-spin-button,
.quantity-selector input[type='number']::-webkit-outer-spin-button {
  appearance: none;
}

/* Firefox */
.quantity-selector input[type='number'] {
  appearance: textfield;
}

/* Pills (used in facets and predictive search) */

.pills__pill {
  --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));

  color: var(--color-foreground);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-sm);
  min-width: 48px;
  padding: 6px 12px;
  border-radius: var(--style-border-radius-pills);
  cursor: pointer;
  background-color: var(--pills-pill-background-color);
  transition: background-color var(--animation-speed) var(--animation-easing);

  &:hover {
    --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  @media screen and (max-width: 749px) {
    padding: var(--padding-xs) var(--padding-md);
  }
}

.pills__pill > .svg-wrapper {
  --close-icon-opacity: 0.4;
  --icon-stroke-width: 1px;

  color: var(--color-foreground);
}

.pills__pill--swatch {
  @media screen and (max-width: 749px) {
    padding-inline-start: var(--padding-sm);
  }
}

.pills__pill--swatch .swatch {
  margin-right: -4px;
}

.pills__pill--desktop-small {
  @media screen and (min-width: 750px) {
    font-size: var(--font-size--xs);
  }
}

/* Fly to cart animation */
fly-to-cart {
  --offset-y: 10px;

  position: fixed;
  width: var(--width, 40px);
  height: var(--height, 40px);
  left: 0;
  top: 0;
  z-index: calc(infinity);
  pointer-events: none;
  border-radius: var(--style-border-radius-buttons-primary);
  overflow: hidden;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  opacity: 0;
  background-color: var(--color-foreground);
  translate: var(--start-x, 0) var(--start-y, 0);
  transform: translate(-50%, -50%);
  animation-name: travel-x, travel-y, travel-scale;
  animation-timing-function: var(--x-timing), var(--y-timing), var(--scale-timing);
  animation-duration: 0.6s;
  animation-composition: accumulate;
  animation-fill-mode: both;
}

fly-to-cart.fly-to-cart--main {
  --x-timing: cubic-bezier(0.7, -5, 0.98, 0.5);
  --y-timing: cubic-bezier(0.15, 0.57, 0.9, 1.05);
  --scale-timing: cubic-bezier(0.85, 0.05, 0.96, 1);
}

fly-to-cart.fly-to-cart--quick {
  --x-timing: cubic-bezier(0, -0.1, 1, 0.32);
  --y-timing: cubic-bezier(0, 0.92, 0.92, 1.04);
  --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);

  animation-duration: 0.6s;
}

fly-to-cart.fly-to-cart--sticky {
  --x-timing: cubic-bezier(0.98, -0.8, 0.92, 0.5);
  --y-timing: cubic-bezier(0.14, 0.56, 0.92, 1.04);
  --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);
  --radius: var(--style-border-radius-buttons-primary);

  @media screen and (max-width: 749px) {
    --x-timing: cubic-bezier(0.98, -0.1, 0.92, 0.5);
  }

  animation-duration: 0.8s;
}

@keyframes travel-scale {
  0% {
    opacity: var(--start-opacity, 1);
  }

  5% {
    opacity: 1;
  }

  100% {
    border-radius: 50%;
    opacity: 1;
    transform: translate(-50%, calc(-50% + var(--offset-y))) scale(0.25);
  }
}

@keyframes travel-x {
  to {
    translate: var(--travel-x, 0) 0;
  }
}

@keyframes travel-y {
  to {
    translate: 0 var(--travel-y, 0);
  }
}

/* ------------------------------------------------------------------------------ */

/* Collection Wrapper - Shared layout CSS for collection and search pages */

/* ------------------------------------------------------------------------------ */

.collection-wrapper {
  @media screen and (min-width: 750px) {
    --facets-vertical-col-width: 6;

    grid-template-columns:
      1fr repeat(
        var(--centered-column-number),
        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
      )
      1fr;
  }

  @media screen and (min-width: 990px) {
    --facets-vertical-col-width: 5;
  }
}

.collection-wrapper:has(.facets-block-wrapper--full-width),
.collection-wrapper:has(.collection-wrapper--full-width) {
  @media screen and (min-width: 750px) {
    grid-column: 1 / -1;
    grid-template-columns:
      minmax(var(--page-margin), 1fr) repeat(
        var(--centered-column-number),
        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
      )
      minmax(var(--page-margin), 1fr);
  }
}

.collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid {
  @media screen and (min-width: 750px) {
    grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number);
  }
}

.collection-wrapper:has(.facets-block-wrapper--vertical:not(#filters-drawer)):has(.collection-wrapper--full-width) {
  @media screen and (min-width: 750px) {
    grid-column: 1 / -1;
    grid-template-columns: 0fr repeat(var(--centered-column-number), minmax(0, 1fr)) 0fr;
  }
}

:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
  [product-grid-view='default']
  .product-grid__card {
  @media screen and (max-width: 749px) {
    padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
    padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
  }
}

:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
  [product-grid-view='mobile-single']
  .product-grid__card {
  @media screen and (max-width: 749px) {
    padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
    padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
  }
}

/* Make product media go edge-to-edge by using negative margins */
:is(.collection-wrapper--full-width) .card-gallery,
:is(.collection-wrapper--full-width-on-mobile) .card-gallery {
  @media screen and (max-width: 749px) {
    margin-inline-start: calc(-1 * max(var(--padding-xs), var(--padding-inline-start)));
    margin-inline-end: calc(-1 * max(var(--padding-xs), var(--padding-inline-end)));
  }
}

.collection-wrapper--full-width .main-collection-grid__title {
  margin-left: var(--page-margin);
}

.collection-wrapper--full-width-on-mobile .main-collection-grid__title {
  @media screen and (max-width: 749px) {
    margin-left: var(--page-margin);
  }
}

.collection-wrapper--grid-full-width .facets--vertical:not(.facets--drawer) {
  @media screen and (min-width: 750px) {
    padding-inline-start: max(var(--padding-sm), var(--padding-inline-start));
  }
}

.collection-wrapper:has(.product-grid-mobile--large) .facets-mobile-wrapper.facets-controls-wrapper {
  @media screen and (max-width: 749px) {
    display: none;
  }
}

.collection-wrapper:has(> .facets--horizontal) .facets__panel[open] {
  @media screen and (min-width: 750px) {
    z-index: var(--facets-open-z-index);
  }
}

/* ------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------ */

/* Animation declarations - to be kept at the bottom of the file for ease of find */
@keyframes grow {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes move-and-fade {
  from {
    transform: translate(var(--start-x, 0), var(--start-y, 0));
    opacity: var(--start-opacity, 0);
  }

  to {
    transform: translate(var(--end-x, 0), var(--end-y, 0));
    opacity: var(--end-opacity, 1);
  }
}

@keyframes slideInTopViewTransition {
  from {
    transform: translateY(100px);
  }
}

@keyframes elementSlideInTop {
  from {
    margin-top: var(--padding-sm);
    opacity: 0;
  }

  to {
    margin-top: 0;
    opacity: 1;
  }
}

@keyframes elementSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

@keyframes elementSlideInBottom {
  from {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes elementSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInTop {
  from {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }

  to {
    transform: translateY(-50%);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutTop {
  from {
    transform: translateY(-50%);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes search-element-slide-in-bottom {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes search-element-slide-out-bottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(20px);
    opacity: 0;
  }
}

@keyframes dialogZoom {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0;
    transform: scale(0.95) translateY(1em);
  }
}

@keyframes thumbnail-selected {
  0%,
  100% {
    box-shadow: 0 0 0 2px transparent;
    scale: 0.9;
  }

  50% {
    box-shadow: 0 0 0 2px #000;
    scale: 1;
  }
}

@keyframes backdropFilter {
  from {
    backdrop-filter: brightness(1);
  }

  to {
    backdrop-filter: brightness(0.75);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalSlideInTop {
  from {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes modalSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

.bubble {
  display: inline-flex;
  height: calc(var(--variant-picker-swatch-height) / 1.5);
  font-size: var(--font-size--xs);
  border-radius: 20px;
  min-width: 20px;
  padding: 0 6px;
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  color: var(--color-foreground);
  align-items: center;
  justify-content: center;
}

.bubble svg {
  width: 12px;
  height: 12px;
}

.top-shadow::before {
  content: '';
  box-shadow: 0 0 10px var(--color-shadow);
  position: absolute;
  z-index: var(--layer-lowest);
  inset: 0;
  clip-path: inset(-50px 0 0 0); /* stylelint-disable-line */
}

@media screen and (min-width: 750px) {
  .top-shadow--mobile::before {
    display: none;
  }
}

.bottom-shadow::before {
  content: '';
  box-shadow: 0 0 10px var(--color-shadow);
  position: absolute;
  z-index: var(--layer-lowest);
  inset: 0;
  clip-path: inset(0 0 -50px 0); /* stylelint-disable-line */
}

@media screen and (min-width: 750px) {
  .bottom-shadow--mobile::before {
    display: none;
  }
}

.video-placeholder-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--size-style-aspect-ratio, auto);
}

:not(deferred-media) > .video-placeholder-wrapper {
  width: var(--video-placeholder-width);
}

.video-placeholder-wrapper > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*
 * Slideshow Component
 */
slideshow-component {
  --cursor: grab;
  --slide-offset: 6px;

  position: relative;
  display: flex;
  flex-direction: column;
  timeline-scope: var(--slideshow-timeline);
}

slideshow-component.slideshow--content-below-media slideshow-slide {
  display: grid;
}

.slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
  position: static;
}

.slideshow--content-below-media slideshow-slide {
  grid-template-rows: var(--grid-template-rows);

  @media screen and (min-width: 750px) {
    grid-template-rows: var(--grid-template-rows-desktop);
  }
}

.slide__content {
  @supports (animation-timeline: auto) {
    opacity: 0;
    animation: slide-reveal both linear;
    animation-timeline: var(--slideshow-timeline);
  }

  @media (prefers-reduced-motion) {
    opacity: 1;
    animation: none;
  }
}

/*
 * Force Safari to recalculate the timeline state on timeline refresh (after loop)
*/
slideshow-component[refreshing-timeline] .slide__content {
  animation: none;
}

.slideshow--single-media {
  --cursor: default;
}

a slideshow-component {
  --cursor: pointer;
}

/*
 * Slideshow Slides
 */
slideshow-slides {
  width: 100%;
  position: relative;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
  gap: var(--slideshow-gap, 0);
  cursor: var(--cursor);
  min-height: var(--slide-min-height);

  @media (prefers-reduced-motion) {
    scroll-behavior: auto;
  }

  &::-webkit-scrollbar {
    width: 0;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: transparent;
    border: none;
  }

  @media screen and (min-width: 750px) {
    min-height: var(--slide-min-height-desktop);
  }
}

slideshow-component[disabled='true'] slideshow-slides {
  overflow: hidden;
}

/**
 * By default, slideshows have overflow: hidden (no compositor layer).
 * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
 */
slideshow-component:not([in-viewport]) slideshow-slides {
  overflow: hidden;
}

slideshow-component[mobile-disabled] slideshow-slides {
  @media screen and (max-width: 749px) {
    overflow: hidden;
  }
}

slideshow-slide {
  position: relative;
  scroll-snap-align: center;
  width: var(--slide-width, 100%);
  max-height: 100%;
  flex-shrink: 0;
  view-timeline-name: var(--slideshow-timeline);
  view-timeline-axis: inline;
  content-visibility: auto;
  contain-intrinsic-size: auto none;
  border-radius: var(--corner-radius, 0);
  overflow: hidden;

  slideshow-component[actioned] &,
  &[aria-hidden='false'] {
    content-visibility: visible;
  }

  slideshow-component slideshow-slide:not([aria-hidden='false']) {
    content-visibility: hidden;
  }

  &[hidden]:not([reveal]) {
    display: none;
  }

  /* Make inactive slides appear clickable */
  &[aria-hidden='true'] {
    cursor: pointer;
  }
}

slideshow-slide .slide__image-container--rounded {
  border-radius: var(--corner-radius, 0);
}

slideshow-slide.product-media-container--tallest {
  content-visibility: visible;
}

@media screen and (max-width: 749px) {
  /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
  .media-gallery--hint
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
}

/*
 * Collection and Resource list carousels have peeking slides on both sides.
 * Card galleries preview the next or previous images on 'pointerenter', so we
 * try to kick load them beforehand (they are lazy loaded otherwise).
 */
:is(.resource-list__carousel, .card-gallery)
  :is(
    slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
    slideshow-slide[aria-hidden='false'] + slideshow-slide
  ) {
  content-visibility: auto;

  slideshow-component[actioned] & {
    content-visibility: visible;
  }
}

/*
 * Be specific about HTML children structure to avoid targeting nested slideshows.
 * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
 */
slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide {
  content-visibility: visible;
}

slideshow-slides[gutters*='start'] {
  padding-inline-start: var(--gutter-slide-width, 0);
  scroll-padding-inline-start: var(--gutter-slide-width, 0);
}

slideshow-slides[gutters*='end'] {
  padding-inline-end: var(--gutter-slide-width, 0);
}

slideshow-component[dragging] {
  --cursor: grabbing;

  * {
    pointer-events: none;
  }
}

slideshow-component[dragging] slideshow-arrows {
  display: none;
}

slideshow-container {
  width: 100%;
  display: block;
  position: relative;
  grid-area: container;
  container-type: inline-size;
  background-color: var(--color-background);
}

@media screen and (min-width: 750px) {
  .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
    &:has(slideshow-controls[pagination-position='right']) {
      display: grid;
      grid-template:
        'container controls' auto
        'arrows controls' min-content
        / 1fr auto;
    }

    &:has(slideshow-controls[pagination-position='left']) {
      display: grid;
      grid-template:
        'controls container' auto
        'controls arrows' min-content
        / auto 1fr;
    }

    slideshow-controls[pagination-position='left'] {
      order: -1;
    }
  }
}

/* Slideshow Play/Pause */
.slideshow-control:is(.icon-pause, .icon-play) {
  color: var(--color-active);

  &:hover {
    color: var(--color-hover);
  }

  svg {
    display: none;
  }
}

slideshow-component:is([autoplay]) {
  &:is([paused]) {
    .icon-play > svg {
      display: block;
    }
  }

  &:not([paused]) {
    .icon-pause > svg {
      display: block;
    }
  }
}

/* Slideshow Arrows */
slideshow-arrows {
  --cursor-previous: w-resize;
  --cursor-next: e-resize;

  position: absolute;
  inset: 0;
  display: flex;
  z-index: var(--layer-heightened);
  pointer-events: none;
  mix-blend-mode: difference;
  align-items: flex-end;

  &[position='left'] {
    justify-content: flex-start;
    padding-inline: var(--padding-xs);
  }

  &[position='right'] {
    justify-content: flex-end;
    padding-inline: var(--padding-xs);
  }

  &[position='center'] {
    justify-content: space-between;
    align-items: center;
  }
}

slideshow-arrows:has(.slideshow-control--shape-square),
slideshow-arrows:has(.slideshow-control--shape-circle) {
  mix-blend-mode: normal;
}

slideshow-component[disabled='true'] slideshow-arrows {
  display: none;
}

slideshow-arrows .slideshow-control {
  pointer-events: auto;
  opacity: 0;
  min-height: var(--minimum-touch-target);
  min-width: var(--minimum-touch-target);
  padding: 0 var(--padding-xs);
  color: var(--color-white);
}

slideshow-arrows .slideshow-control.slideshow-control--style-none {
  display: none;
}

.media-gallery--carousel slideshow-arrows .slideshow-control {
  padding-inline: 0 var(--padding-md);
  opacity: 1;
}

.card-gallery slideshow-arrows .slideshow-control {
  /* Align icons with quick-add button */
  padding-inline: var(--padding-xl);

  @container (max-width: 249px) {
    padding-inline: 0 var(--padding-sm);
  }
}

:not(.media-gallery--carousel)
  > :is(slideshow-component:hover, slideshow-component:focus-within):not(:has(slideshow-controls:hover))
  > slideshow-container
  > slideshow-arrows
  .slideshow-control {
  animation: arrowsSlideIn var(--animation-speed) var(--animation-easing) forwards;
}

@keyframes arrowsSlideIn {
  from {
    transform: translate(var(--padding-sm), 0);
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slide-reveal {
  0% {
    translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
    opacity: 0;
  }
}

.section-resource-list,
.section-carousel {
  row-gap: var(--gap);
}

.section-resource-list__content {
  display: flex;
  flex-direction: column;
  align-items: var(--horizontal-alignment);
  gap: var(--gap);
  width: 100%;
}

.section-resource-list__content:empty {
  display: none;
}

.section-resource-list__header:is(:empty, :has(.group-block-content:empty)),
.section-resource-list__content:empty {
  display: none;
}

:where(.section-resource-list.section--full-width) product-card[data-product-transition] > .group-block,
:where(.section-carousel.section--full-width) product-card[data-product-transition] > .group-block {
  @media screen and (max-width: 749px) {
    padding-inline: max(var(--padding-xs), var(--padding-inline-start))
      max(var(--padding-xs), var(--padding-inline-end));
  }
}

.resource-list--carousel-mobile {
  display: block;

  @media screen and (min-width: 750px) {
    display: none;
  }
}

.resource-list {
  --resource-list-mobile-gap-max: 9999px;
  --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max));
  --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max));

  width: 100%;

  @media screen and (max-width: 749px) {
    --resource-list-mobile-gap-max: 12px;
  }

  @container resource-list (max-width: 749px) {
    --resource-list-mobile-gap-max: 12px;
  }
}

.resource-list--grid {
  display: grid;
  gap: var(--resource-list-row-gap) var(--resource-list-column-gap);
  grid-template-columns: var(--resource-list-columns-mobile);

  @media screen and (min-width: 750px) {
    grid-template-columns: var(--resource-list-columns);
  }

  @container resource-list (max-width: 449px) {
    grid-template-columns: var(--resource-list-columns-mobile);
  }

  @container resource-list(min-width: 450px) and (max-width: 749px) {
    --resource-list-columns-per-row: 3;

    grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

    /* Avoid orphan in last row when there are 4, 7, or 10 items */
    &:has(.resource-list__item:first-child:nth-last-child(3n + 1)),
    /* Clean two full rows when there are 8 items */
    &:has(.resource-list__item:first-child:nth-last-child(8n)) {
      --resource-list-columns-per-row: 4;
    }
  }

  @container resource-list (min-width: 750px) {
    grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

    &:has(.resource-list__item:first-child:nth-last-child(n + 9)) {
      --resource-list-columns-per-row: 5;
    }

    &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) {
      --resource-list-columns-per-row: 4;
    }

    &:has(.resource-list__item:first-child:nth-last-child(6)) {
      --resource-list-columns-per-row: 3;
    }

    &:has(.resource-list__item:first-child:nth-last-child(5)) {
      --resource-list-columns-per-row: 5;
    }

    &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) {
      --resource-list-columns-per-row: 4;
    }
  }

  @container resource-list (min-width: 1200px) {
    &:has(.resource-list__item:first-child:nth-last-child(6)) {
      --resource-list-columns-per-row: 6;
    }
  }
}

.resource-list__item {
  height: 100%;
  color: var(--color-foreground);
  text-decoration: none;
}

.resource-list__carousel {
  --slide-width: 60vw;

  width: 100%;
  position: relative;
  container-type: inline-size;
  container-name: resource-list-carousel;

  .slideshow-control[disabled] {
    display: none;
  }

  .slideshow-control--next {
    margin-inline-start: auto;
  }
}

@container resource-list-carousel (max-width: 749px) {
  .resource-list__carousel .resource-list__slide {
    --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
  }
}

@container resource-list-carousel (min-width: 750px) {
  .resource-list__carousel .resource-list__slide {
    --section-slide-width: calc(
      (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
        var(--column-count)
    );
    --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    --slide-width: var(--section-slide-width, var(--fallback-slide-width));
  }
}

.resource-list__carousel slideshow-slides {
  gap: var(--resource-list-column-gap);

  /* Add padding to prevent hover animations from being clipped in slideshow
     15px accommodates:
     - Scale effect (9px on each side from 1.03 scale)
     - Lift effect (4px upward movement)
     - Shadow (15px spread with -5px offset)
     Using 16px for better alignment with our spacing scale */

  margin-block: -16px;
  padding-block: 16px;
}

.resource-list__carousel slideshow-arrows {
  padding-inline: var(--util-page-margin-offset);
}

.resource-list__carousel .resource-list__slide {
  width: var(--slide-width);
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 0;
}

/* Base styles */
.group-block,
.group-block-content {
  position: relative;
}

.group-block:has(> video-background-component),
.group-block:has(> .background-image-container) {
  overflow: hidden;
}

.group-block-content {
  height: 100%;
  width: 100%;
}

/* Container styles */
.section-content-wrapper.section-content-wrapper:where(.layout-panel-flex) .group-block--fill {
  flex: 1;
}

/* Flex behavior for width variants */
.layout-panel-flex--row > .group-block--width-fit {
  flex: 0;
}

.layout-panel-flex--row > .group-block--width-fill {
  flex: 1;
}

.layout-panel-flex--row > .group-block--width-custom {
  flex-basis: var(--size-style-width);
}

/* Dimension utilities - Height */
.group-block--height-fit {
  height: auto;
}

.group-block--height-custom,
.group-block--height-fill {
  height: var(--size-style-height);
}

/* Flex behavior for height variants */
.layout-panel-flex--column > .group-block--height-fit {
  flex: 0 1 auto;
}

.layout-panel-flex--column > .group-block--height-fill {
  flex: 1;
}

.layout-panel-flex--column > .group-block--height-custom {
  flex-basis: var(--size-style-height);
}

accordion-custom {
  details {
    &::details-content,
    .details-content {
      block-size: 0;
      overflow-y: clip;
      opacity: 0;
      interpolate-size: allow-keywords;
      transition: content-visibility var(--animation-speed-slow) allow-discrete,
        padding-block var(--animation-speed-slow) var(--animation-easing),
        opacity var(--animation-speed-slow) var(--animation-easing),
        block-size var(--animation-speed-slow) var(--animation-easing);
    }

    /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
    &:not(:focus-within)::details-content,
    &:not(:focus-within) .details-content {
      transition: none;
    }

    &:not([open]) {
      &::details-content,
      .details-content {
        padding-block: 0;
      }
    }

    &[open] {
      &::details-content,
      .details-content {
        opacity: 1;
        block-size: auto;

        @starting-style {
          block-size: 0;
          opacity: 0;
          overflow-y: clip;
        }

        &:focus-within {
          overflow-y: visible;
        }
      }
    }
  }
}

accordion-custom[data-disable-on-mobile='true'] summary {
  @media screen and (max-width: 749px) {
    cursor: auto;
  }
}

accordion-custom[data-disable-on-desktop='true'] summary {
  @media screen and (min-width: 750px) {
    cursor: auto;
  }
}

text-component {
  --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
  --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  --shimmer-speed: 1.25s;

  display: inline-block;
  position: relative;
  transition: color var(--animation-speed-slow) ease;
  line-height: 1;

  &::after {
    content: attr(value);
    position: absolute;
    inset: 0;
    color: transparent;
    opacity: 0;
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    pointer-events: none;
    background-image: linear-gradient(
      -85deg,
      var(--shimmer-text-color) 10%,
      var(--shimmer-color-light) 50%,
      var(--shimmer-text-color) 90%
    );
    background-clip: text;
    background-size: 200% 100%;
    background-position: 100% 0;
    place-content: center;
  }

  &[shimmer] {
    color: transparent;

    &::after {
      opacity: 1;
      animation: text-shimmer var(--shimmer-speed) infinite linear;
    }
  }
}

@keyframes text-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

/* Animation transitions */
.transition-background-color {
  transition: background-color var(--animation-speed-medium) ease-in-out;
}

.transition-transform {
  transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
}

.transition-border-color {
  transition: border-color var(--animation-speed-medium) var(--animation-timing-hover);
}

/* Global scrollbar styles */

/* Webkit browsers */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Product card title truncation - applied only to zoom-out view */
[product-grid-view='zoom-out'] :is(.product-card, .product-grid__card) :is(h4, .h4) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
}

/* Product card title truncation - applied on mobile regardless of view */
@media screen and (max-width: 749px) {
  :is(.product-card, .product-grid__card) :is(h4, .h4) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
  }
}

.product-card:hover,
.collection-card:hover,
.resource-card:hover,
.predictive-search-results__card--product:hover,
.predictive-search-results__card:hover {
  position: relative;
  z-index: var(--layer-raised);
  transition: transform var(--hover-transition-duration) var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
}

.header .product-card:hover,
.header .collection-card:hover,
.header .resource-card:hover,
.header-drawer .product-card:hover,
.header-drawer .collection-card:hover,
.header-drawer .resource-card:hover {
  z-index: auto;
  transform: none;
  box-shadow: none;
}

.predictive-search-results__inner {
  flex-grow: 1;
  overflow-y: auto;
  padding-block: var(--padding-lg);
  container-type: inline-size;
  color: var(--color-foreground);
}

/* Prevent iOS zoom on input focus by ensuring minimum 16px font size on mobile */
@media screen and (max-width: 1200px) {
  input,
  textarea,
  select,
  /* Higher specificity to override type preset classes like .paragraph, .h1, etc. */
  .paragraph.paragraph input,
  .paragraph.paragraph textarea,
  .paragraph.paragraph select,
  .h1.h1 input,
  .h1.h1 textarea,
  .h1.h1 select,
  .h2.h2 input,
  .h2.h2 textarea,
  .h2.h2 select,
  .h3.h3 input,
  .h3.h3 textarea,
  .h3.h3 select,
  .h4.h4 input,
  .h4.h4 textarea,
  .h4.h4 select,
  .h5.h5 input,
  .h5.h5 textarea,
  .h5.h5 select,
  .h6.h6 input,
  .h6.h6 textarea,
  .h6.h6 select {
    font-size: max(1rem, 100%);
  }
}

.product-recommendations {
  display: block;
}

.product-recommendations__skeleton-item {
  aspect-ratio: 3 / 4;
  background-color: var(--color-foreground);
  opacity: var(--skeleton-opacity);
  border-radius: 4px;
}

@media screen and (max-width: 749px) {
  .product-recommendations__skeleton-item:nth-child(2n + 1) {
    display: none;
  }
}

product-recommendations:has([data-has-recommendations='false']) {
  display: none;
}

.add-to-cart-button {
  --text-speed: 0.26;
  --base-delay: calc(var(--text-speed) * 0.25);
  --tick-speed: 0.1;
  --ring-speed: 0.2;
  --check-speed: 0.2;
  --burst-speed: 0.32;
  --step-delay: 3;
  --speed: 1;

  user-select: none;
  transition-property: color, box-shadow, background-color, scale, translate;
  transition-duration: var(--animation-speed);
  transition-timing-function: var(--ease-out-cubic);

  &:active {
    scale: 0.99;
    translate: 0 1px;
  }
}

.add-to-cart-button .svg-wrapper .checkmark-burst {
  width: 30px;
  height: 30px;
}

.add-to-cart-text {
  --atc-opacity: 0;
  --atc-destination: -1em;

  display: flex;
  gap: var(--gap-2xs);
  align-items: center;
  justify-content: center;
  animation-duration: var(--animation-speed);
  animation-timing-function: var(--animation-easing);
  animation-fill-mode: forwards;
  transition: width var(--animation-speed) var(--animation-easing),
    opacity var(--animation-speed) var(--animation-easing);
}

.add-to-cart__added {
  --atc-opacity: 1;
  --atc-destination: 0px;

  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.add-to-cart__added-icon {
  width: 32px;
  height: 32px;
}

[data-added='true'] .add-to-cart-text,
[data-added='true'] .add-to-cart__added {
  animation-name: atc-slide;
}

.checkmark-burst {
  opacity: 0;
  overflow: visible;

  .burst {
    rotate: 20deg;
  }

  .check {
    opacity: 0.2;
    scale: 0.8;
    filter: blur(2px);
    transform: translateZ(0);
  }

  :is(.ring, .line, .check, .burst, .tick) {
    transform-box: fill-box;
    transform-origin: center;
  }

  :is(.line) {
    stroke-dasharray: 1.5 1.5;
    stroke-dashoffset: -1.5;
    translate: 0 -180%;
  }

  g {
    transform-origin: center;
    rotate: calc(var(--index) * (360 / 8) * 1deg);
  }
}

.add-to-cart-button[data-added='true'] .checkmark-burst {
  opacity: 1;
}

.add-to-cart-button[data-added='true'] {
  .check {
    opacity: 1;
    scale: 1;
    filter: blur(0);
  }

  .tick {
    scale: 1.75;
  }

  .ring {
    opacity: 0;
    scale: 1;
  }

  .line {
    stroke-dashoffset: 1.5;
  }

  .add-to-cart-text {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: circle(0% at 50% 50%);
    filter: blur(2px);
    opacity: 0;
    translate: 0 4px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .add-to-cart-button[data-added='true'] {
    .check {
      transition-property: opacity, scale, filter;
      transition-duration: calc(calc(var(--check-speed) * 1s));
      transition-delay: calc((var(--base-delay) * 1s));
      transition-timing-function: var(--ease-out-quad);
    }

    .tick {
      transition-property: scale;
      transition-duration: calc((calc(var(--tick-speed) * 1s)));
      transition-delay: calc(((var(--base-delay) + (var(--check-speed) * (var(--step-delay) * 1.1))) * 1s));
      transition-timing-function: ease-out;
    }

    .ring {
      transition-property: opacity, scale;
      transition-duration: calc((calc(var(--ring-speed) * 1s)));
      transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
      transition-timing-function: var(--ease-out-quad);
    }

    .line {
      transition-property: stroke-dashoffset;
      transition-duration: calc((calc(var(--burst-speed) * 1s)));
      transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
      transition-timing-function: var(--ease-out-cubic);
    }
  }

  .add-to-cart-text {
    transition-property: clip-path, opacity, filter, translate;
    transition-duration: calc((var(--text-speed) * 0.6s)), calc((var(--text-speed) * 1s));
    transition-timing-function: ease-out;
  }
}

.add-to-cart-text {
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  clip-path: circle(100% at 50% 50%);
}

@keyframes atc-slide {
  to {
    opacity: var(--atc-opacity, 1);
    translate: 0px var(--atc-destination, 0px);
  }
}


/* ============================================================
   OMNISYNC — Homepage Stylesheet
   Insert into your Shopify base CSS file.
   ============================================================ */

/* SCROLL REVEALS */
.omni-rv { opacity: 0; transition: opacity .75s cubic-bezier(.25,.46,.45,.94), transform .75s cubic-bezier(.25,.46,.45,.94); }
.omni-rv.up    { transform: translateY(44px); }
.omni-rv.left  { transform: translateX(-44px); }
.omni-rv.right { transform: translateX(44px); }
.omni-rv.sc    { transform: scale(.93); }
.omni-rv.vis   { opacity: 1; transform: none; }
.omni-d1 { transition-delay: .10s; } .omni-d2 { transition-delay: .18s; }
.omni-d3 { transition-delay: .26s; } .omni-d4 { transition-delay: .34s; }
.omni-d5 { transition-delay: .42s; } .omni-d6 { transition-delay: .50s; }

/* ROOT VARS */
:root {
  --omni-bg:    #f5f5f7;
  --omni-w:     #ffffff;
  --omni-s2:    #fbfbfd;
  --omni-s3:    #f0f0f5;
  --omni-t:     #1d1d1f;
  --omni-m:     #86868b;
  --omni-m2:    #6e6e73;
  --omni-bd:    rgba(0,0,0,0.08);
  --omni-bd2:   rgba(0,0,0,0.13);
  --omni-bl:    #0066cc;
  --omni-bll:   #e8f0fb;
  --omni-blm:   #c9ddf7;
  --omni-gn:    #1c7a3e;
  --omni-gnl:   #eaf4ee;
  --omni-dk:    #000000;
  --omni-dk2:   #1d1d1f;
  --omni-amber: #f59e0b;
  --omni-amber-l: #fff8e6;
  --omni-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

/* ANNOUNCEMENT BAR */
.omni-ann { padding: 8px 22px; text-align: center; font-size: 12.5px; color: #fff; letter-spacing: -.01em; background: #0066cc; }
.omni-ann a { color: #fff; text-decoration: underline; }

/* BUTTONS */
.omni-b-bl { padding: 12px 26px; border-radius: 980px; background: var(--omni-bl); color: #fff; font-size: 14px; font-weight: 400; border: none; letter-spacing: -.01em; transition: opacity .2s; display: inline-block; font-family: var(--omni-font); }
.omni-b-bl:hover { opacity: .82; color: #fff; }
.omni-b-bl--lg { font-size: 15px; padding: 14px 32px; font-weight: 600; }
.omni-b-out { padding: 12px 26px; border-radius: 980px; background: transparent; color: var(--omni-bl); font-size: 14px; font-weight: 400; border: 1.5px solid var(--omni-bl); letter-spacing: -.01em; transition: opacity .2s; display: inline-block; }
.omni-b-out:hover { opacity: .7; }
.omni-b-w { padding: 14px 32px; border-radius: 980px; background: #ffffff; color: #000000 !important; font-size: 15px; font-weight: 600; border: none; letter-spacing: -.02em; transition: opacity .2s; display: inline-block; }
.omni-b-w:hover { opacity: .9; color: #000000 !important; }
.omni-b-wout { padding: 14px 32px; border-radius: 980px; background: transparent; color: #ffffff !important; font-size: 15px; font-weight: 400; border: 1.5px solid rgba(255,255,255,.75); letter-spacing: -.01em; transition: border-color .2s; display: inline-block; }
.omni-b-wout:hover { border-color: #ffffff; color: #ffffff !important; }
.omni-btn-grp { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* LAYOUT */
.omni-wrap { font-family: var(--omni-font); background: var(--omni-bg); color: var(--omni-t); -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.6; }
.omni-wrap a { text-decoration: none; color: inherit; }
.omni-sec { padding: 80px 44px; max-width: 1100px; margin: 0 auto; }
.omni-divider { border: none; border-top: .5px solid var(--omni-bd); margin: 0; }

/* TYPOGRAPHY */
.omni-lbl { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--omni-bl); display: block; margin-bottom: 12px; }
.omni-lbl-gold { color: #c9a96a; }
.omni-wrap h2 { font-size: clamp(1.9rem,4vw,3rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.06; color: var(--omni-t); margin-bottom: 14px; }
.omni-wrap h2 em { font-style: normal; color: var(--omni-bl); }
.omni-body { font-size: 17px; font-weight: 300; color: var(--omni-m); line-height: 1.65; letter-spacing: -.01em; }

/* ============================================================
   HERO
   ============================================================ */
.omni-hero { background: var(--omni-w); text-align: center; padding: 88px 24px 72px; border-bottom: .5px solid var(--omni-bd); overflow: hidden; }
.omni-chip { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--omni-bl); display: block; margin-bottom: 16px; }
.omni-wrap h1 { font-size: clamp(2.6rem,6vw,5rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.04; color: var(--omni-t); max-width: 820px; margin: 0 auto 18px; font-family: var(--omni-font); }
.omni-wrap h1 em { font-style: normal; color: var(--omni-bl); }
.omni-hero-sub { font-size: clamp(.95rem,1.7vw,1.15rem); font-weight: 300; color: var(--omni-m); max-width: 520px; margin: 0 auto 10px; line-height: 1.65; letter-spacing: -.01em; }
.omni-hero-proof-row { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 0 auto 26px; flex-wrap: wrap; }
.omni-hpi { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--omni-m); }
.omni-hpd { width: 5px; height: 5px; border-radius: 50%; background: var(--omni-gn); flex-shrink: 0; }
.omni-micro { font-size: 12px; color: var(--omni-m); margin-bottom: 56px; }
.omni-target-wrap { max-width: 540px; margin: 0 auto; }
.omni-tr1 { animation: omni-tp 4s ease-in-out infinite; }
.omni-tr2 { animation: omni-tp 4s 1.3s ease-in-out infinite; }
.omni-tr3 { animation: omni-tp 4s 2.6s ease-in-out infinite; }
@keyframes omni-tp { 0%,100% { opacity: .07; } 50% { opacity: .22; } }
.omni-ol { animation: omni-ol 6s ease-in-out infinite; }
@keyframes omni-ol { 0%,100% { opacity: .7; } 50% { opacity: 1; } }

/* ============================================================
   TRUST BAR
   ============================================================ */
.omni-trust-bar { background: var(--omni-w); border-bottom: .5px solid var(--omni-bd); padding: 24px 44px; text-align: center; }
.omni-trust-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--omni-m); margin-bottom: 16px; display: block; }
.omni-trust-industries { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; opacity: .45; }
.omni-trust-industries span { font-size: 13px; font-weight: 600; color: var(--omni-t); }

/* ============================================================
   STATS BAR
   ============================================================ */
.omni-stats { display: grid; grid-template-columns: repeat(4,1fr); background: var(--omni-w); border-bottom: .5px solid var(--omni-bd); }
.omni-stat { padding: 26px 14px; border-right: .5px solid var(--omni-bd); text-align: center; }
.omni-stat:last-child { border-right: none; }
.omni-sn { font-size: 2.2rem; font-weight: 700; letter-spacing: -.04em; color: var(--omni-t); line-height: 1; margin-bottom: 4px; }
.omni-sl { font-size: 11px; color: var(--omni-m); line-height: 1.45; }

/* ============================================================
   SERVICES GRID
   ============================================================ */
.omni-services-sec { background: var(--omni-w); padding: 80px 44px; border-top: .5px solid var(--omni-bd); }
.omni-services-inner { max-width: 1100px; margin: 0 auto; }
.omni-mgrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1px; border-radius: 18px; overflow: hidden; background: var(--omni-bd2); border: .5px solid var(--omni-bd2); margin-top: 40px; }
.omni-mc { background: var(--omni-w); padding: 26px 22px; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.omni-mc:hover { background: var(--omni-s2); }
.omni-mc-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--omni-bl); display: block; margin-bottom: 8px; }
.omni-mc-name { font-size: 17px; font-weight: 600; letter-spacing: -.025em; color: var(--omni-t); margin-bottom: 6px; }
.omni-mc-salary { font-size: 11.5px; font-weight: 600; color: var(--omni-gn); margin-bottom: 8px; }
.omni-mc-desc { font-size: 12.5px; font-weight: 300; color: var(--omni-m); line-height: 1.62; flex: 1; }
.omni-mc-footer { margin-top: 12px; padding-top: 12px; border-top: .5px solid var(--omni-bd); display: flex; align-items: center; justify-content: space-between; }
.omni-mc-auto { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 20px; }
.omni-mc-auto-full    { background: var(--omni-gnl); color: var(--omni-gn); }
.omni-mc-auto-partial { background: var(--omni-amber-l); color: #8a6000; }
.omni-adot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.omni-adot-full { background: var(--omni-gn); }
.omni-adot-partial { background: var(--omni-amber); }
.omni-mc-link { font-size: 11px; font-weight: 600; color: var(--omni-bl); letter-spacing: -.01em; white-space: nowrap; }

/* ============================================================
   VALUE PROP SPLIT
   ============================================================ */
.omni-value-sec { background: var(--omni-bg); padding: 80px 44px; }
.omni-value-inner { max-width: 1100px; margin: 0 auto; }
.omni-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.omni-ct { border-radius: 18px; overflow: hidden; border: .5px solid var(--omni-bd2); background: var(--omni-w); }
.omni-cr { display: flex; justify-content: space-between; padding: 12px 20px; border-bottom: .5px solid var(--omni-bd); font-size: 13.5px; }
.omni-cr:last-child { border-bottom: none; }
.omni-cl { color: var(--omni-m); font-weight: 300; }
.omni-cv { color: var(--omni-t); font-weight: 500; }
.omni-cr-tot { background: var(--omni-s3); }
.omni-cr-tot .omni-cl { color: var(--omni-t); font-weight: 500; }
.omni-cr-omni { background: var(--omni-gnl); }
.omni-cr-omni .omni-cl, .omni-cr-omni .omni-cv { color: var(--omni-gn); font-weight: 600; }
.omni-bg-badge { display: inline-block; font-size: 10.5px; padding: 2px 7px; background: rgba(28,122,62,.1); color: var(--omni-gn); border-radius: 20px; font-weight: 600; margin-left: 6px; }
.omni-value-list { list-style: none; padding: 0; margin: 0; }
.omni-value-list li { display: flex; align-items: flex-start; gap: 10px; padding: 13px 0; border-bottom: .5px solid var(--omni-bd); font-size: 13.5px; }
.omni-value-list li:last-child { border-bottom: none; }
.omni-vi-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.omni-vi-title { font-size: 13.5px; font-weight: 600; color: var(--omni-t); }
.omni-vi-sub { font-size: 11.5px; color: var(--omni-m); font-weight: 300; margin-top: 1px; }

/* ============================================================
   HOW IT SHIPS
   ============================================================ */
.omni-ship-sec { background: var(--omni-dk2); padding: 80px 44px; }
.omni-ship-inner { max-width: 1100px; margin: 0 auto; }
.omni-ship-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,.07); border-radius: 18px; overflow: hidden; border: .5px solid rgba(255,255,255,.1); margin-top: 40px; }
.omni-ship-step { background: var(--omni-dk2); padding: 28px 22px; }
.omni-ship-step-num { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #c9a96a; display: block; margin-bottom: 12px; }
.omni-ship-step h3 { font-size: 16px; font-weight: 600; color: #f5f5f7; letter-spacing: -.02em; margin-bottom: 8px; }
.omni-ship-step p { font-size: 12.5px; font-weight: 300; color: #86868b; line-height: 1.62; }
.omni-sov-bar { margin-top: 32px; padding: 20px 24px; background: rgba(0,102,204,.08); border: .5px solid rgba(0,102,204,.25); border-radius: 14px; display: flex; align-items: flex-start; gap: 12px; }
.omni-sov-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(0,102,204,.15); border: 1px solid rgba(0,102,204,.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.omni-sov-title { font-size: 13px; font-weight: 600; color: #f5f5f7; margin-bottom: 4px; }
.omni-sov-text { font-size: 12px; font-weight: 300; color: #86868b; line-height: 1.6; }

/* ============================================================
   PRICING PREVIEW
   ============================================================ */
.omni-pricing-sec { background: var(--omni-bg); padding: 80px 44px; border-top: .5px solid var(--omni-bd); }
.omni-pricing-inner { max-width: 1100px; margin: 0 auto; }
.omni-pgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 40px; }
.omni-pcard { background: var(--omni-w); border: .5px solid var(--omni-bd2); border-radius: 22px; padding: 32px 28px; display: flex; flex-direction: column; position: relative; }
.omni-pcard-feat { border-color: var(--omni-bl); box-shadow: 0 0 0 1px var(--omni-bl); }
.omni-pbadge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--omni-bl); color: #fff; padding: 3px 14px; border-radius: 20px; white-space: nowrap; }
.omni-ptier { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--omni-m2); display: block; margin-bottom: 10px; }
.omni-pprice { font-size: 2.6rem; font-weight: 700; letter-spacing: -.04em; color: var(--omni-t); margin-bottom: 4px; }
.omni-pprice span { font-size: 1rem; font-weight: 400; color: var(--omni-m); letter-spacing: 0; }
.omni-psave { font-size: 11px; font-weight: 600; color: var(--omni-gn); display: block; margin-bottom: 12px; }
.omni-pdesc { font-size: 12.5px; font-weight: 300; color: var(--omni-m); line-height: 1.55; margin-bottom: 20px; }
.omni-pfeats { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.omni-pfeats li { font-size: 12.5px; font-weight: 400; color: var(--omni-t); padding: 7px 0; border-bottom: .5px solid var(--omni-bd); display: flex; gap: 8px; align-items: flex-start; }
.omni-pfeats li::before { content: '✓'; color: var(--omni-gn); font-weight: 700; font-size: 11px; flex-shrink: 0; margin-top: 2px; }
.omni-pfeats li:last-child { border-bottom: none; }
.omni-pbtn { display: block; text-align: center; padding: 11px 20px; border-radius: 980px; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 8px; border: 1.5px solid var(--omni-bd2); color: var(--omni-t); transition: border-color .2s, background .2s; }
.omni-pbtn:hover { border-color: var(--omni-bl); color: var(--omni-bl); }
.omni-pbtn-p { background: var(--omni-bl); border-color: var(--omni-bl); color: #fff; }
.omni-pbtn-p:hover { opacity: .85; color: #fff; }
.omni-risk-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 28px; padding: 16px 20px; background: var(--omni-gnl); border-radius: 12px; border: .5px solid rgba(28,122,62,.2); }
.omni-risk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--omni-gn); flex-shrink: 0; margin-top: 4px; }
.omni-risk-text { font-size: 12.5px; font-weight: 300; color: var(--omni-gn); line-height: 1.6; }
.omni-pnote { text-align: center; font-size: 11.5px; color: var(--omni-m); margin-top: 20px; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.omni-cta-sec { background: var(--omni-dk); padding: 96px 44px; text-align: center; }
.omni-cta-in { max-width: 700px; margin: 0 auto; }
.omni-cta-in h2 { color: #f5f5f7; font-size: clamp(2rem,4vw,3rem); margin-bottom: 18px; }
.omni-cta-in h2 em { color: #6ea8fe; font-style: normal; }
.omni-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.omni-cta-micro { font-size: 11.5px; color: #636366; margin-top: 20px; letter-spacing: -.01em; }

/* ============================================================
   FOOTER
   ============================================================ */
.omni-footer { background: #000; border-top: .5px solid rgba(255,255,255,.08); }
.omni-sf-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding: 56px 44px 44px; }
.omni-sf-logo-text { font-size: 18px; font-weight: 800; color: #f5f5f7; letter-spacing: -.04em; font-family: var(--omni-font); }
.omni-sf-tagline { font-size: 12px; font-weight: 300; color: #636366; margin-top: 10px; line-height: 1.55; }
.omni-sf-badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 6px 12px; border-radius: 20px; background: rgba(255,255,255,.05); border: .5px solid rgba(255,255,255,.1); font-size: 11px; font-weight: 600; color: #8e8e93; }
.omni-sf-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--omni-gn); }
.omni-sf-col-heading { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #636366; margin-bottom: 14px; display: block; }
.omni-sf-links { list-style: none; padding: 0; margin: 0; }
.omni-sf-links li { margin-bottom: 10px; }
.omni-sf-links a { font-size: 13px; font-weight: 300; color: #8e8e93; transition: color .2s; }
.omni-sf-links a:hover { color: #f5f5f7; }
.omni-sf-bottom { border-top: .5px solid rgba(255,255,255,.06); padding: 18px 44px; text-align: center; }
.omni-sf-copy { font-size: 11.5px; color: #48484a; }

/* ============================================================
   MARQUEE
   ============================================================ */
.omni-marquee-sec { background: #000; padding: 40px 0; overflow: hidden; }
.omni-marquee-lbl { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #636366; text-align: center; margin-bottom: 18px; }
.omni-mtrack { display: flex; width: max-content; animation: omni-mq 30s linear infinite; }
.omni-mtrack:hover { animation-play-state: paused; }
@keyframes omni-mq { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.omni-mi { display: flex; align-items: center; gap: 8px; padding: 10px 24px; border-right: .5px solid rgba(255,255,255,.06); white-space: nowrap; }
.omni-mi-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--omni-bl); flex-shrink: 0; }
.omni-mi-t { font-size: 13px; font-weight: 400; color: #e5e5ea; letter-spacing: -.01em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .omni-split, .omni-ship-steps, .omni-pgrid { grid-template-columns: 1fr; }
  .omni-sec, .omni-services-sec, .omni-value-sec, .omni-ship-sec, .omni-pricing-sec, .omni-cta-sec { padding: 64px 24px; }
  .omni-sf-inner { grid-template-columns: 1fr 1fr; padding: 0 24px 44px; gap: 32px; }
  .omni-sf-inner > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .omni-sec, .omni-services-sec, .omni-value-sec, .omni-ship-sec, .omni-pricing-sec, .omni-cta-sec { padding: 56px 20px; }
  .omni-wrap h1 { font-size: clamp(2rem, 9vw, 2.8rem); letter-spacing: -.035em; }
  .omni-wrap h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .omni-body { font-size: 15px; }
  .omni-hero { padding: 56px 20px 48px; }
  .omni-hero-proof-row { gap: 12px; }
  .omni-btn-grp { flex-direction: column; align-items: stretch; gap: 10px; }
  .omni-btn-grp .omni-b-bl, .omni-btn-grp .omni-b-out { width: 100%; text-align: center; padding: 15px 20px; font-size: 15px; }
  .omni-trust-bar { padding: 20px; }
  .omni-stats { grid-template-columns: 1fr 1fr; }
  .omni-stat:nth-child(2) { border-right: none; }
  .omni-stat:nth-child(3) { border-top: .5px solid var(--omni-bd); }
  .omni-mgrid { grid-template-columns: 1fr !important; }
  .omni-pgrid { grid-template-columns: 1fr !important; }
  .omni-cta-btns { flex-direction: column; align-items: center; }
  .omni-sf-inner { grid-template-columns: 1fr; }
  .omni-sf-bottom { padding: 16px 20px; }
  .omni-ship-steps { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 420px) {
  .omni-wrap h1 { font-size: 1.95rem; }
  .omni-ship-steps { grid-template-columns: 1fr !important; }
  .omni-sf-inner { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .omni-rv { transition: opacity .4s ease !important; transform: none !important; }
  .omni-mtrack { animation: none !important; }
  .omni-tr1, .omni-tr2, .omni-tr3, .omni-ol { animation: none !important; opacity: .15 !important; }
}

/* ============================================================
   FULL WIDTH
   ============================================================ */
<style>
  /* Target only sections that live inside the Main content area */
  main .section, 
  #MainContent .section {
    --page-margin: 0px !important;
    --page-width: 100vw !important;
    --full-page-grid-central-column-width: 100% !important;
    display: block !important; 
  }

  /* Apply full width to children within the main body only */
  main .section > *, 
  #MainContent .section > * {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  /* Explicitly prevent this from touching the Header or Footer groups */
  .header-group .section,
  .footer-group .section,
  #shopify-section-header .section,
  #shopify-section-footer .section {
    --page-margin: var(--original-margin, 20px) !important; /* Adjust to your theme's default */
    --page-width: var(--original-width, 1200px) !important;
    display: grid !important; /* Keeps the theme's header/footer layout intact */
  }
</style>

/* ============================================================
   logo in
   ============================================================ */



/* ============================================================
   OMNI ADS — Service Page Stylesheet
   Requires omnisync-homepage.css to be loaded first.
   Add this after your homepage CSS in your Shopify base CSS.
   ============================================================ */

/* ============================================================
   PAGE HERO
   ============================================================ */
.pg-hero { background: var(--omni-dk2); padding: 96px 44px 88px; border-bottom: .5px solid rgba(255,255,255,.08); overflow: hidden; }
.pg-hero-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.pg-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #c9a96a; display: block; margin-bottom: 18px; }
.pg-h1 { font-size: clamp(2.4rem,5.5vw,4.2rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; color: #f5f5f7; margin: 0 auto 20px; font-family: var(--omni-font); }
.pg-h1 em { font-style: normal; color: #6ea8fe; }
.pg-sub { font-size: clamp(.95rem,1.6vw,1.1rem); font-weight: 300; color: #86868b; max-width: 600px; margin: 0 auto 28px; line-height: 1.7; letter-spacing: -.01em; }
.pg-cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 28px; }
.pg-proof-chips { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.pg-chip { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: #8e8e93; }
.pg-chip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--omni-gn); flex-shrink: 0; }

/* Reuse omni-b-bl, omni-b-out, omni-b-w, omni-b-wout from homepage CSS */
/* Map old non-prefixed classes used in the liquid file */
.b-bl { padding: 12px 26px; border-radius: 980px; background: var(--omni-bl); color: #fff; font-size: 14px; font-weight: 400; border: none; letter-spacing: -.01em; transition: opacity .2s; display: inline-block; font-family: var(--omni-font); }
.b-bl:hover { opacity: .82; color: #fff; }
.b-bl--lg { font-size: 15px; padding: 14px 32px; font-weight: 600; }
.b-out { padding: 12px 26px; border-radius: 980px; background: transparent; color: var(--omni-bl); font-size: 14px; font-weight: 400; border: 1.5px solid var(--omni-bl); letter-spacing: -.01em; transition: opacity .2s; display: inline-block; }
.b-out:hover { opacity: .7; }
.b-w { padding: 14px 32px; border-radius: 980px; background: #ffffff; color: #000000 !important; font-size: 15px; font-weight: 600; border: none; letter-spacing: -.02em; transition: opacity .2s; display: inline-block; }
.b-w:hover { opacity: .9; color: #000000 !important; }
.b-wout { padding: 14px 32px; border-radius: 980px; background: transparent; color: #ffffff !important; font-size: 15px; font-weight: 400; border: 1.5px solid rgba(255,255,255,.75); letter-spacing: -.01em; transition: border-color .2s; display: inline-block; }
.b-wout:hover { border-color: #ffffff; color: #ffffff !important; }

/* ============================================================
   DIVIDER
   ============================================================ */
.pg-divider { border: none; border-top: .5px solid var(--omni-bd); margin: 0; }

/* ============================================================
   SECTION WRAPPERS
   ============================================================ */
.pg-sec-light { background: var(--omni-w); }
.pg-sec-soft  { background: var(--omni-bg); }
.pg-sec-dark  { background: var(--omni-dk2); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.pg-lbl { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--omni-bl); display: block; margin-bottom: 12px; }
.pg-h2 { font-size: clamp(1.8rem,3.8vw,2.8rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.08; color: var(--omni-t); margin-bottom: 14px; font-family: var(--omni-font); }
.pg-h2 em { font-style: normal; color: var(--omni-bl); }
.pg-body { font-size: 16px; font-weight: 300; color: var(--omni-m); line-height: 1.7; letter-spacing: -.01em; }

/* ============================================================
   FEATURE CARDS — 3 COLUMN GRID
   ============================================================ */
.pg-feat-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; border-radius: 18px; overflow: hidden; background: var(--omni-bd2); border: .5px solid var(--omni-bd2); }
.pg-feat-card { background: var(--omni-w); padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; transition: background .2s; }
.pg-feat-card:hover { background: var(--omni-s2); }
.pg-feat-icon { font-size: 22px; line-height: 1; }
.pg-feat-name { font-size: 15px; font-weight: 700; letter-spacing: -.025em; color: var(--omni-t); }
.pg-feat-desc { font-size: 13px; font-weight: 300; color: var(--omni-m); line-height: 1.68; flex: 1; }
.pg-feat-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; width: fit-content; margin-top: 4px; }
.pg-feat-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.pg-badge-green { background: var(--omni-gnl); color: var(--omni-gn); }
.pg-badge-green::before { background: var(--omni-gn); }
.pg-badge-amber { background: var(--omni-amber-l); color: #8a6000; }
.pg-badge-amber::before { background: var(--omni-amber); }
.pg-badge-blue  { background: var(--omni-bll); color: var(--omni-bl); }
.pg-badge-blue::before  { background: var(--omni-bl); }

/* ============================================================
   METRICS BAR
   ============================================================ */
.pg-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--omni-bd2); border-radius: 18px; overflow: hidden; border: .5px solid var(--omni-bd2); }
.pg-metric { background: var(--omni-w); padding: 32px 24px; display: flex; flex-direction: column; gap: 8px; text-align: center; }
.pg-metric-val { font-size: 2.4rem; font-weight: 700; letter-spacing: -.04em; color: var(--omni-t); line-height: 1; }
.pg-metric-val-green { color: var(--omni-gn); }
.pg-metric-val-blue  { color: var(--omni-bl); }
.pg-metric-lbl { font-size: 12px; font-weight: 300; color: var(--omni-m); line-height: 1.55; }

/* ============================================================
   BEFORE / AFTER COMPARE
   ============================================================ */
.pg-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pg-compare-col { border-radius: 18px; overflow: hidden; border: .5px solid var(--omni-bd2); }
.pg-compare-col.without { border-color: rgba(255,69,58,.2); }
.pg-compare-col.with    { border-color: rgba(28,122,62,.25); }
.pg-compare-head { padding: 16px 22px; font-size: 13px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.pg-compare-col.without .pg-compare-head { background: rgba(255,69,58,.06); color: #c0392b; }
.pg-compare-col.with    .pg-compare-head { background: var(--omni-gnl); color: var(--omni-gn); }
.pg-compare-icon { font-size: 15px; font-weight: 700; }
.pg-compare-list { list-style: none; padding: 0; margin: 0; }
.pg-compare-list li { padding: 13px 22px; font-size: 13px; font-weight: 300; color: var(--omni-t); line-height: 1.6; border-bottom: .5px solid var(--omni-bd); }
.pg-compare-list li:last-child { border-bottom: none; }
.pg-compare-col.without .pg-compare-list li::before { content: '— '; color: rgba(255,69,58,.5); font-weight: 500; }
.pg-compare-col.with    .pg-compare-list li::before { content: '✓ '; color: var(--omni-gn); font-weight: 700; }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.pg-faq-list { max-width: 760px; }
.pg-faq-item { border-bottom: .5px solid var(--omni-bd); }
.pg-faq-q { padding: 18px 0; font-size: 15px; font-weight: 500; color: var(--omni-t); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; letter-spacing: -.015em; user-select: none; }
.pg-faq-q:hover { color: var(--omni-bl); }
.pg-faq-icon { font-size: 20px; font-weight: 300; color: var(--omni-m); flex-shrink: 0; transition: transform .25s; line-height: 1; }
.pg-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.25,.46,.45,.94); }
.pg-faq-a-inner { padding: 0 0 18px; font-size: 14px; font-weight: 300; color: var(--omni-m); line-height: 1.75; }
.pg-faq-item.open .pg-faq-a { max-height: 400px; }
.pg-faq-item.open .pg-faq-icon { transform: rotate(45deg); color: var(--omni-bl); }
.pg-faq-item.open .pg-faq-q { color: var(--omni-bl); }

/* ============================================================
   DAILY OUTPUT MOCKUP
   ============================================================ */
.pg-output-wrap { background: var(--omni-dk2); border-radius: 18px; border: .5px solid rgba(255,255,255,.1); overflow: hidden; margin-top: 36px; }
.pg-output-bar { padding: 12px 18px; background: rgba(255,255,255,.04); border-bottom: .5px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 8px; }
.pg-output-dots { display: flex; gap: 6px; }
.pg-output-dot { width: 10px; height: 10px; border-radius: 50%; }
.pg-output-title { font-size: 11.5px; font-weight: 500; color: #636366; margin-left: 6px; letter-spacing: -.01em; }
.pg-output-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.pg-output-row { display: flex; align-items: flex-start; gap: 10px; }
.pg-output-av { width: 28px; height: 28px; border-radius: 50%; background: var(--omni-bl); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
.pg-output-name { font-size: 12px; font-weight: 700; color: #f5f5f7; letter-spacing: -.01em; }
.pg-output-bot { font-size: 9px; font-weight: 700; letter-spacing: .06em; background: rgba(0,102,204,.3); color: #6ea8fe; padding: 1px 6px; border-radius: 4px; text-transform: uppercase; margin-left: 4px; }
.pg-output-ts { font-size: 10.5px; color: #48484a; margin-left: 2px; }
.pg-output-intro { font-size: 13px; font-weight: 500; color: #e5e5ea; margin: 4px 0 8px; letter-spacing: -.01em; }
.pg-de { border-radius: 10px; padding: 10px 14px; margin-bottom: 6px; }
.pg-de-r  { background: rgba(255,69,58,.1);  border: .5px solid rgba(255,69,58,.2); }
.pg-de-g  { background: rgba(52,199,89,.08); border: .5px solid rgba(52,199,89,.18); }
.pg-de-y  { background: rgba(255,214,10,.08); border: .5px solid rgba(255,214,10,.2); }
.pg-de-b  { background: rgba(0,102,204,.1);  border: .5px solid rgba(0,102,204,.2); }
.pg-det   { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 4px; }
.pg-det-r { color: #ff6b6b; }
.pg-det-g { color: #7dda9a; }
.pg-det-y { color: #e2cfa0; }
.pg-det-b { color: #6ea8fe; }
.pg-deb   { font-size: 12px; font-weight: 300; color: #8e8e93; line-height: 1.55; }

/* ============================================================
   CTA BAND (BOTTOM)
   ============================================================ */
.pg-cta-band { background: var(--omni-dk); padding: 96px 44px; text-align: center; }
.pg-cta-band-inner { max-width: 680px; margin: 0 auto; }
.pg-cta-band-inner h2 { color: #f5f5f7; font-size: clamp(2rem,4vw,3rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.06; margin-bottom: 16px; font-family: var(--omni-font); }
.pg-cta-band-inner h2 em { color: #6ea8fe; font-style: normal; }
.pg-cta-band-inner p { font-size: 15px; font-weight: 300; color: #86868b; line-height: 1.65; max-width: 560px; margin: 0 auto 28px; }
.pg-cta-band-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.pg-cta-micro { font-size: 11.5px; color: #636366; margin-top: 20px; letter-spacing: -.01em; }

/* ============================================================
   PLATFORM BADGE ROW
   ============================================================ */
.pg-plat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.pg-plat-chip { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; border: .5px solid var(--omni-bd2); background: var(--omni-w); font-size: 12.5px; font-weight: 500; color: var(--omni-t); }
.pg-plat-chip svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ============================================================
   SCROLL REVEALS — reuse .rv classes if homepage CSS loaded,
   else define here as fallback
   ============================================================ */
.rv { opacity: 0; transition: opacity .75s cubic-bezier(.25,.46,.45,.94), transform .75s cubic-bezier(.25,.46,.45,.94); }
.rv.up    { transform: translateY(44px); }
.rv.left  { transform: translateX(-44px); }
.rv.right { transform: translateX(44px); }
.rv.vis   { opacity: 1; transform: none; }
.d1 { transition-delay: .10s; } .d2 { transition-delay: .18s; }
.d3 { transition-delay: .26s; } .d4 { transition-delay: .34s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .pg-hero { padding: 72px 24px 64px; }
  .pg-feat-3 { grid-template-columns: 1fr 1fr; }
  .pg-metrics { grid-template-columns: 1fr 1fr; }
  .pg-compare { grid-template-columns: 1fr; }
  .pg-sec-light, .pg-sec-soft, .pg-sec-dark { padding: 64px 24px !important; }
  .pg-cta-band { padding: 72px 24px; }
}
@media (max-width: 680px) {
  .pg-hero { padding: 56px 20px 52px; }
  .pg-h1 { font-size: clamp(2rem,9vw,2.8rem); }
  .pg-feat-3 { grid-template-columns: 1fr; }
  .pg-metrics { grid-template-columns: 1fr 1fr; }
  .pg-cta-row { flex-direction: column; align-items: stretch; }
  .pg-cta-row .b-bl, .pg-cta-row .b-out { width: 100%; text-align: center; }
  .pg-cta-band-btns { flex-direction: column; align-items: center; }
  .pg-sec-light, .pg-sec-soft, .pg-sec-dark { padding: 56px 20px !important; }
}
@media (max-width: 480px) {
  .pg-metrics { grid-template-columns: 1fr; }
  .pg-proof-chips { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv { transition: opacity .4s ease !important; transform: none !important; }
}




/* ============================================================
   OMNI ADS — Service Page Stylesheet
   Requires omnisync-homepage.css to be loaded first.
   Add this after your homepage CSS in your Shopify base CSS.
   ============================================================ */

/* ============================================================
   PAGE HERO
   ============================================================ */
.pg-hero { background: var(--omni-dk2); padding: 96px 44px 88px; border-bottom: .5px solid rgba(255,255,255,.08); overflow: hidden; }
.pg-hero-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.pg-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #c9a96a; display: block; margin-bottom: 18px; }
.pg-h1 { font-size: clamp(2.4rem,5.5vw,4.2rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; color: #f5f5f7; margin: 0 auto 20px; font-family: var(--omni-font); }
.pg-h1 em { font-style: normal; color: #6ea8fe; }
.pg-sub { font-size: clamp(.95rem,1.6vw,1.1rem); font-weight: 300; color: #86868b; max-width: 600px; margin: 0 auto 28px; line-height: 1.7; letter-spacing: -.01em; }
.pg-cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 28px; }
.pg-proof-chips { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.pg-chip { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: #8e8e93; }
.pg-chip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--omni-gn); flex-shrink: 0; }

/* Reuse omni-b-bl, omni-b-out, omni-b-w, omni-b-wout from homepage CSS */
/* Map old non-prefixed classes used in the liquid file */
.b-bl { padding: 12px 26px; border-radius: 980px; background: var(--omni-bl); color: #fff; font-size: 14px; font-weight: 400; border: none; letter-spacing: -.01em; transition: opacity .2s; display: inline-block; font-family: var(--omni-font); }
.b-bl:hover { opacity: .82; color: #fff; }
.b-bl--lg { font-size: 15px; padding: 14px 32px; font-weight: 600; }
.b-out { padding: 12px 26px; border-radius: 980px; background: transparent; color: var(--omni-bl); font-size: 14px; font-weight: 400; border: 1.5px solid var(--omni-bl); letter-spacing: -.01em; transition: opacity .2s; display: inline-block; }
.b-out:hover { opacity: .7; }
.b-w { padding: 14px 32px; border-radius: 980px; background: #ffffff; color: #000000 !important; font-size: 15px; font-weight: 600; border: none; letter-spacing: -.02em; transition: opacity .2s; display: inline-block; }
.b-w:hover { opacity: .9; color: #000000 !important; }
.b-wout { padding: 14px 32px; border-radius: 980px; background: transparent; color: #ffffff !important; font-size: 15px; font-weight: 400; border: 1.5px solid rgba(255,255,255,.75); letter-spacing: -.01em; transition: border-color .2s; display: inline-block; }
.b-wout:hover { border-color: #ffffff; color: #ffffff !important; }

/* ============================================================
   DIVIDER
   ============================================================ */
.pg-divider { border: none; border-top: .5px solid var(--omni-bd); margin: 0; }

/* ============================================================
   SECTION WRAPPERS
   ============================================================ */
.pg-sec-light { background: var(--omni-w); }
.pg-sec-soft  { background: var(--omni-bg); }
.pg-sec-dark  { background: var(--omni-dk2); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.pg-lbl { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--omni-bl); display: block; margin-bottom: 12px; }
.pg-h2 { font-size: clamp(1.8rem,3.8vw,2.8rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.08; color: var(--omni-t); margin-bottom: 14px; font-family: var(--omni-font); }
.pg-h2 em { font-style: normal; color: var(--omni-bl); }
.pg-body { font-size: 16px; font-weight: 300; color: var(--omni-m); line-height: 1.7; letter-spacing: -.01em; }

/* ============================================================
   FEATURE CARDS — 3 COLUMN GRID
   ============================================================ */
.pg-feat-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; border-radius: 18px; overflow: hidden; background: var(--omni-bd2); border: .5px solid var(--omni-bd2); }
.pg-feat-card { background: var(--omni-w); padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; transition: background .2s; }
.pg-feat-card:hover { background: var(--omni-s2); }
.pg-feat-icon { font-size: 22px; line-height: 1; }
.pg-feat-name { font-size: 15px; font-weight: 700; letter-spacing: -.025em; color: var(--omni-t); }
.pg-feat-desc { font-size: 13px; font-weight: 300; color: var(--omni-m); line-height: 1.68; flex: 1; }
.pg-feat-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; width: fit-content; margin-top: 4px; }
.pg-feat-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.pg-badge-green { background: var(--omni-gnl); color: var(--omni-gn); }
.pg-badge-green::before { background: var(--omni-gn); }
.pg-badge-amber { background: var(--omni-amber-l); color: #8a6000; }
.pg-badge-amber::before { background: var(--omni-amber); }
.pg-badge-blue  { background: var(--omni-bll); color: var(--omni-bl); }
.pg-badge-blue::before  { background: var(--omni-bl); }

/* ============================================================
   METRICS BAR
   ============================================================ */
.pg-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--omni-bd2); border-radius: 18px; overflow: hidden; border: .5px solid var(--omni-bd2); }
.pg-metric { background: var(--omni-w); padding: 32px 24px; display: flex; flex-direction: column; gap: 8px; text-align: center; }
.pg-metric-val { font-size: 2.4rem; font-weight: 700; letter-spacing: -.04em; color: var(--omni-t); line-height: 1; }
.pg-metric-val-green { color: var(--omni-gn); }
.pg-metric-val-blue  { color: var(--omni-bl); }
.pg-metric-lbl { font-size: 12px; font-weight: 300; color: var(--omni-m); line-height: 1.55; }

/* ============================================================
   BEFORE / AFTER COMPARE
   ============================================================ */
.pg-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pg-compare-col { border-radius: 18px; overflow: hidden; border: .5px solid var(--omni-bd2); }
.pg-compare-col.without { border-color: rgba(255,69,58,.2); }
.pg-compare-col.with    { border-color: rgba(28,122,62,.25); }
.pg-compare-head { padding: 16px 22px; font-size: 13px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.pg-compare-col.without .pg-compare-head { background: rgba(255,69,58,.06); color: #c0392b; }
.pg-compare-col.with    .pg-compare-head { background: var(--omni-gnl); color: var(--omni-gn); }
.pg-compare-icon { font-size: 15px; font-weight: 700; }
.pg-compare-list { list-style: none; padding: 0; margin: 0; }
.pg-compare-list li { padding: 13px 22px; font-size: 13px; font-weight: 300; color: var(--omni-t); line-height: 1.6; border-bottom: .5px solid var(--omni-bd); }
.pg-compare-list li:last-child { border-bottom: none; }
.pg-compare-col.without .pg-compare-list li::before { content: '— '; color: rgba(255,69,58,.5); font-weight: 500; }
.pg-compare-col.with    .pg-compare-list li::before { content: '✓ '; color: var(--omni-gn); font-weight: 700; }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.pg-faq-list { max-width: 760px; }
.pg-faq-item { border-bottom: .5px solid var(--omni-bd); }
.pg-faq-q { padding: 18px 0; font-size: 15px; font-weight: 500; color: var(--omni-t); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; letter-spacing: -.015em; user-select: none; }
.pg-faq-q:hover { color: var(--omni-bl); }
.pg-faq-icon { font-size: 20px; font-weight: 300; color: var(--omni-m); flex-shrink: 0; transition: transform .25s; line-height: 1; }
.pg-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.25,.46,.45,.94); }
.pg-faq-a-inner { padding: 0 0 18px; font-size: 14px; font-weight: 300; color: var(--omni-m); line-height: 1.75; }
.pg-faq-item.open .pg-faq-a { max-height: 400px; }
.pg-faq-item.open .pg-faq-icon { transform: rotate(45deg); color: var(--omni-bl); }
.pg-faq-item.open .pg-faq-q { color: var(--omni-bl); }

/* ============================================================
   DAILY OUTPUT MOCKUP
   ============================================================ */
.pg-output-wrap { background: var(--omni-dk2); border-radius: 18px; border: .5px solid rgba(255,255,255,.1); overflow: hidden; margin-top: 36px; }
.pg-output-bar { padding: 12px 18px; background: rgba(255,255,255,.04); border-bottom: .5px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 8px; }
.pg-output-dots { display: flex; gap: 6px; }
.pg-output-dot { width: 10px; height: 10px; border-radius: 50%; }
.pg-output-title { font-size: 11.5px; font-weight: 500; color: #636366; margin-left: 6px; letter-spacing: -.01em; }
.pg-output-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.pg-output-row { display: flex; align-items: flex-start; gap: 10px; }
.pg-output-av { width: 28px; height: 28px; border-radius: 50%; background: var(--omni-bl); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
.pg-output-name { font-size: 12px; font-weight: 700; color: #f5f5f7; letter-spacing: -.01em; }
.pg-output-bot { font-size: 9px; font-weight: 700; letter-spacing: .06em; background: rgba(0,102,204,.3); color: #6ea8fe; padding: 1px 6px; border-radius: 4px; text-transform: uppercase; margin-left: 4px; }
.pg-output-ts { font-size: 10.5px; color: #48484a; margin-left: 2px; }
.pg-output-intro { font-size: 13px; font-weight: 500; color: #e5e5ea; margin: 4px 0 8px; letter-spacing: -.01em; }
.pg-de { border-radius: 10px; padding: 10px 14px; margin-bottom: 6px; }
.pg-de-r  { background: rgba(255,69,58,.1);  border: .5px solid rgba(255,69,58,.2); }
.pg-de-g  { background: rgba(52,199,89,.08); border: .5px solid rgba(52,199,89,.18); }
.pg-de-y  { background: rgba(255,214,10,.08); border: .5px solid rgba(255,214,10,.2); }
.pg-de-b  { background: rgba(0,102,204,.1);  border: .5px solid rgba(0,102,204,.2); }
.pg-det   { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 4px; }
.pg-det-r { color: #ff6b6b; }
.pg-det-g { color: #7dda9a; }
.pg-det-y { color: #e2cfa0; }
.pg-det-b { color: #6ea8fe; }
.pg-deb   { font-size: 12px; font-weight: 300; color: #8e8e93; line-height: 1.55; }

/* ============================================================
   CTA BAND (BOTTOM)
   ============================================================ */
.pg-cta-band { background: var(--omni-dk); padding: 96px 44px; text-align: center; }
.pg-cta-band-inner { max-width: 680px; margin: 0 auto; }
.pg-cta-band-inner h2 { color: #f5f5f7; font-size: clamp(2rem,4vw,3rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.06; margin-bottom: 16px; font-family: var(--omni-font); }
.pg-cta-band-inner h2 em { color: #6ea8fe; font-style: normal; }
.pg-cta-band-inner p { font-size: 15px; font-weight: 300; color: #86868b; line-height: 1.65; max-width: 560px; margin: 0 auto 28px; }
.pg-cta-band-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.pg-cta-micro { font-size: 11.5px; color: #636366; margin-top: 20px; letter-spacing: -.01em; }

/* ============================================================
   PLATFORM BADGE ROW
   ============================================================ */
.pg-plat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.pg-plat-chip { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; border: .5px solid var(--omni-bd2); background: var(--omni-w); font-size: 12.5px; font-weight: 500; color: var(--omni-t); }
.pg-plat-chip svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ============================================================
   SCROLL REVEALS — reuse .rv classes if homepage CSS loaded,
   else define here as fallback
   ============================================================ */
.rv { opacity: 0; transition: opacity .75s cubic-bezier(.25,.46,.45,.94), transform .75s cubic-bezier(.25,.46,.45,.94); }
.rv.up    { transform: translateY(44px); }
.rv.left  { transform: translateX(-44px); }
.rv.right { transform: translateX(44px); }
.rv.vis   { opacity: 1; transform: none; }
.d1 { transition-delay: .10s; } .d2 { transition-delay: .18s; }
.d3 { transition-delay: .26s; } .d4 { transition-delay: .34s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .pg-hero { padding: 72px 24px 64px; }
  .pg-feat-3 { grid-template-columns: 1fr 1fr; }
  .pg-metrics { grid-template-columns: 1fr 1fr; }
  .pg-compare { grid-template-columns: 1fr; }
  .pg-sec-light, .pg-sec-soft, .pg-sec-dark { padding: 64px 24px !important; }
  .pg-cta-band { padding: 72px 24px; }
}
@media (max-width: 680px) {
  .pg-hero { padding: 56px 20px 52px; }
  .pg-h1 { font-size: clamp(2rem,9vw,2.8rem); }
  .pg-feat-3 { grid-template-columns: 1fr; }
  .pg-metrics { grid-template-columns: 1fr 1fr; }
  .pg-cta-row { flex-direction: column; align-items: stretch; }
  .pg-cta-row .b-bl, .pg-cta-row .b-out { width: 100%; text-align: center; }
  .pg-cta-band-btns { flex-direction: column; align-items: center; }
  .pg-sec-light, .pg-sec-soft, .pg-sec-dark { padding: 56px 20px !important; }
}
@media (max-width: 480px) {
  .pg-metrics { grid-template-columns: 1fr; }
  .pg-proof-chips { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv { transition: opacity .4s ease !important; transform: none !important; }
}

/* ============================================================
   MEGA MENU CENTER AND POSITION
   ============================================================ */

/* center the whole column group */
.mega-menu__list{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(180px,1fr)) !important;
  gap:10px 40px !important;

  justify-content:center !important;   /* center the columns */
  justify-items:center !important;     /* center items inside columns */
  max-width:700px;                     /* prevents stretching */
  margin:0 auto;                       /* centers grid container */
}

/* remove column wrapper restrictions */
.mega-menu__column{
  display:contents !important;
}

/* style links */
.mega-menu__link{
  display:block;
  padding:8px 0;
  text-align:center;                   /* center link text */
}
.header-menu .menu-list ul{
  height:auto !important;
  min-height:36px !important;
}

/* ============================================================
   OMNI CALLS — Additional CSS
   Requires omnisync-homepage.css + omni-ads.css loaded first.
   Add this after omni-ads.css in your Shopify base CSS.
   ============================================================ */

/* ============================================================
   KEYWORD TAG GRID
   ============================================================ */
.oc-kw-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 0; }
.oc-kw-col { border-radius: 16px; padding: 22px; }
.oc-kw-col-red    { background: rgba(255,69,58,.05);   border: .5px solid rgba(255,69,58,.2); }
.oc-kw-col-amber  { background: var(--omni-amber-l);   border: .5px solid rgba(245,158,11,.25); }
.oc-kw-col-green  { background: var(--omni-gnl);       border: .5px solid rgba(28,122,62,.2); }
.oc-kw-col-head { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; display: block; }
.oc-kw-col-red   .oc-kw-col-head { color: #c0392b; }
.oc-kw-col-amber .oc-kw-col-head { color: #8a6000; }
.oc-kw-col-green .oc-kw-col-head { color: var(--omni-gn); }
.oc-kw-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.oc-kw-tag { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 20px; }
.oc-kw-tag-red    { background: rgba(255,69,58,.12);   color: #c0392b; }
.oc-kw-tag-amber  { background: rgba(245,158,11,.15);  color: #8a6000; }
.oc-kw-tag-green  { background: rgba(28,122,62,.12);   color: var(--omni-gn); }
.oc-kw-col-note { font-size: 11.5px; font-weight: 300; color: var(--omni-m); margin-top: 14px; line-height: 1.6; }

/* ============================================================
   AGENT SCORECARD ROW
   ============================================================ */
.oc-agent-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: .5px solid var(--omni-bd); font-size: 13px; }
.oc-agent-row:last-child { border-bottom: none; }
.oc-agent-name { font-weight: 600; color: var(--omni-t); min-width: 80px; }
.oc-agent-detail { font-weight: 300; color: var(--omni-m); flex: 1; padding: 0 16px; font-size: 12.5px; line-height: 1.5; }
.oc-score { font-size: 15px; font-weight: 700; padding: 4px 12px; border-radius: 20px; flex-shrink: 0; }
.oc-score-hi  { background: var(--omni-gnl);    color: var(--omni-gn); }
.oc-score-mid { background: var(--omni-amber-l); color: #8a6000; }
.oc-score-lo  { background: rgba(255,69,58,.1);  color: #c0392b; }

/* ============================================================
   STAFF COMPARISON SPLIT
   ============================================================ */
.oc-staff-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.oc-staff-card { border-radius: 18px; overflow: hidden; border: .5px solid var(--omni-bd2); }
.oc-staff-head { padding: 18px 22px; font-size: 14px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; border-bottom: .5px solid var(--omni-bd); }
.oc-staff-head-human { background: var(--omni-s3); color: var(--omni-t); }
.oc-staff-head-omni  { background: var(--omni-gnl); color: var(--omni-gn); border-bottom-color: rgba(28,122,62,.15); }
.oc-staff-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 22px; border-bottom: .5px solid var(--omni-bd); font-size: 13px; }
.oc-staff-row:last-child { border-bottom: none; }
.oc-staff-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.oc-staff-text { font-weight: 300; color: var(--omni-m); line-height: 1.6; }
.oc-staff-text strong { font-weight: 600; color: var(--omni-t); }

/* ============================================================
   DATA TIMELINE — minute-by-minute
   ============================================================ */
.oc-timeline { position: relative; margin-top: 36px; padding-left: 28px; }
.oc-timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1.5px; background: linear-gradient(180deg, var(--omni-bl) 0%, rgba(0,102,204,.1) 100%); }
.oc-tl-item { position: relative; margin-bottom: 28px; }
.oc-tl-item:last-child { margin-bottom: 0; }
.oc-tl-dot { position: absolute; left: -24px; top: 5px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--omni-bl); background: var(--omni-w); flex-shrink: 0; }
.oc-tl-dot-live { background: var(--omni-bl); }
.oc-tl-time { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--omni-bl); margin-bottom: 4px; display: block; }
.oc-tl-title { font-size: 14px; font-weight: 600; color: var(--omni-t); letter-spacing: -.02em; margin-bottom: 4px; }
.oc-tl-body { font-size: 12.5px; font-weight: 300; color: var(--omni-m); line-height: 1.62; }

/* ============================================================
   RESPONSIVE ADDITIONS
   ============================================================ */
@media (max-width: 900px) {
  .oc-kw-grid { grid-template-columns: 1fr; }
  .oc-staff-split { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .oc-kw-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   OMNI INTEL — Additional CSS
   Requires omnisync-homepage.css + omni-ads.css loaded first.
   Add this after omni-calls.css in your Shopify base CSS.
   ============================================================ */

/* 2-column feature grid variant (vs 3-col pg-feat-3) */
.pg-feat-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; border-radius: 18px; overflow: hidden; background: var(--omni-bd2); border: .5px solid var(--omni-bd2); }

/* Intel signal feed — ticker-style rows */
.oi-feed { border-radius: 18px; overflow: hidden; border: .5px solid var(--omni-bd2); margin-top: 0; }
.oi-feed-head { padding: 12px 20px; background: var(--omni-s3); border-bottom: .5px solid var(--omni-bd2); display: flex; align-items: center; gap: 10px; }
.oi-feed-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--omni-m); }
.oi-feed-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--omni-gn); flex-shrink: 0; animation: oi-pulse 2s ease-in-out infinite; }
@keyframes oi-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.oi-feed-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 20px; border-bottom: .5px solid var(--omni-bd); }
.oi-feed-row:last-child { border-bottom: none; }
.oi-feed-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.oi-feed-icon-r  { background: rgba(255,69,58,.1); }
.oi-feed-icon-y  { background: var(--omni-amber-l); }
.oi-feed-icon-g  { background: var(--omni-gnl); }
.oi-feed-icon-b  { background: var(--omni-bll); }
.oi-feed-content { flex: 1; }
.oi-feed-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 3px; display: block; }
.oi-feed-label-r  { color: #c0392b; }
.oi-feed-label-y  { color: #8a6000; }
.oi-feed-label-g  { color: var(--omni-gn); }
.oi-feed-label-b  { color: var(--omni-bl); }
.oi-feed-text { font-size: 13px; font-weight: 400; color: var(--omni-t); line-height: 1.55; }
.oi-feed-sub  { font-size: 11.5px; font-weight: 300; color: var(--omni-m); margin-top: 2px; }
.oi-feed-ts   { font-size: 10px; color: var(--omni-m2); font-weight: 400; margin-left: auto; flex-shrink: 0; padding-left: 12px; white-space: nowrap; }

/* Strategic brief card */
.oi-brief { background: var(--omni-dk2); border-radius: 18px; border: .5px solid rgba(255,255,255,.1); overflow: hidden; margin-top: 40px; }
.oi-brief-head { padding: 14px 20px; background: rgba(255,255,255,.04); border-bottom: .5px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 10px; }
.oi-brief-dots { display: flex; gap: 6px; }
.oi-brief-dot { width: 10px; height: 10px; border-radius: 50%; }
.oi-brief-title { font-size: 11.5px; font-weight: 500; color: #636366; margin-left: 4px; }
.oi-brief-body { padding: 20px 22px; }
.oi-action-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: .5px solid rgba(255,255,255,.06); }
.oi-action-row:last-child { border-bottom: none; }
.oi-action-num { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; flex-shrink: 0; margin-top: 1px; }
.oi-action-num-1 { background: rgba(255,69,58,.2); color: #ff6b6b; }
.oi-action-num-2 { background: rgba(245,158,11,.2); color: #f59e0b; }
.oi-action-num-3 { background: rgba(52,199,89,.15); color: #34c759; }
.oi-action-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 4px; display: block; }
.oi-action-text  { font-size: 13px; font-weight: 300; color: #8e8e93; line-height: 1.62; }
.oi-action-impact { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-top: 6px; }
.oi-action-impact-r { background: rgba(255,69,58,.15); color: #ff6b6b; }
.oi-action-impact-y { background: rgba(245,158,11,.15); color: #f59e0b; }
.oi-action-impact-g { background: rgba(52,199,89,.1); color: #34c759; }

/* Competitor tier card */
.oi-tier-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 40px; }
.oi-tier-card { border-radius: 18px; border: .5px solid var(--omni-bd2); overflow: hidden; }
.oi-tier-head { padding: 18px 22px; border-bottom: .5px solid var(--omni-bd); }
.oi-tier-plan { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--omni-m); display: block; margin-bottom: 6px; }
.oi-tier-count { font-size: 2.2rem; font-weight: 700; letter-spacing: -.04em; color: var(--omni-t); line-height: 1; }
.oi-tier-label { font-size: 12px; font-weight: 300; color: var(--omni-m); margin-top: 2px; }
.oi-tier-feat { padding: 10px 22px; border-bottom: .5px solid var(--omni-bd); font-size: 12.5px; font-weight: 300; color: var(--omni-t); display: flex; align-items: center; gap: 8px; }
.oi-tier-feat:last-child { border-bottom: none; }
.oi-tier-feat::before { content: '✓'; color: var(--omni-gn); font-weight: 700; font-size: 11px; flex-shrink: 0; }
.oi-tier-feat-lock { color: var(--omni-m); font-weight: 300; }
.oi-tier-feat-lock::before { content: '—'; color: var(--omni-m); font-weight: 300; }
.oi-tier-featured { border-color: var(--omni-bl); box-shadow: 0 0 0 1px var(--omni-bl); }
.oi-tier-featured .oi-tier-head { background: var(--omni-bll); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .pg-feat-2 { grid-template-columns: 1fr; }
  .oi-tier-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .pg-feat-2 { grid-template-columns: 1fr; }
  .oi-tier-grid { grid-template-columns: 1fr; }
  .oi-feed-ts { display: none; }
}
/* ============================================================
   OMNI NODE — Hardware Page CSS
   Requires omnisync-homepage.css + omni-ads.css loaded first.
   Add after omni-intel.css in your Shopify base CSS.
   ============================================================ */

/* ============================================================
   HERO OVERRIDES FOR DARK HERO
   ============================================================ */
.pg-eyebrow-gold { color: #c9a96a !important; }
.pg-lbl-gold { color: #c9a96a !important; }
.pg-h2-light { color: #f5f5f7 !important; }
.pg-h2-light em { color: #6ea8fe !important; font-style: normal; }

/* ============================================================
   NODE CARD — HARDWARE VISUAL + SPECS SPLIT
   ============================================================ */
.pg-node-card { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: center; }
.pg-node-visual { display: flex; align-items: center; justify-content: center; background: var(--omni-s3); border-radius: 24px; border: .5px solid var(--omni-bd2); padding: 40px; aspect-ratio: 1; }
.pg-node-svg { width: 100%; max-width: 280px; }
.pg-node-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--omni-bl); display: block; margin-bottom: 14px; }
.pg-node-title { font-size: clamp(1.9rem,3.5vw,3rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; color: var(--omni-t); margin-bottom: 16px; font-family: var(--omni-font); }
.pg-node-title em { font-style: normal; color: var(--omni-bl); }
.pg-node-desc { font-size: 15px; font-weight: 300; color: var(--omni-m); line-height: 1.7; letter-spacing: -.01em; margin-bottom: 28px; }
.pg-node-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 14px; overflow: hidden; border: .5px solid var(--omni-bd2); margin-bottom: 28px; }
.pg-spec { padding: 12px 16px; border-bottom: .5px solid var(--omni-bd); border-right: .5px solid var(--omni-bd); display: flex; flex-direction: column; gap: 3px; background: var(--omni-w); }
.pg-spec:nth-child(even) { border-right: none; }
.pg-spec:nth-last-child(-n+2) { border-bottom: none; }
.pg-spec-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--omni-m); }
.pg-spec-val   { font-size: 13px; font-weight: 600; color: var(--omni-t); letter-spacing: -.01em; }

/* ============================================================
   4-STEP SHIPPING PROCESS
   ============================================================ */
.pg-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; border-radius: 18px; overflow: hidden; }
.pg-steps-dark { background: rgba(255,255,255,.07); border: .5px solid rgba(255,255,255,.1); }
.pg-step { padding: 28px 22px; }
.pg-step-dark { background: var(--omni-dk2); }
.pg-step-dark:hover { background: #2c2c2e; }
.pg-step-num { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #c9a96a; display: block; margin-bottom: 12px; }
.pg-step h3 { font-size: 16px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 10px; font-family: var(--omni-font); }
.pg-step-dark h3 { color: #f5f5f7; }
.pg-step p { font-size: 12.5px; font-weight: 300; line-height: 1.65; }
.pg-step-dark p { color: #86868b; }

/* ============================================================
   SOVEREIGNTY BOX
   ============================================================ */
.pg-sov-box { display: flex; align-items: flex-start; gap: 16px; padding: 24px 28px; background: rgba(0,102,204,.08); border: .5px solid rgba(0,102,204,.25); border-radius: 16px; }
.pg-sov-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.pg-sov-title { font-size: 14px; font-weight: 700; color: #f5f5f7; letter-spacing: -.02em; margin-bottom: 8px; }
.pg-sov-text  { font-size: 13px; font-weight: 300; color: #8e8e93; line-height: 1.68; margin-bottom: 14px; }
.pg-sov-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-sov-badge { font-size: 10.5px; font-weight: 600; padding: 4px 12px; border-radius: 20px; background: rgba(0,102,204,.15); color: #6ea8fe; border: .5px solid rgba(0,102,204,.3); }

/* ============================================================
   MODULE ORBIT — 7 MODULES VISUAL
   ============================================================ */
.pg-orbit-wrap { position: relative; max-width: 600px; margin: 40px auto 0; }
.pg-module-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; border-radius: 18px; overflow: hidden; background: var(--omni-bd2); border: .5px solid var(--omni-bd2); margin-top: 40px; }
.pg-module-item { background: var(--omni-w); padding: 22px 18px; display: flex; flex-direction: column; gap: 6px; transition: background .2s; }
.pg-module-item:hover { background: var(--omni-s2); }
.pg-module-num { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--omni-bl); }
.pg-module-name { font-size: 14px; font-weight: 700; letter-spacing: -.02em; color: var(--omni-t); }
.pg-module-sub  { font-size: 11.5px; font-weight: 300; color: var(--omni-m); line-height: 1.5; }
.pg-module-auto { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 600; padding: 2px 7px; border-radius: 20px; width: fit-content; margin-top: 4px; }
.pg-module-auto-full    { background: var(--omni-gnl); color: var(--omni-gn); }
.pg-module-auto-partial { background: var(--omni-amber-l); color: #8a6000; }

/* ============================================================
   COMPARISON — CLOUD SAAS VS NODE
   ============================================================ */
.pg-cloud-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.pg-cloud-col { border-radius: 18px; overflow: hidden; border: .5px solid var(--omni-bd2); }
.pg-cloud-head { padding: 18px 22px; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; border-bottom: .5px solid var(--omni-bd); display: flex; align-items: center; gap: 10px; }
.pg-cloud-head-saas { background: var(--omni-s3); color: var(--omni-t); }
.pg-cloud-head-node { background: var(--omni-dk2); color: #f5f5f7; }
.pg-cloud-row { display: flex; align-items: flex-start; gap: 10px; padding: 13px 22px; border-bottom: .5px solid var(--omni-bd); font-size: 13px; }
.pg-cloud-row:last-child { border-bottom: none; }
.pg-cloud-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.pg-cloud-text { font-weight: 300; color: var(--omni-m); line-height: 1.6; }
.pg-cloud-text strong { font-weight: 600; color: var(--omni-t); }
.pg-cloud-head-node .pg-cloud-text strong { color: #f5f5f7; }

/* ============================================================
   EBITDA / ASSET VALUE CALLOUT
   ============================================================ */
.pg-asset-bar { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 40px; }
.pg-asset-card { border-radius: 16px; padding: 24px 22px; border: .5px solid var(--omni-bd2); background: var(--omni-w); }
.pg-asset-icon { font-size: 24px; margin-bottom: 12px; }
.pg-asset-title { font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--omni-t); margin-bottom: 8px; }
.pg-asset-text  { font-size: 13px; font-weight: 300; color: var(--omni-m); line-height: 1.65; }

/* ============================================================
   DARK SECTION UTILITY
   ============================================================ */
.pg-sec-dark { background: var(--omni-dk2); }
.pg-sec-dark .pg-lbl { color: #c9a96a; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .pg-node-card { grid-template-columns: 1fr; gap: 40px; }
  .pg-node-visual { aspect-ratio: auto; padding: 32px; max-width: 340px; margin: 0 auto; }
  .pg-steps { grid-template-columns: 1fr 1fr; }
  .pg-cloud-compare { grid-template-columns: 1fr; }
  .pg-module-list { grid-template-columns: repeat(2,1fr); }
  .pg-asset-bar { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .pg-steps { grid-template-columns: 1fr; }
  .pg-node-specs { grid-template-columns: 1fr; }
  .pg-spec { border-right: none; }
  .pg-spec:nth-last-child(-n+2) { border-bottom: .5px solid var(--omni-bd); }
  .pg-spec:last-child { border-bottom: none; }
  .pg-module-list { grid-template-columns: 1fr 1fr; }
  .pg-sov-box { flex-direction: column; }
  .pg-asset-bar { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .pg-module-list { grid-template-columns: 1fr; }
}
/* ============================================================
   OMNI VISUALS — Image Generation Page CSS
   Requires omnisync-homepage.css + omni-ads.css + omni-node.css loaded first.
   Add after omni-node.css in your Shopify base CSS.
   ============================================================ */

/* ============================================================
   GENERATION DEMO — IMAGE CARD GRID
   ============================================================ */
.ov-img-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 36px; }
.ov-img-card { border-radius: 14px; overflow: hidden; border: .5px solid var(--omni-bd2); background: var(--omni-s3); position: relative; aspect-ratio: 1; }
.ov-img-card-wide { aspect-ratio: 16/9; grid-column: span 2; }
.ov-img-card-tall { aspect-ratio: 9/16; grid-row: span 2; }
.ov-img-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }

/* Animated gradient placeholder simulating generated image */
.ov-img-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 30%, #0f3460 60%, #1a1a2e 100%); background-size: 200% 200%; animation: ov-shimmer 4s ease-in-out infinite; position: relative; }
.ov-img-placeholder-warm { background: linear-gradient(135deg, #1a0a00 0%, #2d1200 30%, #4a2000 60%, #1a0a00 100%); }
.ov-img-placeholder-cool { background: linear-gradient(135deg, #001a2e 0%, #002d4a 30%, #004060 60%, #001a2e 100%); }
.ov-img-placeholder-neutral { background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 30%, #2a2a2a 60%, #0d0d0d 100%); }
@keyframes ov-shimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Image card overlay badge */
.ov-img-badge { position: absolute; bottom: 10px; left: 10px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; backdrop-filter: blur(8px); }
.ov-img-badge-ad   { background: rgba(0,102,204,.5); color: #6ea8fe; border: .5px solid rgba(0,102,204,.4); }
.ov-img-badge-social { background: rgba(28,122,62,.5); color: #7dda9a; border: .5px solid rgba(28,122,62,.4); }
.ov-img-badge-gen  { background: rgba(201,169,106,.35); color: #e8c97a; border: .5px solid rgba(201,169,106,.4); }
.ov-img-res { position: absolute; top: 10px; right: 10px; font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: 20px; background: rgba(0,0,0,.55); color: rgba(255,255,255,.7); backdrop-filter: blur(4px); letter-spacing: .04em; }

/* Pulse dot inside placeholder */
.ov-img-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.ov-img-icon { font-size: 28px; opacity: .35; }
.ov-img-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.25); }

/* ============================================================
   PROMPT INTERFACE MOCKUP
   ============================================================ */
.ov-prompt-wrap { background: var(--omni-dk2); border-radius: 18px; border: .5px solid rgba(255,255,255,.1); overflow: hidden; margin-top: 0; }
.ov-prompt-bar { padding: 12px 18px; background: rgba(255,255,255,.04); border-bottom: .5px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 8px; }
.ov-prompt-dots { display: flex; gap: 6px; }
.ov-prompt-dot { width: 10px; height: 10px; border-radius: 50%; }
.ov-prompt-title { font-size: 11.5px; font-weight: 500; color: #636366; margin-left: 4px; letter-spacing: -.01em; }
.ov-prompt-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.ov-prompt-field { background: rgba(255,255,255,.05); border: .5px solid rgba(255,255,255,.1); border-radius: 10px; padding: 12px 16px; }
.ov-prompt-field-label { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #636366; margin-bottom: 6px; display: block; }
.ov-prompt-text { font-size: 13px; font-weight: 300; color: #e5e5ea; line-height: 1.55; }
.ov-prompt-row { display: flex; gap: 10px; }
.ov-prompt-select { flex: 1; background: rgba(255,255,255,.05); border: .5px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px 14px; }
.ov-prompt-select-label { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #636366; margin-bottom: 4px; display: block; }
.ov-prompt-select-val { font-size: 13px; font-weight: 600; color: #c9a96a; }
.ov-prompt-source { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(0,102,204,.1); border: .5px solid rgba(0,102,204,.25); border-radius: 10px; font-size: 12px; font-weight: 400; color: #6ea8fe; }
.ov-prompt-source-icon { font-size: 14px; flex-shrink: 0; }
.ov-gen-btn { width: 100%; padding: 14px; border-radius: 12px; background: linear-gradient(135deg, #c9a96a 0%, #e8c97a 50%, #c9a96a 100%); background-size: 200% 100%; border: none; font-size: 14px; font-weight: 700; color: #1a0f00; letter-spacing: -.01em; cursor: pointer; transition: background-position .4s, opacity .2s; font-family: var(--omni-font); }
.ov-gen-btn:hover { background-position: 100% 0; opacity: .92; }
.ov-output-preview { background: rgba(255,255,255,.03); border: .5px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px; }
.ov-output-preview-label { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #636366; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.ov-output-live { display: flex; align-items: center; gap: 5px; }
.ov-output-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--omni-gn); animation: ov-pulse-dot 2s ease-in-out infinite; }
@keyframes ov-pulse-dot { 0%,100%{opacity:1}50%{opacity:.3} }
.ov-output-destinations { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ov-dest-chip { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.ov-dest-discord { background: rgba(88,101,242,.2); color: #8a94f5; border: .5px solid rgba(88,101,242,.3); }
.ov-dest-folder  { background: rgba(52,199,89,.1); color: #7dda9a; border: .5px solid rgba(52,199,89,.2); }
.ov-dest-cloud   { background: rgba(0,102,204,.15); color: #6ea8fe; border: .5px solid rgba(0,102,204,.25); }

/* ============================================================
   TOKEN / RESOLUTION TIER TABLE
   ============================================================ */
.ov-res-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; border-radius: 18px; overflow: hidden; background: var(--omni-bd2); border: .5px solid var(--omni-bd2); margin-top: 40px; }
.ov-res-card { background: var(--omni-w); padding: 28px 24px; display: flex; flex-direction: column; gap: 6px; }
.ov-res-card-featured { background: var(--omni-dk2); }
.ov-res-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--omni-m); }
.ov-res-card-featured .ov-res-label { color: #c9a96a; }
.ov-res-size { font-size: 2.2rem; font-weight: 700; letter-spacing: -.04em; color: var(--omni-t); line-height: 1; }
.ov-res-card-featured .ov-res-size { color: #f5f5f7; }
.ov-res-tokens { font-size: 12px; font-weight: 600; color: var(--omni-gn); }
.ov-res-card-featured .ov-res-tokens { color: #7dda9a; }
.ov-res-desc { font-size: 12.5px; font-weight: 300; color: var(--omni-m); line-height: 1.6; margin-top: 4px; }
.ov-res-card-featured .ov-res-desc { color: #86868b; }
.ov-res-ratios { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ov-ratio-chip { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: var(--omni-s3); color: var(--omni-m); }
.ov-res-card-featured .ov-ratio-chip { background: rgba(255,255,255,.08); color: #8e8e93; }

/* ============================================================
   USE CASE CARDS — AD CREATIVE vs SOCIAL vs CUSTOM
   ============================================================ */
.ov-use-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 40px; }
.ov-use-card { border-radius: 18px; border: .5px solid var(--omni-bd2); overflow: hidden; }
.ov-use-head { padding: 22px 22px 18px; border-bottom: .5px solid var(--omni-bd); }
.ov-use-icon { font-size: 26px; margin-bottom: 12px; display: block; }
.ov-use-title { font-size: 16px; font-weight: 700; letter-spacing: -.025em; color: var(--omni-t); margin-bottom: 6px; }
.ov-use-sub   { font-size: 12.5px; font-weight: 300; color: var(--omni-m); line-height: 1.6; }
.ov-use-feat  { padding: 10px 22px; border-bottom: .5px solid var(--omni-bd); font-size: 12.5px; font-weight: 300; color: var(--omni-t); display: flex; align-items: center; gap: 8px; }
.ov-use-feat:last-child { border-bottom: none; }
.ov-use-feat::before { content: '✓'; color: var(--omni-gn); font-weight: 700; font-size: 11px; flex-shrink: 0; }
.ov-use-card-ads     { border-color: rgba(0,102,204,.25); }
.ov-use-card-ads .ov-use-head { background: var(--omni-bll); }
.ov-use-card-social  { border-color: rgba(28,122,62,.25); }
.ov-use-card-social .ov-use-head { background: var(--omni-gnl); }
.ov-use-card-custom  { border-color: rgba(201,169,106,.3); }
.ov-use-card-custom .ov-use-head { background: #fffbf0; }

/* ============================================================
   WORKFLOW INTEGRATION ARROWS
   ============================================================ */
.ov-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0; align-items: center; margin-top: 40px; }
.ov-flow-node { background: var(--omni-w); border: .5px solid var(--omni-bd2); border-radius: 16px; padding: 22px 18px; text-align: center; }
.ov-flow-node-dark { background: var(--omni-dk2); border-color: rgba(255,255,255,.1); }
.ov-flow-node-gold { background: #fffbf0; border-color: rgba(201,169,106,.3); }
.ov-flow-icon { font-size: 24px; margin-bottom: 10px; display: block; }
.ov-flow-name { font-size: 13px; font-weight: 700; letter-spacing: -.02em; color: var(--omni-t); margin-bottom: 4px; }
.ov-flow-node-dark .ov-flow-name { color: #f5f5f7; }
.ov-flow-node-gold .ov-flow-name { color: #6b4c00; }
.ov-flow-sub  { font-size: 11px; font-weight: 300; color: var(--omni-m); line-height: 1.5; }
.ov-flow-node-dark .ov-flow-sub  { color: #86868b; }
.ov-flow-node-gold .ov-flow-sub  { color: #8a6000; }
.ov-flow-arrow { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 12px; }
.ov-flow-arrow-line { width: 100%; height: 1.5px; background: linear-gradient(90deg, var(--omni-bd2) 0%, var(--omni-bl) 50%, var(--omni-bd2) 100%); }
.ov-flow-arrow-head { font-size: 14px; color: var(--omni-bl); }
.ov-flow-arrow-label { font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--omni-m); white-space: nowrap; }

/* ============================================================
   PLAN TIER BADGE
   ============================================================ */
.ov-plan-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .04em; background: linear-gradient(135deg, rgba(201,169,106,.2) 0%, rgba(232,201,122,.15) 100%); border: .5px solid rgba(201,169,106,.4); color: #c9a96a; }
.ov-plan-badge-icon { font-size: 12px; }

/* ============================================================
   DISCORD + FILE OUTPUT SECTION
   ============================================================ */
.ov-delivery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.ov-delivery-card { border-radius: 16px; border: .5px solid var(--omni-bd2); overflow: hidden; }
.ov-delivery-head { padding: 16px 20px; border-bottom: .5px solid var(--omni-bd); display: flex; align-items: center; gap: 10px; }
.ov-delivery-head-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.ov-delivery-head-discord { background: rgba(88,101,242,.15); }
.ov-delivery-head-folder  { background: var(--omni-gnl); }
.ov-delivery-head-title { font-size: 14px; font-weight: 700; color: var(--omni-t); letter-spacing: -.02em; }
.ov-delivery-head-sub   { font-size: 11.5px; font-weight: 300; color: var(--omni-m); margin-top: 1px; }
.ov-delivery-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 20px; border-bottom: .5px solid var(--omni-bd); font-size: 13px; }
.ov-delivery-row:last-child { border-bottom: none; }
.ov-delivery-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.ov-delivery-dot-discord { background: #8a94f5; }
.ov-delivery-dot-folder  { background: var(--omni-gn); }
.ov-delivery-text { font-weight: 300; color: var(--omni-m); line-height: 1.6; }
.ov-delivery-text strong { font-weight: 600; color: var(--omni-t); }

/* ============================================================
   HERO VISUAL — GENERATIVE ANIMATION
   ============================================================ */
.ov-hero-visual { max-width: 540px; margin: 48px auto 0; position: relative; }
.ov-gen-preview { background: var(--omni-dk2); border-radius: 20px; border: .5px solid rgba(255,255,255,.1); overflow: hidden; padding: 0; }
.ov-gen-preview-bar { padding: 10px 16px; background: rgba(255,255,255,.04); border-bottom: .5px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; }
.ov-gen-preview-title { font-size: 11px; font-weight: 600; color: #636366; letter-spacing: -.01em; }
.ov-gen-status { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: #7dda9a; letter-spacing: .05em; text-transform: uppercase; }
.ov-gen-status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--omni-gn); animation: ov-pulse-dot 2s ease-in-out infinite; }
.ov-canvas { height: 200px; background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2e 25%, #0a1a2e 50%, #1a1a0a 75%, #0a0a1a 100%); background-size: 400% 400%; animation: ov-canvas-shift 8s ease-in-out infinite; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
@keyframes ov-canvas-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.ov-canvas-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.2); }
.ov-canvas-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 32px 32px; }
.ov-gen-meta { padding: 12px 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.ov-gen-meta-chip { font-size: 10.5px; font-weight: 600; padding: 3px 10px; border-radius: 20px; background: rgba(255,255,255,.07); color: #8e8e93; }
.ov-gen-meta-chip-gold { background: rgba(201,169,106,.15); color: #c9a96a; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .ov-img-grid { grid-template-columns: 1fr 1fr; }
  .ov-img-card-wide { grid-column: span 2; }
  .ov-img-card-tall { grid-row: span 1; aspect-ratio: 1; }
  .ov-res-grid { grid-template-columns: 1fr; }
  .ov-use-grid { grid-template-columns: 1fr; }
  .ov-flow { grid-template-columns: 1fr; gap: 12px; }
  .ov-flow-arrow { flex-direction: row; padding: 0; transform: rotate(90deg); height: 32px; }
  .ov-flow-arrow-line { width: 32px; height: 1.5px; }
  .ov-flow-arrow-label { display: none; }
  .ov-delivery-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .ov-img-grid { grid-template-columns: 1fr; }
  .ov-img-card-wide { grid-column: span 1; aspect-ratio: 16/9; }
  .ov-res-grid { grid-template-columns: 1fr; }
  .ov-use-grid { grid-template-columns: 1fr; }
  .ov-prompt-row { flex-direction: column; }
  .ov-hero-visual { max-width: 100%; }
}
/* ============================================================
   OMNI VISUALS — Mobile Fix + Schema Supplement
   Add this AFTER omni-visuals.css in your Shopify base CSS.
   Converts inline grid styles to overridable classes and
   tightens all breakpoints down to 320px.
   ============================================================ */

/* ============================================================
   NAMED GRID CLASSES (replacing inline style grids)
   ============================================================ */

/* 3-col equal — intelligence sources, use-case problem cards */
.ov-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }

/* 2-col — prompt split, GSC data + mockup, delivery */
.ov-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }

/* 2-col uneven — prompt split is 1fr 1fr but GSC is 1fr 1fr too */
.ov-grid-2-tight { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

/* Plan availability matrix header + rows */
.ov-plan-table { border-radius: 18px; overflow: hidden; border: .5px solid var(--omni-bd2); }
.ov-plan-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
.ov-plan-row-head { background: var(--omni-s3); border-bottom: .5px solid var(--omni-bd2); }
.ov-plan-row-body { background: var(--omni-w); border-bottom: .5px solid var(--omni-bd); }
.ov-plan-row-body:last-child { border-bottom: none; }
.ov-plan-cell { padding: 13px 18px; font-size: 13px; }
.ov-plan-cell-head { padding: 12px 18px; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--omni-m); }
.ov-plan-cell-head-blue  { color: var(--omni-bl) !important; background: var(--omni-bll); }
.ov-plan-cell-head-gold  { color: #8a6000 !important; }
.ov-plan-cell-center { text-align: center; }
.ov-plan-cell-blue { background: var(--omni-bll); }
.ov-plan-cell-label { font-weight: 300; color: var(--omni-m); }
.ov-plan-cell-yes { font-size: 15px; font-weight: 700; color: var(--omni-gn); }
.ov-plan-cell-no  { font-size: 15px; color: var(--omni-m); }
.ov-plan-cell-val { font-size: 12.5px; font-weight: 600; color: var(--omni-bl); }
.ov-plan-cell-val-dark { font-size: 12.5px; font-weight: 600; color: var(--omni-t); }

/* ROI / savings callout bar */
.ov-callout-bar { margin-top: 20px; padding: 16px 22px; background: var(--omni-s3); border-radius: 12px; border: .5px solid var(--omni-bd2); display: flex; align-items: flex-start; gap: 12px; }
.ov-callout-bar-green { background: var(--omni-gnl); border-color: rgba(28,122,62,.2); }
.ov-callout-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.ov-callout-text { font-size: 13px; font-weight: 300; color: var(--omni-m); line-height: 1.65; }
.ov-callout-bar-green .ov-callout-text { color: var(--omni-gn); }

/* ============================================================
   BREAKPOINT: TABLET  ≤ 900px
   ============================================================ */
@media (max-width: 900px) {
  /* All 3-col grids → 1-col */
  .ov-grid-3 { grid-template-columns: 1fr !important; gap: 14px; }

  /* 2-col grids → 1-col */
  .ov-grid-2,
  .ov-grid-2-tight { grid-template-columns: 1fr !important; gap: 24px; }

  /* Plan table — collapse to label + 3 cols */
  .ov-plan-row { grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr; }
  .ov-plan-cell,
  .ov-plan-cell-head { padding: 10px 12px; font-size: 11.5px; }
  .ov-plan-cell-head { font-size: 9px; }

  /* Flow collapses to vertical */
  .ov-flow { grid-template-columns: 1fr !important; gap: 0; }
  .ov-flow-arrow {
    flex-direction: row;
    transform: none;
    padding: 8px 0;
    height: 28px;
    justify-content: center;
    gap: 8px;
  }
  .ov-flow-arrow-line { width: 48px; height: 1.5px; }
  .ov-flow-arrow-head { transform: rotate(90deg); }
  .ov-flow-arrow-label { display: none; }

  /* Delivery grid */
  .ov-delivery-grid { grid-template-columns: 1fr !important; }

  /* Image grid */
  .ov-img-grid { grid-template-columns: 1fr 1fr !important; }
  .ov-img-card-tall { grid-row: span 1 !important; aspect-ratio: 1 !important; }
}

/* ============================================================
   BREAKPOINT: MOBILE  ≤ 680px
   ============================================================ */
@media (max-width: 680px) {
  /* Plan table — stack to 2 cols: label + one col each visible */
  /* Simplest fix: hide Ultra col on small phones, keep Prime + Pro */
  .ov-plan-row { grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr; }
  .ov-plan-cell,
  .ov-plan-cell-head { padding: 9px 8px; font-size: 11px; }
  .ov-plan-cell-head { font-size: 8.5px; letter-spacing: .04em; }

  /* Image grid — full single col */
  .ov-img-grid { grid-template-columns: 1fr !important; }
  .ov-img-card-wide { grid-column: span 1 !important; aspect-ratio: 16/9 !important; }
  .ov-img-card-tall { aspect-ratio: 9/16 !important; }

  /* Prompt row selects stack */
  .ov-prompt-row { flex-direction: column; }

  /* Hero visual full width */
  .ov-hero-visual { max-width: 100%; }

  /* Resolution grid single col */
  .ov-res-grid { grid-template-columns: 1fr !important; }

  /* Use grid single col */
  .ov-use-grid { grid-template-columns: 1fr !important; }

  /* Ratio chips wrap nicely */
  .ov-res-ratios { flex-wrap: wrap; }

  /* Section padding tighten */
  .pg-sec-light[style*="padding:88px 44px"],
  .pg-sec-soft[style*="padding:88px 44px"]  { padding: 56px 20px !important; }
  .pg-sec-light[style*="padding:72px 44px"] { padding: 48px 20px !important; }
}

/* ============================================================
   BREAKPOINT: SMALL PHONE  ≤ 420px
   ============================================================ */
@media (max-width: 420px) {
  /* Plan table — hide Ultra column entirely, just label+Prime+Pro */
  .ov-plan-row { grid-template-columns: 1.6fr 1fr 1fr; }
  .ov-plan-row > *:last-child { display: none; }

  /* Stack delivery dots nicely */
  .ov-delivery-row { gap: 8px; }

  /* Gen meta chips wrap */
  .ov-gen-meta { flex-wrap: wrap; }

  /* Output destinations stack */
  .ov-output-destinations { flex-direction: column; }

  /* Flow nodes full width */
  .ov-flow-node { padding: 18px 16px; }

  /* Callout bars */
  .ov-callout-bar { flex-direction: column; gap: 8px; }
}
/* ============================================================
   OMNI ADS — Mobile Fix Additions
   Add this AFTER omni-ads.css in your Shopify base CSS.
   Only contains new classes not already defined.
   ============================================================ */

/* ============================================================
   GSC KEYWORD DECISION MATRIX — 3 col
   ============================================================ */
.pg-gsc-matrix { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 48px; }

/* ============================================================
   GSC DATA + MOCKUP SPLIT — 2 col
   ============================================================ */
.pg-gsc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }

/* ============================================================
   ROI TABLE — flex rows that stack on narrow screens
   ============================================================ */
.pg-roi-row { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 22px; border-bottom: .5px solid var(--omni-bd); font-size: 13.5px; gap: 12px; }
.pg-roi-row:last-child { border-bottom: none; }
.pg-roi-row-head { background: var(--omni-s3); font-weight: 500; }
.pg-roi-row-body { background: var(--omni-w); }
.pg-roi-row-total { background: var(--omni-s3); }
.pg-roi-row-omni  { background: var(--omni-gnl); border-top: .5px solid rgba(28,122,62,.15); font-size: 14px; }
.pg-roi-label { color: var(--omni-m); font-weight: 300; flex: 1; }
.pg-roi-label-bold { color: var(--omni-t); font-weight: 500; }
.pg-roi-label-total { color: var(--omni-t); font-weight: 600; }
.pg-roi-label-omni  { color: var(--omni-gn); font-weight: 600; }
.pg-roi-val { color: var(--omni-t); font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.pg-roi-val-total { color: var(--omni-t); font-weight: 700; }
.pg-roi-val-omni  { color: var(--omni-gn); font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pg-roi-save { font-size: 11px; background: rgba(28,122,62,.15); padding: 2px 8px; border-radius: 20px; }

/* ============================================================
   TRUST STRIP — below hero CTA (new)
   ============================================================ */
.pg-trust-strip { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 20px; padding-top: 20px; border-top: .5px solid rgba(255,255,255,.08); }
.pg-trust-item { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 400; color: #636366; }
.pg-trust-icon { font-size: 13px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .pg-gsc-matrix { grid-template-columns: 1fr; gap: 12px; }
  .pg-gsc-split  { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 680px) {
  .pg-gsc-matrix { grid-template-columns: 1fr; }
  .pg-gsc-split  { grid-template-columns: 1fr; }
  .pg-roi-row { flex-direction: column; gap: 4px; padding: 12px 16px; }
  .pg-roi-val, .pg-roi-val-total, .pg-roi-val-omni { font-size: 14px; }
  .pg-roi-label, .pg-roi-label-bold, .pg-roi-label-total, .pg-roi-label-omni { font-size: 13px; }
  .pg-trust-strip { gap: 14px; }
}
@media (max-width: 420px) {
  .pg-trust-strip { flex-direction: column; gap: 10px; }
}
/* ============================================================
   OMNI SEARCH — Mobile Fix Additions
   Add AFTER omni-ads.css + omni-ads-mobile-fix.css in Shopify.
   Only new classes not already defined in existing CSS.
   ============================================================ */

/* ============================================================
   PROBLEM SPLIT — 2-col SEO vs AEO cards
   ============================================================ */
.pg-search-problem-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

/* ============================================================
   AEO DEEP DIVE SPLIT — text left, mockup right
   ============================================================ */
.pg-aeo-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* ============================================================
   ORGANIC-PAID LOOP — 3 step cards
   ============================================================ */
.pg-loop-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ============================================================
   INSIGHT CALLOUT — flex row that wraps on mobile
   ============================================================ */
.pg-insight-callout {
  margin-top: 20px;
  padding: 20px 24px;
  background: var(--omni-gnl);
  border-radius: 14px;
  border: .5px solid rgba(28,122,62,.2);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.pg-insight-callout-icon { font-size: 20px; flex-shrink: 0; }
.pg-insight-callout-text { font-size: 13.5px; font-weight: 300; color: var(--omni-gn); line-height: 1.65; margin: 0; flex: 1; min-width: 200px; }

/* ============================================================
   KEYWORD TABLE — mobile-safe wrapper
   ============================================================ */
.pg-kw-table-wrap {
  border-radius: 18px;
  overflow: hidden;
  border: .5px solid var(--omni-bd2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pg-kw-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}
.pg-kw-th {
  padding: 12px 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--omni-m);
  background: var(--omni-s3);
  text-align: left;
  border-bottom: .5px solid var(--omni-bd2);
  white-space: nowrap;
}
.pg-kw-th-center { text-align: center; }
.pg-kw-td { padding: 13px 16px; font-size: 13px; border-bottom: .5px solid var(--omni-bd); vertical-align: middle; }
.pg-kw-td-center { text-align: center; }
.pg-kw-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 22px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.pg-kw-rank-amber { background: rgba(245,158,11,.15); color: #8a6000; }
.pg-kw-rank-red   { background: rgba(255,69,58,.12);  color: #c0392b; }
.pg-kw-rank-green { background: rgba(28,122,62,.15);  color: var(--omni-gn); }
.pg-kw-action-red { font-size: 12.5px; color: #c0392b; font-weight: 600; }
.pg-kw-action     { font-size: 12.5px; color: var(--omni-m); font-weight: 300; }
.pg-kw-conflict   { background: rgba(28,122,62,.03); }
.pg-kw-conflict-badge { color: #c0392b; font-size: 10.5px; font-weight: 600; }
.pg-kw-traffic-green { font-size: 13px; font-weight: 600; color: var(--omni-gn); }
.pg-kw-earned     { font-size: 13px; font-weight: 600; color: var(--omni-t); }

/* ============================================================
   CITATION BAR CHART — label width fix on small screens
   ============================================================ */
.pg-citation-bar-wrap {
  background: var(--omni-dk2);
  border-radius: 14px;
  border: .5px solid rgba(255,255,255,.1);
  padding: 20px 22px;
  margin-top: 16px;
}
.pg-citation-bar-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #636366;
  margin-bottom: 14px;
  display: block;
}
.pg-citation-bar-rows { display: flex; flex-direction: column; gap: 8px; }
.pg-citation-bar-row { display: flex; align-items: center; gap: 10px; }
.pg-citation-bar-label {
  font-size: 12px;
  font-weight: 500;
  color: #8e8e93;
  min-width: 90px;
  flex-shrink: 0;
}
.pg-citation-bar-track {
  flex: 1;
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}
.pg-citation-bar-fill { height: 100%; border-radius: 4px; }
.pg-citation-bar-fill-blue  { background: #0066cc; }
.pg-citation-bar-fill-green { background: rgba(52,199,89,.7); }
.pg-citation-bar-pct {
  font-size: 11px;
  font-weight: 600;
  min-width: 36px;
  text-align: right;
  flex-shrink: 0;
}
.pg-citation-bar-pct-blue  { color: #6ea8fe; }
.pg-citation-bar-pct-green { color: #34c759; }
.pg-citation-alert {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255,69,58,.1);
  border-radius: 8px;
  border: .5px solid rgba(255,69,58,.2);
}
.pg-citation-alert-text {
  font-size: 11.5px;
  font-weight: 300;
  color: #ff8e87;
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .pg-search-problem-split { grid-template-columns: 1fr; gap: 16px; }
  .pg-aeo-split  { grid-template-columns: 1fr; gap: 36px; }
  .pg-loop-3     { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 680px) {
  .pg-search-problem-split { grid-template-columns: 1fr; }
  .pg-aeo-split  { grid-template-columns: 1fr; }
  .pg-loop-3     { grid-template-columns: 1fr; }
  .pg-citation-bar-label { min-width: 70px; font-size: 11px; }
  .pg-kw-table   { min-width: 480px; }
  .pg-kw-th, .pg-kw-td { padding: 10px 12px; font-size: 12px; }
  .pg-insight-callout { padding: 16px 18px; }
}
@media (max-width: 420px) {
  .pg-citation-bar-label { min-width: 58px; }
  /* Hide the "Recommended action" column on very small screens —
     show a scroll hint instead */
  .pg-kw-hide-sm { display: none; }
}
/* ============================================================
   OMNI PRESENCE — Mobile Fix Additions
   Add AFTER omni-search-mobile-fix.css in Shopify.
   Reuses: .pg-gsc-matrix (3-col), .pg-gsc-split (2-col),
           .pg-loop-3 (3-col), .pg-insight-callout, .pg-trust-strip
   Only new classes defined here.
   ============================================================ */

/* ============================================================
   PLATFORM CARDS — 3-col, 6 cards (Instagram, TikTok, etc.)
   Identical behaviour to pg-gsc-matrix but semantic name
   ============================================================ */
.pg-plat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ============================================================
   STREAM 5 FULL-WIDTH CALLOUT — flex with wrap
   ============================================================ */
.pg-stream5-callout {
  margin-top: 1px;
  background: var(--omni-w);
  border: .5px solid var(--omni-bd2);
  border-radius: 0 0 18px 18px;
  overflow: hidden;
  padding: 28px 24px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.pg-stream5-icon { font-size: 28px; flex-shrink: 0; }
.pg-stream5-body { flex: 1; min-width: 240px; }

/* ============================================================
   APPROVAL CALLOUT — flex with wrap
   ============================================================ */
.pg-approval-callout {
  margin-top: 24px;
  padding: 28px 32px;
  background: var(--omni-s3);
  border-radius: 20px;
  border: .5px solid var(--omni-bd2);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.pg-approval-icon { font-size: 28px; flex-shrink: 0; }
.pg-approval-body { flex: 1; min-width: 240px; }
.pg-approval-title { font-size: 16px; font-weight: 700; color: var(--omni-t); margin-bottom: 8px; letter-spacing: -.02em; }
.pg-approval-text  { font-size: 14px; font-weight: 300; color: var(--omni-m); line-height: 1.7; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .pg-plat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 680px) {
  .pg-plat-grid { grid-template-columns: 1fr; }
  .pg-stream5-callout { padding: 20px; }
  .pg-approval-callout { padding: 20px; }
}
/* ============================================================
   OMNI — PRICING PAGE GLOBAL CSS
   File: omni-global-pricing.css
   Add to: Shopify Admin → Online Store → Themes → Edit Code
           → Assets → theme.css (or your global stylesheet)

   HOW THIS IS ORGANISED:
   Each section is labelled with the page section it powers.
   Search any section name to jump to its styles.

   SECTIONS IN THIS FILE:
   1.  CSS Variables (root tokens — all --omni-* values)
   2.  Base Reset & Typography
   3.  Layout Containers (pg-sec-*, wrappers)
   4.  Scroll Animation (rv / up / vis / d1–d4)
   5.  Hero Section
   6.  Buttons (b-bl, b-out, b-wout, b-w)
   7.  Trust Strip
   8.  Divider
   9.  Section Labels & Headings (pg-lbl, pg-h2, pg-body)
   10. Metric Cards (pg-metrics, pg-metric)
   11. Insight Callout (pg-insight-callout)
   12. FAQ (pg-faq-*)
   13. CTA Band Footer (pg-cta-band)
   14. Node Pricing Card (pg-pricing-node-card)
   15. Bundle Cards (pg-pricing-bundle-*)
   16. Module List Rows (pg-pricing-module-row, pg-pricing-mod-*)
   17. Add-on Cards (pg-pricing-addon-*)
   18. Competitor Comparison Table (pg-pricing-comp-*)
   19. Usage Tier Tables (pg-usage-*)
   20. Token Credit Cards (pg-pricing-tokens, pg-token-*)
   21. ROI Calculator (pg-roi-*)
   22. Add-ons Grid (pg-gsc-matrix)
   23. DATA SOVEREIGNTY Section (pg-sec-dk) — NEW in v3
   24. Logo Strip Scroll Animation — NEW in v3
   25. Discount Ladder (pg-pricing-discount-*)
   26. Responsive Breakpoints
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES
   All --omni-* tokens used across every page.
   ============================================================ */
:root {
  /* Text */
  --omni-t:   #1d1d1f;           /* Primary text — near black */
  --omni-m:   #6e6e73;           /* Secondary / muted text */

  /* Surfaces */
  --omni-w:   #ffffff;           /* White — card backgrounds */
  --omni-s2:  #f0f0f3;           /* Surface 2 — light grey fill */
  --omni-s3:  #fafafa;           /* Surface 3 — near-white fill */

  /* Borders */
  --omni-bd:  rgba(0,0,0,.10);   /* Default border */
  --omni-bd2: rgba(0,0,0,.15);   /* Slightly stronger border */

  /* Brand blue */
  --omni-bl:  #0066cc;           /* Primary blue — CTAs, links */
  --omni-bll: #f0f6ff;           /* Blue light — callout backgrounds */

  /* Brand green */
  --omni-gn:  #1c7a3e;           /* Green — positive / savings */
  --omni-gnl: #f0faf4;           /* Green light — callout backgrounds */

  /* Dark surfaces */
  --omni-dk:  #1d1d1f;           /* Full-black dark section (data sovereignty) */
  --omni-dk2: #2c2c2e;           /* Dark card / featured bundle background */

  /* Gold accent — Complete tier */
  --omni-gold:  #c9a96a;
  --omni-goldl: rgba(201,169,106,.10);
}


/* ============================================================
   2. BASE RESET & TYPOGRAPHY
   Applied globally — safe to add to theme.css
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  color: var(--omni-t);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

em { font-style: normal; color: var(--omni-bl); }


/* ============================================================
   3. LAYOUT CONTAINERS
   Section wrappers used throughout all pages.
   ============================================================ */

/* Light white section */
.pg-sec-light {
  background: #ffffff;
}

/* Soft off-white section */
.pg-sec-soft {
  background: var(--omni-s2);
}

/* Full dark section — used for data sovereignty block */
.pg-sec-dk {
  background: var(--omni-dk);
  padding: 80px 44px;
}

/* Inner max-width container — used inline as style="max-width:1100px;margin:0 auto" */
/* No class needed — kept as inline styles in HTML */


/* ============================================================
   4. SCROLL ANIMATION
   rv = reveal, up = slide up, vis = visible (JS adds this),
   d1–d4 = staggered animation delays
   ============================================================ */
.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
.rv.vis {
  opacity: 1;
  transform: translateY(0);
}
.rv.up { /* alias — same behaviour */ }
.d1 { transition-delay: .10s; }
.d2 { transition-delay: .20s; }
.d3 { transition-delay: .30s; }
.d4 { transition-delay: .40s; }


/* ============================================================
   5. HERO SECTION
   Used on pricing page, service pages, and landing pages.
   ============================================================ */
.pg-hero {
  padding: 88px 44px 72px;
  background: #ffffff;
  text-align: center;
}
.pg-hero-inner {
  max-width: 860px;
  margin: 0 auto;
}
.pg-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--omni-bl);
  margin-bottom: 16px;
}
.pg-h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.08;
  color: var(--omni-t);
  margin-bottom: 20px;
}
.pg-sub {
  font-size: 17px;
  font-weight: 300;
  color: var(--omni-m);
  line-height: 1.7;
  margin-bottom: 32px;
}
.pg-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 36px;
}


/* ============================================================
   6. BUTTONS
   b-bl = filled blue, b-bl--lg = larger variant
   b-out = outlined, b-wout = outlined white (dark bg)
   b-w = white filled (dark bg)
   ============================================================ */
.b-bl {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  background: var(--omni-bl);
  color: #ffffff;
  border-radius: 980px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .2s, transform .15s;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.b-bl--lg {
  padding: 14px 28px;
  font-size: 15px;
}
.b-bl:hover { opacity: .88; }
.b-bl:active { transform: scale(.98); }

.b-out {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  background: transparent;
  color: var(--omni-t);
  border: 1px solid var(--omni-bd2);
  border-radius: 980px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, transform .15s;
  white-space: nowrap;
  cursor: pointer;
}
.b-out:hover { background: var(--omni-s3); }
.b-out:active { transform: scale(.98); }

.b-wout {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  background: transparent;
  color: #f5f5f7;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 980px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, transform .15s;
  white-space: nowrap;
  cursor: pointer;
}
.b-wout:hover { background: rgba(255,255,255,.08); }
.b-wout:active { transform: scale(.98); }

.b-w {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  background: #ffffff;
  color: var(--omni-t);
  border-radius: 980px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .2s, transform .15s;
  white-space: nowrap;
  cursor: pointer;
}
.b-w:hover { opacity: .88; }
.b-w:active { transform: scale(.98); }


/* ============================================================
   7. TRUST STRIP
   Row of trust signals below hero CTAs.
   ============================================================ */
.pg-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 28px;
  font-size: 13px;
  font-weight: 400;
  color: var(--omni-m);
  margin-top: 8px;
}
.pg-trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pg-trust-icon {
  font-size: 15px;
  line-height: 1;
}


/* ============================================================
   8. DIVIDER
   Full-width horizontal rule between sections.
   ============================================================ */
.pg-divider {
  border: none;
  border-top: .5px solid var(--omni-bd);
  margin: 0;
}


/* ============================================================
   9. SECTION LABELS & HEADINGS
   pg-lbl = small all-caps label above headings
   pg-h2  = section heading (used with clamp in inline style)
   pg-body = section body text
   ============================================================ */
.pg-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--omni-m);
  margin-bottom: 12px;
}
.pg-h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.1;
  color: var(--omni-t);
  margin-bottom: 14px;
}
.pg-body {
  font-size: 15px;
  font-weight: 300;
  color: var(--omni-m);
  line-height: 1.7;
}


/* ============================================================
   10. METRIC CARDS
   The "before you look at a single number" stats grid.
   ============================================================ */
.pg-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--omni-bd);
  border: .5px solid var(--omni-bd2);
  border-radius: 18px;
  overflow: hidden;
}
.pg-metric {
  background: var(--omni-w);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pg-metric-val {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--omni-t);
  line-height: 1;
}
.pg-metric-lbl {
  font-size: 13px;
  font-weight: 300;
  color: var(--omni-m);
  line-height: 1.55;
}


/* ============================================================
   11. INSIGHT CALLOUT
   Blue or green tinted callout box with icon + text.
   ============================================================ */
.pg-insight-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 22px;
  background: var(--omni-bll);
  border: .5px solid rgba(0,102,204,.2);
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--omni-m);
}
.pg-insight-callout-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}
.pg-insight-callout-text {
  margin: 0;
}


/* ============================================================
   12. FAQ
   Accordion FAQ list used at bottom of pricing page.
   ============================================================ */
.pg-faq-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pg-faq-item {
  border: .5px solid var(--omni-bd2);
  border-radius: 12px;
  overflow: hidden;
}
.pg-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--omni-t);
  background: var(--omni-w);
  gap: 16px;
  user-select: none;
  transition: background .2s;
}
.pg-faq-q:hover { background: var(--omni-s3); }
.pg-faq-icon {
  font-size: 20px;
  color: var(--omni-m);
  flex-shrink: 0;
  transition: transform .25s;
  font-weight: 300;
  line-height: 1;
}
/* v3 uses pg-faq-arrow instead of pg-faq-icon — both supported */
.pg-faq-arrow {
  font-size: 20px;
  color: var(--omni-m);
  flex-shrink: 0;
  transition: transform .25s;
  font-weight: 300;
  line-height: 1;
}
.pg-faq-item.open .pg-faq-icon,
.pg-faq-item.open .pg-faq-arrow {
  transform: rotate(45deg);
}
.pg-faq-a {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--omni-m);
  line-height: 1.7;
  padding: 0 22px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
}
/* pg-faq-a-inner used in original file as wrapper inside pg-faq-a */
.pg-faq-a-inner {
  padding-bottom: 20px;
}
.pg-faq-item.open .pg-faq-a {
  max-height: 400px;
  padding: 0 22px;
}


/* ============================================================
   13. CTA BAND FOOTER
   Full-width dark CTA at the bottom of the pricing page.
   ============================================================ */
.pg-cta-band {
  background: var(--omni-dk);
  padding: 96px 44px;
  text-align: center;
}
.pg-cta-band-inner {
  max-width: 680px;
  margin: 0 auto;
}
.pg-cta-band h2 {
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -.04em;
  color: #f5f5f7;
  line-height: 1.1;
  margin-bottom: 20px;
}
.pg-cta-band h2 em {
  color: #7dda9a;
}
.pg-cta-band p {
  font-size: 15px;
  font-weight: 300;
  color: #86868b;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 36px;
}
.pg-cta-band-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
}
.pg-cta-micro {
  font-size: 12px;
  color: #636366;
  margin: 0 !important;
}


/* ============================================================
   14. NODE PRICING CARD
   The hardware pricing block at the top of the pricing page.
   ============================================================ */
.pg-pricing-node-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  background: var(--omni-w);
  border: .5px solid var(--omni-bd2);
  border-radius: 20px;
  overflow: hidden;
}
.pg-pricing-node-left {
  padding: 36px 28px;
  background: var(--omni-s3);
  border-right: .5px solid var(--omni-bd);
}
.pg-pricing-node-right {
  padding: 36px 32px;
}


/* ============================================================
   15. BUNDLE CARDS
   The three main pricing bundle cards (Starter / Growth / Complete).
   ============================================================ */
.pg-pricing-bundles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}
.pg-pricing-bundle {
  background: var(--omni-w);
  border: .5px solid var(--omni-bd2);
  border-radius: 20px;
  padding: 28px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.pg-pricing-bundle-featured {
  background: var(--omni-dk2);
  border-color: rgba(0,102,204,.4);
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
.pg-pricing-bundle-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--omni-bl);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap;
}
.pg-pricing-bundle-header { margin-bottom: 16px; }
.pg-pricing-bundle-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--omni-t);
  letter-spacing: -.025em;
  margin-bottom: 4px;
}
.pg-pricing-bundle-tagline {
  font-size: 12px;
  font-weight: 300;
  color: var(--omni-m);
}
.pg-pricing-bundle-price { margin-bottom: 6px; }
.pg-pricing-bundle-amount {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--omni-t);
  line-height: 1;
}
.pg-pricing-bundle-per {
  font-size: 14px;
  font-weight: 400;
  color: var(--omni-m);
}
.pg-pricing-bundle-save {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--omni-gn);
  margin-bottom: 20px;
}
.pg-pricing-bundle-modules {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.pg-pricing-bmod {
  font-size: 12.5px;
  padding: 6px 0;
  border-bottom: .5px solid var(--omni-bd);
}
.pg-pricing-bmod:last-child { border-bottom: none; }
.pg-pricing-bmod-included {
  font-weight: 500;
  color: var(--omni-t);
}
.pg-pricing-bmod-notincluded {
  font-weight: 300;
  color: var(--omni-m);
}
.pg-pricing-bundle-why {
  font-size: 12px;
  font-weight: 300;
  color: var(--omni-m);
  line-height: 1.65;
  padding: 12px 14px;
  background: var(--omni-s3);
  border-radius: 10px;
  border: .5px solid var(--omni-bd);
  margin-bottom: 16px;
  flex: 1;
}
.pg-pricing-bundle-why-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--omni-gn);
  margin-bottom: 4px;
}
.pg-pricing-bundle-btn {
  display: block;
  padding: 13px 20px;
  background: var(--omni-bl);
  color: #fff;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: opacity .2s;
  margin-bottom: 10px;
}
.pg-pricing-bundle-btn:hover { opacity: .88; }
.pg-pricing-bundle-note {
  font-size: 11px;
  font-weight: 300;
  color: var(--omni-m);
  text-align: center;
  margin: 0;
}


/* ============================================================
   16. MODULE LIST ROWS
   The individual module pricing rows in "Build Your Own".
   ============================================================ */
.pg-pricing-module-row {
  display: grid;
  grid-template-columns: 1fr 180px 140px;
  gap: 16px;
  align-items: center;
  padding: 20px 24px;
  background: var(--omni-w);
  border: .5px solid var(--omni-bd2);
  border-radius: 14px;
}
.pg-pricing-mod-info { /* wrapper used in some versions */ }
.pg-pricing-mod-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.pg-pricing-mod-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--omni-t);
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.pg-pricing-mod-desc {
  font-size: 12.5px;
  font-weight: 300;
  color: var(--omni-m);
  line-height: 1.6;
  margin: 0;
}
.pg-pricing-mod-replaces {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
}
.pg-pricing-mod-replaces-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--omni-m);
}
.pg-pricing-mod-replaces-val {
  font-size: 12px;
  font-weight: 600;
  color: #c0392b;
}
.pg-pricing-mod-price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.pg-pricing-mod-price {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--omni-t);
}
.pg-pricing-mod-learn {
  font-size: 11px;
  font-weight: 600;
  color: var(--omni-bl);
  text-decoration: none;
}
.pg-pricing-mod-learn:hover { text-decoration: underline; }


/* ============================================================
   17. ADD-ON CARDS
   The optional service cards (Backup, Shield, Expand, Onboarding Plus).
   ============================================================ */
.pg-pricing-addon-card {
  background: var(--omni-w);
  border: .5px solid var(--omni-bd2);
  border-radius: 18px;
  padding: 28px 24px;
}
.pg-pricing-addon-icon {
  font-size: 24px;
  margin-bottom: 14px;
}
.pg-pricing-addon-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.pg-pricing-addon-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--omni-t);
  letter-spacing: -.02em;
}
.pg-pricing-addon-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--omni-t);
  letter-spacing: -.03em;
  white-space: nowrap;
}
.pg-pricing-addon-price span {
  font-size: 12px;
  font-weight: 400;
  color: var(--omni-m);
}
.pg-pricing-addon-desc {
  font-size: 13px;
  font-weight: 300;
  color: var(--omni-m);
  line-height: 1.68;
  margin: 0 0 16px;
}
.pg-pricing-addon-includes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.pg-pricing-addon-item {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--omni-t);
}
.pg-pricing-addon-why {
  font-size: 11.5px;
  font-weight: 300;
  color: var(--omni-m);
  line-height: 1.6;
  padding: 10px 14px;
  background: var(--omni-s3);
  border-radius: 8px;
  border: .5px solid var(--omni-bd);
  font-style: italic;
}


/* ============================================================
   18. COMPETITOR COMPARISON TABLE
   Side-by-side feature comparison grid.
   ============================================================ */
.pg-pricing-comp-table {
  border: .5px solid var(--omni-bd2);
  border-radius: 18px;
  overflow: hidden;
}
.pg-pricing-comp-row {
  display: grid;
  grid-template-columns: 1fr repeat(3, 160px);
  border-bottom: .5px solid var(--omni-bd);
}
.pg-pricing-comp-row:last-child { border-bottom: none; }
.pg-pricing-comp-header { background: var(--omni-s3); }
.pg-pricing-comp-feature {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 400;
  color: var(--omni-m);
  display: flex;
  align-items: center;
}
.pg-pricing-comp-cell {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 400;
  color: var(--omni-m);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: .5px solid var(--omni-bd);
}
.pg-pricing-comp-cell-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--omni-t);
  flex-direction: column;
  gap: 2px;
}
.pg-pricing-comp-cell-header span {
  font-size: 11px;
  font-weight: 400;
  color: var(--omni-m);
}
.pg-pricing-comp-cell-featured {
  background: var(--omni-bll);
  border-left-color: rgba(0,102,204,.2);
  border-right: .5px solid rgba(0,102,204,.2);
}
.pg-pricing-comp-yes { color: var(--omni-gn); font-weight: 600; }
.pg-pricing-comp-no  { color: var(--omni-m);  font-weight: 300; }
.pg-pricing-comp-divider {
  padding: 8px 20px;
  background: var(--omni-s3);
  border-bottom: .5px solid var(--omni-bd);
  grid-column: 1 / -1;
}
.pg-pricing-comp-divider span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--omni-m);
}
.pg-pricing-comp-cta-row { background: var(--omni-s3); }
.pg-pricing-comp-btn {
  display: block;
  padding: 10px 18px;
  background: var(--omni-bl);
  color: #fff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: opacity .2s;
}
.pg-pricing-comp-btn:hover { opacity: .88; }
.pg-pricing-comp-btn-featured { box-shadow: 0 4px 14px rgba(0,102,204,.25); }


/* ============================================================
   19. USAGE TIER TABLES
   Omni Care / Calls / Ads / Intel volume tiers.
   ============================================================ */
.pg-usage-module-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 14px 20px;
  background: var(--omni-s3);
  border-radius: 12px 12px 0 0;
  border: .5px solid var(--omni-bd2);
  border-bottom: none;
}
.pg-usage-module-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 3px;
}
.pg-usage-module-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--omni-t);
  letter-spacing: -.015em;
}
.pg-usage-module-note {
  font-size: 11px;
  font-weight: 300;
  color: var(--omni-m);
  text-align: right;
  max-width: 360px;
  line-height: 1.5;
}
.pg-usage-tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: .5px solid var(--omni-bd2);
  border-top: none;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
}
.pg-usage-tier {
  padding: 20px 18px;
  border-right: .5px solid var(--omni-bd);
  background: var(--omni-w);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pg-usage-tier:last-child { border-right: none; }
.pg-usage-tier-base     { background: var(--omni-s2); }
.pg-usage-tier-unlimited {
  background: var(--omni-gnl);
  border-right: none;
}
.pg-usage-tier-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--omni-gn);
  margin-bottom: 4px;
}
.pg-usage-tier-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--omni-t);
  letter-spacing: -.01em;
}
.pg-usage-tier-qty {
  font-size: 20px;
  font-weight: 700;
  color: var(--omni-t);
  letter-spacing: -.03em;
  line-height: 1.1;
}
.pg-usage-tier-qty span {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--omni-m);
  letter-spacing: 0;
}
.pg-usage-tier-daily {
  font-size: 11px;
  font-weight: 300;
  color: var(--omni-m);
  margin-bottom: 4px;
}
.pg-usage-tier-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--omni-t);
  letter-spacing: -.02em;
  padding: 8px 0;
  border-top: .5px solid var(--omni-bd);
  border-bottom: .5px solid var(--omni-bd);
  margin: 4px 0;
}
.pg-usage-tier-price span {
  font-size: 11px;
  font-weight: 400;
  color: var(--omni-m);
}
.pg-usage-tier-price-included {
  color: var(--omni-gn);
  font-size: 14px;
}
.pg-usage-tier-fit {
  font-size: 11.5px;
  font-weight: 300;
  color: var(--omni-m);
  line-height: 1.55;
}


/* ============================================================
   20. TOKEN CREDIT CARDS
   Omni Visuals token tier cards.
   ============================================================ */
.pg-pricing-tokens {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: start;
}
.pg-token-card {
  background: var(--omni-w);
  border: .5px solid var(--omni-bd2);
  border-radius: 18px;
  padding: 24px 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pg-token-card-featured {
  background: var(--omni-dk2);
  border-color: rgba(0,102,204,.4);
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  transform: scale(1.02);
}
.pg-token-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--omni-bl);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
.pg-token-tier {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--omni-m);
  margin-bottom: 8px;
}
.pg-token-amount {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--omni-t);
  line-height: 1;
}
.pg-token-unit {
  font-size: 11px;
  font-weight: 300;
  color: var(--omni-m);
  margin-top: 3px;
  margin-bottom: 14px;
}
.pg-token-price {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--omni-t);
  margin-bottom: 16px;
}
.pg-token-price span {
  font-size: 13px;
  font-weight: 400;
  color: var(--omni-m);
}
.pg-token-equiv {
  background: var(--omni-s3);
  border: .5px solid var(--omni-bd);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pg-token-equiv-head {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--omni-m);
  margin-bottom: 4px;
}
.pg-token-equiv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pg-token-res  { font-size: 12px; font-weight: 400; color: var(--omni-t); }
.pg-token-count { font-size: 12px; font-weight: 700; color: var(--omni-gn); }
.pg-token-best {
  font-size: 11.5px;
  font-weight: 300;
  color: var(--omni-m);
  line-height: 1.6;
  padding: 10px 12px;
  background: var(--omni-s3);
  border: .5px solid var(--omni-bd);
  border-radius: 8px;
  font-style: italic;
}


/* ============================================================
   21. ROI CALCULATOR
   The setup scope / ROI pricing table section.
   ============================================================ */
.pg-roi-table {
  border: .5px solid var(--omni-bd2);
  border-radius: 14px;
  overflow: hidden;
}
.pg-roi-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: .5px solid var(--omni-bd);
}
.pg-roi-row:last-child { border-bottom: none; }
.pg-roi-row-header { background: var(--omni-s3); }
.pg-roi-row-body   { background: var(--omni-w); }
.pg-roi-label {
  font-size: 13px;
  font-weight: 300;
  color: var(--omni-m);
  line-height: 1.55;
}
.pg-roi-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--omni-t);
  white-space: nowrap;
}


/* ============================================================
   22. ADD-ONS GRID (pg-gsc-matrix)
   Three-column grid used for the optional add-on service cards.
   ============================================================ */
.pg-gsc-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}


/* ============================================================
   23. DATA SOVEREIGNTY DARK SECTION — NEW IN V3
   Full-black section used for the cloud data warning block.
   ============================================================ */
/* pg-sec-dk is already defined in Section 3 above */

/* The six data exposure cells inside pg-sec-dk are built with
   inline styles in the HTML — no extra classes needed. */


/* ============================================================
   24. LOGO STRIP SCROLL ANIMATION — NEW IN V3
   Infinite-scrolling integration logos strip.
   ============================================================ */
.logo-pill {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--omni-t);
  background: var(--omni-w);
  border: .5px solid var(--omni-bd2);
  border-radius: 18px;
  white-space: nowrap;
  margin-right: 8px;
  flex-shrink: 0;
}
.logo-pill-divider {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--omni-m);
  background: var(--omni-s3);
  border: .5px solid var(--omni-bd);
  border-radius: 18px;
  white-space: nowrap;
  margin-right: 24px;
  flex-shrink: 0;
}
@keyframes scroll-logos {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* Pause if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  #logo-track { animation: none; }
}


/* ============================================================
   25. DISCOUNT LADDER
   The 1-2 / 3-4 / 5-6 / 7+ module discount progression display.
   ============================================================ */
.pg-pricing-discount-ladder {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.pg-pricing-discount-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 24px;
  background: var(--omni-w);
  border: .5px solid var(--omni-bd2);
  border-radius: 14px;
  min-width: 100px;
}
.pg-pricing-discount-step-active {
  border-color: rgba(0,102,204,.25);
}
.pg-pricing-discount-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--omni-t);
  letter-spacing: -.03em;
}
.pg-pricing-discount-label {
  font-size: 11px;
  font-weight: 300;
  color: var(--omni-m);
  margin-bottom: 6px;
}
.pg-pricing-discount-save {
  font-size: 12px;
  font-weight: 700;
  color: var(--omni-m);
}
.pg-pricing-discount-arrow {
  font-size: 18px;
  color: var(--omni-m);
}


/* ============================================================
   26. RESPONSIVE BREAKPOINTS
   All breakpoints for the pricing page in one place.
   ============================================================ */

/* Tablet — 900px */
@media (max-width: 900px) {

  /* Layout */
  .pg-sec-dk { padding: 60px 24px; }
  .pg-hero    { padding: 64px 24px 52px; }

  /* Metrics */
  .pg-metrics { grid-template-columns: repeat(2, 1fr); }

  /* Bundles */
  .pg-pricing-bundles { grid-template-columns: 1fr; }
  .pg-pricing-bundle-featured { transform: none; }

  /* Node card */
  .pg-pricing-node-card { grid-template-columns: 1fr; }
  .pg-pricing-node-left {
    border-right: none;
    border-bottom: .5px solid var(--omni-bd);
  }

  /* Module rows */
  .pg-pricing-module-row { grid-template-columns: 1fr; gap: 10px; }
  .pg-pricing-mod-replaces { text-align: left; }
  .pg-pricing-mod-price-col { flex-direction: row; align-items: center; gap: 12px; }

  /* Comparison table — hide 3rd column on tablet */
  .pg-pricing-comp-row { grid-template-columns: 1fr repeat(2, 110px); }
  .pg-pricing-comp-cell:last-child { display: none; }
  .pg-pricing-comp-feature { font-size: 12px; padding: 10px 12px; }
  .pg-pricing-comp-cell    { padding: 10px 8px; font-size: 11px; }

  /* Usage tiers */
  .pg-usage-tier-grid { grid-template-columns: repeat(2, 1fr); }
  .pg-usage-tier { border-bottom: .5px solid var(--omni-bd); }
  .pg-usage-tier:nth-child(2n) { border-right: none; }
  .pg-usage-module-note { text-align: left; }

  /* Token cards */
  .pg-pricing-tokens { grid-template-columns: repeat(2, 1fr); }
  .pg-token-card-featured { transform: none; }

  /* Add-ons grid */
  .pg-gsc-matrix { grid-template-columns: 1fr; }

  /* Logo strip */
  #logo-track { animation-duration: 28s; }
}

/* Mobile — 680px */
@media (max-width: 680px) {
  /* Comparison table — allow horizontal scroll */
  .pg-pricing-comp-table { overflow-x: auto; }
  .pg-pricing-comp-row   { min-width: 420px; }

  /* CTA band */
  .pg-cta-band { padding: 64px 24px; }
  .pg-cta-band-btns { flex-direction: column; align-items: center; }
}

/* Small mobile — 560px */
@media (max-width: 560px) {
  /* Usage tiers — single column */
  .pg-usage-tier-grid { grid-template-columns: 1fr; }
  .pg-usage-tier { border-right: none; }

  /* Token cards — single column */
  .pg-pricing-tokens { grid-template-columns: 1fr; }

  /* Discount ladder */
  .pg-pricing-discount-ladder { flex-direction: column; }
  .pg-pricing-discount-arrow  { transform: rotate(90deg); }

  /* Logo strip */
  #logo-track { animation-duration: 22s; }
}
/* =============================================================
   OMNI PRICING — MOBILE OVERRIDES
   Add this file AFTER the existing <style> block in the page.
   These rules fix layout issues at tablet, mobile, and small
   mobile breakpoints that were not resolved in the base styles.
   ============================================================= */

/* ──────────────────────────────────────────────────────────────
   TABLET (≤900px)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* ── Agency packages section padding ── */
  #packages { padding: 64px 24px !important; }

  /* ── Full bundles section padding ── */
  #bundles { padding: 64px 24px !important; }

  /* ── Data exposure section padding ── */
  .pg-sec-dk { padding: 64px 24px !important; }

  /* ── Value anchor section ── */
  .pg-sec-light { padding: 64px 24px !important; }

  /* ── Node section ── */
  .pg-sec-soft { padding: 64px 24px !important; }

  /* ── Bundles: 3-col → 1-col at tablet, remove scale ── */
  .pg-pricing-bundles {
    grid-template-columns: 1fr !important;
    max-width: 540px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ── Remove scale transform on featured bundle ── */
  .pg-pricing-bundle-featured {
    transform: none !important;
    border-width: 1.5px !important;
  }

  /* ── Agency grid: 3-col → 1-col at tablet ── */
  .omni-agency-grid {
    grid-template-columns: 1fr !important;
    max-width: 540px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ── Add-ons: 3-col → 1-col at tablet ── */
  .pg-gsc-matrix {
    grid-template-columns: 1fr !important;
    max-width: 540px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ── Data grid: 3-col → 2-col (already in base, reinforcing) ── */
  .omni-data-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Metrics: 4-col → 2-col ── */
  .pg-metrics {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Compare teaser: stack vertically ── */
  .omni-compare-teaser {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 28px 24px !important;
  }

  .omni-compare-teaser > div:last-child {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ── Comparison table: 2-col, hide Viktor ── */
  .pg-pricing-comp-row {
    grid-template-columns: 1fr repeat(2, 110px) !important;
  }

  .pg-pricing-comp-cell:last-child {
    display: none !important;
  }

}


/* ──────────────────────────────────────────────────────────────
   MOBILE (≤680px)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {

  /* ── Section padding: tighter ── */
  #packages,
  #bundles,
  .pg-sec-dk,
  .pg-sec-light,
  .pg-sec-soft {
    padding: 48px 16px !important;
  }

  /* ── Hero ── */
  .pg-hero { padding: 44px 16px 36px !important; }
  .pg-h1 { font-size: clamp(1.7rem, 6vw, 2.4rem) !important; }
  .pg-sub { font-size: 15px !important; }
  .pg-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .pg-cta-row .b-bl,
  .pg-cta-row .b-out,
  .pg-cta-row .b-wout {
    text-align: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .pg-trust-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* ── Data exposure: 2-col → 1-col ── */
  .omni-data-grid {
    grid-template-columns: 1fr !important;
    border-radius: 16px !important;
    gap: 1px !important;
  }

  /* ── Node: inner padding ── */
  .omni-node-body { padding: 20px 16px !important; }
  .omni-node-checklist { padding: 16px !important; }
  .omni-node-price-row {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 20px 16px !important;
  }
  .omni-node-price-row > div:last-child {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ── Callouts inside Node: 2-col → 1-col ── */
  .omni-node-callouts {
    grid-template-columns: 1fr !important;
  }

  /* ── Agency packages: ensure single column, full-width cards ── */
  .omni-agency-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  /* ── Agency price row: stack price + comparison vertically ── */
  .omni-agency-price-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .omni-agency-price-row > div:last-child {
    text-align: left !important;
  }

  /* ── Agency card inner padding ── */
  .omni-agency-grid > div > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ── Bundles: single column, full width ── */
  .pg-pricing-bundles {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
  .pg-pricing-bundle {
    padding: 20px 16px !important;
  }
  .pg-pricing-bundle-featured {
    transform: none !important;
  }

  /* ── Metrics: 2-col → 1-col ── */
  .pg-metrics {
    grid-template-columns: 1fr !important;
  }

  /* ── Add-ons: single column, full width ── */
  .pg-gsc-matrix {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
  .pg-pricing-addon-card {
    padding: 20px 16px !important;
  }

  /* ── Comparison table: horizontal scroll ── */
  .pg-pricing-comp-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .pg-pricing-comp-row {
    min-width: 420px !important;
  }
  .pg-pricing-comp-feature {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }
  .pg-pricing-comp-cell {
    padding: 10px 8px !important;
    font-size: 11px !important;
  }

  /* ── Compare teaser ── */
  .omni-compare-teaser {
    flex-direction: column !important;
    padding: 20px 16px !important;
    gap: 16px !important;
  }
  .omni-compare-teaser > div:first-child,
  .omni-compare-teaser > div:last-child {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ── Enterprise bar ── */
  .omni-enterprise-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 24px 16px !important;
  }
  .omni-enterprise-bar a {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* ── Sovereignty card ── */
  .omni-sovereignty-card {
    padding: 24px 16px !important;
    text-align: left !important;
  }
  .omni-sovereignty-card > div:nth-child(2) {
    font-size: 1.15rem !important;
  }

  /* ── CTA footer ── */
  .omni-cta-footer {
    padding: 52px 16px !important;
  }
  .pg-cta-row.omni-cta-footer-btns {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* ── Insight callout ── */
  .pg-insight-callout {
    padding: 14px 16px !important;
  }

  /* ── Section headings ── */
  .pg-h2 { font-size: clamp(1.4rem, 5vw, 2rem) !important; }
  .pg-lbl { font-size: 10px !important; }

  /* ── FAQ ── */
  .pg-faq-list { max-width: 100% !important; }
  .pg-faq-q {
    padding: 14px 16px !important;
    font-size: 13px !important;
  }
  .pg-faq-a { padding: 0 16px !important; }
  .pg-faq-item.open .pg-faq-a {
    padding: 0 16px !important;
    max-height: 600px !important;
  }

  /* ── Logo strip ── */
  #logo-track {
    animation-duration: 20s !important;
    gap: 0 !important;
  }

  /* ── Logo strip fade edges ── */
  .logo-strip-fade-left,
  .logo-strip-fade-right {
    width: 40px !important;
  }
}


/* ──────────────────────────────────────────────────────────────
   SMALL MOBILE (≤420px)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 420px) {

  /* ── Section padding: minimal ── */
  #packages,
  #bundles,
  .pg-sec-dk,
  .pg-sec-light,
  .pg-sec-soft {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ── Hero ── */
  .pg-hero { padding: 36px 12px 28px !important; }
  .pg-h1 { font-size: clamp(1.5rem, 7vw, 2rem) !important; }

  /* ── Node activation price number ── */
  .omni-node-price-num { font-size: 2.2rem !important; }

  /* ── Agency package price ── */
  .omni-agency-price-row .pg-pricing-agency-price,
  .omni-agency-price-row [style*="2.2rem"] {
    font-size: 1.9rem !important;
  }

  /* ── Bundle price ── */
  .pg-pricing-bundle-amount { font-size: 2.2rem !important; }
  .pg-pricing-bundle { padding: 18px 12px !important; }

  /* ── Add-on card ── */
  .pg-pricing-addon-card { padding: 18px 12px !important; }

  /* ── Bundle footnote ── */
  .pg-pricing-bundle-note { font-size: 10px !important; }

  /* ── Trust strip ── */
  .pg-trust-icon { font-size: 13px !important; }
  .pg-trust-item { font-size: 12px !important; }

  /* ── Data exposure cards: tighter padding ── */
  .omni-data-grid > div { padding: 20px 14px !important; }

  /* ── Sovereignty card ── */
  .omni-sovereignty-card {
    padding: 20px 12px !important;
    border-radius: 14px !important;
  }
  .omni-sovereignty-card > div:nth-child(2) {
    font-size: 1rem !important;
  }

  /* ── CTA footer ── */
  .omni-cta-footer { padding: 44px 12px !important; }

  /* ── FAQ ── */
  .pg-faq-q { font-size: 12px !important; }

  /* ── Enterprise bar ── */
  .omni-enterprise-bar { padding: 20px 12px !important; }
}
/* =============================================================
   OMNI VS. PAGES — SHARED MOBILE STYLESHEET
   omni-vs-shared-mobile.css

   Applies to all four comparison pages:
     omni-vs-cloud-ai.liquid
     omni-vs-lindy.liquid
     omni-vs-viktor.liquid
     omni-vs-relay.liquid

   Load this file once in your theme (after base styles).
   Each page file also inlines these rules so pages work
   standalone. Include this in your Shopify theme assets
   and reference it in theme.liquid or your page template.
   ============================================================= */


/* ──────────────────────────────────────────────────────────────
   SHARED COMPONENT RESETS
   Applies to all comparison pages regardless of breakpoint
   ────────────────────────────────────────────────────────────── */

/* Comparison table base — always allow horizontal scroll */
.pg-pricing-comp-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ──────────────────────────────────────────────────────────────
   TABLET (≤900px)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* Section padding */
  .pg-hero            { padding: 56px 24px 44px !important; }
  .pg-sec-soft,
  .pg-sec-light,
  .pg-sec-dk          { padding-left: 24px !important; padding-right: 24px !important; }

  /* Dark CTA sections (inline style — override with class where possible) */
  [style*="background:var(--omni-dk)"][style*="padding:80px 44px"] {
    padding: 64px 24px !important;
  }

  /* 3-col dark data grid: 3 → 2 col */
  .omni-vs-data-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 3-col reasons/features grid: 3 → 2 col */
  .omni-vs-reasons-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Comparison table: keep 2-col, constrain */
  .pg-pricing-comp-row {
    grid-template-columns: 1fr repeat(2, 130px) !important;
  }
  .pg-pricing-comp-feature {
    font-size: 12px !important;
  }
}


/* ──────────────────────────────────────────────────────────────
   MOBILE (≤680px)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {

  /* ── Section padding ── */
  .pg-hero            { padding: 44px 16px 36px !important; }
  .pg-sec-soft,
  .pg-sec-light,
  .pg-sec-dk          { padding: 48px 16px !important; }

  /* ── Hero ── */
  .pg-h1              { font-size: clamp(1.7rem, 6vw, 2.4rem) !important; }
  .pg-sub             { font-size: 15px !important; }

  /* CTA row: stack buttons vertically, full width */
  .pg-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .pg-cta-row a {
    text-align: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Section headings ── */
  .pg-h2              { font-size: clamp(1.4rem, 5vw, 2rem) !important; }
  .pg-lbl             { font-size: 10px !important; }

  /* ── 3-col dark data grid (cloud-ai page): 3 → 1 col ── */
  .omni-vs-data-grid {
    grid-template-columns: 1fr !important;
    border-radius: 16px !important;
    gap: 1px !important;
  }

  /* ── 3-col reasons/features grid (cloud-ai page): 3 → 1 col ── */
  .omni-vs-reasons-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── 2-col verdict/comparison grids: 2 → 1 col ── */
  .omni-vs-2col {
    grid-template-columns: 1fr !important;
  }

  /* ── Builder vs appliance split panel (relay page) ── */
  .omni-vs-split-panel {
    grid-template-columns: 1fr !important;
    border-radius: 16px !important;
    gap: 1px !important;
  }
  .omni-vs-split-panel > div {
    border-radius: 0 !important;
  }

  /* ── Reactive vs proactive columns (viktor page) ── */
  .omni-vs-proactive-cols {
    grid-template-columns: 1fr !important;
  }

  /* ── Comparison table: scroll with min-width ── */
  .pg-pricing-comp-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .pg-pricing-comp-row  { min-width: 380px !important; }
  .pg-pricing-comp-feature {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }
  .pg-pricing-comp-cell {
    padding: 10px 8px !important;
    font-size: 11px !important;
  }

  /* ── Insight callout ── */
  .pg-insight-callout   { padding: 14px 16px !important; }

  /* ── Sovereignty card ── */
  .omni-vs-sovereignty  {
    padding: 24px 16px !important;
    text-align: left !important;
  }

  /* ── Also-comparing pill strip ── */
  .omni-vs-pill-strip {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .omni-vs-pill-strip a {
    text-align: center !important;
  }
}


/* ──────────────────────────────────────────────────────────────
   SMALL MOBILE (≤420px)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 420px) {

  .pg-hero            { padding: 36px 12px 28px !important; }
  .pg-sec-soft,
  .pg-sec-light,
  .pg-sec-dk          { padding-left: 12px !important; padding-right: 12px !important; }

  .pg-h1              { font-size: clamp(1.5rem, 7vw, 2rem) !important; }

  /* Dark data grid cells: tighter padding */
  .omni-vs-data-grid > div { padding: 20px 14px !important; }

  /* Verdict cards: tighter */
  .omni-vs-2col > div { padding: 20px 14px !important; }

  /* Split panel cells */
  .omni-vs-split-panel > div { padding: 24px 14px !important; }

  /* Sovereignty card */
  .omni-vs-sovereignty {
    padding: 20px 12px !important;
    border-radius: 14px !important;
  }
}
/* =============================================================
   OMNI VS. PAGES — SHARED MOBILE STYLESHEET
   omni-vs-shared-mobile.css

   Applies to all four comparison pages:
     omni-vs-cloud-ai.liquid
     omni-vs-lindy.liquid
     omni-vs-viktor.liquid
     omni-vs-relay.liquid

   Load this file once in your theme (after base styles).
   Each page file also inlines these rules so pages work
   standalone. Include this in your Shopify theme assets
   and reference it in theme.liquid or your page template.
   ============================================================= */


/* ──────────────────────────────────────────────────────────────
   SHARED COMPONENT RESETS
   Applies to all comparison pages regardless of breakpoint
   ────────────────────────────────────────────────────────────── */

/* Comparison table base — always allow horizontal scroll */
.pg-pricing-comp-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ──────────────────────────────────────────────────────────────
   TABLET (≤900px)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* Section padding */
  .pg-hero            { padding: 56px 24px 44px !important; }
  .pg-sec-soft,
  .pg-sec-light,
  .pg-sec-dk          { padding-left: 24px !important; padding-right: 24px !important; }

  /* Dark CTA sections (inline style — override with class where possible) */
  [style*="background:var(--omni-dk)"][style*="padding:80px 44px"] {
    padding: 64px 24px !important;
  }

  /* 3-col dark data grid: 3 → 2 col */
  .omni-vs-data-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 3-col reasons/features grid: 3 → 2 col */
  .omni-vs-reasons-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Comparison table: keep 2-col, constrain */
  .pg-pricing-comp-row {
    grid-template-columns: 1fr repeat(2, 130px) !important;
  }
  .pg-pricing-comp-feature {
    font-size: 12px !important;
  }
}


/* ──────────────────────────────────────────────────────────────
   MOBILE (≤680px)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {

  /* ── Section padding ── */
  .pg-hero            { padding: 44px 16px 36px !important; }
  .pg-sec-soft,
  .pg-sec-light,
  .pg-sec-dk          { padding: 48px 16px !important; }

  /* ── Hero ── */
  .pg-h1              { font-size: clamp(1.7rem, 6vw, 2.4rem) !important; }
  .pg-sub             { font-size: 15px !important; }

  /* CTA row: stack buttons vertically, full width */
  .pg-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .pg-cta-row a {
    text-align: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Section headings ── */
  .pg-h2              { font-size: clamp(1.4rem, 5vw, 2rem) !important; }
  .pg-lbl             { font-size: 10px !important; }

  /* ── 3-col dark data grid (cloud-ai page): 3 → 1 col ── */
  .omni-vs-data-grid {
    grid-template-columns: 1fr !important;
    border-radius: 16px !important;
    gap: 1px !important;
  }

  /* ── 3-col reasons/features grid (cloud-ai page): 3 → 1 col ── */
  .omni-vs-reasons-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── 2-col verdict/comparison grids: 2 → 1 col ── */
  .omni-vs-2col {
    grid-template-columns: 1fr !important;
  }

  /* ── Builder vs appliance split panel (relay page) ── */
  .omni-vs-split-panel {
    grid-template-columns: 1fr !important;
    border-radius: 16px !important;
    gap: 1px !important;
  }
  .omni-vs-split-panel > div {
    border-radius: 0 !important;
  }

  /* ── Reactive vs proactive columns (viktor page) ── */
  .omni-vs-proactive-cols {
    grid-template-columns: 1fr !important;
  }

  /* ── Comparison table: scroll with min-width ── */
  .pg-pricing-comp-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .pg-pricing-comp-row  { min-width: 380px !important; }
  .pg-pricing-comp-feature {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }
  .pg-pricing-comp-cell {
    padding: 10px 8px !important;
    font-size: 11px !important;
  }

  /* ── Insight callout ── */
  .pg-insight-callout   { padding: 14px 16px !important; }

  /* ── Sovereignty card ── */
  .omni-vs-sovereignty  {
    padding: 24px 16px !important;
    text-align: left !important;
  }

  /* ── Also-comparing pill strip ── */
  .omni-vs-pill-strip {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .omni-vs-pill-strip a {
    text-align: center !important;
  }
}


/* ──────────────────────────────────────────────────────────────
   SMALL MOBILE (≤420px)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 420px) {

  .pg-hero            { padding: 36px 12px 28px !important; }
  .pg-sec-soft,
  .pg-sec-light,
  .pg-sec-dk          { padding-left: 12px !important; padding-right: 12px !important; }

  .pg-h1              { font-size: clamp(1.5rem, 7vw, 2rem) !important; }

  /* Dark data grid cells: tighter padding */
  .omni-vs-data-grid > div { padding: 20px 14px !important; }

  /* Verdict cards: tighter */
  .omni-vs-2col > div { padding: 20px 14px !important; }

  /* Split panel cells */
  .omni-vs-split-panel > div { padding: 24px 14px !important; }

  /* Sovereignty card */
  .omni-vs-sovereignty {
    padding: 20px 12px !important;
    border-radius: 14px !important;
  }
}


/* ============================================================
   COMPARISON TABLE — MOBILE CARD LAYOUT
   Applied directly in each vs. page file (not via this shared
   stylesheet) because each needs the competitor name label.

   At ≤640px the 3-column grid rows convert to stacked cards:
     [Dimension label]
     [OMNI — green left border]
     [Competitor — grey left border]

   Each file inlines this with its own competitor ::before label:
     omni-vs-lindy.html  → "Lindy AI"
     omni-vs-viktor.html → "Viktor"
     omni-vs-relay.html  → "Relay.app"
   ============================================================ */



   =========================================================== -->

<style id="omni-nav-css">

/* ============================================================
   OMNI NAV — FULL STYLESHEET
   Add to: theme assets / base.css or custom CSS file
   ============================================================ */

/* ── 1. GLOBAL NAV FONT + SIZING ── */
.header__nav a,
.site-nav a,
header nav a {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* ── 2. BOOK A DEMO BUTTON ──────────────────────────────────
   Targets the last item in the main nav list and styles it
   as a filled CTA button. Works by finding the last <a>
   inside the nav that links to /pages/book-demo.

   APPROACH A — Target by href (most reliable):
   ─────────────────────────────────────────── */
header nav a[href*="book-demo"],
.header__nav a[href*="book-demo"],
.site-nav a[href*="book-demo"],
nav li a[href*="book-demo"] {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px !important;
  background: #1d1d1f;
  color: #fff !important;
  border-radius: 980px;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  text-decoration: none !important;
  transition: background .18s ease, transform .15s ease, box-shadow .18s ease;
  white-space: nowrap;
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  /* Remove any bracket characters from Shopify link text hack */
  /* (the [[Book a Demo]] bracket trick is no longer needed) */
}

header nav a[href*="book-demo"]:hover,
.header__nav a[href*="book-demo"]:hover,
.site-nav a[href*="book-demo"]:hover,
nav li a[href*="book-demo"]:hover {
  background: #333;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  color: #fff !important;
}

/* Remove any inherited underline, border, or hover color changes */
header nav a[href*="book-demo"]::after,
header nav a[href*="book-demo"]::before {
  display: none !important;
}

/* ── 3. DROPDOWN PANEL STYLING ──────────────────────────────
   Enhances the existing Horizon dropdown to support
   two-column layout for the Intelligence dropdown.
   ─────────────────────────────────────────────────── */

/* Base dropdown improvements */
.header__dropdown,
.site-nav__dropdown,
header .dropdown {
  border-radius: 14px;
  border: .5px solid #e5e5ea;
  box-shadow: 0 8px 32px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.06);
  padding: 8px 0;
  min-width: 220px;
  background: #fff;
  animation: omni-dropdown-in .15s ease;
}

@keyframes omni-dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dropdown links */
.header__dropdown a,
.site-nav__dropdown a,
header .dropdown a {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: #1d1d1f;
  text-decoration: none;
  transition: background .12s;
  gap: 8px;
  border-radius: 8px;
  margin: 0 4px;
}

.header__dropdown a:hover,
.site-nav__dropdown a:hover,
header .dropdown a:hover {
  background: #f5f5f7;
  color: #1d1d1f;
}

/* ── 4. TWO-COLUMN INTELLIGENCE DROPDOWN ────────────────────
   The Intelligence dropdown has 10 items — too many for
   a single column. This creates a 2-column grid layout
   for dropdowns that have the data-cols="2" attribute,
   OR you can target the intelligence nav item specifically.

   ADD data-cols="2" to your Intelligence nav item in
   your theme's navigation Liquid template, OR use the
   :nth-child approach below to target it by position.
   ─────────────────────────────────────────────────── */

/* Method: data attribute on the dropdown container */
.header__dropdown[data-cols="2"],
.site-nav__dropdown[data-cols="2"] {
  min-width: 480px;
  padding: 12px;
}

.header__dropdown[data-cols="2"] ul,
.site-nav__dropdown[data-cols="2"] ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

/* Section headers inside dropdown (Modules / System) */
.omni-nav-section-head {
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6e6e73;
  grid-column: 1 / -1;    /* spans both columns */
  pointer-events: none;
  user-select: none;
}

/* Dropdown divider */
.omni-nav-divider {
  height: .5px;
  background: #e5e5ea;
  margin: 6px 12px;
  grid-column: 1 / -1;
}

/* ── 5. SOLUTIONS DROPDOWN SPECIAL STYLING ──────────────────
   Vertical cards inside Solutions dropdown with subtle
   category labels for Ecommerce and Home Services.
   ─────────────────────────────────────────────── */

.omni-nav-vertical-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-left: auto;
  flex-shrink: 0;
}

.omni-nav-vertical-chip--ecom {
  background: #e8f0fb;
  color: #0066cc;
}

.omni-nav-vertical-chip--hs {
  background: #e8f5e9;
  color: #1b5e20;
}

.omni-nav-vertical-chip--learn {
  background: #f5f5f7;
  color: #6e6e73;
}

/* ── 6. ACTIVE STATE INDICATOR ──────────────────────────────
   Underline/dot indicator for current page nav item.
   ─────────────────────────────────────────────── */
header nav li.active > a,
header nav li.current > a,
.header__nav-item--active > a {
  color: #0066cc;
  position: relative;
}

header nav li.active > a::after,
header nav li.current > a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: #0066cc;
  border-radius: 2px;
}

/* Don't show underline indicator on the Book a Demo button */
header nav a[href*="book-demo"]::after {
  display: none !important;
}

/* ── 7. MOBILE NAV ──────────────────────────────────────────
   Book a Demo button adjustments for mobile drawer.
   ─────────────────────────────────────────────── */
@media (max-width: 990px) {
  header nav a[href*="book-demo"],
  .header__nav a[href*="book-demo"],
  nav li a[href*="book-demo"] {
    display: inline-flex;
    padding: 10px 20px !important;
    margin: 8px 0;
    font-size: 14px !important;
    width: auto;
    align-self: flex-start;
  }
}

/* ── 8. PRICING LINK SUBTLE HIGHLIGHT ───────────────────────
   Makes "Pricing" slightly more prominent than other nav
   items without being as strong as Book a Demo.
   ─────────────────────────────────────────────── */
header nav a[href*="omni-pricing"],
.header__nav a[href*="omni-pricing"] {
  color: #1d1d1f;
}

/* ── 9. SOLUTIONS / INTELLIGENCE PARENT ITEMS ───────────────
   Visual indicator showing these are dropdown parents.
   ─────────────────────────────────────────────── */
.header__nav-item--has-dropdown > a::after,
.site-nav__item--has-dropdown > a::after {
  content: ' ▾';
  font-size: 10px;
  opacity: .5;
  vertical-align: middle;
}

</style>


<!-- ===========================================================
  SECTION 4 — FULL VISUAL NAV REFERENCE
  (HTML mockup showing the complete intended structure.
   This is documentation only — do not paste into Shopify.
   Use the Shopify Navigation admin + CSS above instead.)
=========================================================== -->

<!--
┌─────────────────────────────────────────────────────────────────────┐
│  OMNI                Solutions ▾   Intelligence ▾   The Node   Pricing   [Book a Demo →]  │
└─────────────────────────────────────────────────────────────────────┘

SOLUTIONS dropdown:
┌──────────────────────────────────────┐
│  🛒 For Ecommerce          [Ecom]    │
│  🔧 For Home Services      [Field]   │
│  ──────────────────────────────────  │
│  🧠 How It Learns                    │
│  🔗 Integrations (50+)               │
│  🏢 For Agencies           (soon)    │
└──────────────────────────────────────┘

INTELLIGENCE dropdown (2 columns):
┌──────────────────────────────────────────────────────┐
│  ── Intelligence Modules ────────────────────────    │
│  🎯 Omni Ads          │  💬 Omni Care               │
│  🔍 Omni Search       │  📞 Omni Calls              │
│  🕵️ Omni Intel        │  🎨 Omni Visuals            │
│  📱 Omni Presence     │  📊 Omni Analytics          │
│  ── System Features ────────────────────────────    │
│  💡 Omni Connect (!ask)  │  📈 Digest + Reports     │
└──────────────────────────────────────────────────────┘

FOOTER NAV (separate from main nav):
  How It Works  ·  Security  ·  Results  ·  Privacy  ·  Terms
  Omni vs Viktor  ·  Omni vs Lindy  ·  Omni vs Relay  ·  Omni vs Cloud AI
  OMNI Status  ·  Contact
-->


<!-- ===========================================================
  SECTION 5 — LIQUID SNIPPET FOR CUSTOM NAV
  (Optional: if you want to inject the structured nav
   via a Liquid snippet rather than the Shopify admin menu.
   Paste this into a new snippet file: snippets/omni-nav.liquid
   Then include it in your header: {% render 'omni-nav' %})
=========================================================== -->

<nav class="omni-nav" role="navigation" aria-label="Main navigation">
  <ul class="omni-nav__list">

    <!-- Solutions -->
    <li class="omni-nav__item omni-nav__item--has-dropdown">
      <button class="omni-nav__toggle" aria-expanded="false" aria-haspopup="true">
        Solutions
        <svg class="omni-nav__chevron" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
          <path d="M2 4l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      <ul class="omni-nav__dropdown" role="menu">
        <li role="none">
          <a href="/pages/ecommerce" role="menuitem" class="omni-nav__link">
            <span class="omni-nav__icon">🛒</span>
            <span class="omni-nav__label">For Ecommerce</span>
            <span class="omni-nav-vertical-chip omni-nav-vertical-chip--ecom">DTC</span>
          </a>
        </li>
        <li role="none">
          <a href="/pages/home-services" role="menuitem" class="omni-nav__link">
            <span class="omni-nav__icon">🔧</span>
            <span class="omni-nav__label">For Home Services</span>
            <span class="omni-nav-vertical-chip omni-nav-vertical-chip--hs">Field</span>
          </a>
        </li>
        <li class="omni-nav-divider" role="none" aria-hidden="true"></li>
        <li role="none">
          <a href="/pages/how-it-learns" role="menuitem" class="omni-nav__link">
            <span class="omni-nav__icon">🧠</span>
            <span class="omni-nav__label">How It Learns</span>
          </a>
        </li>
        <li role="none">
          <a href="/pages/integrations" role="menuitem" class="omni-nav__link">
            <span class="omni-nav__icon">🔗</span>
            <span class="omni-nav__label">Integrations</span>
            <span class="omni-nav-vertical-chip omni-nav-vertical-chip--learn">50+</span>
          </a>
        </li>
      </ul>
    </li>

    <!-- Intelligence -->
    <li class="omni-nav__item omni-nav__item--has-dropdown">
      <button class="omni-nav__toggle" aria-expanded="false" aria-haspopup="true">
        Intelligence
        <svg class="omni-nav__chevron" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
          <path d="M2 4l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      <ul class="omni-nav__dropdown omni-nav__dropdown--wide" role="menu">

        <!-- Section header: Modules -->
        <li class="omni-nav-section-head" role="none" aria-hidden="true">Intelligence Modules</li>

        <li role="none">
          <a href="/pages/omni-digital-advertising" role="menuitem" class="omni-nav__link">
            <span class="omni-nav__icon">🎯</span>
            <span class="omni-nav__label">Omni Ads</span>
          </a>
        </li>
        <li role="none">
          <a href="/pages/omni-search-seo-aeo-geo" role="menuitem" class="omni-nav__link">
            <span class="omni-nav__icon">🔍</span>
            <span class="omni-nav__label">Omni Search</span>
          </a>
        </li>
        <li role="none">
          <a href="/pages/omni-intel" role="menuitem" class="omni-nav__link">
            <span class="omni-nav__icon">🕵️</span>
            <span class="omni-nav__label">Omni Intel</span>
          </a>
        </li>
        <li role="none">
          <a href="/pages/omni-presence" role="menuitem" class="omni-nav__link">
            <span class="omni-nav__icon">📱</span>
            <span class="omni-nav__label">Omni Presence</span>
          </a>
        </li>
        <li role="none">
          <a href="/pages/omni-analytics" role="menuitem" class="omni-nav__link">
            <span class="omni-nav__icon">📊</span>
            <span class="omni-nav__label">Omni Analytics</span>
          </a>
        </li>
        <li role="none">
          <a href="/pages/omni-care" role="menuitem" class="omni-nav__link">
            <span class="omni-nav__icon">💬</span>
            <span class="omni-nav__label">Omni Care</span>
          </a>
        </li>
        <li role="none">
          <a href="/pages/omni-calls" role="menuitem" class="omni-nav__link">
            <span class="omni-nav__icon">📞</span>
            <span class="omni-nav__label">Omni Calls</span>
          </a>
        </li>
        <li role="none">
          <a href="/pages/omni-visuals" role="menuitem" class="omni-nav__link">
            <span class="omni-nav__icon">🎨</span>
            <span class="omni-nav__label">Omni Visuals</span>
          </a>
        </li>

        <!-- Section header: System Features -->
        <li class="omni-nav-divider" role="none" aria-hidden="true"></li>
        <li class="omni-nav-section-head" role="none" aria-hidden="true">System Features</li>

        <li role="none">
          <a href="/pages/omni-connect" role="menuitem" class="omni-nav__link">
            <span class="omni-nav__icon">💡</span>
            <span class="omni-nav__label">Omni Connect <span style="font-size:10px;font-weight:600;color:#6e6e73;font-style:normal">(!ask)</span></span>
          </a>
        </li>
        <li role="none">
          <a href="/pages/omni-reports" role="menuitem" class="omni-nav__link">
            <span class="omni-nav__icon">📈</span>
            <span class="omni-nav__label">Digest + Dashboard</span>
          </a>
        </li>

      </ul>
    </li>

    <!-- The Node -->
    <li class="omni-nav__item">
      <a href="/pages/the-node" class="omni-nav__link omni-nav__link--top">The Node</a>
    </li>

    <!-- Pricing -->
    <li class="omni-nav__item">
      <a href="/pages/omni-pricing" class="omni-nav__link omni-nav__link--top">Pricing</a>
    </li>

    <!-- Book a Demo — CTA button -->
    <li class="omni-nav__item omni-nav__item--cta">
      <a href="/pages/book-demo" class="omni-nav__cta-btn">
        Book a Demo <span aria-hidden="true">→</span>
      </a>
    </li>

  </ul>
</nav>


<!-- ===========================================================
  SECTION 6 — FULL OMNI NAV CSS (for the Liquid snippet above)
  Add to theme stylesheet if using the Liquid snippet approach.
  If using Shopify admin menus + the CSS in Section 3 only,
  you don't need this block.
=========================================================== -->

<style id="omni-nav-full-css">

/* ── NAV WRAPPER ── */
.omni-nav {
  display: flex;
  align-items: center;
}

.omni-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── TOP-LEVEL ITEMS ── */
.omni-nav__item {
  position: relative;
}

.omni-nav__link--top,
.omni-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1d1d1f;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 8px;
  transition: background .12s, color .12s;
  letter-spacing: -.01em;
  white-space: nowrap;
  font-family: inherit;
}

.omni-nav__link--top:hover,
.omni-nav__toggle:hover {
  background: #f5f5f7;
  color: #1d1d1f;
}

/* Chevron rotation on open */
.omni-nav__item--has-dropdown .omni-nav__chevron {
  transition: transform .18s ease;
  flex-shrink: 0;
  opacity: .45;
}
.omni-nav__item--has-dropdown[data-open] .omni-nav__chevron,
.omni-nav__item--has-dropdown .omni-nav__toggle[aria-expanded="true"] .omni-nav__chevron {
  transform: rotate(180deg);
  opacity: .7;
}

/* ── BOOK A DEMO BUTTON ── */
.omni-nav__item--cta {
  margin-left: 8px;
}

.omni-nav__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: #1d1d1f;
  color: #fff !important;
  border-radius: 980px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none !important;
  transition: background .18s, transform .15s, box-shadow .18s;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
  border: none;
}

.omni-nav__cta-btn:hover {
  background: #333;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  color: #fff !important;
}

.omni-nav__cta-btn:active {
  transform: translateY(0);
}

/* ── DROPDOWN PANEL ── */
.omni-nav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: .5px solid #e5e5ea;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.06);
  padding: 8px;
  list-style: none;
  margin: 0;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease;
}

/* Wide (2-column) dropdown for Intelligence */
.omni-nav__dropdown--wide {
  min-width: 420px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 12px;
}

/* Open state */
.omni-nav__item--has-dropdown .omni-nav__toggle[aria-expanded="true"] + .omni-nav__dropdown,
.omni-nav__item--has-dropdown:hover .omni-nav__dropdown,
.omni-nav__item--has-dropdown:focus-within .omni-nav__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Section headers in dropdown */
.omni-nav-section-head {
  padding: 6px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #a1a1a6;
  grid-column: 1 / -1;
  pointer-events: none;
  user-select: none;
  margin-top: 2px;
}

/* Divider */
.omni-nav-divider {
  height: .5px;
  background: #e5e5ea;
  margin: 6px 0;
  grid-column: 1 / -1;
  pointer-events: none;
}

/* Dropdown links */
.omni-nav__dropdown .omni-nav__link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #1d1d1f;
  text-decoration: none;
  border-radius: 9px;
  transition: background .1s;
  white-space: nowrap;
}

.omni-nav__dropdown .omni-nav__link:hover {
  background: #f5f5f7;
}

.omni-nav__icon {
  font-size: 15px;
  flex-shrink: 0;
  line-height: 1;
}

.omni-nav__label {
  flex: 1;
  min-width: 0;
}

/* ── VERTICAL CHIPS ── */
.omni-nav-vertical-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-left: auto;
  flex-shrink: 0;
}
.omni-nav-vertical-chip--ecom  { background: #e8f0fb; color: #0066cc; }
.omni-nav-vertical-chip--hs    { background: #e8f5e9; color: #1b5e20; }
.omni-nav-vertical-chip--learn { background: #f5f5f7; color: #8a8a8e; }

/* ── MOBILE ── */
@media (max-width: 990px) {
  .omni-nav {
    display: none; /* use Shopify's built-in mobile nav */
  }

  /* Override for mobile: Book a Demo as button in Shopify's
     mobile drawer. Targets by href — works without Liquid. */
  .mobile-nav__link[href*="book-demo"],
  .header__drawer a[href*="book-demo"],
  .mobile-menu a[href*="book-demo"] {
    display: inline-flex;
    margin: 8px 16px;
    padding: 11px 22px !important;
    background: #1d1d1f;
    color: #fff !important;
    border-radius: 980px;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    width: calc(100% - 32px);
    justify-content: center;
  }
}

/* ── KEYBOARD NAVIGATION ACCESSIBILITY ── */
.omni-nav__toggle:focus-visible,
.omni-nav__link--top:focus-visible,
.omni-nav__cta-btn:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

.omni-nav__dropdown .omni-nav__link:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: -2px;
  background: #f5f5f7;
}

/* ============================================================
   OMNI HEADER — Horizon 3.x / 4.x Exact Fix
   Add to: Online Store → Themes → Customize → 
           Theme settings → Custom CSS
   (or append to assets/base.css if you prefer file-based)
   ============================================================ */


/* ── 1. BOOK A DEMO — BLACK PILL BUTTON ─────────────────────
   Horizon 3/4 renders nav links inside .header__menu-item
   inside a <details> / <summary> structure for dropdowns,
   and plain <li><a> for top-level links.
   We target by href — works regardless of structure.
   ────────────────────────────────────────────────────────── */

.header__menu-item[href*="book-demo"],
.header__inline-menu a[href*="book-demo"],
header .list-menu__item a[href*="book-demo"],
header a[href*="book-demo"] {
  background: #1d1d1f !important;
  color: #ffffff !important;
  padding: 9px 20px !important;
  border-radius: 980px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.18) !important;
  transition: background .18s, transform .15s, box-shadow .18s !important;
  border: none !important;
  line-height: 1 !important;
  /* Removes Horizon's default link underline animation */
  background-image: none !important;
  background-size: 0 !important;
}

.header__menu-item[href*="book-demo"]:hover,
header a[href*="book-demo"]:hover {
  background: #2d2d2f !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.22) !important;
  text-decoration: none !important;
}

/* Horizon 3/4 uses a pseudo-element underline on nav links.
   Kill it specifically on the demo button. */
header a[href*="book-demo"]::after,
header a[href*="book-demo"]::before {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  content: none !important;
  background: none !important;
}

/* Space the button away from "Pricing" to its left */
header .list-menu__item:has(a[href*="book-demo"]),
header li:has(a[href*="book-demo"]) {
  margin-left: 8px !important;
}


/* ── 2. DROPDOWN PANEL POLISH ────────────────────────────────
   Horizon 3/4 uses <details> + <summary> for dropdowns.
   The panel is a <ul class="list-menu list-menu--disclosure">
   that appears when <details> is [open].
   ────────────────────────────────────────────────────────── */

/* The dropdown panel itself */
.header__submenu .list-menu,
details[open] > .list-menu,
details[open] .list-menu--disclosure,
.header__inline-menu details[open] ul,
.disclosure__list-item details[open] > ul {
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06) !important;
  border: .5px solid #e5e5ea !important;
  padding: 6px !important;
  background: #fff !important;
  overflow: hidden !important;
  min-width: 210px !important;
  /* Smooth entrance */
  animation: omni-dd-in .14s ease !important;
}

@keyframes omni-dd-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Individual dropdown links */
.header__submenu .list-menu a,
details[open] > .list-menu a,
details[open] .list-menu--disclosure a,
.disclosure__list-item details[open] a {
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: background .1s !important;
  /* Remove Horizon underline animation on dropdown links */
  background-image: none !important;
}

.header__submenu .list-menu a:hover,
details[open] > .list-menu a:hover,
details[open] .list-menu--disclosure a:hover {
  background: #f5f5f7 !important;
  color: #1d1d1f !important;
  text-decoration: none !important;
}

details[open] .list-menu a::after,
details[open] .list-menu a::before {
  display: none !important;
  background: none !important;
}


/* ── 3. TOP-LEVEL NAV ITEM TIGHTENING ────────────────────────
   With Solutions, Intelligence, The Node, Pricing, Book a Demo
   = 5 items, this keeps spacing comfortable without overflow.
   ────────────────────────────────────────────────────────── */

/* Slightly tighten gap between items */
.header__inline-menu > ul,
.header__inline-menu .list-menu {
  gap: 2px !important;
}

/* Top-level link padding */
.header__menu-item,
.header__inline-menu > ul > li > a,
.header__inline-menu .list-menu > .list-menu__item > a,
.header__inline-menu summary {
  padding: 8px 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  color: #1d1d1f !important;
}


/* ── 4. SUMMARY CHEVRON INDICATOR ────────────────────────────
   Horizon 3/4 uses <summary> for dropdown toggles.
   The default chevron is fine — this just keeps it tidy.
   ────────────────────────────────────────────────────────── */

.header__inline-menu summary {
  cursor: pointer !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Rotate chevron when open */
.header__inline-menu details[open] summary svg,
.header__inline-menu details[open] summary .icon-caret {
  transform: rotate(180deg) !important;
  transition: transform .18s ease !important;
}

.header__inline-menu details summary svg,
.header__inline-menu details summary .icon-caret {
  transition: transform .18s ease !important;
}


/* ── 5. MOBILE HAMBURGER — BOOK A DEMO BUTTON ────────────────
   Horizon 3/4 mobile menu uses .menu-drawer
   ────────────────────────────────────────────────────────── */

@media screen and (max-width: 989px) {
  .menu-drawer a[href*="book-demo"],
  .menu-drawer__navigation a[href*="book-demo"],
  .menu-drawer .list-menu a[href*="book-demo"] {
    display: block !important;
    background: #1d1d1f !important;
    color: #ffffff !important;
    padding: 13px 24px !important;
    border-radius: 980px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-align: center !important;
    text-decoration: none !important;
    margin: 12px 16px 8px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.15) !important;
    background-image: none !important;
  }

  .menu-drawer a[href*="book-demo"]:hover {
    background: #2d2d2f !important;
    color: #ffffff !important;
  }

  .menu-drawer a[href*="book-demo"]::after,
  .menu-drawer a[href*="book-demo"]::before {
    display: none !important;
    background: none !important;
  }
}


/* ── 6. SUPPRESS HORIZON'S LINK UNDERLINE ANIMATION ─────────
   Horizon 3/4 uses a background-size animation trick for
   the animated underline on nav links. The "Book a Demo"
   button must not have this. Belt-and-suspenders override.
   ────────────────────────────────────────────────────────── */

header a[href*="book-demo"] {
  background-image: none !important;
  background-size: 0 0 !important;
}

header a[href*="book-demo"]:hover {
  background-image: none !important;
  background-size: 0 0 !important;
  background-color: #2d2d2f !important;
}