/*
 * Elementor supplies the editable structure; the existing MM Oxygen classes
 * remain the source of its storefront presentation. These defaults deliberately
 * have less specificity than Elementor's generated per-element style rules.
 */
:where(body.mmox-platform-active) .mmox-elementor-root,
:where(body.mmox-platform-active) .mmox-elementor-root > .elementor { display: contents; }
:where(body.mmox-platform-active) .mmox-support-strip { font-family: 'Plus Jakarta Sans', sans-serif; }
.woocommerce-order-received .mmox-commerce-page-title { display: none; }
:where(body.mmox-platform-active) .mmox-elementor-root,
:where(body.mmox-platform-active) .mmox-el-container.e-con {
  --container-default-padding-top: 0px;
  --container-default-padding-right: 0px;
  --container-default-padding-bottom: 0px;
  --container-default-padding-left: 0px;
  --widgets-spacing: 0px;
  --widgets-spacing-row: 0px;
  --widgets-spacing-column: 0px;
}

/* Full-width Elementor containers do not need another layout layer. */
:where(body.mmox-platform-active) .mmox-el-container.e-con {
  display: block;
  min-width: 0;
  --flex-direction: initial;
  --flex-wrap: initial;
  --justify-content: initial;
  --align-items: initial;
  --align-content: initial;
}

/*
 * Keep widgets and their optional inner wrapper transparent to grid/flex.
 * Keeping this in the editor too makes its canvas match the published page.
 * Nodes retain their Elementor identity, inline editing and Navigator entry.
 */
:where(body.mmox-platform-active) .mmox-el-node,
:where(body.mmox-platform-active) .mmox-el-node > .elementor-widget-container {
  display: contents;
}

:where(body.mmox-platform-active) .mmox-el-node > .elementor-widget-container {
  font: inherit;
  color: inherit;
}

/* Restore only the displays declared by the original storefront layouts. */
:where(body.mmox-platform-active) .mmox-el-container:is(
  .mmox-hero-grid, .mmox-category-grid, .mmox-product-grid,
  .mmox-steps, .mmox-service-grid, .mmox-product-detail,
  .mmox-footer-grid, .mmox-prescription-panel
) {
  display: grid;
}

:where(body.mmox-platform-active) .mmox-el-container:is(
  .mmox-actions, .mmox-section-title, .mmox-contact-panel,
  .mmox-hero-caption, .mmox-header-inner, .mmox-header-actions,
  .mmox-breadcrumb
),
:where(body.mmox-platform-active) .mmox-support-strip > .mmox-el-container:where(.mmox-container),
:where(body.mmox-platform-active) .mmox-header nav.mmox-el-container {
  display: flex;
  --flex-direction: row;
}

:where(body.mmox-platform-active) .mmox-el-container.e-con:where(.mmox-section-title.mmox-center) {
  display: block;
}

:where(body.mmox-platform-active) .mmox-el-container.mmox-mobile-nav {
  display: none;
}

/*
 * Match the original container metrics through Elementor's own variables.
 * Its parent/child defaults use two classes, so these defaults do too. A saved
 * per-element adjustment has three classes and can still override these values.
 */
