/**
 * OG Mobile App Foundation — Sprint 1
 *
 * Isolated mobile presentation layer. Desktop styles are untouched.
 * Visible only inside @media (max-width: 820px) under body.og-mobile-app-ready.
 */

/* -------------------------------------------------------------------------- */
/* Tokens (scoped to mobile-app-ready; presentation gated by media query)     */
/* -------------------------------------------------------------------------- */

body.og-mobile-app-ready {
  --og-mobile-app-bg: #ffffff;
  --og-mobile-app-surface: #ffffff;
  --og-mobile-app-primary: var(--og-brand, #006cff);
  --og-mobile-app-primary-pressed: var(--og-brand-dark, #0052c3);
  --og-mobile-app-accent: #f36b21;
  --og-mobile-app-ink: var(--og-ink, #07142b);
  --og-mobile-app-muted: var(--og-muted, #64748b);
  --og-mobile-app-border: var(--og-line, #dbe6f3);
  --og-mobile-app-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  --og-mobile-app-radius-card: 16px;
  --og-mobile-app-radius-field: 12px;
  --og-mobile-app-radius-button: 12px;
  --og-mobile-app-header-height: 56px;
  --og-mobile-app-bottom-nav-height: 64px;
  --og-mobile-app-gutter: 16px;
  --og-mobile-app-space-sm: 8px;
  --og-mobile-app-space-md: 16px;
  --og-mobile-app-space-lg: 24px;
  --og-mobile-app-safe-top: env(safe-area-inset-top, 0px);
  --og-mobile-app-safe-right: env(safe-area-inset-right, 0px);
  --og-mobile-app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --og-mobile-app-safe-left: env(safe-area-inset-left, 0px);
  --og-mobile-app-z-header: 99982;
  --og-mobile-app-z-bottom-nav: 99983;
}

/* Hidden on desktop / tablet widths outside the mobile shell */
.og-mobile-app-header,
.og-mobile-app-bottom-nav {
  display: none;
}

/* -------------------------------------------------------------------------- */
/* Mobile shell (max-width: 820px — theme mobile convention)                  */
/* -------------------------------------------------------------------------- */

@media (max-width: 820px) {
  body.og-mobile-app-ready {
    /* Keep chat / product floating offsets aligned with the new bottom nav. */
    --og-mobile-bottom-nav-offset: calc(
      var(--og-mobile-app-bottom-nav-height) + var(--og-mobile-app-safe-bottom)
    );
    --og-mobile-assistant-bottom: calc(var(--og-mobile-bottom-nav-offset) + 26px);
    background: var(--og-mobile-app-bg);
  }

  /* Suppress desktop header chrome — replaced by app header */
  body.og-mobile-app-ready .og-site-header {
    display: none !important;
  }

  /* Suppress legacy mobile drawer / overlay menu under app shell */
  body.og-mobile-app-ready .og-mobile-drawer,
  body.og-mobile-app-ready .og-mobile-menu,
  body.og-mobile-app-ready .og-mobile-menu-backdrop,
  body.og-mobile-app-ready .og-mobile-menu-sheet,
  body.og-mobile-app-ready #og-mobile-menu,
  body.og-mobile-app-ready .og-mobile-quick-access {
    display: none !important;
  }

  /* Suppress legacy bottom nav if a fallback copy is ever rendered */
  body.og-mobile-app-ready .og-mobile-bottom-nav:not(.og-mobile-app-bottom-nav) {
    display: none !important;
  }

  /* App header */
  body.og-mobile-app-ready .og-mobile-app-header {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--og-mobile-app-z-header);
    min-height: calc(var(--og-mobile-app-header-height) + var(--og-mobile-app-safe-top));
    padding-top: var(--og-mobile-app-safe-top);
    padding-right: var(--og-mobile-app-safe-right);
    padding-left: var(--og-mobile-app-safe-left);
    background: var(--og-mobile-app-surface);
    border-bottom: 1px solid var(--og-mobile-app-border);
    box-shadow: none;
  }

  body.admin-bar.og-mobile-app-ready .og-mobile-app-header {
    top: 46px;
  }

  @media screen and (max-width: 782px) {
    body.admin-bar.og-mobile-app-ready .og-mobile-app-header {
      top: 46px;
    }
  }

  body.og-mobile-app-ready .og-mobile-app-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--og-mobile-app-space-sm);
    min-height: var(--og-mobile-app-header-height);
    padding: 0 var(--og-mobile-app-gutter);
    box-sizing: border-box;
  }

  body.og-mobile-app-ready .og-mobile-app-header-start {
    display: flex;
    align-items: center;
    gap: var(--og-mobile-app-space-sm);
    min-width: 0;
    flex: 1 1 auto;
  }

  body.og-mobile-app-ready .og-mobile-app-header-brand {
    min-width: 0;
    display: flex;
    align-items: center;
  }

  body.og-mobile-app-ready .og-mobile-app-header-brand .og-site-logo-link {
    display: inline-flex;
    align-items: center;
  }

  body.og-mobile-app-ready .og-mobile-app-header-brand .og-site-logo {
    display: inline-flex;
    align-items: center;
    width: 213px;
    max-width: calc(100vw - 145px);
    height: auto;
  }

  body.og-mobile-app-ready .og-mobile-app-header-brand .og-site-logo img,
  body.og-mobile-app-ready .og-mobile-app-header-brand img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 36px;
    object-fit: contain;
  }

  body.og-mobile-app-ready .og-mobile-app-header-brand-link {
    color: var(--og-mobile-app-ink);
    font-weight: 800;
    font-size: 16px;
    text-decoration: none;
    letter-spacing: -0.02em;
  }

  body.og-mobile-app-ready .og-mobile-app-header-title {
    margin: 0;
    color: var(--og-mobile-app-ink);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.og-mobile-app-ready .og-mobile-app-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
  }

  body.og-mobile-app-ready .og-mobile-app-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--og-mobile-app-ink);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
  }

  body.og-mobile-app-ready .og-mobile-app-icon-btn:hover,
  body.og-mobile-app-ready .og-mobile-app-icon-btn:active {
    color: var(--og-mobile-app-primary);
    background: rgba(0, 108, 255, 0.06);
  }

  body.og-mobile-app-ready .og-mobile-app-icon-btn:focus {
    outline: none;
  }

  body.og-mobile-app-ready .og-mobile-app-icon-btn:focus-visible {
    outline: 2px solid var(--og-mobile-app-primary);
    outline-offset: 2px;
  }

  body.og-mobile-app-ready .og-mobile-app-icon-btn svg {
    display: block;
    width: 22px;
    height: 22px;
  }

  body.og-mobile-app-ready .og-mobile-app-header-cart .og-header-cart-count {
    position: absolute;
    top: 6px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--og-mobile-app-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
  }

  body.og-mobile-app-ready .og-mobile-app-header-cart .og-header-cart-count[hidden] {
    display: none !important;
  }

  body.og-mobile-app-ready .og-mobile-app-header-notifications {
    position: relative;
  }

  body.og-mobile-app-ready .og-mobile-app-header-notifications-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e11d48;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    box-sizing: border-box;
  }

  body.og-mobile-app-ready .og-mobile-app-header-notifications-badge[hidden] {
    display: none !important;
  }

  /* Content shell — top pad for fixed app header.
     Bottom clearance reuses theme body padding via --og-mobile-bottom-nav-offset. */
  body.og-mobile-app-ready .og-mobile-app-shell {
    padding-top: calc(var(--og-mobile-app-header-height) + var(--og-mobile-app-safe-top));
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    overflow-x: clip;
    max-width: 100%;
  }

  /* Sprint 12: never allow horizontal page drag */
  body.og-mobile-app-ready {
    overflow-x: hidden;
    max-width: 100%;
  }

  body.og-mobile-app-ready .og-mobile-app-home-inner,
  body.og-mobile-app-ready .og-mobile-app-shop-inner,
  body.og-mobile-app-ready .og-mobile-app-cart-inner,
  body.og-mobile-app-ready .og-mobile-app-account-inner,
  body.og-mobile-app-ready .og-mobile-app-search-inner,
  body.og-mobile-app-ready .og-mobile-app-notifications-inner,
  body.og-mobile-app-ready .og-checkout-page {
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box;
  }

  /*
   * Product inner must NOT use overflow-x: clip — it creates a containing
   * block for position:fixed and sank the Sprint 6 sticky ATC off-viewport.
   * Horizontal containment stays on .og-product-page / shell instead.
   */
  body.og-mobile-app-ready .og-mobile-app-product-inner {
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
  }

  body.admin-bar.og-mobile-app-ready .og-mobile-app-shell {
    padding-top: calc(var(--og-mobile-app-header-height) + var(--og-mobile-app-safe-top) + 46px);
  }

  body.og-mobile-app-ready .og-mobile-app-shell .og-site-container,
  body.og-mobile-app-ready .og-mobile-app-shell .woocommerce,
  body.og-mobile-app-ready .og-mobile-app-shell .og-account-page,
  body.og-mobile-app-ready .og-mobile-app-shell .og-checkout-page {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Bottom navigation */
  body.og-mobile-app-ready .og-mobile-app-bottom-nav {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--og-mobile-app-z-bottom-nav);
    padding-bottom: var(--og-mobile-app-safe-bottom);
    padding-left: var(--og-mobile-app-safe-left);
    padding-right: var(--og-mobile-app-safe-right);
    background: var(--og-mobile-app-surface);
    border-top: 1px solid var(--og-mobile-app-border);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.05);
  }

  body.og-mobile-app-ready .og-mobile-app-bottom-nav-list {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 4px 4px 2px;
    min-height: var(--og-mobile-app-bottom-nav-height);
    box-sizing: border-box;
  }

  body.og-mobile-app-ready .og-mobile-app-bottom-nav-item {
    flex: 1 1 0;
    margin: 0;
    min-width: 0;
  }

  body.og-mobile-app-ready .og-mobile-app-bottom-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    padding: 6px 2px;
    color: var(--og-mobile-app-muted);
    text-decoration: none;
    border-radius: 12px;
    -webkit-tap-highlight-color: transparent;
  }

  body.og-mobile-app-ready .og-mobile-app-bottom-nav-link:hover {
    color: var(--og-mobile-app-ink);
  }

  body.og-mobile-app-ready .og-mobile-app-bottom-nav-link:focus {
    outline: none;
  }

  body.og-mobile-app-ready .og-mobile-app-bottom-nav-link:focus-visible {
    outline: 2px solid var(--og-mobile-app-primary);
    outline-offset: 2px;
    color: var(--og-mobile-app-primary);
  }

  body.og-mobile-app-ready .og-mobile-app-bottom-nav-link.is-active {
    color: var(--og-mobile-app-primary);
  }

  body.og-mobile-app-ready .og-mobile-app-bottom-nav-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
  }

  body.og-mobile-app-ready .og-mobile-app-bottom-nav-icon svg {
    display: block;
    width: 22px;
    height: 22px;
  }

  body.og-mobile-app-ready .og-mobile-app-bottom-nav-label {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  body.og-mobile-app-ready .og-mobile-app-bottom-nav .og-mobile-bottom-nav-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--og-mobile-app-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
  }

  body.og-mobile-app-ready .og-mobile-app-bottom-nav .og-mobile-bottom-nav-badge[hidden] {
    display: none !important;
  }

  /* Soften site footer under the app chrome (content still available) */
  body.og-mobile-app-ready .og-site-footer {
    margin-top: 4px;
    margin-bottom: 0;
    padding-top: var(--og-mobile-app-space-md);
    padding-bottom: var(--og-mobile-app-space-md);
  }

  body.og-mobile-app-ready .og-site-footer .og-site-container {
    padding-bottom: 0;
    padding-inline: var(--og-mobile-app-gutter, 16px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Center brand lockup — Mobile App only */
  body.og-mobile-app-ready .og-footer-brand {
    text-align: center;
  }

  body.og-mobile-app-ready .og-footer-brand strong,
  body.og-mobile-app-ready .og-footer-brand p {
    text-align: center;
  }

  /* Footer column accordions — Products / Services / Support */
  body.og-mobile-app-ready .og-footer-top {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  body.og-mobile-app-ready .og-footer-columns {
    grid-template-columns: 1fr;
    gap: 0;
  }

  body.og-mobile-app-ready .og-footer-column[data-og-footer-accordion] {
    border-top: 1px solid rgba(148, 163, 184, 0.18);
  }

  /*
   * Single legal divider before copyright:
   * Desktop/theme .og-footer-bottom { border-top } stays.
   * Do NOT also paint :last-child border-bottom on Support — that stacked two
   * 1px lines immediately above © copyright (live QA double-divider).
   * Products / Services / Support still separate via each column's border-top.
   */
  body.og-mobile-app-ready .og-footer-column[data-og-footer-accordion]:last-child {
    border-bottom: 0;
  }

  body.og-mobile-app-ready .og-footer-accordion-heading {
    margin: 0;
  }

  body.og-mobile-app-ready .og-footer-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 14px 0;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  body.og-mobile-app-ready .og-footer-accordion-trigger:focus {
    outline: none;
  }

  body.og-mobile-app-ready .og-footer-accordion-trigger:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 4px;
  }

  body.og-mobile-app-ready .og-footer-accordion-label {
    min-width: 0;
  }

  body.og-mobile-app-ready .og-footer-accordion-chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #cbd5e1;
    transition: transform 0.16s ease;
  }

  body.og-mobile-app-ready .og-footer-accordion-chevron::before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.16s ease;
  }

  body.og-mobile-app-ready .og-footer-column.is-open .og-footer-accordion-chevron {
    transform: rotate(90deg);
  }

  body.og-mobile-app-ready .og-footer-accordion-panel {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      max-height 0.16s ease,
      opacity 0.16s ease,
      margin 0.16s ease,
      padding 0.16s ease;
  }

  body.og-mobile-app-ready .og-footer-column.is-open .og-footer-accordion-panel {
    max-height: 280px;
    opacity: 1;
    margin: 0 0 12px;
    padding: 0 0 4px;
  }

  body.og-mobile-app-ready .og-footer-accordion-panel a {
    color: #cbd5e1;
    font-weight: 700;
    font-size: 0.94rem;
  }

  @media (prefers-reduced-motion: reduce) {
    body.og-mobile-app-ready .og-footer-accordion-chevron,
    body.og-mobile-app-ready .og-footer-accordion-chevron::before,
    body.og-mobile-app-ready .og-footer-accordion-panel {
      transition: none !important;
    }
  }

  /* Match existing thank-you behavior: no bottom nav over the receipt */
  body.og-print-theme-order-received.og-mobile-app-ready .og-mobile-app-bottom-nav {
    display: none !important;
  }

  /* -------------------------------------------------------------------------- */
  /* Sprint 2 scaffolding utilities (unused patterns stay cheap)                */
  /* -------------------------------------------------------------------------- */

  body.og-mobile-app-ready .og-mobile-app-section {
    padding: var(--og-mobile-app-space-lg) var(--og-mobile-app-gutter) 0;
  }

  body.og-mobile-app-ready .og-mobile-app-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--og-mobile-app-space-md);
    margin: 0 0 var(--og-mobile-app-space-md);
  }

  body.og-mobile-app-ready .og-mobile-app-section-heading h2 {
    margin: 0;
    color: var(--og-mobile-app-ink);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  body.og-mobile-app-ready .og-mobile-app-card {
    background: var(--og-mobile-app-surface);
    border: 1px solid var(--og-mobile-app-border);
    border-radius: var(--og-mobile-app-radius-card);
    box-shadow: var(--og-mobile-app-shadow);
  }

  body.og-mobile-app-ready .og-mobile-app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 18px;
    border-radius: var(--og-mobile-app-radius-button);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  body.og-mobile-app-ready .og-mobile-app-btn:focus {
    outline: none;
  }

  body.og-mobile-app-ready .og-mobile-app-btn:focus-visible {
    outline: 2px solid var(--og-mobile-app-primary);
    outline-offset: 2px;
  }

  body.og-mobile-app-ready .og-mobile-app-btn--primary {
    background: var(--og-mobile-app-primary);
    color: #fff;
  }

  body.og-mobile-app-ready .og-mobile-app-btn--primary:hover,
  body.og-mobile-app-ready .og-mobile-app-btn--primary:active {
    background: var(--og-mobile-app-primary-pressed);
  }

  body.og-mobile-app-ready .og-mobile-app-btn--secondary {
    background: var(--og-mobile-app-surface);
    color: var(--og-mobile-app-ink);
    border-color: var(--og-mobile-app-border);
  }

  /*
   * Scoped OG touch feedback — Checkout Back / Continue + Cart Checkout only.
   * Normal appearance stays as declared by each surface; :active is temporary.
   */
  body.og-mobile-app-ready .og-mobile-checkout-back,
  body.og-mobile-app-ready .og-mobile-checkout-continue,
  body.og-mobile-app-ready .og-mobile-cart-checkout {
    transition:
      transform 140ms ease,
      background-color 140ms ease,
      border-color 140ms ease,
      color 140ms ease,
      box-shadow 140ms ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  body.og-mobile-app-ready .og-mobile-checkout-continue:active:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not(.is-busy),
  body.og-mobile-app-ready .og-mobile-checkout-continue.is-og-pressed:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not(.is-busy),
  body.og-mobile-app-ready .og-mobile-cart-checkout:active:not(.is-blocked):not([aria-disabled="true"]):not(.disabled) {
    transform: scale(0.98);
    background: var(--og-mobile-app-accent, #f36b21) !important;
    border-color: var(--og-mobile-app-accent, #f36b21) !important;
    color: #fff !important;
    box-shadow: none;
  }

  /*
   * Back also uses .og-mobile-app-btn--secondary; later checkout surface rules
   * (background:#fff) win the cascade for :active unless specificity + !important
   * beat both secondary and surface declarations.
   * .is-og-pressed is set on pointerdown so quick taps paint before step change.
   */
  body.og-mobile-app-ready .og-mobile-checkout-back.og-mobile-app-btn--secondary:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not(.is-blocked):active,
  body.og-mobile-app-ready .og-mobile-checkout-back.og-mobile-app-btn--secondary.is-og-pressed:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not(.is-blocked) {
    background: var(--og-mobile-app-accent, #f36b21) !important;
    border-color: var(--og-mobile-app-accent, #f36b21) !important;
    color: #fff !important;
    transform: scale(0.98);
    box-shadow: none;
  }

  /* Keep keyboard focus rings above the temporary pressed treatment. */
  body.og-mobile-app-ready .og-mobile-checkout-back:focus-visible,
  body.og-mobile-app-ready .og-mobile-checkout-continue:focus-visible,
  body.og-mobile-app-ready .og-mobile-cart-checkout:focus-visible {
    outline: 2px solid var(--og-mobile-app-primary, #006cff);
    outline-offset: 2px;
  }

  body.og-mobile-app-ready .og-mobile-app-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--og-mobile-app-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
  }
}

/* Desktop widths: if a prior mobile enhance left accordion DOM, keep columns usable */
@media (min-width: 821px) {
  body.og-mobile-app-ready .og-footer-accordion-trigger {
    display: block;
    width: auto;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    cursor: default;
    pointer-events: none;
  }

  body.og-mobile-app-ready .og-footer-accordion-chevron {
    display: none;
  }

  body.og-mobile-app-ready .og-footer-accordion-panel {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    gap: 10px;
  }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  body.og-mobile-app-ready .og-mobile-app-icon-btn,
  body.og-mobile-app-ready .og-mobile-app-bottom-nav-link,
  body.og-mobile-app-ready .og-mobile-app-btn,
  body.og-mobile-app-ready .og-mobile-checkout-back,
  body.og-mobile-app-ready .og-mobile-checkout-continue,
  body.og-mobile-app-ready .og-mobile-cart-checkout {
    transition: none !important;
  }

  body.og-mobile-app-ready .og-mobile-checkout-back:active,
  body.og-mobile-app-ready .og-mobile-checkout-back.is-og-pressed,
  body.og-mobile-app-ready .og-mobile-checkout-continue:active,
  body.og-mobile-app-ready .og-mobile-checkout-continue.is-og-pressed,
  body.og-mobile-app-ready .og-mobile-cart-checkout:active {
    transform: none;
  }
}