/* CARMOND-CODEX-CHANGE 2026-07-30: mobile launch UX, safe overlays and 44px primary targets. */

.cookieagry {
  pointer-events: none;
}

.cookieagry .cookieagry-alert {
  max-height: min(35vh, 240px);
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
}

.cookieagry #cookieagry {
  min-height: 44px;
}

body:has(.cookieagry[style*="display: block"]) .chat {
  bottom: 124px;
}

.fancybox-active .chat,
.is-header-checkout .chat,
body:has(#ocheckout) .chat {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.fancybox-close,
.fancybox-close-small {
  min-width: 44px;
  min-height: 44px;
}

.cart__item-number {
  width: 136px;
}

.cart__item .ui-number__decrease,
.cart__item .ui-number__increase {
  width: 44px;
  min-height: 44px;
}

.cart__item-action-toggle {
  min-width: 44px;
  min-height: 44px;
}

.cart__item-action-link {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.ocheckout-page .ock-item-info {
  padding-right: 44px;
}

.ocheckout-page .ock-qty-btn,
.ocheckout-page .ock-qty-input,
.ocheckout-page .ock-item-remove,
.ocheckout-page .ock-extra-qty-btn,
.ocheckout-page .ock-extra-qty-input,
.ocheckout-page .ock-related-add {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}

.ocheckout-page .ock-item-remove {
  top: 4px;
  right: -4px;
}

.ocheckout-page .ock-btn-secondary,
.ocheckout-page .ock-link {
  min-height: 44px;
}

@media (max-width: 991px) {
  .cm-home .cm-intro {
    padding-top: 10px;
    padding-bottom: 6px;
  }

  .cm-home .cm-intro-box {
    gap: 12px;
    padding: 14px;
  }

  .cm-home .cm-brand-title {
    margin-bottom: 6px;
    font-size: 28px;
  }

  .cm-home .cm-intro-text h2 {
    margin-bottom: 8px;
    font-size: 21px;
    line-height: 1.2;
  }

  .cm-home .cm-intro-text p {
    font-size: 14px;
    line-height: 1.4;
  }

  .cm-home .cm-desc-pills {
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 10px;
    padding-bottom: 2px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .cm-home .cm-desc-pill {
    flex: 0 0 auto;
    min-height: 32px;
    font-size: 12px;
  }

  .cm-home .cm-badges {
    display: flex;
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 4px;
    border-top: 1px solid var(--line);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .cm-home .cm-badge {
    flex: 0 0 min(270px, 78vw);
    min-height: 96px;
    padding: 12px;
    border: 1px solid var(--line) !important;
    border-radius: 6px;
    scroll-snap-align: start;
  }

  .cm-home .cm-badge-icon {
    width: 32px;
    height: 32px;
  }

  .cm-home .cm-badge-icon svg {
    width: 30px;
    height: 30px;
  }

  .cm-home .cm-badge b {
    margin-bottom: 4px;
    font-size: 14px;
  }

  .cm-home .cm-badge span {
    font-size: 13px;
    line-height: 1.35;
  }

  .cm-home .cm-hero {
    padding-top: 8px;
  }

  .cm-home .cm-banner {
    min-height: 430px;
  }

  .cm-home .cm-banner h1 {
    margin-bottom: 8px;
    font-size: 25px;
  }

  .cm-home .cm-banner p {
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.4;
  }

  .cm-home .cm-fast {
    margin-top: 12px;
  }

  .cm-home .cm-fast-btn,
  .cm-home .cm-channel,
  .cm-home .cm-quick {
    min-height: 44px;
  }
}

@media (max-width: 767px) {
  body:has(.cookieagry[style*="display: block"]) .chat {
    bottom: 135px;
  }

  .cookieagry {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .cookieagry .cookieagry-alert {
    margin: 10px;
    max-height: min(35vh, 210px);
  }

  .cookieagry .cookieagry__text {
    min-width: 0;
    font-size: 12px;
    line-height: 1.35;
  }

  .cookieagry .cookieagry__action .ui-btn {
    min-width: 82px;
    min-height: 44px;
  }

  .cart__item-number {
    width: 136px;
  }

  .ocheckout-page .ock-card {
    padding: 14px;
  }

  .ocheckout-page .ock-item {
    gap: 10px;
  }

  .ocheckout-page .ock-item-bottom {
    align-items: flex-end;
    gap: 8px;
  }
}

@media (max-width: 640px) {
  .cm-home .cm-intro-box {
    gap: 8px;
    padding: 12px;
  }

  .cm-home .cm-brand-title {
    font-size: 26px;
  }

  .cm-home .cm-intro-text h2 {
    font-size: 19px;
  }

  .cm-home .cm-intro-text p {
    font-size: 13.5px;
    line-height: 1.35;
  }

  .cm-home .cm-badges {
    padding-top: 6px;
  }

  .cm-home .cm-badge {
    flex-basis: min(250px, 74vw);
    min-height: 82px;
    padding: 8px;
  }

  .cm-home .cm-badge-icon {
    width: 28px;
    height: 28px;
  }

  .cm-home .cm-badge-icon svg {
    width: 27px;
    height: 27px;
  }

  .cm-home .cm-badge b {
    font-size: 13px;
  }

  .cm-home .cm-badge span {
    font-size: 12px;
    line-height: 1.3;
  }

  .cm-home .cm-banner {
    min-height: 410px;
  }

  .cm-home .cm-banner-content {
    display: flex;
    flex-direction: column;
  }

  .cm-home .cm-banner-content .cm-kicker {
    order: 1;
  }

  .cm-home .cm-banner-content h1 {
    order: 2;
  }

  .cm-home .cm-banner-content .cm-actions {
    order: 3;
    margin-bottom: 12px;
  }

  .cm-home .cm-banner-content p {
    order: 4;
  }

  .cm-home .cm-banner-content .cm-fast {
    order: 5;
  }
}