:where(body.mmox-platform-active) .mmox-el-container.mmox-container {
  --margin-left: auto;
  --margin-right: auto;
  --padding-left: 32px;
  --padding-right: 32px;
}
:where(body.mmox-platform-active) .mmox-el-container.mmox-header-inner {
  --flex-direction: row;
  --flex-wrap: nowrap;
  --align-items: center;
  --justify-content: space-between;
  --row-gap: 24px;
  --column-gap: 24px;
  --margin-left: auto;
  --margin-right: auto;
  --padding-top: 10px;
  --padding-right: 32px;
  --padding-bottom: 10px;
  --padding-left: 32px;
}
:where(body.mmox-platform-active) .mmox-el-container.mmox-brand {
  display: inline-flex;
  --flex-direction: row;
  --flex-grow: 0;
  --flex-shrink: 0;
  --flex-basis: auto;
  --width: auto;
}
:where(body.mmox-platform-active) .mmox-el-container.mmox-brand img {
  display: block;
  width: 190px;
  height: auto;
  max-height: 58px;
  object-fit: contain;
}
:where(body.mmox-platform-active) .mmox-support-strip > .mmox-el-container {
  --flex-direction: row;
  --align-items: center;
  --justify-content: space-between;
  --row-gap: 20px;
  --column-gap: 20px;
}
:where(body.mmox-platform-active) .mmox-el-container.mmox-support-strip {
  --padding-top: 10px;
  --padding-bottom: 10px;
}
:where(body.mmox-platform-active) .mmox-el-container.mmox-actions {
  --width: auto;
  --flex-direction: row;
  --flex-wrap: wrap;
  --align-items: center;
  --row-gap: 14px;
  --column-gap: 14px;
}
:where(body.mmox-platform-active) .mmox-hero-copy > .mmox-el-container:where(.mmox-actions) {
  --margin-top: 24px;
  --row-gap: 12px;
  --column-gap: 12px;
}
:where(body.mmox-platform-active) .mmox-el-container.mmox-hero {
  --padding-top: 56px;
  --padding-bottom: 56px;
}
:where(body.mmox-platform-active) .mmox-el-container.mmox-hero-caption {
  --position: absolute;
  --flex-direction: row;
  --align-items: center;
  --row-gap: 7px;
  --column-gap: 7px;
  --padding-top: 25px;
  --padding-right: 14px;
  --padding-bottom: 13px;
  --padding-left: 14px;
}
:where(body.mmox-platform-active) .mmox-hero-caption :where(.mmox-el-node) svg {
  width: 17px;
  height: 17px;
}
:where(body.mmox-platform-active) .mmox-el-container.mmox-home-pin {
  max-width: 440px;
  --margin-top: 18px;
}
:where(body.mmox-platform-active) .mmox-el-container.mmox-section {
  --padding-top: 44px;
  --padding-bottom: 44px;
}
:where(body.mmox-platform-active) .mmox-view-home .mmox-el-container:where(.mmox-section) {
  --padding-top: 48px;
  --padding-bottom: 48px;
}
:where(body.mmox-platform-active) .mmox-el-container.mmox-section-title {
  --flex-direction: row;
  --flex-wrap: wrap;
  --align-items: flex-end;
  --justify-content: space-between;
  --row-gap: 12px;
  --column-gap: 12px;
  --margin-bottom: 26px;
}
:where(body.mmox-platform-active) .mmox-el-container.mmox-contact-panel {
  --flex-direction: row;
  --align-items: center;
  --justify-content: space-between;
  --row-gap: 24px;
  --column-gap: 24px;
  --padding-top: 30px;
  --padding-right: 30px;
  --padding-bottom: 30px;
  --padding-left: 30px;
}
:where(body.mmox-platform-active) .mmox-contact-panel > .mmox-el-container:where(.mmox-actions) {
  --flex-shrink: 0;
}
:where(body.mmox-platform-active) .mmox-el-container.mmox-product-detail {
  --margin-bottom: 44px;
}
:where(body.mmox-platform-active) .mmox-el-container.mmox-footer {
  --padding-top: 48px;
}
:where(body.mmox-platform-active) .mmox-el-container.mmox-copyright {
  --margin-top: 26px;
  --padding-top: 20px;
  --padding-bottom: 20px;
}

/* Native image widgets keep their image in the same visual position. */
:where(body.mmox-platform-active) .mmox-el-image :where(a, picture) {
  display: contents;
}

:where(body.mmox-platform-active) .mmox-hero-visual :where(.mmox-el-image) img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
}

:where(body.mmox-platform-active) .mmox-category-card :where(.mmox-el-image) img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

/* The original direct-child selectors need their widget-wrapper equivalents. */
:where(body.mmox-platform-active) .mmox-hero-caption > :where(.mmox-el-node):last-child > span,
:where(body.mmox-platform-active) .mmox-hero-caption > :where(.mmox-el-node):last-child > :where(.elementor-widget-container) > span {
  margin-left: auto;
  padding: 2px 6px;
  background: #ffffff35;
  border-radius: 5px;
  white-space: nowrap;
}

:where(body.mmox-platform-active) .mmox-section-title > :where(.mmox-el-text) p,
:where(body.mmox-platform-active) .mmox-section-title > :where(.mmox-el-container) > :where(.mmox-el-text) p {
  font-size: 13px;
  margin: 10px 0 0;
}

:where(body.mmox-platform-active) .mmox-section-title > :where(.mmox-el-node) a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

:where(body.mmox-platform-active) .mmox-section-title > :where(.mmox-el-node) a > svg {
  width: 16px;
  height: 16px;
}

:where(body.mmox-platform-active) .mmox-prescription-panel > :where(.mmox-el-node) .mmox-btn {
  white-space: nowrap;
}

:where(body.mmox-platform-active) .mmox-category-card > :where(.mmox-el-node) small {
  display: block;
  margin: 0 4px;
  color: #58656c;
  font-size: 11px;
  line-height: 1.6;
}

