/* Bitrix SOA: .bx-soa-pp-company-graf-container uses height:0 + padding-top:50%.
   Percent padding is relative to the COMPANY width, so each logo becomes a tall column. */

#bx-soa-order .bx-soa-pp-company,
#bx-soa-delivery .bx-soa-pp-company,
#bx-soa-paysystem .bx-soa-pp-company {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}

#bx-soa-order .bx-soa-pp-company-graf-container,
#bx-soa-delivery .bx-soa-pp-company-graf-container,
#bx-soa-paysystem .bx-soa-pp-company-graf-container {
  width: 97px !important;
  height: 56px !important;
  max-width: 97px !important;
  max-height: 56px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  position: relative !important;
  float: none !important;
  background-color: #fff;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

#bx-soa-order .bx-soa-pp-company-logo,
#bx-soa-delivery .bx-soa-pp-company-logo,
#bx-soa-paysystem .bx-soa-pp-company-logo {
  padding: 0 !important;
  height: auto !important;
  float: none !important;
  width: auto !important;
}

#bx-soa-order .bx-soa-pp-company-image,
#bx-soa-delivery .bx-soa-pp-company-image,
#bx-soa-paysystem .bx-soa-pp-company-image {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  bottom: 4px !important;
  left: 4px !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

#bx-soa-order .bx-soa-pp-company img,
#bx-soa-delivery .bx-soa-pp-company img,
#bx-soa-paysystem .bx-soa-pp-company img {
  max-width: 88px !important;
  max-height: 44px !important;
  width: auto !important;
  height: auto !important;
  display: inline-block !important;
  object-fit: contain !important;
}

#bx-soa-order .bx-soa-section-content,
#bx-soa-delivery .bx-soa-section-content,
#bx-soa-paysystem .bx-soa-section-content,
#bx-soa-order .bx-soa-pp,
#bx-soa-delivery .bx-soa-pp,
#bx-soa-paysystem .bx-soa-pp,
#bx-soa-order .bx-soa-pp-item-container,
#bx-soa-delivery .bx-soa-pp-item-container,
#bx-soa-paysystem .bx-soa-pp-item-container,
#bx-soa-order .bx-soa-pp-desc-container,
#bx-soa-delivery .bx-soa-pp-desc-container,
#bx-soa-paysystem .bx-soa-pp-desc-container {
  height: auto !important;
  min-height: 0 !important;
}

/* Icons in a column; titles and description sit under them, not in the center column. */
#bx-soa-delivery .bx-soa-pp,
#bx-soa-paysystem .bx-soa-pp {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}

#bx-soa-delivery .bx-soa-pp-item-container,
#bx-soa-paysystem .bx-soa-pp-item-container,
#bx-soa-delivery .bx-soa-pp-desc-container,
#bx-soa-paysystem .bx-soa-pp-desc-container {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#bx-soa-delivery .bx-soa-pp-item-container .bx-soa-pp-company,
#bx-soa-paysystem .bx-soa-pp-item-container .bx-soa-pp-company {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 8px 0 !important;
  text-align: left !important;
}

#bx-soa-delivery .bx-soa-pp-company-smalltitle,
#bx-soa-paysystem .bx-soa-pp-company-smalltitle {
  display: block !important;
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 8px 0 0 !important;
  margin: 0 !important;
  text-align: left !important;
  color: #1e1e1e !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

#bx-soa-delivery .bx-soa-pp-desc-container,
#bx-soa-paysystem .bx-soa-pp-desc-container {
  padding: 8px 0 0 !important;
  border: none !important;
}

#bx-soa-delivery .bx-soa-pp-desc-container .bx-soa-pp-company,
#bx-soa-paysystem .bx-soa-pp-desc-container .bx-soa-pp-company {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  text-align: left !important;
}

#bx-soa-delivery .bx-soa-pp-company-title,
#bx-soa-paysystem .bx-soa-pp-company-title,
#bx-soa-delivery .bx-soa-pp-desc-container .bx-soa-pp-company-smalltitle,
#bx-soa-paysystem .bx-soa-pp-desc-container .bx-soa-pp-company-smalltitle {
  order: -1;
  padding: 0 0 8px !important;
  color: #1e1e1e !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

#bx-soa-delivery .bx-soa-pp-company-desc,
#bx-soa-paysystem .bx-soa-pp-company-desc {
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px 0 0 !important;
  margin: 0 !important;
  color: #1e1e1e !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

