/* ==================================================== ВНЕШНИЙ ШТАТНЫЙ КОНТЕЙНЕР ==================================================== */ body.single-product .product-pay-delivery > .product-delivery-info { position: relative !important; z-index: 5000 !important; overflow: visible !important; } /* * КЛЮЧЕВОЙ МОМЕНТ. * * Карточки и строка НЕ должны становиться * containing block для popup. * * Тогда Доставка, Оплата и Гарантия * позиционируются относительно общего блока, * а не относительно своих узких колонок. */ body.single-product .msk-product-info-row, body.single-product .msk-product-info-card { position: static !important; } /* ==================================================== САМИ ТРИ КНОПКИ ==================================================== */ body.single-product .msk-product-info-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body.single-product .msk-product-info-card { width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; box-sizing: border-box !important; } body.single-product .msk-product-info-trigger { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* ==================================================== ВСЕ ТРИ POPUP ==================================================== */ body.single-product #delivery-popup-info, body.single-product #payment-popup-info, body.single-product #warranty-popup-info { /* * Все три теперь позиционируются * относительно одного общего контейнера. */ position: absolute !important; top: calc(100% + 9px) !important; left: 0 !important; right: auto !important; bottom: auto !important; /* * ПК: * * Это та же ширина, * которую у тебя уже имеет * .msk-product-info-row. */ width: calc(100% + 105px) !important; min-width: 0 !important; max-width: none !important; height: auto !important; margin: 0 !important; transform: none !important; box-sizing: border-box !important; z-index: 999999 !important; opacity: 1 !important; background: linear-gradient( 145deg, #fffdfa 0%, #ffffff 72% ) !important; background-color: #ffffff !important; background-image: none !important; border: 1px solid rgba(184, 151, 86, .32) !important; border-radius: 14px !important; box-shadow: 0 14px 34px rgba(46, 39, 31, .14) !important; font-family: Manrope, Arial, sans-serif !important; overflow: hidden !important; isolation: isolate !important; } /* ==================================================== ЗАКРЫТЫЕ ==================================================== */ body.single-product #delivery-popup-info[hidden], body.single-product #payment-popup-info[hidden], body.single-product #warranty-popup-info[hidden] { display: none !important; } /* ==================================================== ОТКРЫТЫЕ ==================================================== */ body.single-product #delivery-popup-info.is-open:not([hidden]), body.single-product #payment-popup-info.is-open:not([hidden]), body.single-product #warranty-popup-info.is-open:not([hidden]) { display: block !important; opacity: 1 !important; } /* ==================================================== УБИРАЕМ СТАРУЮ СТРЕЛКУ / ТРЕУГОЛЬНИК ==================================================== */ body.single-product #delivery-popup-info::before, body.single-product #delivery-popup-info::after, body.single-product #payment-popup-info::before, body.single-product #payment-popup-info::after, body.single-product #warranty-popup-info::before, body.single-product #warranty-popup-info::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; } /* ==================================================== ВНУТРЕННИЕ СЕКЦИИ ==================================================== */ body.single-product .delivery-popup-info .delivery-info-unit { position: relative !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 17px 20px !important; box-sizing: border-box !important; color: #68625d !important; background: #ffffff !important; border: 0 !important; } body.single-product .delivery-popup-info .delivery-info-content { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; background: #ffffff !important; } /* ==================================================== ТОНКИЙ РАЗДЕЛИТЕЛЬ ==================================================== */ body.single-product .delivery-popup-info .delivery-info-unit + .delivery-info-unit { border-top: 1px solid rgba(184, 151, 86, .17) !important; } /* ==================================================== ЗАГОЛОВКИ ==================================================== */ body.single-product .delivery-popup-info h1, body.single-product .delivery-popup-info h2, body.single-product .delivery-popup-info h3, body.single-product .delivery-popup-info h4, body.single-product .delivery-popup-info h5, body.single-product .delivery-popup-info h6 { position: relative !important; margin: 0 0 9px !important; padding: 0 34px 0 12px !important; color: #36322e !important; font-family: Manrope, Arial, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.4 !important; /* * Одна единственная * золотая полоска. */ border: 0 !important; border-left: 3px solid #b89557 !important; background: none !important; background-image: none !important; box-shadow: none !important; } /* ==================================================== УБИРАЕМ СТАРЫЕ ЧЁРНЫЕ ПОЛОСКИ BONO ==================================================== */ body.single-product .delivery-popup-info h1::before, body.single-product .delivery-popup-info h1::after, body.single-product .delivery-popup-info h2::before, body.single-product .delivery-popup-info h2::after, body.single-product .delivery-popup-info h3::before, body.single-product .delivery-popup-info h3::after, body.single-product .delivery-popup-info h4::before, body.single-product .delivery-popup-info h4::after, body.single-product .delivery-popup-info h5::before, body.single-product .delivery-popup-info h5::after, body.single-product .delivery-popup-info h6::before, body.single-product .delivery-popup-info h6::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; } /* ==================================================== ПРИНИМАЕМ К ОПЛАТЕ ==================================================== */ body.single-product .msk-payment-accept-title { position: relative !important; display: block !important; margin: 0 0 11px !important; padding: 0 0 0 12px !important; color: #36322e !important; font-family: Manrope, Arial, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.4 !important; border: 0 !important; border-left: 3px solid #b89557 !important; background: none !important; box-shadow: none !important; } body.single-product .msk-payment-accept-title::before, body.single-product .msk-payment-accept-title::after { content: none !important; display: none !important; border: 0 !important; background: none !important; } /* ==================================================== СПИСКИ ==================================================== */ body.single-product .delivery-popup-info ul { margin: 0 0 10px !important; padding: 0 0 0 21px !important; } body.single-product .delivery-popup-info ol { margin: 0 0 10px !important; padding: 0 0 0 22px !important; } body.single-product .delivery-popup-info li { margin: 0 0 7px !important; padding: 0 0 0 2px !important; color: #68625d !important; font-family: Manrope, Arial, sans-serif !important; font-size: 12.5px !important; line-height: 1.5 !important; } body.single-product .delivery-popup-info li:last-child { margin-bottom: 0 !important; } body.single-product .delivery-popup-info li::marker { color: #b89557 !important; } /* ==================================================== ТЕКСТ ==================================================== */ body.single-product .delivery-popup-info p { margin: 0 0 9px !important; color: #68625d !important; font-family: Manrope, Arial, sans-serif !important; font-size: 12.5px !important; line-height: 1.55 !important; } /* ==================================================== ЖИРНЫЙ ТЕКСТ ==================================================== */ body.single-product .delivery-popup-info strong, body.single-product .delivery-popup-info b { color: #403b36 !important; font-weight: 700 !important; } /* ==================================================== ССЫЛКИ ==================================================== */ body.single-product .delivery-popup-info a { color: #9a7132 !important; font-weight: 600 !important; text-decoration: none !important; border-bottom: 1px solid rgba(154, 113, 50, .27) !important; background-image: none !important; box-shadow: none !important; } /* ==================================================== КРЕСТИК ==================================================== */ body.single-product .product-pay-delivery [class*="-popup-close"] { position: absolute !important; top: 10px !important; right: 10px !important; z-index: 50 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; margin: 0 !important; padding: 0 !important; color: #8c8175 !important; background: #ffffff !important; border: 1px solid rgba(184,151,86,.30) !important; border-radius: 50% !important; box-shadow: 0 2px 8px rgba(0,0,0,.06) !important; font-size: 17px !important; line-height: 1 !important; cursor: pointer !important; } /* ==================================================== МИР / СБП — ОБЩИЙ КОНТЕЙНЕР ==================================================== */ body.single-product .msk-payment-methods-row { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 9px !important; } /* ==================================================== МИР / СБП — КАРТОЧКИ ==================================================== */ body.single-product .msk-payment-method-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 78px !important; height: 42px !important; min-width: 78px !important; min-height: 42px !important; margin: 0 !important; padding: 6px 10px !important; box-sizing: border-box !important; color: #333 !important; background: #ffffff !important; border: 1px solid rgba(184,151,86,.25) !important; border-radius: 9px !important; box-shadow: 0 2px 7px rgba(0,0,0,.035) !important; font-family: Manrope, Arial, sans-serif !important; font-size: 0 !important; text-decoration: none !important; overflow: hidden !important; } body.single-product .msk-payment-method-badge img { display: block !important; width: auto !important; height: 25px !important; max-width: 62px !important; max-height: 25px !important; object-fit: contain !important; } body.single-product .msk-payment-method-badge svg { display: block !important; width: 58px !important; height: 26px !important; } /* ==================================================== МОБИЛЬНАЯ ==================================================== */ @media (max-width: 767px) { /* * ЖЁСТКО фиксируем размеры трёх кнопок. */ body.single-product .msk-product-info-row { width: calc(100vw - 28px) !important; max-width: calc(100vw - 28px) !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; } body.single-product .msk-product-info-card { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 43px !important; min-height: 43px !important; max-height: 43px !important; margin: 0 !important; padding: 0 !important; align-self: stretch !important; } body.single-product .msk-product-info-trigger { width: 100% !important; min-width: 0 !important; height: 43px !important; min-height: 43px !important; max-height: 43px !important; margin: 0 !important; padding: 9px 5px !important; box-sizing: border-box !important; font-size: 10.5px !important; line-height: 1.15 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* * ВСЕ ТРИ popup теперь одной ширины, * независимо от того, какая кнопка нажата. */ body.single-product #delivery-popup-info, body.single-product #payment-popup-info, body.single-product #warranty-popup-info { top: calc(100% + 9px) !important; left: 0 !important; width: calc(100vw - 28px) !important; min-width: 0 !important; max-width: calc(100vw - 28px) !important; max-height: 68vh !important; overflow-x: hidden !important; overflow-y: auto !important; border-radius: 12px !important; box-shadow: 0 10px 27px rgba(46,39,31,.13) !important; -webkit-overflow-scrolling: touch !important; } body.single-product .delivery-popup-info .delivery-info-unit { padding: 15px 14px !important; } body.single-product .delivery-popup-info h1, body.single-product .delivery-popup-info h2, body.single-product .delivery-popup-info h3, body.single-product .delivery-popup-info h4, body.single-product .delivery-popup-info h5, body.single-product .delivery-popup-info h6, body.single-product .msk-payment-accept-title { padding-right: 32px !important; font-size: 13px !important; } body.single-product .delivery-popup-info li, body.single-product .delivery-popup-info p { font-size: 11.5px !important; } body.single-product .msk-payment-method-badge { width: 72px !important; min-width: 72px !important; height: 39px !important; min-height: 39px !important; } }