:where(body.mmox-platform-active) .mmox-steps article > :where(.mmox-el-node) > span,
:where(body.mmox-platform-active) .mmox-steps article > :where(.mmox-el-node) > :where(.elementor-widget-container) > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--mmox-blue-soft);
  color: var(--mmox-blue-ink);
  font-size: 19px;
  font-weight: 700;
}

:where(body.mmox-platform-active) .mmox-steps article:last-child > :where(.mmox-el-node) > span,
:where(body.mmox-platform-active) .mmox-steps article:last-child > :where(.mmox-el-node) > :where(.elementor-widget-container) > span {
  background: var(--mmox-blue);
  color: var(--mmox-on-blue);
}

/* Dynamically rendered WooCommerce HTML remains ordinary storefront markup. */
:where(body.mmox-platform-active) :where(
  .elementor-widget-mmox-product-list, .elementor-widget-mmox-catalog,
  .elementor-widget-mmox-product-gallery, .elementor-widget-mmox-product-info,
  .elementor-widget-mmox-product-policies, .elementor-widget-mmox-related,
  .elementor-widget-mmox-commerce
),
:where(body.mmox-platform-active) :where(
  .elementor-widget-mmox-product-list, .elementor-widget-mmox-catalog,
  .elementor-widget-mmox-product-gallery, .elementor-widget-mmox-product-info,
  .elementor-widget-mmox-product-policies, .elementor-widget-mmox-related,
  .elementor-widget-mmox-commerce
) > .elementor-widget-container {
  display: contents;
}