#bx-soa-delivery .bx-soa-pp-price,
#bx-soa-paysystem .bx-soa-pp-price {
  position: static !important;
  margin-top: 6px !important;
}

/* Bitrix SOA toggles .bx-soa-cart-total between position:fixed and
   position:absolute on scroll. Near the footer that loop changes page
   height, so the summary and footer jitter as if they are still loading. */
html:has(body[data-page="order"]) {
  scroll-behavior: auto;
}

body[data-page="order"] {
  overflow-anchor: none;
}

body[data-page="order"] .footer {
  overflow-anchor: none;
}

/* Bitrix clones the total into #bx-soa-total-mobile (visible-xs).
   Bootstrap 4 has no visible-xs, so the clone stays on desktop as a
   small card. Keep a single in-flow total block. */
body[data-page="order"] #bx-soa-total-mobile {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#bx-soa-total.bx-soa-sidebar,
body[data-page="order"] #bx-soa-total {
  height: auto !important;
  max-height: none !important;
}

#bx-soa-total .bx-soa-cart-total-ghost {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

#bx-soa-total .bx-soa-cart-total,
#bx-soa-total .bx-soa-cart-total.bx-soa-cart-total-fixed,
#bx-soa-total .bx-soa-cart-total.bx-soa-cart-total-bottom,
#bx-soa-total-mobile .bx-soa-cart-total {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

body[data-page="order"] .page-content {
  width: 100%;
  max-width: var(--container-narrow-max);
  overflow-x: visible;
}

body[data-page="order"] .page-content .container,
body[data-page="order"] .page-content .container-fluid,
body[data-page="order"] #bx-soa-order-form,
body[data-page="order"] .bx-soa-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Outer row is #bx-soa-order.row.bx-{theme}, NOT .row.bx-soa.
   .bx-soa is the left column (col-sm-9 bx-soa). */
body[data-page="order"] #bx-soa-order.row,
body[data-page="order"] #bx-soa-order-form > .row {
  width: 100%;
  max-width: 100%;
}

body[data-page="order"] .bx-soa-section,
body[data-page="order"] .bx-soa-section-content,
body[data-page="order"] .bx-soa-coupon,
body[data-page="order"] .bx-soa-auth,
body[data-page="order"] .alert {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body[data-page="order"] .bx-soa-auth,
body[data-page="order"] #bx-soa-auth,
body[data-page="order"] .bx-soa .alert,
body[data-page="order"] .alert {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 16px 16px 16px 48px;
}

body[data-page="order"] .bx-soa-auth .row,
body[data-page="order"] .alert .row {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

body[data-page="order"] .bx-soa-auth [class*="col-"],
body[data-page="order"] .alert [class*="col-"] {
  float: none;
  min-width: 0;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

body[data-page="order"] .bx-soa-auth img,
body[data-page="order"] .bx-soa-auth svg,
body[data-page="order"] .bx-soa-auth .glyphicon,
body[data-page="order"] .bx-soa-auth .fa,
body[data-page="order"] .alert .glyphicon,
body[data-page="order"] .alert .fa,
body[data-page="order"] .alert [class*="icon"] {
  position: absolute !important;
  left: 16px !important;
  top: 16px !important;
  float: none !important;
  margin: 0 !important;
  transform: none !important;
  width: 20px;
  height: 20px;
  max-width: 24px;
  max-height: 24px;
}

body[data-page="order"] .bx-soa-auth::before,
body[data-page="order"] .alert::before {
  left: 16px;
  top: 16px;
  margin: 0;
}

/* Bitrix grid is col-sm-9 + col-sm-3 sidebar. Stack the total under the
   form at full container width on PC and tablet. */
body[data-page="order"] #bx-soa-order.row,
body[data-page="order"] #bx-soa-order-form > .row {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body[data-page="order"] #bx-soa-order.row > [class*="col-"],
body[data-page="order"] #bx-soa-order.row > .col-sm-9,
body[data-page="order"] #bx-soa-order.row > .col-sm-3,
body[data-page="order"] #bx-soa-order.row > #bx-soa-total,
body[data-page="order"] #bx-soa-order.row > .bx-soa-sidebar,
body[data-page="order"] #bx-soa-total,
body[data-page="order"] #bx-soa-total.col-sm-3,
body[data-page="order"] #bx-soa-total.bx-soa-sidebar,
body[data-page="order"] .bx-soa-sidebar {
  display: block !important;
  float: none !important;
  clear: both !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  height: auto !important;
}

body[data-page="order"] #bx-soa-total {
  order: 2;
  margin-top: 16px;
}