/*
 * Customer-facing responsive contract.
 *
 * All visible layout changes are opt-in through .cm-commerce-root and are
 * limited to viewports below the locked 1280px desktop design boundary.
 */
.cm-commerce-root,
.cm-embed-page.cm-commerce-root {
  --cm-responsive-gutter-tablet: clamp(1rem, 3vw, 1.5rem);
  --cm-responsive-gutter-mobile: clamp(0.75rem, 4vw, 1rem);
  --cm-responsive-section-gap: clamp(0.85rem, 2.4vw, 1.25rem);
  --cm-responsive-touch: 2.75rem;
  --cm-responsive-modal-width: 42rem;
  --cm-responsive-drawer-width: 25rem;
  --cm-visual-viewport-height: 100svh;
  --cm-visual-viewport-height: 100dvh;
  --cm-keyboard-inset: 0px;
}

@supports not (height: 100dvh) {
  .cm-commerce-root,
  .cm-embed-page.cm-commerce-root {
    --cm-visual-viewport-height: 100vh;
  }
}

/* Tablet and compact desktop: containment, deliberate wrapping and overlays. */
@media (max-width: 1279.98px) {
  .cm-commerce-root,
  .cm-commerce-root *,
  .cm-commerce-root *::before,
  .cm-commerce-root *::after {
    box-sizing: border-box;
  }

  .cm-commerce-root {
    inline-size: 100%;
    max-inline-size: 100%;
    scroll-padding-block-end: calc(var(--cm-keyboard-inset) + env(safe-area-inset-bottom, 0px) + 1rem);
  }

  .cm-commerce-root :where(
    .ep-main,
    .ep-header-inner,
    .ep-card,
    .ep-card__body,
    .ep-table-wrap,
    .doc-shell,
    .doc-paper,
    .doc-panel,
    .return-shell,
    .cart-shell,
    .cart-layout,
    .cart-column,
    .checkout-shell,
    .checkout-layout,
    .checkout-main,
    .checkout-aside,
    .checkout-panel,
    .checkout-summary,
    .product-retail-page,
    .product-pdp__grid,
    .product-pdp__left,
    .product-pdp__purchase,
    .retail-storefront,
    .retail-product-grid,
    .retail-card,
    .retail-card__body,
    .retail-list-layout,
    .retail-list-results,
    .retail-list-card,
    .retail-list-card__content,
    .retail-list-card__side,
    .retail-filter-panel,
    .storefront-catalog-layout,
    .customer-account-layout,
    .customer-account-section,
    .track-order-shell,
    .track-order-hero,
    .marketplace-layout,
    .mp-nav__inner,
    .mp-nav__search,
    .mp-nav__actions,
    .cm-commerce-grid
  ) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .cm-commerce-root :where(.flex, .grid) > *,
  .cm-commerce-root :where(form, fieldset, label) {
    min-inline-size: 0;
  }

  .cm-commerce-root :where(img, picture, video, canvas, iframe) {
    max-inline-size: 100%;
  }

  .cm-commerce-root :where(input, select, textarea, button) {
    max-inline-size: 100%;
  }

  .cm-commerce-root :where(
    .font-mono,
    code,
    pre,
    [data-copy-source],
    [data-copy-value],
    .doc-key-value,
    .track-order-ref,
    .customer-account-stat__value,
    .customer-account-shortcut__meta
  ) {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .cm-commerce-root :where(
    .cart-line__grid,
    .cart-line__content,
    .checkout-line,
    .checkout-line__content,
    .retail-card__actions,
    .retail-list-actions,
    .product-pdp__title,
    .retail-card__title,
    .retail-list-card__title,
    .mp-product-title
  ) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .cm-commerce-root :where(
    .cart-line__title,
    .product-pdp__title,
    .retail-card__title,
    .retail-list-card__title,
    .mp-product-title
  ) {
    overflow-wrap: anywhere;
  }

  .cm-commerce-root .ep-main:not(.cm-retail-main-area),
  .cm-commerce-root .doc-shell,
  .cm-commerce-root .return-shell,
  .cm-commerce-root .track-order-shell {
    inline-size: 100%;
    padding-inline: max(var(--cm-responsive-gutter-tablet), env(safe-area-inset-left, 0px))
      max(var(--cm-responsive-gutter-tablet), env(safe-area-inset-right, 0px));
  }

  .cm-commerce-root .cm-retail-main-area {
    inline-size: 100% !important;
    padding-inline: max(var(--cm-responsive-gutter-tablet), env(safe-area-inset-left, 0px))
      max(var(--cm-responsive-gutter-tablet), env(safe-area-inset-right, 0px)) !important;
    overflow-x: visible !important;
  }

  .cm-commerce-root .ep-header-inner {
    inline-size: 100%;
    padding-inline: max(var(--cm-responsive-gutter-tablet), env(safe-area-inset-left, 0px))
      max(var(--cm-responsive-gutter-tablet), env(safe-area-inset-right, 0px));
  }

  .cm-commerce-root .ep-header-inner > *,
  .cm-commerce-root .ep-brand,
  .cm-commerce-root .ep-brand > span:last-child {
    min-inline-size: 0;
  }

  .cm-commerce-root .ep-brand > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cm-commerce-root :where(.ep-tabs, [role="tablist"]) {
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .cm-commerce-root :where(.ep-tab, [role="tab"]) {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .cm-commerce-root :where(.ep-table-wrap, .doc-table-wrap, .track-order-results) {
    max-inline-size: 100%;
  }

  .cm-commerce-root :where(.cart-summary-card, .checkout-summary, .product-retail-buybox, .storefront-filter-panel) {
    top: max(1rem, env(safe-area-inset-top, 0px));
  }

  .cm-commerce-root :where(
    .qc-overlay,
    .cm-quick-buy-overlay,
    .cm-popup-modal,
    .mp-lightbox
  ) {
    padding-block: max(0.75rem, env(safe-area-inset-top, 0px))
      max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
    padding-inline: max(0.75rem, env(safe-area-inset-left, 0px))
      max(0.75rem, env(safe-area-inset-right, 0px)) !important;
  }

  .cm-commerce-root :where(
    .qc-modal,
    .cm-quick-buy-dialog,
    .cm-popup-dialog
  ) {
    inline-size: min(100%, var(--cm-responsive-modal-width));
    max-inline-size: 100% !important;
    max-block-size: calc(
      var(--cm-visual-viewport-height) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1.5rem
    ) !important;
    overscroll-behavior: contain;
  }

  .cm-commerce-root .qc-modal {
    display: flex;
    min-block-size: 0;
    flex-direction: column;
    overflow: hidden;
  }

  .cm-commerce-root .qc-modal__body,
  .cm-commerce-root .cm-quick-buy-dialog,
  .cm-commerce-root .cm-popup-dialog {
    min-block-size: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cm-commerce-root .cm-retail-mobile-panel__sheet,
  .cm-commerce-root .cm-retail-cart-drawer__sheet {
    inline-size: min(100%, var(--cm-responsive-drawer-width));
    max-inline-size: 100%;
    block-size: var(--cm-visual-viewport-height);
    max-block-size: var(--cm-visual-viewport-height);
    padding-block-start: env(safe-area-inset-top, 0px);
    padding-block-end: env(safe-area-inset-bottom, 0px);
  }

  .cm-commerce-root .cm-retail-panel__body {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .cm-commerce-root .cm-popup-slide-in {
    inset-inline: auto max(0.75rem, env(safe-area-inset-right, 0px)) !important;
    inset-block-end: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
    inline-size: min(22.5rem, calc(100% - 1.5rem)) !important;
    max-inline-size: calc(100% - 1.5rem) !important;
  }

  .cm-commerce-root .cm-popup-banner,
  .cm-commerce-root .cm-popup-bar {
    padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  }

  .cm-commerce-root .mp-lightbox img {
    max-block-size: calc(var(--cm-visual-viewport-height) - 2rem) !important;
  }

  .cm-commerce-root .sb-container,
  .cm-commerce-root .pb-container {
    inline-size: 100%;
    max-inline-size: 100%;
    padding-inline: var(--cm-responsive-gutter-tablet);
  }

  .cm-commerce-root .sb-product-table__head,
  .cm-commerce-root .sb-product-table__row {
    min-inline-size: 0;
  }

  .cm-embed-page.cm-commerce-root .cm-embed-shell {
    min-block-size: var(--cm-visual-viewport-height);
  }
}

/* Tablet: collapse sidebars before their content becomes cramped. */
@media (max-width: 1023.98px) {
  .cm-commerce-root :where(
    .cart-layout,
    .checkout-layout,
    .product-pdp__grid,
    .bundle-product-layout,
    .track-order-hero,
    .customer-account-grid,
    .retail-list-layout,
    .retail-list-card,
    .storefront-catalog-layout,
    .marketplace-layout
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .cm-commerce-root :where(
    .cart-column:has(.cart-summary-card),
    .checkout-summary,
    .product-retail-buybox,
    .storefront-filter-panel
  ) {
    position: static !important;
    inset: auto !important;
  }

  .cm-commerce-root .customer-account-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cm-commerce-root .customer-account-section,
  .cm-commerce-root .customer-account-section[data-customer-portal-section] {
    grid-column: span 6 !important;
  }

  .cm-commerce-root :where(button, .ep-btn, [role="button"], input, select, textarea) {
    min-block-size: var(--cm-responsive-touch);
  }

  .cm-commerce-root :where(input[type="checkbox"], input[type="radio"], input[type="hidden"], input[type="file"]) {
    min-block-size: auto;
  }

  .cm-commerce-root .mp-nav__inner {
    min-inline-size: 0;
  }

  .cm-commerce-root .mp-nav__search,
  .cm-commerce-root .mp-nav__search form,
  .cm-commerce-root .mp-nav__search input {
    min-inline-size: 0;
  }
}

/* Phone: one-column workflows, mobile cards, keyboard-safe actions and search. */
@media (max-width: 719.98px) {
  .cm-commerce-root {
    --cm-responsive-section-gap: 0.85rem;
  }

  .cm-commerce-root .ep-main:not(.cm-retail-main-area),
  .cm-commerce-root .doc-shell,
  .cm-commerce-root .return-shell,
  .cm-commerce-root .track-order-shell {
    padding-inline: max(var(--cm-responsive-gutter-mobile), env(safe-area-inset-left, 0px))
      max(var(--cm-responsive-gutter-mobile), env(safe-area-inset-right, 0px));
  }

  .cm-commerce-root .cm-retail-main-area {
    padding-inline: max(var(--cm-responsive-gutter-mobile), env(safe-area-inset-left, 0px))
      max(var(--cm-responsive-gutter-mobile), env(safe-area-inset-right, 0px)) !important;
  }

  .cm-commerce-root .ep-header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding-block-start: max(0.65rem, env(safe-area-inset-top, 0px));
    padding-inline: max(var(--cm-responsive-gutter-mobile), env(safe-area-inset-left, 0px))
      max(var(--cm-responsive-gutter-mobile), env(safe-area-inset-right, 0px));
  }

  .cm-commerce-root .ep-header-inner > div:last-child {
    min-inline-size: 0;
    gap: 0.35rem;
  }

  .cm-commerce-root .ep-header-inner > div:last-child .ep-btn {
    white-space: normal;
  }

  .cm-commerce-root :where(
    .cart-hero,
    .checkout-hero,
    .customer-account-head,
    .doc-toolbar,
    .doc-title-row,
    .return-head,
    .return-actions,
    .cart-reco-card__footer
  ) {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .cm-commerce-root :where(
    .checkout-field-grid,
    .checkout-mode-grid,
    .checkout-delivery-plan,
    .return-grid,
    .return-summary,
    .doc-grid,
    .doc-meta-grid,
    .customer-account-layout,
    .customer-account-grid,
    .customer-account-stats,
    .product-pdp__service-grid,
    .cm-product-related__grid,
    .sb-columns-grid,
    .sb-feature-grid,
    .sb-testimonial-grid,
    .sb-stats-grid,
    .sb-nested-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .cm-commerce-root .customer-account-section,
  .cm-commerce-root .customer-account-section[data-customer-portal-section] {
    grid-column: 1 / -1 !important;
  }

  .cm-commerce-root .customer-account-actions,
  .cm-commerce-root .customer-account-actions form,
  .cm-commerce-root .return-actions,
  .cm-commerce-root .doc-toolbar > div,
  .cm-commerce-root .cart-summary-actions {
    inline-size: 100%;
  }

  .cm-commerce-root .customer-account-actions :where(.ep-btn, button),
  .cm-commerce-root .return-actions .ep-btn,
  .cm-commerce-root .doc-toolbar :where(.ep-btn, button),
  .cm-commerce-root .cart-summary-actions .ep-btn,
  .cm-commerce-root .checkout-primary-btn {
    inline-size: 100%;
    justify-content: center;
  }

  .cm-commerce-root form :where(.grid-cols-2, .grid-cols-3, .grid-cols-4) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .cm-commerce-root .cm-responsive-table,
  .cm-commerce-root .cm-responsive-table tbody,
  .cm-commerce-root .cm-responsive-table tr,
  .cm-commerce-root .cm-responsive-table td {
    display: block;
    inline-size: 100%;
  }

  .cm-commerce-root .cm-responsive-table {
    min-inline-size: 0 !important;
    border-collapse: separate;
  }

  .cm-commerce-root .cm-responsive-table thead {
    display: none;
  }

  .cm-commerce-root .cm-responsive-table tbody {
    display: grid;
    gap: 0.75rem;
  }

  .cm-commerce-root .cm-responsive-table tbody tr {
    padding: 0.75rem;
    border: 1px solid var(--border, #d7dde8);
    border-radius: var(--radius, 8px);
    background: var(--panel-bg, #fff);
  }

  .cm-commerce-root .cm-responsive-table tbody td {
    display: grid;
    grid-template-columns: minmax(6.25rem, 36%) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.4rem 0 !important;
    border: 0 !important;
    text-align: start !important;
  }

  .cm-commerce-root .cm-responsive-table tbody td::before {
    content: attr(data-label);
    color: var(--muted, #667085);
    font-size: 0.75rem;
    font-weight: 800;
  }

  .cm-commerce-root .cm-responsive-table tbody td[data-label=""]::before,
  .cm-commerce-root .cm-responsive-table tbody td:not([data-label])::before {
    display: none;
  }

  .cm-commerce-root .cm-responsive-table tbody td[colspan],
  .cm-commerce-root .cm-responsive-table tbody tr.cm-responsive-table__group td,
  .cm-commerce-root .cm-responsive-table tbody tr.cm-responsive-table__empty td {
    display: block;
  }

  .cm-commerce-root .cm-responsive-table tbody tr.cm-responsive-table__group {
    padding: 0;
    border: 0;
    background: transparent;
  }

  .cm-commerce-root .cm-responsive-table tbody tr.cm-responsive-table__group td::before,
  .cm-commerce-root .cm-responsive-table tbody tr.cm-responsive-table__empty td::before {
    display: none;
  }

  .cm-commerce-root .cm-responsive-table tbody td > :where(.ep-btn, button) {
    justify-self: start;
  }

  .cm-commerce-root .cart-mobile-action,
  .cm-commerce-root .product-mobile-purchase {
    inset-block-end: var(--cm-keyboard-inset) !important;
    padding-block-end: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
    padding-inline: max(var(--cm-responsive-gutter-mobile), env(safe-area-inset-left, 0px))
      max(var(--cm-responsive-gutter-mobile), env(safe-area-inset-right, 0px)) !important;
  }

  .cm-commerce-root[data-cm-keyboard-open] .cart-mobile-action,
  .cm-commerce-root[data-cm-keyboard-open] .product-mobile-purchase {
    box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.14);
  }

  .cm-commerce-root .cart-shell:has(.cart-mobile-action) {
    padding-block-end: calc(6.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .cm-commerce-root .cm-retail-main {
    min-block-size: auto !important;
    grid-template-columns: var(--cm-responsive-touch) minmax(0, 1fr) var(--cm-responsive-touch) var(--cm-responsive-touch) !important;
    gap: 0.5rem !important;
    padding-block: 0.6rem !important;
    padding-inline: max(var(--cm-responsive-gutter-mobile), env(safe-area-inset-left, 0px))
      max(var(--cm-responsive-gutter-mobile), env(safe-area-inset-right, 0px)) !important;
  }

  .cm-commerce-root .cm-retail-brand {
    order: 1;
    overflow: hidden;
  }

  .cm-commerce-root .cm-retail-brand__logo,
  .cm-commerce-root .cm-retail-brand__logo img {
    max-inline-size: min(100%, 7rem) !important;
  }

  .cm-commerce-root .cm-retail-menu-toggle {
    order: 0;
  }

  .cm-commerce-root .cm-retail-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 2;
    inline-size: var(--cm-responsive-touch);
    min-block-size: var(--cm-responsive-touch);
    padding: 0;
    border: 1px solid var(--border, #d7dde8);
    border-radius: var(--radius, 8px);
    background: var(--panel-bg, #fff);
    color: var(--text, #101828);
  }

  .cm-commerce-root .cm-retail-cart {
    order: 3;
  }

  .cm-commerce-root .cm-retail-main > :where(.store-currency-selector, .cm-retail-theme, .cm-retail-action) {
    display: none !important;
  }

  .cm-commerce-root .cm-retail-search {
    position: fixed !important;
    z-index: 780 !important;
    inset: 0 !important;
    display: none !important;
    grid-template-columns: minmax(0, 1fr) var(--cm-responsive-touch) var(--cm-responsive-touch) !important;
    align-content: start;
    gap: 0.5rem;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    block-size: var(--cm-visual-viewport-height);
    max-block-size: var(--cm-visual-viewport-height);
    padding-block: max(0.75rem, env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-bottom, 0px));
    padding-inline: max(var(--cm-responsive-gutter-mobile), env(safe-area-inset-left, 0px))
      max(var(--cm-responsive-gutter-mobile), env(safe-area-inset-right, 0px));
    border: 0 !important;
    background: var(--panel-bg, #fff) !important;
  }

  .cm-commerce-root .cm-retail-search.is-mobile-open {
    display: grid !important;
  }

  .cm-commerce-root.cm-mobile-search-open {
    overflow: hidden;
  }

  .cm-commerce-root .cm-retail-search input,
  .cm-commerce-root .cm-retail-search button,
  .cm-commerce-root .cm-retail-search__close {
    position: static !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    min-block-size: var(--cm-responsive-touch) !important;
    margin: 0 !important;
  }

  .cm-commerce-root .cm-retail-search__close {
    display: inline-flex;
  }

  .cm-commerce-root .cm-retail-search__results {
    position: static !important;
    grid-column: 1 / -1;
    max-block-size: calc(var(--cm-visual-viewport-height) - 5.75rem) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cm-commerce-root .cm-retail-mobile-controls {
    display: grid;
    gap: 0.65rem;
    margin-block-start: 1rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--border, #d7dde8);
  }

  .cm-commerce-root .cm-retail-mobile-controls :where(.store-currency-selector, .cm-retail-theme) {
    display: block;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    margin: 0;
  }

  .cm-commerce-root .cm-retail-mobile-controls :where(select, button) {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    justify-content: center;
  }

  .cm-commerce-root .retail-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    inline-size: 100%;
    min-block-size: var(--cm-responsive-touch);
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border, #d7dde8);
    background: var(--panel-bg, #fff);
    color: var(--text, #101828);
    font-weight: 800;
  }

  .cm-commerce-root .retail-filter-toggle__count {
    display: inline-flex;
    min-inline-size: 1.35rem;
    min-block-size: 1.35rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--brand-color, #2563eb);
    color: var(--brand-contrast, #fff);
    font-size: 0.72rem;
  }

  .cm-commerce-root .retail-filter-backdrop {
    position: fixed;
    z-index: 785;
    inset: 0;
    display: none;
    inline-size: 100%;
    block-size: var(--cm-visual-viewport-height);
    border: 0;
    background: rgba(15, 23, 42, 0.48);
  }

  .cm-commerce-root .retail-filter-backdrop.is-open {
    display: block;
  }

  .cm-commerce-root .retail-filter-panel {
    position: fixed !important;
    z-index: 790;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: min(100%, 24rem);
    max-inline-size: 100%;
    block-size: var(--cm-visual-viewport-height);
    max-block-size: var(--cm-visual-viewport-height);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block-end: max(1rem, env(safe-area-inset-bottom, 0px));
    transform: translateX(-100%);
    transition: transform 180ms ease;
  }

  [dir="rtl"] .cm-commerce-root .retail-filter-panel {
    transform: translateX(100%);
  }

  .cm-commerce-root .retail-filter-panel.is-open {
    transform: translateX(0);
  }

  .cm-commerce-root.cm-filter-drawer-open {
    overflow: hidden;
  }

  .cm-commerce-root .retail-filter-panel__title {
    position: sticky;
    z-index: 1;
    inset-block-start: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block-start: max(0.75rem, env(safe-area-inset-top, 0px));
    background: var(--panel-bg, #fff);
  }

  .cm-commerce-root .retail-filter-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--cm-responsive-touch);
    min-block-size: var(--cm-responsive-touch);
    padding: 0;
    border: 1px solid var(--border, #d7dde8);
    background: transparent;
    color: var(--text, #101828);
  }

  .cm-commerce-root .retail-filter-actions {
    position: sticky;
    inset-block-end: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 0.8rem;
    padding-block-end: max(0.8rem, env(safe-area-inset-bottom, 0px));
    border-block-start: 1px solid var(--border, #d7dde8);
    background: var(--panel-bg, #fff);
  }

  .cm-commerce-root .mp-nav {
    top: env(safe-area-inset-top, 0px);
  }

  .cm-commerce-root .mp-nav__inner {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.5rem !important;
    block-size: auto !important;
    min-block-size: 3.5rem;
    padding-inline: max(var(--cm-responsive-gutter-mobile), env(safe-area-inset-left, 0px))
      max(var(--cm-responsive-gutter-mobile), env(safe-area-inset-right, 0px)) !important;
  }

  .cm-commerce-root .mp-nav__brand,
  .cm-commerce-root .mp-nav__actions {
    min-inline-size: 0;
  }

  .cm-commerce-root .mp-nav__search {
    inline-size: 100%;
  }

  .cm-commerce-root .mp-nav__search-results {
    position: fixed !important;
    inset-inline: max(var(--cm-responsive-gutter-mobile), env(safe-area-inset-left, 0px))
      max(var(--cm-responsive-gutter-mobile), env(safe-area-inset-right, 0px)) !important;
    inset-block-start: calc(env(safe-area-inset-top, 0px) + 3.75rem) !important;
    max-block-size: calc(var(--cm-visual-viewport-height) - 4.5rem) !important;
  }

  .cm-commerce-root .sb-product-table__head {
    display: none !important;
  }

  .cm-commerce-root .sb-product-table__row {
    grid-template-columns: minmax(4rem, 5rem) minmax(0, 1fr) !important;
  }

  .cm-commerce-root .sb-product-table__row > :nth-child(n + 3) {
    grid-column: 2;
  }

  .cm-commerce-root .cm-popup-slide-in {
    inset-inline: max(0.75rem, env(safe-area-inset-left, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)) !important;
    inline-size: auto !important;
    max-inline-size: none !important;
  }

  .cm-commerce-root .cm-popup-banner__inner,
  .cm-commerce-root .cm-popup-bar__inner {
    align-items: stretch !important;
    flex-direction: column;
  }
}

@media (max-width: 479.98px) {
  .cm-commerce-root .ep-card__header,
  .cm-commerce-root .ep-card__body,
  .cm-commerce-root .doc-paper,
  .cm-commerce-root .doc-panel,
  .cm-commerce-root .checkout-panel__header,
  .cm-commerce-root .checkout-panel__body,
  .cm-commerce-root .cart-panel__header,
  .cm-commerce-root .cart-panel__body {
    padding-inline: 0.8rem !important;
  }

  .cm-commerce-root .cm-responsive-table tbody td {
    grid-template-columns: minmax(5.5rem, 34%) minmax(0, 1fr);
    gap: 0.55rem;
  }

  .cm-commerce-root .mp-nav__actions {
    gap: 0.25rem !important;
  }

  .cm-commerce-root .mp-nav__currency button {
    padding-inline: 0.35rem !important;
  }

  .cm-commerce-root .mp-nav__search input {
    padding-inline: 0.65rem !important;
  }
}

@media (max-width: 932px) and (orientation: landscape) and (max-height: 480px) {
  .cm-commerce-root :where(.qc-overlay, .cm-quick-buy-overlay, .cm-popup-modal, .mp-lightbox) {
    align-items: stretch !important;
    padding: max(0.35rem, env(safe-area-inset-top, 0px)) max(0.35rem, env(safe-area-inset-right, 0px))
      max(0.35rem, env(safe-area-inset-bottom, 0px)) max(0.35rem, env(safe-area-inset-left, 0px)) !important;
  }

  .cm-commerce-root :where(.qc-modal, .cm-quick-buy-dialog, .cm-popup-dialog) {
    inline-size: 100%;
    max-block-size: calc(var(--cm-visual-viewport-height) - 0.7rem) !important;
  }

  .cm-commerce-root .cm-retail-mobile-panel__sheet,
  .cm-commerce-root .cm-retail-cart-drawer__sheet {
    inline-size: min(100%, 32rem);
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 1279.98px) {
  .cm-commerce-root *,
  .cm-commerce-root *::before,
  .cm-commerce-root *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) and (max-width: 1279.98px) {
  .cm-commerce-root :where(.ep-card, .doc-paper, .doc-panel, .checkout-panel, .cart-panel, [role="dialog"]) {
    border: 1px solid CanvasText !important;
  }
}

@media (prefers-contrast: more) and (max-width: 1279.98px) {
  .cm-commerce-root :where(.ep-card, .doc-paper, .doc-panel, .checkout-panel, .cart-panel, [role="dialog"]) {
    border-width: 2px;
  }

  .cm-commerce-root :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
  }
}