/* A contents wrapper has no box for Elementor's selection outline to follow. */
:where(body.mmox-platform-active.elementor-editor-active, body.mmox-platform-active.elementor-editor-preview)
  .mmox-el-node.elementor-element-edit-mode.elementor-element-editable
  :where(.elementor-heading-title, p, img):hover {
  outline: 1px dashed var(--e-p-border-global, #00a8f8);
  outline-offset: 3px;
}

@media (min-width: 768px) and (max-width: 1100px) {
  :where(body.mmox-platform-active) .mmox-el-container.mmox-header-inner {
    --row-gap: 15px;
    --column-gap: 15px;
    --padding-right: 24px;
    --padding-left: 24px;
  }
  :where(body.mmox-platform-active) .mmox-el-container.mmox-brand img {
    width: 155px;
  }
  :where(body.mmox-platform-active) .mmox-hero-visual :where(.mmox-el-image) img {
    height: 310px;
  }

}

@media (max-width: 1100px) {
  :where(body.mmox-platform-active) .mmox-el-container.mmox-contact-panel {
    --flex-direction: column;
    --align-items: flex-start;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  :where(body.mmox-platform-active) .mmox-el-container.mmox-header-inner {
    --flex-wrap: wrap;
    --row-gap: 8px;
    --column-gap: 16px;
    --padding-top: 12px;
    --padding-bottom: 8px;
  }
}

@media (max-width: 767px) {
  :where(body.mmox-platform-active) .mmox-el-container.mmox-hero-grid {
    display: flex;
    --flex-direction: column;
    --align-items: stretch;
    --row-gap: 16px;
    --column-gap: 16px;
  }

  :where(body.mmox-platform-active) .mmox-el-container.mmox-category-grid {
    display: grid;
    width: 100%;
    max-width: 100%;
  }

  :where(body.mmox-platform-active) .mmox-el-container.mmox-steps article {
    display: grid;
  }

  :where(body.mmox-platform-active) .mmox-el-container:where(.mmox-contact-panel) .mmox-actions {
    display: grid;
  }

  :where(body.mmox-platform-active) .mmox-el-container.mmox-mobile-nav {
    display: flex;
  }

  :where(body.mmox-platform-active) .mmox-header nav.mmox-el-container {
    display: none;
  }

  :where(body.mmox-platform-active) .mmox-el-container.mmox-container {
    --padding-right: 16px;
    --padding-left: 16px;
  }
  :where(body.mmox-platform-active) .mmox-el-container.mmox-header-inner {
    --padding-top: 8px;
    --padding-right: 16px;
    --padding-bottom: 8px;
    --padding-left: 16px;
    --row-gap: 10px;
    --column-gap: 10px;
  }
  :where(body.mmox-platform-active) .mmox-el-container.mmox-brand {
    --flex-grow: 1;
    --flex-shrink: 1;
    --flex-basis: 0%;
    --width: auto;
  }
  :where(body.mmox-platform-active) .mmox-el-container.mmox-brand img {
    width: 155px;
    max-height: 44px;
  }
  :where(body.mmox-platform-active) .mmox-el-container.mmox-support-strip {
    --padding-top: 6px;
    --padding-bottom: 6px;
  }
  :where(body.mmox-platform-active) .mmox-support-strip > .mmox-el-container {
    --row-gap: 10px;
    --column-gap: 10px;
    --padding-right: 12px;
    --padding-left: 12px;
  }
  :where(body.mmox-platform-active) .mmox-el-container.mmox-hero {
    --padding-top: 20px;
    --padding-bottom: 4px;
  }
  :where(body.mmox-platform-active) .mmox-hero-copy > .mmox-el-container:where(.mmox-actions) {
    display: grid;
    --margin-top: 18px;
    --row-gap: 10px;
    --column-gap: 10px;
  }
  :where(body.mmox-platform-active) .mmox-el-container.mmox-home-pin {
    max-width: none;
    --margin-top: 0px;
  }
  :where(body.mmox-platform-active) .mmox-el-container.mmox-section {
    --padding-top: 32px;
    --padding-bottom: 32px;
  }
  :where(body.mmox-platform-active) .mmox-view-home .mmox-el-container:where(.mmox-section) {
    --padding-top: 24px;
    --padding-bottom: 4px;
  }
  :where(body.mmox-platform-active) .mmox-view-home .mmox-el-container:where(.mmox-section):last-child {
    --padding-bottom: 24px;
  }
  :where(body.mmox-platform-active) .mmox-el-container.mmox-section-title {
    --align-items: center;
    --row-gap: 7px;
    --column-gap: 12px;
    --margin-bottom: 14px;
  }
  :where(body.mmox-platform-active) .mmox-el-container.mmox-contact-panel {
    --row-gap: 14px;
    --column-gap: 14px;
    --padding-top: 18px;
    --padding-right: 18px;
    --padding-bottom: 18px;
    --padding-left: 18px;
  }
  :where(body.mmox-platform-active) .mmox-contact-panel > .mmox-el-container:where(.mmox-actions) {
    --width: 100%;
    --row-gap: 8px;
    --column-gap: 8px;
  }
  :where(body.mmox-platform-active) .mmox-el-container.mmox-product-detail {
    --margin-bottom: 30px;
  }
  :where(body.mmox-platform-active) .mmox-el-container.mmox-footer {
    --padding-top: 28px;
  }
  :where(body.mmox-platform-active) .mmox-el-container.mmox-copyright {
    --margin-top: 22px;
    --padding-top: 16px;
    --padding-bottom: 20px;
  }

  :where(body.mmox-platform-active) .mmox-prescription-panel > :where(.mmox-el-node) .mmox-feature-icon {
    width: 37px;
    height: 37px;
    border-radius: 10px;
  }
  :where(body.mmox-platform-active) .mmox-prescription-panel > :where(.mmox-el-node) .mmox-btn {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 3px;
    font-size: 12px;
    white-space: normal;
  }

  :where(body.mmox-platform-active) .mmox-hero-copy > :where(.mmox-el-text) p {
    font-size: 12px;
    line-height: 1.6;
    margin-top: 8px;
  }

  :where(body.mmox-platform-active) .mmox-hero-visual :where(.mmox-el-image) img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  :where(body.mmox-platform-active) .mmox-category-card :where(.mmox-el-image) img {
    display: block;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  :where(body.mmox-platform-active) .mmox-category-card > :where(.mmox-el-node) small {
    margin: 5px 0 0;
    color: #41617e;
    font-size: 10px;
    line-height: 1.4;
  }

  :where(body.mmox-platform-active) .mmox-section-title > :where(.mmox-el-text) p,
  :where(body.mmox-platform-active) .mmox-section-title > :where(.mmox-el-container) > :where(.mmox-el-text) p {
    margin-top: 7px;
    font-size: 12px;
  }

  :where(body.mmox-platform-active) .mmox-section-title > :where(.mmox-el-node) a {
    min-height: 44px;
    font-size: 11px;
  }

  :where(body.mmox-platform-active) .mmox-steps article > :where(.mmox-el-node) > span,
  :where(body.mmox-platform-active) .mmox-steps article > :where(.mmox-el-node) > :where(.elementor-widget-container) > span {
    grid-row: 1 / span 2;
    align-self: center;
    width: 36px;
    height: 36px;
    margin: 0;
    font-size: 16px;
  }
}

@media (max-width: 359px) {
  :where(body.mmox-platform-active) .mmox-el-container.mmox-header-inner {
    --padding-right: 12px;
    --padding-left: 12px;
    --row-gap: 7px;
    --column-gap: 7px;
  }
  :where(body.mmox-platform-active) .mmox-el-container.mmox-brand img {
    width: 140px;
  }
}