/* Detail purchase presentation. The existing form and basket controller are reused. */
.detail-mobile-buy-bar[hidden],
.detail-mobile-buy-backdrop[hidden],
.detail-mobile-buy-price,
.detail-mobile-buy-spacer { display: none; }

.product-page-info-right #detail-buy-panel .quantity-control__status:focus-visible,
:is(.product-page-info-right, .detail-mobile-buy-bar) #detail-buy-panel :is(button, a, input):is(:focus, :focus-visible) { outline: none; box-shadow: none; }

@media (max-width: 600px) {
  html.has-detail-buy-edit-lock,
  body.has-detail-buy-edit-lock {
    overflow: hidden;
    overscroll-behavior: none;
  }
  body.has-detail-buy-edit-lock { touch-action: none; }
  .detail-mobile-buy-backdrop {
    position: fixed;
    z-index: 1203;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, .4);
    opacity: 0;
    pointer-events: none;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 280ms cubic-bezier(.2,.7,.2,1);
  }
  .detail-mobile-buy-backdrop[data-visible],
  .detail-mobile-buy-backdrop[data-closing] { pointer-events: auto; }
  .detail-mobile-buy-backdrop[data-visible] { opacity: 1; }
  .has-detail-buy-edit-lock .detail-mobile-buy-bar { z-index: 1204; }
  .has-detail-mobile-buy { scroll-padding-bottom: calc(var(--detail-buy-nav-space, 0px) + var(--detail-mobile-buy-height, 66px)); }
  .has-detail-mobile-buy .product-page-info-right .price-block > .price { display: none; }
  .has-detail-mobile-buy .product-page-info-right .detail-delivery-note {
    margin: 0 0 20px;
    padding-bottom: 20px;
    border-bottom: .5px solid rgba(123, 110, 102, .5);
  }
  .has-detail-mobile-buy .product-page-info-right .sales-block-title { padding-top: 0; }
  .has-detail-mobile-buy .detail-mobile-buy-spacer { display: block; height: var(--detail-mobile-buy-height, 66px); }
  .detail-mobile-buy-bar {
    position: fixed;
    z-index: 1190;
    left: 0;
    right: 0;
    bottom: var(--detail-buy-nav-space, 0px);
    box-sizing: border-box;
    padding: 6px 20px;
    background: #fff;
    box-shadow: none;
    color: #433228;
    font: 500 14px/1.2 Montserrat, Arial, sans-serif;
  }
  .detail-mobile-buy-bar[data-without-nav] { padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .has-detail-buy-keyboard { background-color: #fff; }
  .has-detail-buy-keyboard body { background-color: var(--detail-buy-page-background, #fff); }
  .detail-mobile-buy-bar[data-keyboard-owned] {
    position: absolute;
    top: 0;
    bottom: auto;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    transform: translate3d(0, var(--detail-buy-document-y, 0px), 0);
    will-change: transform;
  }
  .detail-mobile-buy-bar__surface { display: none; }
  .detail-mobile-buy-bar[data-keyboard-owned] > .detail-mobile-buy-bar__surface,
  .detail-mobile-buy-bar[data-returning] > .detail-mobile-buy-bar__surface {
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--detail-buy-keyboard-fill, var(--detail-buy-return-fill, 0px)));
    background: #fff;
    pointer-events: none;
  }
  .detail-mobile-buy-bar #detail-buy-panel {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .detail-mobile-buy-bar #detail-buy-panel > .quantity-control__submit,
  .detail-mobile-buy-bar #detail-buy-panel > .quantity-control__status {
    box-sizing: border-box;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    height: 53.741px;
    margin: 0;
    padding: 5px 12px 23px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #faa61a;
    color: #433228;
    -webkit-text-fill-color: currentColor;
    font: 700 18px/22px Montserrat, Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
  }
  .detail-mobile-buy-bar #detail-buy-panel > .quantity-control__submit::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 15px;
    margin-right: 8px;
    vertical-align: -1px;
    background: url('../images/detail-mobile-buy-bar/cart.svg') center no-repeat;
  }
  .detail-mobile-buy-bar #detail-buy-panel > .quantity-control__submit[data-price-form-open]::before { display: none; }
  .detail-mobile-buy-bar #detail-buy-panel > .detail-mobile-buy-price {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #433228;
    font: 500 14px/17px Montserrat, Arial, sans-serif;
    white-space: nowrap;
    pointer-events: none;
  }
  .detail-mobile-buy-price__current,
  .detail-mobile-buy-price__old,
  .detail-mobile-buy-price__unit { font: inherit; color: inherit; }
  .detail-mobile-buy-price__old {
    position: relative;
    font-size: 12px;
    color: #965e00;
  }
  .detail-mobile-buy-price__old > img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42px;
    height: 1.5px;
    transform: translate(-50%, -50%);
  }
  .detail-mobile-buy-price__separator { color: inherit; font-size: 12px; }
  .detail-mobile-buy-price__unit { color: #965e00; font-size: 12px; }
  .detail-mobile-buy-bar #detail-buy-panel.is-qty > .detail-mobile-buy-price,
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition="return"] > .detail-mobile-buy-price { display: none; }
  .detail-mobile-buy-bar #detail-buy-panel.is-qty { gap: 10px; }
  .detail-mobile-buy-bar #detail-buy-panel.is-qty > .quantity-control__status,
  .detail-mobile-buy-bar #detail-buy-panel.is-qty > .quantity-control {
    box-sizing: border-box;
    flex: 0 0 calc(50% - 5px);
    width: calc(50% - 5px);
    min-width: 0;
    height: 53.741px;
  }
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition]:not(.is-qty) > .quantity-control__status {
    display: inline-flex !important;
    flex-basis: 100%;
    width: 100%;
  }
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition]:not(.is-qty) > .quantity-control {
    display: flex !important;
    flex-basis: 0;
    width: 0;
    min-width: 0;
    padding-inline: 0;
    gap: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(12px);
  }
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition] > :is(.quantity-control__status, .quantity-control) {
    will-change: flex-basis, width, opacity, transform;
    transition: flex-basis 550ms cubic-bezier(.22,1.18,.36,1), width 550ms cubic-bezier(.22,1.18,.36,1), padding 550ms cubic-bezier(.22,1.18,.36,1), gap 550ms cubic-bezier(.22,1.18,.36,1), opacity 320ms ease, transform 550ms cubic-bezier(.22,1.18,.36,1);
  }
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition] {
    will-change: gap;
    transition: gap 550ms cubic-bezier(.22,1.18,.36,1);
  }
  .detail-mobile-buy-bar #detail-buy-panel.is-qty[data-qty-transition] > .quantity-control { opacity: 1; transform: translateX(0); }
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition] > .quantity-control > :is(.quantity-control__btn, .quantity-control__input) {
    will-change: opacity, transform;
    transition: opacity 260ms ease, transform 430ms cubic-bezier(.2,1.5,.35,1);
  }
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition]:not(.is-qty) > .quantity-control > :is(.quantity-control__btn, .quantity-control__input) {
    opacity: 0;
    transform: translateY(5px) scale(.62);
  }
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition="enter"].is-qty > .quantity-control > .quantity-control__btn:first-child { transition-delay: 130ms; }
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition="enter"].is-qty > .quantity-control > .quantity-control__input { transition-delay: 180ms; }
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition="enter"].is-qty > .quantity-control > .quantity-control__btn:last-child { transition-delay: 230ms; }
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition="return"]:not(.is-qty) > .quantity-control > .quantity-control__btn:first-child { transition-delay: 60ms; }
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition="return"]:not(.is-qty) > .quantity-control > .quantity-control__input { transition-delay: 30ms; }
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition="return"]:not(.is-qty) > .quantity-control > .quantity-control__btn:last-child { transition-delay: 0ms; }
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition="return"] > .quantity-control__status {
    position: relative;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-size: 0;
    cursor: default;
  }
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition="return"] > .quantity-control__status::before,
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition="return"] > .quantity-control__status::after {
    display: inline-block;
    opacity: 0;
    transform: translateY(7px) scale(.82);
    animation: detailBuyReturnContent 460ms cubic-bezier(.2,1.55,.35,1) 110ms forwards;
  }
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition="return"] > .quantity-control__status::before {
    content: '';
    width: 16px;
    height: 15px;
    margin-right: 8px;
    background: url('../images/detail-mobile-buy-bar/cart.svg') center no-repeat;
  }
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition="return"] > .quantity-control__status::after {
    content: 'В корзину';
    color: #433228;
    -webkit-text-fill-color: #433228;
    font: 700 18px/22px Montserrat, Arial, sans-serif;
  }
  @keyframes detailBuyReturnContent {
    0% { opacity: 0; transform: translateY(7px) scale(.82); }
    68% { opacity: 1; transform: translateY(0) scale(1.06); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  .detail-mobile-buy-bar #detail-buy-panel > .quantity-control__status {
    order: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
  }
  .detail-mobile-buy-bar #detail-buy-panel .detail-mobile-buy-cart-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: inherit;
    font: inherit;
    text-decoration: none;
  }
  .detail-mobile-buy-bar #detail-buy-panel > .quantity-control {
    order: 2;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    padding: 5px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: #fff2ca;
  }
  .detail-mobile-buy-bar #detail-buy-panel .quantity-control__input {
    box-sizing: border-box;
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #433228;
    -webkit-text-fill-color: currentColor;
    font: 600 16px/1.5 Montserrat, Arial, sans-serif;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
  }
  .detail-mobile-buy-bar .quantity-control__input::-webkit-inner-spin-button,
  .detail-mobile-buy-bar .quantity-control__input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
  .detail-mobile-buy-bar #detail-buy-panel .quantity-control__btn {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
  }
  .detail-mobile-buy-bar .quantity-control__btn svg { display: block; flex-shrink: 0; }
  .detail-mobile-buy-bar #detail-buy-panel > .quantity-control__submit:disabled {
    background: rgba(250, 166, 26, .5);
    color: rgba(67, 50, 40, .5);
    opacity: 1;
    cursor: not-allowed;
  }
  .detail-mobile-buy-bar .quantity-control__btn:disabled { opacity: .45; cursor: not-allowed; }
  .detail-mobile-buy-bar .quantity-control__submit:disabled::before { opacity: .5; }
  .detail-mobile-buy-bar .quantity-control__message {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: calc(100% + 6px);
    z-index: 1;
    display: block;
    max-height: 0;
    margin: 0;
    padding: 0 10px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    border: 1px solid transparent;
    border-radius: 10px;
    background: #fff;
    color: #b91c1c;
    font: 500 12px/1.3 Montserrat, Arial, sans-serif;
    pointer-events: none;
    transition: max-height 180ms ease, padding 180ms ease, opacity 180ms ease, transform 220ms cubic-bezier(.22,1,.36,1), visibility 0s linear 220ms;
  }
  .detail-mobile-buy-bar .quantity-control__message.is-visible { max-height: 72px; padding-block: 7px; opacity: 1; visibility: visible; transform: translateY(0); border-color: #edcbc6; transition-delay: 0s; }
  .detail-mobile-buy-bar .quantity-control__message.is-confirmation { color: #433228; border-color: #ead9c9; }
}

@media (max-width: 600px) and (hover: hover) and (pointer: fine) {
  .detail-mobile-buy-bar #detail-buy-panel > :is(.quantity-control__submit, .quantity-control__status):not(:disabled):hover { background: #ba1b1e; color: #fff; }
  .detail-mobile-buy-bar #detail-buy-panel > .quantity-control__submit:not(:disabled):hover::before { filter: brightness(0) invert(1); }
  .detail-mobile-buy-bar #detail-buy-panel:has(> .quantity-control__submit:hover:not(:disabled)) .detail-mobile-buy-price,
  .detail-mobile-buy-bar #detail-buy-panel:has(> .quantity-control__submit:hover:not(:disabled)) .detail-mobile-buy-price__old,
  .detail-mobile-buy-bar #detail-buy-panel:has(> .quantity-control__submit:hover:not(:disabled)) .detail-mobile-buy-price__unit { color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .detail-mobile-buy-bar #detail-buy-panel > :is(.quantity-control__submit, .quantity-control__status),
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition],
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition] > :is(.quantity-control__status, .quantity-control),
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition] > .quantity-control > :is(.quantity-control__btn, .quantity-control__input),
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition="return"] > .quantity-control__status::before,
  .detail-mobile-buy-bar #detail-buy-panel[data-qty-transition="return"] > .quantity-control__status::after,
  .detail-mobile-buy-bar .quantity-control__message { transition: none; animation: none; }
  .detail-mobile-buy-backdrop { transition: none; }
}
