/* =====================================================================
   V4 → dev2: оформление заказа (12.10.2026). Вид — V4 styles/v4-skin.css (раздел .v4co, CheckoutV4Client),
   механика — одностраничное оформление CS-Cart. Элементы .v4co-* добавляет v4-checkout.js.
   ===================================================================== */
.v4co-page .tygh-content > .container { max-width: 1200px !important; }
.v4co-page .vs-mainbox-title { display: none !important; }

/* шапка с шагами */
.v4co-hero { padding: 24px 0 8px; font-family: var(--v4-sans); }
.v4co-k { text-transform: uppercase; letter-spacing: .14em; font-size: 12px !important; font-weight: 700; color: #008556 !important; margin: 0 0 6px !important; }
.v4co-hero h1 { font: 600 clamp(36px, 4.4vw, 56px)/1.05 var(--v4-cond), sans-serif !important; color: #0F5C45 !important; margin: 0 0 6px !important; text-transform: none !important; letter-spacing: -.015em !important; }
.v4co-s { color: #666 !important; margin: 0 0 18px !important; font-size: 16px; }
.v4co-steps { display: flex; list-style: none !important; padding: 0 !important; margin: 0 0 24px !important; max-width: 640px; }
.v4co-steps li { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #999; flex: 1; }
.v4co-steps li:not(:last-child)::after { content: ""; flex: 1; height: 1.5px; background: #ddd; margin: 0 10px; }
.v4co-steps li b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #ccc; font-size: 13px; }
.v4co-steps li.on { color: #0F5C45; }
.v4co-steps li.on b { background: #0F5C45; border-color: #0F5C45; color: #fff; }

/* две колонки: карточки слева, сводка справа (липкая) */
@media (min-width: 1007px) and (orientation: landscape) {
  .v4co-page #onestepcheckout { display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .85fr); gap: 0 clamp(24px, 4vw, 56px); align-items: start; }
  .v4co-page #onestepcheckout > * { grid-column: 1; float: none !important; width: auto !important; margin: 0 !important; }
  .v4co-page #onestepcheckout > .ty-checkout-block__right { grid-column: 2; grid-row: 1 / span 5; position: sticky; top: calc(var(--v4-sticky-h, 0px) + 16px); }
}
.v4co-page #onestepcheckout::before, .v4co-page #onestepcheckout::after { display: none !important; }
.v4co-page .ty-checkout-block__left, .v4co-page .ty-checkout-block__left .col1 { float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; }

/* карточки */
.v4co-page .v4co-card { background: #fff !important; border: 1.5px solid #E3E7E5 !important; border-radius: 22px !important; padding: 22px 24px !important; margin: 0 0 16px !important; box-shadow: none !important; }
.v4co-page .v4co-card .v4co-card, .v4co-page .v4co-card .ty-step__container-active { border: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; }
.v4co-h { display: flex; align-items: center; gap: 12px; font: 600 24px/1.2 var(--v4-cond), sans-serif !important; color: #0F5C45 !important; margin: 0 0 4px !important; text-transform: none !important; }
.v4co-h span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #0F5C45; color: #fff !important; font: 700 14px var(--v4-sans), sans-serif; flex: 0 0 30px; }
.v4co-note { color: #666 !important; font-size: 14px; margin: 0 0 16px 42px !important; }
/* старые заголовки шагов — тихие подзаголовки внутри карточек */
.v4co-page #onestepcheckout .ty-step__title-active { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 10px !important; height: auto !important; }
.v4co-page #onestepcheckout .ty-step__title-txt { font: 600 18px var(--v4-cond), sans-serif !important; color: #1E2421 !important; text-transform: none !important; padding: 0 !important; }
.v4co-page #step_three > .ty-step__title-active, .v4co-page #step_four > .ty-step__title-active { display: none !important; }
.v4co-page #onestepcheckout .checkout__block { border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }

/* вход — светлая плашка в первой карточке, фирменные кнопки соцсетей */
.v4co-page .v4co-login { background: #F4F6F5 !important; border-radius: 14px !important; padding: 14px 16px !important; margin: 0 0 16px !important; border: 0 !important; }
.v4co-page .v4co-login .ty-step__container-active { border: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; }
.v4co-page .v4co-login .ty-step__title-txt { font: 700 15px var(--v4-sans), sans-serif !important; color: #0F5C45 !important; }
.v4co-page .checkout-login-form { display: flex !important; flex-wrap: wrap; gap: 10px; height: auto !important; }
.v4co-page .checkout-login-form > * { margin: 0 !important; float: none !important; }
.v4co-page .checkout-login-form .cm-login-provider, .v4co-page .checkout-login-form .cm-dialog-opener {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box !important;
  height: 44px !important; padding: 0 18px 0 14px !important; border-radius: 999px !important; font: 700 14px var(--v4-sans), sans-serif !important; text-transform: none !important; white-space: nowrap;
}
.v4co-page .checkout-login-form .cm-dialog-opener { background: #fff !important; color: #1E2421 !important; border: 1.5px solid #E3E7E5 !important; padding: 0 22px !important; }

/* гость / регистрация — две кнопки-переключателя, как в V4 */
.v4co-page .register-methods { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 18px !important; max-width: 520px; float: none !important; width: 100% !important; }
.v4co-page .register-methods::before, .v4co-page .register-methods::after { display: none !important; }
.v4co-page .register-method { position: relative; display: flex !important; align-items: center; justify-content: center; gap: 8px; float: none !important; width: auto !important; margin: 0 !important; height: 50px; padding: 0 14px !important; border-radius: 14px; border: 1.5px solid #E3E7E5; background: #fff; cursor: pointer; }
.v4co-page .register-method input.radio, .v4co-page .register-method input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.v4co-page .register-method:has(input:checked) { border-color: #0F5C45; background: #F4F6F5; box-shadow: inset 0 0 0 1px #0F5C45; }
.v4co-page .register-method:has(input:checked)::before { content: "✓"; font-weight: 700; color: #0F5C45; }
.v4co-page .checkout-inside-block { float: none !important; width: auto !important; margin: 0 !important; }

/* поля адреса — сетка в две колонки */
.v4co-page #onestepcheckout .ty-control-group__title { font-size: 13px !important; font-weight: 700 !important; color: #1E2421 !important; text-transform: none !important; }
.v4co-page #onestepcheckout input[type="text"], .v4co-page #onestepcheckout input[type="email"], .v4co-page #onestepcheckout input[type="tel"],
.v4co-page #onestepcheckout input[type="password"], .v4co-page #onestepcheckout select, .v4co-page #onestepcheckout textarea {
  width: 100% !important; border: 1.5px solid #dcdcdc !important; border-radius: 12px !important; padding: 11px 14px !important; min-height: 46px; font-size: 15px !important; background: #fff !important; box-shadow: none !important; box-sizing: border-box !important;
}
.v4co-page #onestepcheckout input:focus, .v4co-page #onestepcheckout select:focus, .v4co-page #onestepcheckout textarea:focus { border-color: #008556 !important; outline: 3px solid rgba(0,133,86,.15) !important; }

/* доставка и оплата — варианты карточками */
.v4co-page .ty-shipping-options__method, .v4co-page .ty-payments-list__item, .v4co-page .ty-payment-method {
  border: 1.5px solid #E3E7E5 !important; border-radius: 14px !important; padding: 14px 16px !important; margin-bottom: 10px !important; display: block !important; background: #fff !important;
}
.v4co-page .ty-shipping-options__method:has(input:checked), .v4co-page .ty-payments-list__item:has(input:checked) { border-color: #008556 !important; background: #F4F6F5 !important; }

/* сводка справа — «Your tea bag» */
.v4co-page .ty-checkout-block__right { float: none !important; width: auto !important; padding: 0 !important; }
.v4co-page .ty-checkout-block__right .col1 { float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
.v4co-page .v4co-bag { background: #F4F6F5 !important; border-radius: 26px !important; overflow: hidden; border: 0 !important; padding: 22px 22px 0 !important; }
.v4co-page .v4co-bag .ty-step__title-txt { font: 600 24px var(--v4-cond), sans-serif !important; color: #0F5C45 !important; }
.v4co-page .v4co-bag .checkout__block { background: none !important; padding: 0 !important; }
.v4co-page .v4co-bag table, .v4co-page .v4co-bag td { border: 0 !important; background: none !important; }
.v4co-page .v4co-bag td { padding: 6px 0 !important; font-size: 14px; }
.v4co-page .v4co-bag .ty-checkout-summary__total td, .v4co-page .v4co-bag .ty-checkout-summary__total-sum { font: 600 26px var(--v4-cond), sans-serif !important; color: #0F5C45 !important; border-top: 1.5px solid #cfe2d8 !important; padding-top: 12px !important; }
.v4co-moment { background: #0F5C45; color: #fff; padding: 16px 22px; margin: 18px -22px 0; display: flex; flex-direction: column; gap: 2px; }
.v4co-moment strong { font: 600 18px var(--v4-cond), sans-serif; color: #fff !important; }
.v4co-moment span { font-size: 13px; color: #F7F3EA !important; }
.v4co-page #checkout_complete_buttons { padding: 18px 0 0 !important; background: none !important; border: 0 !important; }
.v4co-page .ty-complete-order, .v4co-page #checkout_complete_buttons .ty-btn {
  display: flex !important; align-items: center; justify-content: center; width: 100% !important; min-height: 54px; height: auto !important;
  border: 0 !important; border-radius: 999px !important; background: #0F5C45 !important; color: #fff !important; font: 700 16px var(--v4-sans), sans-serif !important; text-transform: none !important;
}
.v4co-page .ty-complete-order.disabled { opacity: .45; }
.v4co-help { padding: 16px 4px; font-size: 14px; color: #555; }
.v4co-help a { color: #0F5C45 !important; text-decoration: underline !important; }

@media (max-width: 1006px), (orientation: portrait) {
  .v4co-note { margin-left: 0 !important; }
  .v4co-page .register-methods { grid-template-columns: 1fr; }
}

/* доставка и оплата — друг под другом во всю ширину (тема ставила их в две колонки ty-column2) */
.v4co-page .ty-checkout-block__left .col2, .v4co-page .ty-checkout-block__left .ty-column2 { float: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
/* почта и блок регистрации — во всю ширину карточки */
.v4co-page .checkout-inside-block, .v4co-page .checkout-register, .v4co-page #onestepcheckout .ty-row-inner { display: block !important; width: 100% !important; }
.v4co-page #onestepcheckout .ty-control-email { float: none !important; width: 100% !important; max-width: 520px; }
/* поля адреса — ровная сетка в две колонки, как в V4 */
.v4co-page #onestepcheckout .ty-row, .v4co-page #onestepcheckout .ty-row-inner { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 14px; margin: 0 !important; }
.v4co-page #onestepcheckout .ty-row::before, .v4co-page #onestepcheckout .ty-row::after, .v4co-page #onestepcheckout .ty-row-inner::before, .v4co-page #onestepcheckout .ty-row-inner::after { display: none !important; }
.v4co-page #onestepcheckout [class*="ty-col-"], .v4co-page #onestepcheckout .ty-row > .ty-control-group { width: auto !important; float: none !important; padding: 0 !important; margin: 0 0 12px !important; min-width: 0; }
.v4co-page #onestepcheckout .checkout-register .ty-row-inner { grid-template-columns: 1fr; }

/* кнопки соцсетей — фирменные цвета, как в V4 (вход перенесён из .ty-checkout-login-block) */
.v4co-page .checkout-login-form .cm-login-provider::before { content: ""; width: 20px; height: 20px; flex: 0 0 20px; background: center / contain no-repeat; }
.v4co-page .checkout-login-form .cm-login-provider.vs-login-facebook { background: #1877F2 !important; color: #fff !important; border: 1.5px solid #1877F2 !important; }
.v4co-page .checkout-login-form .cm-login-provider.vs-login-facebook::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23fff'/%3E%3Cpath fill='%231877F2' d='M15.1 12.9l.4-2.8h-2.7V8.3c0-.8.4-1.5 1.6-1.5h1.2V4.4s-1.1-.2-2.2-.2c-2.2 0-3.7 1.4-3.7 3.9v2h-2.5v2.8h2.5V24h3.1V12.9z'/%3E%3C/svg%3E"); }
.v4co-page .checkout-login-form .cm-login-provider.vs-login-google { background: #fff !important; color: #1f1f1f !important; border: 1.5px solid #dadce0 !important; }
.v4co-page .checkout-login-form .cm-login-provider.vs-login-google::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.5 0 6.6 1.2 9.1 3.6l6.8-6.8C35.8 2.4 30.3 0 24 0 14.6 0 6.6 5.4 2.6 13.3l7.9 6.1C12.4 13.7 17.7 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.1 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.4c-.5 2.9-2.2 5.3-4.6 6.9l7.4 5.7c4.3-4 6.9-9.9 6.9-17.1z'/%3E%3Cpath fill='%23FBBC05' d='M10.5 28.6c-.5-1.4-.8-3-.8-4.6s.3-3.2.8-4.6l-7.9-6.1C1 16.5 0 20.1 0 24s1 7.5 2.6 10.7l7.9-6.1z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.5 0 11.9-2.1 15.8-5.8l-7.4-5.7c-2.1 1.4-4.8 2.3-8.4 2.3-6.3 0-11.6-4.2-13.5-9.9l-7.9 6.1C6.6 42.6 14.6 48 24 48z'/%3E%3C/svg%3E"); }
.v4co-page .checkout-login-form .cm-login-provider.vs-login-amazon { background: #FFD814 !important; color: #0F1111 !important; border: 1.5px solid #FCD200 !important; }
.v4co-page .checkout-login-form .cm-login-provider.vs-login-amazon::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF9900' d='M20.5 18.3C18.1 20 14.6 21 11.6 21c-4.2 0-8-1.6-10.9-4.1-.2-.2 0-.5.3-.3 3.1 1.8 6.9 2.9 10.8 2.9 2.7 0 5.6-.6 8.3-1.7.4-.2.8.3.4.5z'/%3E%3Cpath fill='%230F1111' d='M13.9 9.6c-1.8.1-5.6.6-5.6 3.9 0 2.1 1.5 3.2 3.3 3.2 1.4 0 2.5-.6 3.3-1.6.5.7.7 1.1 1.5 1.7.2.1.5.1.6-.1l1.4-1.2c.2-.2.2-.4 0-.6-.5-.6-.9-1.1-.9-2.2V9.2c0-1.5.1-2.9-1-4-.9-.9-2.4-1.2-3.6-1.2-2.2 0-4.6.8-5.1 3.5-.1.3.2.4.3.4l2.2.2c.2 0 .4-.2.4-.4.2-.9 1-1.4 1.9-1.4.5 0 1 .2 1.3.6.3.5.3 1.1.3 1.6v1z'/%3E%3C/svg%3E"); }
.v4co-page .checkout-login-form .cm-login-provider.vs-login-microsoft { background: #fff !important; color: #5E5E5E !important; border: 1.5px solid #8C8C8C !important; }
.v4co-page .checkout-login-form .cm-login-provider.vs-login-microsoft::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Crect x='1' y='1' width='9' height='9' fill='%23F25022'/%3E%3Crect x='11' y='1' width='9' height='9' fill='%237FBA00'/%3E%3Crect x='1' y='11' width='9' height='9' fill='%2300A4EF'/%3E%3Crect x='11' y='11' width='9' height='9' fill='%23FFB900'/%3E%3C/svg%3E"); }
.v4co-page .checkout-login-form .cm-login-provider:hover { filter: brightness(.96); }
.v4co-page .v4co-login, .v4co-page .v4co-login * { text-align: left !important; }
.v4co-page .v4co-login .ty-step__title-active span:not(.ty-step__title-txt) { display: none !important; }
.v4co-page .v4co-login .ty-step__title-active::before { content: var(--v4t-signin, "Have an account? Sign in"); font: 700 15px var(--v4-sans), sans-serif; color: #0F5C45; }
.v4co-page .v4co-login .ty-step__title-txt { display: none !important; }

/* ===== Оформление заказа, доводка по образцу V4 /checkout (15.10.2026) ===== */
/* поля: подпись над полем, а не поверх введённого текста */
.v4co-page #onestepcheckout .ty-control-group { position: relative; margin: 0 0 14px !important; padding: 0 !important; min-height: 0 !important; }
.v4co-page #onestepcheckout .ty-control-group > label.ty-control-group__title { position: static !important; display: block; transform: none !important; margin: 0 0 6px !important; padding: 0 !important; background: none !important; font: 600 13px Inter, system-ui, sans-serif !important; color: #1E2421 !important; line-height: 1.2 !important; pointer-events: auto; }
.v4co-page #onestepcheckout .ty-control-group input.ty-input-text, .v4co-page #onestepcheckout .ty-control-group select, .v4co-page #onestepcheckout .ty-control-group textarea {
  box-sizing: border-box; width: 100% !important; max-width: none !important; height: 48px !important; margin: 0 !important; padding: 0 14px !important; border: 1.5px solid #E3E7E5 !important; border-radius: 14px !important; background: #F7F9F8 !important; font: 400 15px Inter, system-ui, sans-serif !important; color: #1E2421 !important; box-shadow: none !important; }
.v4co-page #onestepcheckout .ty-control-group input:focus, .v4co-page #onestepcheckout .ty-control-group select:focus { outline: none; border-color: #008556 !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(0,133,86,.12) !important; }
.v4co-page #step_two .ty-profile-field__item { float: none !important; width: auto !important; margin: 0 0 14px !important; padding: 0 !important; }
.v4co-page #step_two .ty-profile-field__item ~ .ty-profile-field__item { margin-top: 0 !important; }
.v4co-page #step_two_body .ty-profile-fields, .v4co-page #step_two_body .clearfix:has(> .ty-profile-field__item) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.v4co-page #step_two_body .clearfix:has(> .ty-profile-field__item)::before, .v4co-page #step_two_body .clearfix:has(> .ty-profile-field__item)::after { display: none !important; }
@media (max-width: 640px) { .v4co-page #step_two_body .clearfix:has(> .ty-profile-field__item) { grid-template-columns: 1fr; } }

/* «Your tea bag»: заголовок со счётчиком, список товаров, полоса доставки */
.v4co-bag .ty-step__title-txt { display: inline-flex; align-items: center; gap: 8px; font: 600 22px/1.1 var(--v4-cond, Inter), Inter, sans-serif !important; color: #0F5C45 !important; }
.v4co-bag .ty-step__title-txt::before { content: "🛍"; font-size: 18px; }
.v4co-cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: #0F5C45; color: #fff; font: 700 12px Inter, system-ui, sans-serif; font-style: normal; }
.v4co-items { margin: 4px 0 12px; }
.v4co-items ul { margin: 0; padding: 0; list-style: none; }
.v4co-items li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(15,92,69,.08); }
.v4co-items li:nth-child(n+4) { display: none; }
.v4co-items.v4co-open li:nth-child(n+4) { display: grid; animation: v4coIn .3s ease both; }
@keyframes v4coIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.v4co-thumb { position: relative; width: 52px; height: 52px; }
.v4co-thumb img { width: 52px; height: 52px; object-fit: cover; border-radius: 12px; background: #fff; }
.v4co-thumb b { position: absolute; top: -6px; left: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #0F5C45; color: #fff; font: 700 11px/20px Inter, system-ui, sans-serif; text-align: center; box-sizing: border-box; }
.v4co-iName { font: 600 13.5px/1.3 Inter, system-ui, sans-serif; color: #1E2421; }
.v4co-iName small { display: block; margin-top: 2px; font: 400 12px Inter, system-ui, sans-serif; color: #6E746F; }
.v4co-iPrice { font: 700 14px Inter, system-ui, sans-serif; color: #1E2421; white-space: nowrap; }
.v4co-all { display: block; width: 100%; margin: 8px 0 0; padding: 6px; border: 0; background: none; font: 600 13px Inter, system-ui, sans-serif; color: #0F5C45; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.v4co-ship { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: #fff; }
.v4co-ship span { display: block; margin: 0 0 8px; font: 500 13px Inter, system-ui, sans-serif; color: #1E2421; }
.v4co-ship span b { color: #0F5C45; }
.v4co-ship i { display: block; height: 8px; border-radius: 999px; background: #E8EFEC; overflow: hidden; }
.v4co-ship em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7BA23F, #008556 60%, #0F5C45); transition: width 1s cubic-bezier(.22,1,.36,1); }
.v4co-ship.v4co-shipDone em { background: linear-gradient(90deg, #008556, #B8934A); }
/* итог заказа — крупно */
.v4co-bag .ty-checkout-summary__total-sum { font: 700 26px/1 Inter, system-ui, sans-serif !important; color: #0F5C45 !important; }

/* «Your tea bag»: купон, скидка, суммы — как в корзине (15.10.2026) */
.v4co-page .v4co-bag table.ty-checkout-summary__block, .v4co-page .v4co-bag table.ty-checkout-summary__block tbody, .v4co-page .v4co-bag table.ty-checkout-summary__block tr { display: block; width: 100%; }
.v4co-page .v4co-bag table.ty-checkout-summary__block td, .v4co-page .v4co-bag table.ty-checkout-summary__block th { display: block; width: auto; padding: 0 !important; border: 0 !important; background: none !important; }
.v4co-page .v4co-bag .ty-discount-coupon__control-group { display: flex !important; align-items: center; height: 46px; margin: 0 !important; padding: 0 0 0 16px !important; border: 1.5px dashed #BFD9CC !important; border-radius: 999px !important; background: #fff !important; width: auto !important; }
.v4co-page .v4co-bag .ty-discount-coupon__control-group input { flex: 1; min-width: 0; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font: 500 14px Inter, system-ui, sans-serif !important; }
.v4co-page .v4co-bag .ty-discount-coupon__control-group .ty-btn-go { position: static !important; flex: 0 0 38px; width: 38px !important; height: 38px !important; margin: 0 4px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #008556 !important; color: #fff !important; }
.v4co-page .v4co-bag ul.ty-coupons__list { display: block !important; margin: 10px 0 12px !important; padding: 12px 14px !important; border: 1px solid #D4EADF !important; border-radius: 16px !important; background: #F2F9F5 !important; box-shadow: none !important; list-style: none; font-size: 13px !important; }
.v4co-page .v4co-bag ul.ty-coupons__list .ty-caret-info { display: none !important; }
.v4co-page .v4co-bag ul.ty-coupons__list > li { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.v4co-page .v4co-bag ul.ty-coupons__list .ty-applied-promotions, .v4co-page .v4co-bag ul.ty-coupons__list ul { margin: 0 !important; padding: 0 !important; list-style: none; }
.v4co-page .v4co-bag ul.ty-coupons__list .ty-applied-promotions li { margin: 0 0 8px !important; font: 600 13.5px Inter, system-ui, sans-serif !important; color: #0F5C45 !important; }
.v4co-page .v4co-bag ul.ty-coupons__list .ty-applied-promotions li::before { content: "🏷 "; }
.v4co-page .v4co-bag ul.ty-coupons__list li.ty-coupons__item { display: inline-flex !important; align-items: center; gap: 8px; height: 30px; padding: 0 4px 0 12px !important; border-radius: 999px !important; background: #fff !important; border: 1px solid #BFE0CE !important; color: #0F7A4A !important; font: 700 12.5px Inter, system-ui, sans-serif !important; }
.v4co-page .v4co-bag ul.ty-coupons__list li.ty-coupons__item a { display: inline-flex !important; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #E3F4EA !important; color: #0F7A4A !important; text-decoration: none !important; float: none !important; }
.v4co-page .v4co-bag th.ty-checkout-summary__item > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; padding: 10px 0 !important; font: 400 14px Inter, system-ui, sans-serif !important; color: #4A524D !important; text-align: left; }
.v4co-page .v4co-bag th.ty-checkout-summary__item .pull-right { order: 2; float: none !important; font: 600 15px Inter, system-ui, sans-serif !important; color: #1E2421 !important; }
.v4co-page .v4co-bag th.ty-checkout-summary__item .edit-cart { order: 3; flex-basis: 100%; font: 600 12px Inter, system-ui, sans-serif !important; color: #0F5C45 !important; text-transform: uppercase; letter-spacing: .06em; }
.v4co-page .v4co-bag th.ty-checkout-summary__total { margin-top: 4px !important; padding-top: 12px !important; border-top: 1.5px dashed #DDE5E1 !important; }
.v4co-page .v4co-bag th.ty-checkout-summary__total > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 700 15px Inter, system-ui, sans-serif !important; color: #1E2421 !important; text-transform: none; text-align: left; }
.v4co-page .v4co-bag th.ty-checkout-summary__total .ty-checkout-summary__total-sum { float: none !important; font: 700 28px/1 Inter, system-ui, sans-serif !important; color: #0F5C45 !important; }
.v4co-page .v4co-bag .ty-additional-data { margin-top: 14px; }
.v4co-page .v4co-bag .ty-additional-data textarea { box-sizing: border-box; width: 100% !important; min-height: 70px; padding: 10px 14px !important; border: 1.5px solid #E3E7E5 !important; border-radius: 14px !important; background: #fff !important; font: 400 14px Inter, system-ui, sans-serif !important; }
.v4co-page .v4co-bag input[type=checkbox] { accent-color: #008556; }

/* доводка после просмотра с адресом (15.10.2026): строка доставки, итог, телефон, поля карты */
.v4co-page .v4co-bag table.ty-checkout-summary__block td.ty-checkout-summary__item { display: inline-block !important; width: 50% !important; box-sizing: border-box; padding: 8px 0 !important; vertical-align: baseline; font: 400 14px Inter, system-ui, sans-serif; color: #4A524D; }
.v4co-page .v4co-bag table.ty-checkout-summary__block td.ty-checkout-summary__item.ty-right { font: 600 14px Inter, system-ui, sans-serif !important; color: #0F7A4A !important; text-align: right; }
.v4co-page .v4co-bag table.ty-checkout-summary__block th.ty-checkout-summary__total { display: flex !important; justify-content: space-between; align-items: center; gap: 10px; font: 700 15px Inter, system-ui, sans-serif !important; color: #1E2421 !important; text-transform: none !important; }
.v4co-page .v4co-bag table.ty-checkout-summary__block th.ty-checkout-summary__total > * { float: none !important; margin: 0 !important; }
.v4co-page .v4co-bag table.ty-checkout-summary__block th.ty-checkout-summary__total span { font: 700 28px/1 Inter, system-ui, sans-serif !important; color: #0F5C45 !important; }
/* подпись над полем — и там, где она вложена глубже (телефон с кнопкой обновления) */
.v4co-page #onestepcheckout .ty-control-group label.ty-control-group__title { position: static !important; display: block; transform: none !important; margin: 0 0 6px !important; padding: 0 !important; background: none !important; font: 600 13px Inter, system-ui, sans-serif !important; color: #1E2421 !important; line-height: 1.2 !important; }
.v4co-page #onestepcheckout .ty-shipping-phone .ty-refresh-field { display: block; }
/* поля карты — подписи сверху, высота как у остальных полей */
.v4co-page #onestepcheckout .ty-credit-card { display: grid !important; grid-template-columns: minmax(160px, 1fr) 70px 70px 84px auto; gap: 10px; align-items: end; margin: 12px 0 4px; }
.v4co-page #onestepcheckout .ty-credit-card > * { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
.v4co-page #onestepcheckout .ty-credit-card label { position: static !important; display: block; transform: none !important; margin: 0 0 6px !important; padding: 0 !important; background: none !important; font: 600 12.5px Inter, system-ui, sans-serif !important; color: #1E2421 !important; }
.v4co-page #onestepcheckout .ty-credit-card input { box-sizing: border-box; width: 100% !important; height: 46px !important; margin: 0 !important; padding: 0 12px !important; border: 1.5px solid #E3E7E5 !important; border-radius: 12px !important; background: #fff !important; font: 400 15px Inter, system-ui, sans-serif !important; box-shadow: none !important; }
.v4co-page #onestepcheckout .ty-credit-card input:focus { outline: none; border-color: #008556 !important; box-shadow: 0 0 0 4px rgba(0,133,86,.12) !important; }
.v4co-page #onestepcheckout .ty-credit-card__buttons { display: flex !important; gap: 6px; }
.v4co-page #onestepcheckout .ty-credit-card__buttons .ty-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 46px !important; height: 46px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; line-height: 1 !important; }
@media (max-width: 640px) { .v4co-page #onestepcheckout .ty-credit-card { grid-template-columns: 1fr 1fr 1fr; } .v4co-page #onestepcheckout .ty-credit-card > :first-child { grid-column: 1 / -1; } }
.v4co-page .v4co-bag table.ty-checkout-summary__block tr.v4co-row { display: flex !important; justify-content: space-between; align-items: baseline; gap: 10px; }
.v4co-page .v4co-bag table.ty-checkout-summary__block tr.v4co-row td.ty-checkout-summary__item { display: block !important; width: auto !important; }
.v4co-page .v4co-bag .v4co-totalV { margin-left: auto; white-space: nowrap; }
.v4co-page #onestepcheckout .ty-control-group .ty-refresh-field { position: static !important; display: block !important; margin: 0 0 6px !important; }
.v4co-page #onestepcheckout .ty-control-group .ty-refresh-field label.ty-control-group__title { margin: 0 !important; }
/* метки карт вместо общей картинки (15.10.2026) */
.v4co-cards { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; vertical-align: middle; }
.v4co-cards i { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 36px; border: 1.5px solid #E3E7E5; border-radius: 10px; background: #fff; box-shadow: 0 2px 6px rgba(15,40,32,.06); }
.v4co-cards i svg { width: 44px; height: 18px; }
.v4co-cards i.v4co-amex { background: #1F72CD; border-color: #1F72CD; }
.v4co-cards i[title=Mastercard] svg { height: 22px; }
.v4co-cards i[title=Discover] svg { width: 50px; }
.v4co-page #onestepcheckout .v4co-bag .ty-discount-coupon__control-group input.ty-input-text, .v4co-page .v4co-bag .ty-discount-coupon__control-group input.ty-input-text { flex: 1; min-width: 0; width: auto !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font: 500 14px Inter, system-ui, sans-serif !important; }

/* вход на оформлении — одна строка «Have an account? Sign in», кнопки соцсетей — в окне входа (15.10.2026, слово владельца) */
.v4co-page .v4co-login .cm-login-provider { display: none !important; }
.v4co-page .v4co-login { display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 18px !important; }
.v4co-page .v4co-login > * { margin: 0 !important; }
.v4co-page .v4co-login .checkout-login-form { display: flex; gap: 8px; }
.v4co-page .v4co-login a.cm-dialog-opener.ty-login-checkout-btn { display: inline-flex !important; align-items: center; height: 40px !important; padding: 0 20px !important; border: 1.5px solid #008556 !important; border-radius: 999px !important; background: #fff !important; color: #0F5C45 !important; font: 700 14px Inter, system-ui, sans-serif !important; text-transform: none !important; box-shadow: none !important; }
.v4co-page .v4co-login a.cm-dialog-opener.ty-login-checkout-btn::after { content: " →"; white-space: pre; }
.v4co-page .v4co-login a.cm-dialog-opener.ty-login-checkout-btn:hover { background: #008556 !important; color: #fff !important; }
/* сноска о сроках доставки — плашкой в карточке Delivery (15.10.2026) */
.v4co-shipNote { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border: 1px solid #EFE6D2; border-radius: 14px; background: #FBF8F1; font: 400 12.5px/1.5 Inter, system-ui, sans-serif; color: #4A524D; text-align: left; }
.v4co-shipNote > i { flex: 0 0 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #B8934A; color: #fff; font: 700 12px/1 Georgia, serif; font-style: italic; }
.v4co-shipNote * { font: inherit !important; color: inherit !important; text-align: left !important; margin: 0 !important; }
.v4co-shipNote br + br { display: none; }
/* текст в полях — жирнее и темнее; поля правой колонки не вылезают за карточку (15.10.2026) */
.v4co-page #onestepcheckout .ty-control-group input.ty-input-text, .v4co-page #onestepcheckout .ty-control-group select, .v4co-page #onestepcheckout .ty-credit-card input { font-weight: 600 !important; color: #111614 !important; }
.v4co-page #onestepcheckout input::placeholder, .v4co-page #onestepcheckout textarea::placeholder { font-weight: 400; color: #8A8F8C; }
.v4co-page #step_two .ty-profile-field__item { min-width: 0; box-sizing: border-box; }
.v4co-page #step_two_body { box-sizing: border-box; max-width: 100%; }
.v4co-page #onestepcheckout #step_two .ty-row { width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.v4co-page #onestepcheckout #step_two .ty-row::before, .v4co-page #onestepcheckout #step_two .ty-row::after { display: none !important; }
.v4co-page #onestepcheckout #step_two .ty-row > * { float: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 640px) { .v4co-page #onestepcheckout #step_two .ty-row { grid-template-columns: 1fr; } }

/* полоса бесплатной доставки на оформлении — с анимацией, как в корзине (15.10.2026) */
@keyframes v4coShine { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
@keyframes v4coPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,133,86,.35); } 50% { box-shadow: 0 0 0 6px rgba(0,133,86,0); } }
.v4co-ship { padding-top: 14px; }
.v4co-ship i.v4co-track { position: relative; display: block; height: 10px; border-radius: 999px; background: #E8EFEC; overflow: visible; box-shadow: inset 0 1px 2px rgba(15,40,32,.1); }
.v4co-ship i.v4co-track em { position: relative; display: block; height: 100%; overflow: hidden; border-radius: inherit; background: linear-gradient(90deg, #7BA23F, #008556 60%, #0F5C45); transition: width 1.3s cubic-bezier(.22,1,.36,1); }
.v4co-ship i.v4co-track em::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: v4coShine 2.4s ease-in-out infinite; }
.v4co-ship .v4co-truck { position: absolute; top: -12px; font-size: 20px; line-height: 1; font-weight: 400; transition: left 1.3s cubic-bezier(.22,1,.36,1); filter: drop-shadow(0 2px 3px rgba(0,0,0,.15)); }
.v4co-ship.v4co-shipDone i.v4co-track em { background: linear-gradient(90deg, #008556, #B8934A); }
.v4co-ship.v4co-shipDone i.v4co-track { animation: v4coPulse 2s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .v4co-ship i.v4co-track em, .v4co-ship .v4co-truck { transition: none; } .v4co-ship i.v4co-track em::after, .v4co-ship.v4co-shipDone i.v4co-track { animation: none; } }
/* подписи под «Checkout as Guest» и «Register an Account» (15.10.2026) */
.v4co-page #step_one label.register-method { flex-wrap: wrap !important; justify-content: center; align-content: center; height: auto !important; min-height: 58px; padding-top: 8px !important; padding-bottom: 8px !important; row-gap: 2px; }
.v4co-page #step_one label.register-method .v4co-sub { display: block; flex-basis: 100%; text-align: center; font: 400 12px/1.3 Inter, system-ui, sans-serif; color: #6E746F; }
/* службы доставки — название жирнее, цена обычным (15.10.2026) */
.v4co-page #step_three label.cm-select-shipping { font: 700 15px/1.35 Inter, system-ui, sans-serif !important; color: #111614 !important; }
.v4co-page #step_three label.cm-select-shipping .ty-price__cnt, .v4co-page #step_three label.cm-select-shipping .ty-price__cnt * { font-weight: 600 !important; font-size: 13.5px !important; color: #0F5C45 !important; }
/* «A question about your tea?» — маленькой карточкой под Complete Order (15.10.2026) */
.v4co-page p.v4co-help { display: flex; align-items: center; gap: 12px; margin: 14px 0 0 !important; padding: 14px 16px; border: 1px solid #E3E7E5; border-radius: 16px; background: #fff; font: 400 13px/1.45 Inter, system-ui, sans-serif; color: #4A524D; }
.v4co-page p.v4co-help i { flex: 0 0 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #E8F3EE; font-style: normal; font-size: 16px; }
.v4co-page p.v4co-help b { display: block; font-weight: 700; color: #1E2421; }
.v4co-page p.v4co-help a { color: #0F5C45 !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.v4co-page .ty-checkout-block__right p.v4co-help { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; }
.v4co-page .ty-checkout-block__right p.v4co-help > i { display: inline-flex !important; width: 34px !important; height: 34px !important; font-size: 17px !important; line-height: 1 !important; opacity: 1 !important; }
.v4co-page .ty-checkout-block__right p.v4co-help > span { display: block !important; text-align: left !important; }

/* «Have an account?» — плашка в стиле баннеров; кнопки выбора и почта — во всю ширину (15.10.2026, слово владельца) */
.v4co-page .v4co-login { position: relative; overflow: hidden; padding: 18px 20px !important; border: 0 !important; border-radius: 18px !important; color: #fff;
  background: radial-gradient(circle at 92% 10%, rgba(217,190,133,.45), transparent 45%), radial-gradient(circle at 5% 100%, rgba(123,162,63,.35), transparent 50%), linear-gradient(135deg, #0F5C45, #0B3B2D) !important; }
.v4co-page .v4co-login::after { content: "🍃"; position: absolute; right: 150px; bottom: -14px; font-size: 54px; opacity: .14; transform: rotate(-18deg); pointer-events: none; }
.v4co-loginTxt { display: flex; align-items: center; gap: 14px; }
.v4co-loginTxt i { flex: 0 0 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(255,255,255,.14); font-style: normal; font-size: 22px; }
.v4co-loginTxt span { display: flex; flex-direction: column; gap: 2px; font: 400 13.5px/1.4 Inter, system-ui, sans-serif; color: rgba(255,255,255,.82); }
.v4co-loginTxt b { font: 700 16px Inter, system-ui, sans-serif; color: #fff; }
.v4co-page .v4co-login a.cm-dialog-opener.ty-login-checkout-btn { border: 0 !important; background: #F3DFA9 !important; color: #0B3B2D !important; box-shadow: 0 6px 16px rgba(0,0,0,.18) !important; }
.v4co-page .v4co-login a.cm-dialog-opener.ty-login-checkout-btn:hover { background: #fff !important; color: #0B3B2D !important; }
.v4co-page #step_one .v4co-methods { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; width: 100% !important; max-width: none !important; }
.v4co-page #step_one .v4co-methods > label.register-method { width: auto !important; max-width: none !important; margin: 0 !important; float: none !important; }
.v4co-page #step_one .ty-control-group, .v4co-page #step_one .ty-control-group input.ty-input-text { width: 100% !important; max-width: none !important; }
@media (max-width: 560px) { .v4co-page #step_one .v4co-methods { grid-template-columns: 1fr; } .v4co-page .v4co-login::after { display: none; } }

/* «Shipping Address»: крупный заголовок со значком, вопрос об адресе оплаты — плашкой с таблетками Yes / No (15.10.2026) */
.v4co-page #step_two h3.ty-step__title-active { margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; background: none !important; }
.v4co-page #step_two h3.ty-step__title-active .ty-step__title-txt { display: inline-flex; align-items: center; gap: 10px; font: 600 24px/1.1 var(--v4-cond, Inter), Inter, sans-serif !important; color: #1E2421 !important; text-transform: none !important; letter-spacing: -.01em; }
.v4co-page #step_two h3.ty-step__title-active .ty-step__title-txt::before { content: "🚚"; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #E8F3EE; font-size: 17px; }
.v4co-page #step_two .ty-address-switch { position: static !important; float: none !important; display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; width: auto !important; margin: 0 0 18px !important; padding: 12px 14px !important; border-radius: 14px; background: #F4F6F5; }
.v4co-page #step_two .ty-address-switch::before, .v4co-page #step_two .ty-address-switch::after { display: none !important; }
.v4co-page #step_two .ty-address-switch > * { float: none !important; margin: 0 !important; width: auto !important; }
.v4co-page #step_two .ty-profile-field__switch-label { font: 500 14.5px Inter, system-ui, sans-serif !important; color: #1E2421 !important; }
.v4co-page #step_two .ty-profile-field__switch-actions { display: inline-flex !important; gap: 6px; }
.v4co-page #step_two .ty-profile-field__switch-actions label { display: inline-flex !important; align-items: center; gap: 6px; height: 34px; margin: 0 !important; padding: 0 14px 0 10px !important; border: 1.5px solid #DDE5E1; border-radius: 999px; background: #fff; font: 600 14px Inter, system-ui, sans-serif !important; color: #1E2421 !important; cursor: pointer; }
.v4co-page #step_two .ty-profile-field__switch-actions input[type=radio] { margin: 0 !important; accent-color: #008556; }

/* «Complete Order» — с анимацией, как «Proceed to checkout» в корзине (15.10.2026, слово владельца) */
@keyframes v4coBtnShine { 0%, 70% { transform: translateX(-140%) skewX(-18deg); } 100% { transform: translateX(380%) skewX(-18deg); } }
@keyframes v4coBtnGlow { 0%, 100% { box-shadow: 0 10px 24px rgba(0,133,86,.28); } 50% { box-shadow: 0 12px 30px rgba(0,133,86,.45); } }
.v4co-page button.ty-complete-order.ty-btn { position: relative !important; overflow: hidden !important; height: 56px !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient(135deg, #008556, #0F5C45) !important; color: #fff !important; font: 700 17px Inter, system-ui, sans-serif !important; text-transform: none !important; letter-spacing: .01em !important; animation: v4coBtnGlow 2.8s ease-in-out infinite; transition: transform .2s, filter .2s; }
.v4co-page button.ty-complete-order.ty-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 28%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); animation: v4coBtnShine 3.6s ease-in-out infinite; pointer-events: none; }
.v4co-page button.ty-complete-order.ty-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.v4co-page button.ty-complete-order.ty-btn:active { transform: translateY(0) scale(.99); }
.v4co-page button.ty-complete-order.ty-btn[disabled] { animation: none; filter: grayscale(.4) opacity(.7); }
.v4co-page button.ty-complete-order.ty-btn[disabled]::after { display: none; }
@media (prefers-reduced-motion: reduce) { .v4co-page button.ty-complete-order.ty-btn, .v4co-page button.ty-complete-order.ty-btn::after { animation: none !important; } }
/* заголовок «Let’s make it yours.»: слова поднимаются по очереди, по тексту переливается зелёно-золотой градиент (15.10.2026) */
@keyframes v4coWordUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes v4coGrad { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.v4co-hero h1 .v4co-w { display: inline-block; background: linear-gradient(90deg, #0F5C45, #008556 25%, #B8934A 50%, #008556 75%, #0F5C45); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; animation: v4coWordUp .7s cubic-bezier(.22,1,.36,1) both, v4coGrad 9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .v4co-hero h1 .v4co-w { animation: none; color: #0F5C45 !important; -webkit-text-fill-color: #0F5C45; } }
/* адрес оплаты (billing) — свой значок и отступ от адреса доставки (15.10.2026) */
.v4co-page #step_two h3.v4co-hBill { margin-top: 26px !important; padding-top: 24px !important; border-top: 1.5px dashed #DDE5E1 !important; }
.v4co-page #step_two h3.v4co-hBill .ty-step__title-txt::before { content: '🧾'; background: #FBF1DC; }
.v4co-page #step_one > h2.v4co-h { margin-bottom: 18px !important; }
/* вошедший покупатель: выбор сохранённого профиля адресов — светлой плашкой (15.10.2026) */
.v4co-page .v4co-profiles { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin: 0 0 16px !important; padding: 14px 16px !important; border: 1px solid #E3E7E5 !important; border-radius: 16px !important; background: #F7F9F8 !important; }
.v4co-page .v4co-profiles > * { margin: 0 !important; }
.v4co-page .v4co-profiles .ty-step__title-txt { font: 600 14px Inter, system-ui, sans-serif !important; color: #1E2421 !important; text-transform: none !important; }
.v4co-page .v4co-profiles .ty-step__title-txt::before { content: '📒 '; }
.v4co-page .v4co-profiles h3 { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.v4co-page .v4co-profiles .ty-checkout-profiles, .v4co-page .v4co-profiles .select-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 !important; }
.v4co-page .v4co-profiles .ty-btn { display: inline-flex !important; align-items: center; height: 38px !important; margin: 0 !important; padding: 0 16px !important; border-radius: 999px !important; font: 600 14px Inter, system-ui, sans-serif !important; text-transform: none !important; box-shadow: none !important; }
.v4co-page .v4co-profiles .ty-btn__primary { background: #0F5C45 !important; border: 1.5px solid #0F5C45 !important; color: #fff !important; }
.v4co-page .v4co-profiles .ty-btn__secondary, .v4co-page .v4co-profiles a.ty-btn:not(.ty-btn__primary) { background: #fff !important; border: 1.5px solid #DDE5E1 !important; color: #1E2421 !important; }
.v4co-page .v4co-profiles .checkout__block, .v4co-page .v4co-profiles .ty-step__container-active, .v4co-page .v4co-profiles .ty-checkout-profiles { margin: 0 !important; padding: 0 !important; min-height: 0 !important; overflow: visible !important; }
.v4co-page .v4co-profiles .checkout__block::before, .v4co-page .v4co-profiles .checkout__block::after { display: none !important; }
.v4co-page .v4co-profiles strong.ty-btn { line-height: 1 !important; }
/* строка свёрнутого адреса рядом с Edit — жирнее (15.10.2026) */
.v4co-page #step_two .ty-short-text { font: 600 15px/1.45 Inter, system-ui, sans-serif !important; color: #111614 !important; }
/* подсказка о бесплатной доставке — во всю ширину плашки, над ней (колонка справа обрезает выход за края) */
.v4co-ship { position: relative; }
.v4co-ship > span { column-gap: 4px; }
.v4co-page .v4co-ship .v4-tip { position: static; }
.v4co-page .v4co-ship .v4-tip .v4-tipBox { left: 0 !important; right: 0 !important; width: auto !important; bottom: calc(100% + 8px) !important; transform: translateY(4px) !important; }
.v4co-page .v4co-ship .v4-tip:hover .v4-tipBox, .v4co-page .v4co-ship .v4-tip.on .v4-tipBox, .v4co-page .v4co-ship .v4-tip:focus-visible .v4-tipBox { transform: none !important; }
.v4co-page .v4co-ship .v4-tip .v4-tipBox::after { left: auto !important; right: 40px !important; }
.v4co-page .v4co-profiles, .v4co-page .v4co-profiles * { overflow: visible !important; }
.v4co-page .v4co-profiles .select-profile, .v4co-page .v4co-profiles .ty-checkout-profiles, .v4co-page .v4co-profiles .checkout__block { height: auto !important; max-height: none !important; padding: 2px 0 !important; }
.v4co-page .v4co-profiles .ty-btn { height: 38px !important; line-height: 1 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
/* свёрнутый адрес — карточкой по строкам, Edit справа (15.10.2026) */
.v4co-page .v4co-addrCard { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 16px !important; border: 1px solid #E3E7E5; border-radius: 16px; background: #fff; }
.v4co-page .v4co-addrCard::before, .v4co-page .v4co-addrCard::after { display: none !important; }
.v4co-page .v4co-addrCard > * { float: none !important; margin: 0 !important; }
.v4co-page .v4co-addrCard .ty-short-text { order: 1; display: flex !important; flex-direction: column; gap: 3px; font: 400 14.5px/1.4 Inter, system-ui, sans-serif !important; color: #4A524D !important; }
.v4co-page .v4co-addrCard .ty-short-text b { font: 700 15.5px Inter, system-ui, sans-serif; color: #111614; }
.v4co-page .v4co-addrCard .ty-short-text span { display: block; }
.v4co-page .v4co-addrCard .ty-btn, .v4co-page .v4co-addrCard a.ty-btn, .v4co-page .v4co-addrCard button:not(.v4ph-q) { order: 2; flex: 0 0 auto; height: 38px !important; padding: 0 18px !important; border-radius: 999px !important; background: #fff !important; border: 1.5px solid #008556 !important; color: #0F5C45 !important; font: 700 14px Inter, system-ui, sans-serif !important; box-shadow: none !important; }
.v4co-page .v4co-addrCard .ty-btn:hover, .v4co-page .v4co-addrCard button:not(.v4ph-q):hover { background: #008556 !important; color: #fff !important; }
.v4co-page .v4co-addrCard > a.ty-show-more { display: inline-flex !important; align-items: center; justify-content: center; line-height: 1 !important; text-decoration: none !important; }
/* название нового профиля адреса — подпись над полем, на всю ширину (15.10.2026) */
.v4co-page #step_two .ty-profile-name-field { display: block !important; grid-column: 1 / -1; width: 100% !important; max-width: none !important; float: none !important; margin: 0 0 14px !important; }
.v4co-page #step_two .ty-profile-name-field > label { position: static !important; display: block !important; margin: 0 0 6px !important; font: 600 13px Inter, system-ui, sans-serif !important; color: #1E2421 !important; }
.v4co-page #step_two .ty-profile-name-field input.ty-input-text { width: 100% !important; }
.v4co-page #step_two .v4co-addrCard > a.ty-show-more { display: inline-block !important; box-sizing: border-box; height: 38px !important; min-width: 76px; padding: 0 18px !important; line-height: 35px !important; text-align: center; vertical-align: middle; }
/* раскрытая форма адреса — без карточки и Edit, во всю ширину (15.10.2026) */
.v4co-page .v4co-addrCard.v4co-open { display: block !important; padding: 0 !important; border: 0 !important; background: none !important; }
.v4co-page .v4co-addrCard.v4co-open > .ty-short-text, .v4co-page .v4co-addrCard.v4co-open > a.ty-show-more { display: none !important; }
.v4co-page .v4co-addrCard.v4co-open > .ty-section-more { width: 100% !important; }
.v4co-page #step_two .v4co-addrCard.v4co-open > a.ty-show-more { display: none !important; }
.v4co-pnHint { margin: 6px 0 0 !important; font: 400 12.5px/1.4 Inter, system-ui, sans-serif; color: #6E746F; }
/* «Your saved addresses» — компактнее, одной строкой (15.10.2026) */
.v4co-page .v4co-profiles { padding: 10px 14px !important; min-height: 0 !important; }
.v4co-page .v4co-profiles .ty-step__container-active, .v4co-page .v4co-profiles .checkout__block { display: contents !important; }
.v4co-page .v4co-profiles .ty-step__body-active:empty, .v4co-page .v4co-profiles > div:empty { display: none !important; }
.v4co-page .v4co-profiles::before, .v4co-page .v4co-profiles::after, .v4co-page .v4co-profiles .clearfix::before, .v4co-page .v4co-profiles .clearfix::after { display: none !important; content: none !important; }
.v4co-page .v4co-profiles h3.ty-step__title-active { margin: 0 !important; }
.v4co-page .v4co-profiles { flex-wrap: nowrap !important; row-gap: 0 !important; }
@media (min-width: 561px) { .v4co-page .v4co-profiles .visible-phone, .v4co-page .v4co-profiles .ty-checkout-login-block { display: none !important; } }
@media (max-width: 560px) { .v4co-page .v4co-profiles { flex-wrap: wrap !important; row-gap: 8px !important; } }

/* блок профилей: тема задаёт блоку входа жёсткую высоту 93px — снимаем (15.10.2026) */
.v4co-page .ty-step-login.v4co-profiles { height: auto !important; }
/* «Your tea bag»: значок сумки в кружке, «View / edit» справа в заголовке, скидка — меткой «You save» (15.10.2026) */
.v4co-page .v4co-bag h3.ty-step__title-active { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; }
.v4co-page .v4co-bag .ty-step__title-txt::before { content: "" !important; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background: #DCEFE5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F5C45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center / 17px no-repeat; }
.v4co-page .v4co-bag a.v4co-editTop { flex: 0 0 auto; display: inline-flex !important; align-items: center; height: 30px; padding: 0 12px; border: 1.5px solid #BFD9CC; border-radius: 999px; background: #fff; font: 600 12px Inter, system-ui, sans-serif !important; color: #0F5C45 !important; text-transform: none !important; letter-spacing: 0 !important; text-decoration: none !important; }
.v4co-page .v4co-bag a.v4co-editTop::before { content: "✎"; margin-right: 5px; }
.v4co-page .v4co-bag a.v4co-editTop:hover { background: #0F5C45; border-color: #0F5C45; color: #fff !important; }
.v4co-page .v4co-bag th.ty-checkout-summary__item > div { align-items: center !important; font: 500 14.5px Inter, system-ui, sans-serif !important; color: #1E2421 !important; }
.v4co-page .v4co-bag th.ty-checkout-summary__item .pull-right { font: 700 17px Inter, system-ui, sans-serif !important; color: #1E2421 !important; }
.v4co-page .v4co-bag .v4co-save { order: 3; flex-basis: 100%; display: inline-flex; width: fit-content; align-items: center; height: 24px; margin-top: 2px; padding: 0 10px; border-radius: 999px; background: #E3F4EA; color: #0F7A4A; font: 700 12px Inter, system-ui, sans-serif; }
.v4co-page .v4co-bag .v4co-save::before { content: "🏷"; margin-right: 5px; font-size: 11px; }
.v4co-page .v4co-bag .v4co-save { order: 1 !important; flex: 0 0 auto !important; flex-basis: auto !important; width: auto !important; margin: 0 auto 0 0 !important; }
.v4co-page .v4co-bag a.v4co-editTop { text-transform: capitalize !important; }
.v4co-page .v4co-bag table.ty-checkout-summary__block th.ty-checkout-summary__item .pull-right, .v4co-page .v4co-bag table.ty-checkout-summary__block th.ty-checkout-summary__item .pull-right * { font: 700 17px Inter, system-ui, sans-serif !important; color: #1E2421 !important; }

/* значок «Your tea bag» — зелёная сумка с ручками (прежний походил на ведро), 15.10.2026 */
.v4co-page .v4co-bag .ty-step__title-txt::before { background: #DCEFE5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 9V7a3.5 3.5 0 0 1 7 0v2' fill='none' stroke='%230F5C45' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M4.5 8.5h15l-1.1 10.6a2.2 2.2 0 0 1-2.2 1.9H7.8a2.2 2.2 0 0 1-2.2-1.9L4.5 8.5z' fill='%230F5C45'/%3E%3Ccircle cx='9' cy='11.5' r='1' fill='%23F3DFA9'/%3E%3Ccircle cx='15' cy='11.5' r='1' fill='%23F3DFA9'/%3E%3Cpath d='M12 16.8c-1.6-1-2.4-2-2-3 .4-.8 1.5-.8 2 .1.5-.9 1.6-.9 2-.1.4 1-.4 2-2 3z' fill='%23F3DFA9'/%3E%3C/svg%3E") center / 18px no-repeat !important; }
/* «Cart total with discount» и сумма — одна строка, «You save» — строкой ниже */
.v4co-page .v4co-bag table.ty-checkout-summary__block th.ty-checkout-summary__item > div { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 5px; column-gap: 10px; }
.v4co-page .v4co-bag th.ty-checkout-summary__item > div > .pull-right { grid-column: 2; grid-row: 1; }
.v4co-page .v4co-bag th.ty-checkout-summary__item > div > .v4co-save { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin: 0 !important; }
/* «Order Total» и сумма — на одной линии (по базовой линии текста) */
.v4co-page .v4co-bag table.ty-checkout-summary__block th.ty-checkout-summary__total, .v4co-page .v4co-bag table.ty-checkout-summary__block th.ty-checkout-summary__total > div { display: flex !important; align-items: baseline !important; justify-content: space-between !important; }
.v4co-page .v4co-bag th.ty-checkout-summary__item > div > br { display: none !important; }

/* «Good tea. Great moments.» — не просто зелёная полоса: градиент с золотым отсветом, плавающий чайник и листик (15.10.2026) */
@keyframes v4coFloat { 0%, 100% { transform: translateY(-50%) rotate(-4deg); } 50% { transform: translateY(calc(-50% - 6px)) rotate(4deg); } }
@keyframes v4coLeaf { 0%, 100% { transform: rotate(-12deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-4px); } }
.v4co-page .v4co-moment { position: relative; overflow: hidden; min-height: 74px; padding-right: 110px !important; justify-content: center;
  background: radial-gradient(circle at 88% 30%, rgba(243,223,169,.45), transparent 42%), radial-gradient(circle at 10% 120%, rgba(123,162,63,.45), transparent 50%), linear-gradient(120deg, #0F5C45, #0B3B2D) !important; }
.v4co-page .v4co-moment::after { content: "🫖"; position: absolute; right: 26px; top: 50%; font-size: 44px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); animation: v4coFloat 5s ease-in-out infinite; }
.v4co-page .v4co-moment::before { content: "🍃"; position: absolute; right: 78px; top: 10px; font-size: 20px; opacity: .9; animation: v4coLeaf 4s ease-in-out infinite; }
.v4co-page .v4co-moment strong { font-size: 19px !important; letter-spacing: -.01em; }
.v4co-page .v4co-moment span { color: rgba(247,243,234,.85) !important; }
@media (prefers-reduced-motion: reduce) { .v4co-page .v4co-moment::after, .v4co-page .v4co-moment::before { animation: none; } }
/* поле купона: при нажатии без своей рамки — подсвечивается вся таблетка (15.10.2026) */
.v4co-page #onestepcheckout .v4co-bag .ty-discount-coupon__control-group input.ty-input-text:focus, .v4co-page .v4co-bag .ty-discount-coupon__control-group input:focus { border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; }
.v4co-page .v4co-bag .ty-discount-coupon__control-group:focus-within { border-style: solid !important; border-color: #008556 !important; box-shadow: 0 0 0 4px rgba(0,133,86,.12) !important; }

/* «Good tea. Great moments.» — вместо плавающих эмодзи спокойная векторная картинка: контурный чайник с паром и чашка (15.10.2026, слово владельца) */
.v4co-page .v4co-moment::before { content: none !important; display: none !important; }
.v4co-page .v4co-moment::after { content: "" !important; right: 16px; top: 50%; width: 92px; height: 62px; transform: translateY(-50%) !important; animation: none !important; filter: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 62' fill='none' stroke='%23F3DFA9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 50h40'/%3E%3Cpath d='M18 50c-4-4-6-9-6-15 0-7 9-12 22-12s22 5 22 12c0 6-2 11-6 15'/%3E%3Cpath d='M26 23c0-3 3-5 8-5s8 2 8 5'/%3E%3Ccircle cx='34' cy='15' r='2.4'/%3E%3Cpath d='M56 31c6-2 11 1 11 6s-5 8-11 7'/%3E%3Cpath d='M12 33c-5-1-8 2-8 5'/%3E%3Cpath d='M44 9c-2-3 2-4 0-7' opacity='.7'/%3E%3Cpath d='M50 11c-2-3 2-4 0-7' opacity='.5'/%3E%3Cpath d='M72 50h14' /%3E%3Cpath d='M73 40h12v5a6 6 0 0 1-12 0z' fill='rgba(243,223,169,.18)'/%3E%3Cpath d='M85 42c3 0 4 1 4 2.5S88 47 85 47'/%3E%3Cpath d='M30 36c2-3 6-3 8 0' opacity='.6'/%3E%3C/svg%3E") center / contain no-repeat; }

/* «Good tea. Great moments.» — векторный чайник и чашка, над ними медленно поднимается и тает пар (анимация внутри SVG), 15.10.2026 */
.v4co-page .v4co-moment::after { width: 96px !important; height: 66px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 66' fill='none' stroke='%23F3DFA9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg%3E%3Cpath d='M30 20c-3-4 3-6 0-10'%3E%3Canimate attributeName='opacity' values='0;1;0' dur='3.2s' repeatCount='indefinite'/%3E%3CanimateTransform attributeName='transform' type='translate' values='0 6;0 -2' dur='3.2s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M38 20c-3-4 3-6 0-10'%3E%3Canimate attributeName='opacity' values='0;1;0' dur='3.2s' begin='1.1s' repeatCount='indefinite'/%3E%3CanimateTransform attributeName='transform' type='translate' values='0 6;0 -2' dur='3.2s' begin='1.1s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M80 36c-2-3 2-4 0-7'%3E%3Canimate attributeName='opacity' values='0;1;0' dur='2.6s' begin='.5s' repeatCount='indefinite'/%3E%3CanimateTransform attributeName='transform' type='translate' values='0 4;0 -2' dur='2.6s' begin='.5s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3Cpath d='M12 56h44'/%3E%3Cpath d='M17 56c-4-4-6-9-6-14 0-7 9-12 22-12s22 5 22 12c0 5-2 10-6 14'/%3E%3Cpath d='M25 30c0-3 3-5 8-5s8 2 8 5'/%3E%3Ccircle cx='33' cy='22.5' r='2.2'/%3E%3Cpath d='M55 38c6-2 11 1 11 6s-5 8-11 7'/%3E%3Cpath d='M11 40c-5-1-8 2-8 5'/%3E%3Cpath d='M28 44c2-3 7-3 9 0' opacity='.6'/%3E%3Cpath d='M72 56h16'/%3E%3Cpath d='M73 42h14v6a7 7 0 0 1-14 0z' fill='%23F3DFA9' fill-opacity='.18'/%3E%3Cpath d='M87 44c3 0 4.5 1.2 4.5 2.8S90 50 87 50'/%3E%3C/svg%3E") center / contain no-repeat !important; }

/* «Welcome back!» — вместо красного эмодзи-чайника светло-золотая контурная чашка с паром (15.10.2026) */
.v4co-loginTxt i.v4co-cupIco { background: rgba(255,255,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3DFA9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11h11v3.5a5.5 5.5 0 0 1-11 0z'/%3E%3Cpath d='M16 12.5h1.5a2.2 2.2 0 0 1 0 4.4H16'/%3E%3Cpath d='M4 21h13'/%3E%3Cpath d='M8.5 8c-1-1.3 1-2 0-3.5'/%3E%3Cpath d='M12 8c-1-1.3 1-2 0-3.5'/%3E%3C/svg%3E") center / 24px no-repeat; }
.v4co-page .v4co-addrCard .ty-short-text span.v4co-phone { color: #6E746F; font-size: 13.5px; }
.v4co-page .v4co-addrCard .ty-short-text span.v4co-phone::before { content: '📞 '; }
.v4co-page .v4co-login .checkout__block, .v4co-page .v4co-login .checkout__block > div, .v4co-page .v4co-login .checkout-login-form { margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center; }
.v4co-page .v4co-login .checkout__block::before, .v4co-page .v4co-login .checkout__block::after { display: none !important; }
@media (min-width: 561px) { .v4co-page .v4co-login { flex-wrap: nowrap !important; } .v4co-page .v4co-login .visible-phone, .v4co-page .v4co-login .ty-checkout-login-block.visible-phone { display: none !important; } }
/* «Complete Order»: при наведении чуть темнее, при нажатии ещё темнее и слегка вдавливается (15.10.2026) */
.v4co-page .ty-checkout-block__right button.ty-complete-order.ty-btn:not([disabled]):hover { background: #0B4A37 !important; filter: none !important; }
.v4co-page .ty-checkout-block__right button.ty-complete-order.ty-btn:not([disabled]):active { background: #08372A !important; transform: translateY(1px) scale(.985) !important; box-shadow: 0 4px 10px rgba(0,133,86,.25) !important; }
/* «Complete Order»: наведение/нажатие — с id блока кнопок, иначе перебивалось (15.10.2026) */
.v4co-page #checkout_complete_buttons button.ty-complete-order.ty-btn:not([disabled]):hover { background: #008556 !important; filter: none !important; transform: translateY(-2px); }
.v4co-page #checkout_complete_buttons button.ty-complete-order.ty-btn:not([disabled]):active { background: #08372A !important; transform: translateY(1px) scale(.985) !important; }
/* телефон в карточке адреса — крупнее и с отступом от адреса (15.10.2026) */
.v4co-page .v4co-addrCard .ty-short-text span.v4co-phone { margin-top: 8px; font-size: 15px !important; font-weight: 600; color: #1E2421 !important; }

/* ===== Заказ оформлен (/paid/?order_id=…, checkout.complete), 15.10.2026 ===== */
@keyframes v4doneDraw { to { stroke-dashoffset: 0; } }
@keyframes v4donePop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes v4donePour { 0%, 8% { transform: rotate(0); } 20%, 62% { transform: rotate(16deg); } 78%, 100% { transform: rotate(0); } }
@keyframes v4doneFall { 0% { opacity: 0; transform: translateY(-20px) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(260px) rotate(260deg); } }
.v4done-page .ty-breadcrumbs-cnt { display: none !important; }
.v4done-page .vs-mainbox-general { max-width: 980px; margin: 0 auto 48px !important; }
.v4done-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: center; gap: 24px; margin: 8px 0 22px; padding: 32px clamp(20px, 4vw, 44px); border-radius: 28px;
  background: radial-gradient(circle at 8% 10%, rgba(255,214,170,.55), transparent 45%), radial-gradient(circle at 92% 90%, rgba(198,230,210,.85), transparent 50%), linear-gradient(135deg, #FFF6EA, #EEF7F1); }
@media (max-width: 720px) { .v4done-hero { grid-template-columns: 1fr; } .v4done-art { max-width: 220px; margin: 0 auto; } }
.v4done-hero .v4done-text { position: relative; z-index: 1; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; align-items: center; }
.v4done-check { grid-row: 1 / span 3; width: 64px; height: 64px; animation: v4donePop .6s cubic-bezier(.22,1,.36,1) both; }
.v4done-check circle { fill: #0F5C45; stroke: #0F5C45; stroke-width: 2; }
.v4done-check path { fill: none; stroke: #F3DFA9; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: v4doneDraw .6s .45s ease-out forwards; }
.v4done-k { margin: 0 0 4px !important; font: 700 12px Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #B8934A; }
.v4done-page h1.v4done-title { margin: 0 0 6px !important; padding: 0 !important; border: 0 !important; font: 600 clamp(28px, 3.6vw, 44px)/1.08 var(--v4-cond, Inter), Inter, sans-serif !important; color: #0F5C45 !important; text-transform: none !important; text-align: left !important; letter-spacing: -.02em; }
.v4done-hero .ty-checkout-complete__order-success, .v4done-hero .ty-checkout-complete__order-success * { margin: 0 !important; font: 500 15px/1.5 Inter, system-ui, sans-serif !important; color: #4A524D !important; }
.v4done-art { width: 100%; height: auto; }
.v4done-pot { transform-box: view-box; transform-origin: 80px 95px; animation: v4donePour 5s ease-in-out infinite; }
.v4done-fall { position: absolute; inset: 0; pointer-events: none; }
.v4done-fall span { position: absolute; top: 0; animation: v4doneFall 2.6s ease-in forwards; }
/* адрес — карточкой с таймером */
.v4done-page .ty-short-shipping-address { position: relative; margin: 0 0 18px !important; padding: 20px 22px !important; border: 1px solid #E3E7E5; border-radius: 22px; background: #fff; box-shadow: 0 12px 30px rgba(15,40,32,.05); }
.v4done-addrT { margin: 0 0 6px !important; font: 600 20px/1.2 var(--v4-cond, Inter), Inter, sans-serif; color: #0F5C45; }
.v4done-page .ty-short-shipping-address__header, .v4done-page .ty-short-shipping-address__header * { font: 400 14px/1.5 Inter, system-ui, sans-serif !important; color: #6E746F !important; }
.v4done-page .ty-short-shipping-address__text, .v4done-page .ty-short-shipping-address__text * { margin: 10px 0 14px !important; font: 600 15px/1.5 Inter, system-ui, sans-serif !important; color: #1E2421 !important; text-transform: none !important; letter-spacing: 0 !important; }
.v4done-page .ty-short-shipping-address .ty-shipping-address__show { display: inline-flex !important; align-items: center; height: 38px !important; padding: 0 18px !important; border: 1.5px solid #008556 !important; border-radius: 999px !important; background: #fff !important; color: #0F5C45 !important; font: 700 14px Inter, system-ui, sans-serif !important; text-transform: none !important; box-shadow: none !important; }
.v4done-page .ty-short-shipping-address .ty-shipping-address__show:hover { background: #008556 !important; color: #fff !important; }
.v4done-page .ty-mod-timer__cnt { display: inline-flex; align-items: center; height: 30px; margin-left: 10px; padding: 0 12px; border-radius: 999px; background: #FBF1DC; color: #9A6B12; font: 700 12.5px Inter, system-ui, sans-serif; vertical-align: middle; }
.v4done-page .ty-mod-timer__cnt::before { content: "⏱"; margin-right: 6px; }
/* кнопки */
.v4done-page .ty-checkout-complete__buttons { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px !important; }
.v4done-page .ty-checkout-complete__buttons::before, .v4done-page .ty-checkout-complete__buttons::after { display: none !important; }
.v4done-page .ty-checkout-complete__buttons > * { float: none !important; margin: 0 !important; }
.v4done-page .ty-checkout-complete__buttons-right { margin-left: auto !important; }
.v4done-page .ty-checkout-complete__buttons .ty-btn { display: inline-flex !important; align-items: center; height: 48px !important; padding: 0 24px !important; border-radius: 999px !important; font: 700 15px Inter, system-ui, sans-serif !important; text-transform: none !important; box-shadow: none !important; }
.v4done-page .ty-checkout-complete__buttons .ty-btn__primary { background: #008556 !important; border: 0 !important; color: #fff !important; box-shadow: 0 8px 20px rgba(0,133,86,.25) !important; }
.v4done-page .ty-checkout-complete__buttons .ty-btn__primary:hover { background: #0F5C45 !important; }
.v4done-page .ty-checkout-complete__continue-shopping .ty-btn { background: #fff !important; border: 1.5px solid #CFE3D9 !important; color: #0F5C45 !important; }
.v4done-page .ty-checkout-complete__buttons .ty-order-cancel { height: auto !important; padding: 6px 2px !important; border: 0 !important; background: none !important; color: #8A8F8C !important; font: 500 14px Inter, system-ui, sans-serif !important; text-decoration: underline !important; text-underline-offset: 3px; }
.v4done-page .ty-checkout-complete__buttons .ty-order-cancel:hover { color: #B3261E !important; }
/* «What’s next» */
.v4done-next { padding: 22px 24px; border-radius: 22px; background: #F4F6F5; }
.v4done-next ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: v4n; }
@media (max-width: 720px) { .v4done-next ol { grid-template-columns: 1fr; } }
.v4done-next li { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px; background: #fff; font: 400 13.5px/1.45 Inter, system-ui, sans-serif; color: #4A524D; }
.v4done-next li i { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: #E8F3EE; font-style: normal; font-size: 20px; margin-bottom: 6px; }
.v4done-next li b { font: 600 16px Inter, system-ui, sans-serif; color: #1E2421; }
@media (prefers-reduced-motion: reduce) { .v4done-pot, .v4done-check, .v4done-check path { animation: none !important; } .v4done-check path { stroke-dashoffset: 0; } }

/* форма правки адреса (по «Edit»): подписи над полями, две колонки, скругления, Save — таблеткой (15.10.2026) */
.v4done-page .ty-shipping-address__edit { margin: 14px 0 0; padding: 16px 0 0; border-top: 1px solid #EEF1EF; }
.v4done-page .ty-shipping-address__edit .ty-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 14px; margin: 0 !important; }
.v4done-page .ty-shipping-address__edit .ty-row::before, .v4done-page .ty-shipping-address__edit .ty-row::after, .v4done-page .ty-shipping-address__edit .clearfix::before, .v4done-page .ty-shipping-address__edit .clearfix::after { display: none !important; }
@media (max-width: 640px) { .v4done-page .ty-shipping-address__edit .ty-row { grid-template-columns: 1fr; } }
.v4done-page .ty-shipping-address__edit .ty-control-group { float: none !important; width: auto !important; margin: 0 0 14px !important; padding: 0 !important; min-height: 0 !important; position: relative; }
.v4done-page .ty-shipping-address__edit label.ty-control-group__title { position: static !important; display: block; transform: none !important; margin: 0 0 6px !important; padding: 0 !important; background: none !important; font: 600 13px Inter, system-ui, sans-serif !important; color: #1E2421 !important; }
.v4done-page .ty-shipping-address__edit input.ty-input-text, .v4done-page .ty-shipping-address__edit select { box-sizing: border-box; width: 100% !important; max-width: none !important; height: 48px !important; margin: 0 !important; padding: 0 14px !important; border: 1.5px solid #E3E7E5 !important; border-radius: 14px !important; background: #F7F9F8 !important; font: 600 15px Inter, system-ui, sans-serif !important; color: #111614 !important; box-shadow: none !important; }
.v4done-page .ty-shipping-address__edit input:focus, .v4done-page .ty-shipping-address__edit select:focus { outline: none; border-color: #008556 !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(0,133,86,.12) !important; }
.v4done-page .ty-shipping-address__edit .ty-shipping-address__save { display: inline-flex !important; align-items: center; height: 44px !important; padding: 0 26px !important; border: 0 !important; border-radius: 999px !important; background: #008556 !important; color: #fff !important; font: 700 15px Inter, system-ui, sans-serif !important; text-transform: none !important; box-shadow: 0 8px 20px rgba(0,133,86,.25) !important; }
.v4done-page .ty-shipping-address__edit .ty-shipping-address__save:hover { background: #0F5C45 !important; }
.v4done-page .ty-short-shipping-address__text.v4done-lines { display: flex !important; flex-direction: column; gap: 3px; }
.v4done-page .ty-short-shipping-address__text.v4done-lines > * { margin: 0 !important; }
.v4done-page .ty-short-shipping-address__text.v4done-lines b { font-weight: 700 !important; font-size: 15.5px !important; }
.v4done-page .ty-short-shipping-address__text.v4done-lines span { font-weight: 500 !important; color: #4A524D !important; }
.v4done-page .ty-short-shipping-address__text.v4done-lines .v4co-phone { margin-top: 6px !important; color: #1E2421 !important; font-weight: 600 !important; }
.v4done-page .ty-short-shipping-address__text.v4done-lines .v4co-phone::before { content: '📞 '; }
/* 18.10.2026, тест устройств: на телефоне правый блок (сводка заказа) был inline-block и растягивался по ширине поля купона
   до 465px при экране 320 — суммы и кнопка «Complete order» уходили за правый край */
@media (max-width: 1006px), (orientation: portrait) {
  .v4co-page #onestepcheckout > .ty-checkout-block__right, .v4co-page #onestepcheckout > .ty-checkout-block__left { display: block !important; width: 100% !important; max-width: 100%; box-sizing: border-box; }
  .v4co-page .ty-checkout-block__right .ty-discount-coupon__control-group { max-width: 100%; box-sizing: border-box; }
  .v4co-page .ty-checkout-block__right .ty-discount-coupon__control-group input.coupon_field { width: auto !important; min-width: 0 !important; flex: 1 1 auto; }
}
/* шаги «Details · Delivery · Payment» на узком телефоне: третий шаг уходил за край — без соединительных линий, шаги по краям */
@media (max-width: 400px) {
  .v4co-steps { justify-content: space-between; gap: 6px; }
  .v4co-steps li, .v4co-steps li:not(:last-child) { flex: 0 0 auto; gap: 5px; font-size: 13px; }
  .v4co-steps li:not(:last-child)::after { display: none; }
  .v4co-steps li b { width: 24px; height: 24px; font-size: 12px; flex: 0 0 auto; }
}
/* в плашке «Welcome back!» на телефоне выглядывал запасной заголовок темы «Login» (visible-phone) с подписью
   «Have an account? Sign in» тёмным по зелёному — приветствие и кнопка его уже заменяют */
.v4co-page .v4co-login .ty-checkout-login-block.visible-phone, .v4co-page .v4co-login h3.ty-step__title-active { display: none !important; }
/* 19.10.2026, слово владельца «не нравятся кнопки» (оплата картой): вместо круглых зелёной и красной иконок —
   таблетки с подписью: «Save card for next time» (светлая, зелёная рамка) и тихая ссылка «Clear» */
.v4co-page #onestepcheckout .ty-credit-card__buttons { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px !important; }
.v4co-page #onestepcheckout .ty-credit-card__buttons > * { display: contents; }
.v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-save, .v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-remove { display: inline-flex !important; align-items: center; gap: 8px; width: auto !important; height: 38px !important; min-width: 0 !important; margin: 0 !important; padding: 0 16px !important; border-radius: 999px !important; box-shadow: none !important; font: 600 13.5px Inter, system-ui, sans-serif !important; text-transform: none !important; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-save { border: 1.5px solid #0F5C45 !important; background: #fff !important; color: #0F5C45 !important; }
.v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-save:hover { background: #F2F8F5 !important; }
.v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-save::after { content: var(--v4t-savecard, "Save card for next time"); }
.v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-remove { border: 0 !important; background: none !important; color: #6E746F !important; padding: 0 8px !important; }
.v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-remove:hover { color: #B3261E !important; }
.v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-remove::after { content: var(--v4t-clear, "Clear"); text-decoration: underline; text-underline-offset: 3px; }
.v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-remove.disabled { display: none !important; }
.v4co-page #onestepcheckout .ty-credit-card__buttons a [class^="ty-icon-"] { font-size: 15px !important; color: inherit !important; }
.v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-remove [class^="ty-icon-"] { display: none !important; }
/* 19.10.2026, слово владельца (страница «заказ оформлен»): поздравление CS-Cart в баннере — по левому краю, как заголовок;
   блок адреса — адрес по строкам слева, «Edit» и таймер справа */
.v4done-hero .ty-checkout-complete__order-success, .v4done-hero .ty-checkout-complete__order-success * { text-align: left !important; }
.v4done-page .ty-short-shipping-address:has(.ty-shipping-address__edit.hidden) { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; align-items: start; text-align: left !important; }
.v4done-page .ty-short-shipping-address:has(.ty-shipping-address__edit.hidden) > :not(.ty-short-shipping-address__text):not(.ty-shipping-address__show):not(.ty-mod-timer__cnt) { grid-column: 1 / -1; }
.v4done-page .ty-short-shipping-address:has(.ty-shipping-address__edit.hidden) .v4done-addrT, .v4done-page .ty-short-shipping-address:has(.ty-shipping-address__edit.hidden) .ty-short-shipping-address__header { text-align: left !important; }
.v4done-page .ty-short-shipping-address:has(.ty-shipping-address__edit.hidden) > .ty-short-shipping-address__text { grid-column: 1; grid-row: span 2; margin: 12px 0 0 !important; text-align: left !important; }
.v4done-page .ty-short-shipping-address:has(.ty-shipping-address__edit.hidden) > .ty-shipping-address__show { grid-column: 2; justify-self: end; margin: 12px 0 0 !important; }
.v4done-page .ty-short-shipping-address:has(.ty-shipping-address__edit.hidden) > .ty-mod-timer__cnt { grid-column: 2; justify-self: end; margin: 8px 0 0 !important; }
.v4done-page .ty-short-shipping-address .ty-short-shipping-address__text br, .v4done-page .ty-short-shipping-address .ty-short-shipping-address__text .hidden-desktop { display: none !important; }
/* 19.10.2026, слово владельца: поздравление было дважды — оставлено только в баннере */
.v4done-page .ty-checkout-complete__order-success:not(.v4done-hero *) { display: none !important; }
.v4done-page .ty-checkout-complete__order-success:not(.v4done-hero .ty-checkout-complete__order-success) { display: none !important; }
/* 19.10.2026, замечание владельца: сохранённый адрес на оформлении был виден одной строкой (только имя) —
   тема задаёт .ty-short-text высоту в строку и обрезает остальное. Высота — по содержимому */
.v4co-page .v4co-addrCard .ty-short-text, .v4co-page #step_two .ty-short-text { height: auto !important; max-height: none !important; overflow: visible !important; white-space: normal !important; text-overflow: clip !important; -webkit-line-clamp: unset !important; }
/* 19.10.2026, слово владельца: подписи у кнопок карты не понравились — снова значки, но компактными квадратиками:
   «сохранить» — светло-зелёный, «очистить» — светло-серый (при наведении красный); ряд кнопок не растягивает строку полей */
.v4co-page #onestepcheckout .ty-credit-card__buttons { gap: 8px !important; }
.v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-save, .v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-remove { justify-content: center; width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 12px !important; border: 1.5px solid transparent !important; }
.v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-save::after, .v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-remove::after { content: none !important; }
.v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-save { background: #E8F3EE !important; border-color: #CFE5DA !important; color: #0F5C45 !important; }
.v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-save:hover { background: #0F5C45 !important; border-color: #0F5C45 !important; color: #fff !important; }
.v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-remove { background: #F4F6F5 !important; border-color: #E3E7E5 !important; color: #6E746F !important; }
.v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-remove:hover { background: #FBE6E4 !important; border-color: #F2C4C4 !important; color: #B3261E !important; }
.v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-remove [class^="ty-icon-"] { display: inline-block !important; }
.v4co-page #onestepcheckout .ty-credit-card__buttons a [class^="ty-icon-"] { font-size: 16px !important; line-height: 1 !important; color: inherit !important; }
/* значки кнопок карты — свои (цвет текста кнопки), значки темы рисовались белым и были не видны на светлом фоне */
.v4co-page #onestepcheckout .ty-credit-card__buttons a [class^="ty-icon-"] { display: none !important; }
.v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-save::before, .v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-remove::before { content: ""; display: block; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--v4i) center / contain no-repeat; mask: var(--v4i) center / contain no-repeat; }
.v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-save { --v4i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpath d='M17 21v-8H7v8M7 3v5h8'/%3E%3C/svg%3E"); }
.v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-remove { --v4i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E"); }
.v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-save::after, .v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-remove::after { display: none !important; }
.v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-remove [class^="ty-icon-"], .v4co-page #onestepcheckout .ty-credit-card__buttons a.ty-card-save [class^="ty-icon-"] { display: none !important; }
/* 19.10.2026: телефон — список товаров в «Your tea bag» свёрнут, «View / Edit» его открывает и закрывает (стрелка показывает состояние) */
@media (max-width: 767px) {
  .v4co-page .v4co-bag:not(.v4co-itemsOpen) .v4co-items { display: none !important; }
  .v4co-page .v4co-bag a.v4co-editTop::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
  .v4co-page .v4co-bag.v4co-itemsOpen a.v4co-editTop::after { transform: translateY(2px) rotate(-135deg); }
  .v4co-page .v4co-bag.v4co-itemsOpen a.v4co-editTop { background: #E8F3EE !important; }
}
@media (max-width: 767px) {
  .v4co-page .v4co-bag h3.ty-step__title-active { display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; align-items: center; gap: 8px; max-width: 100%; box-sizing: border-box; text-align: left !important; }
  .v4co-page .v4co-bag a.v4co-editTop { margin-left: 0 !important; }
  .v4co-page .v4co-bag h3.ty-step__title-active .ty-step__title-txt { white-space: nowrap !important; font-size: 19px !important; }
  .v4co-page .v4co-bag a.v4co-editTop { margin-left: auto !important; height: 34px !important; padding: 0 12px !important; font-size: 13px !important; white-space: nowrap; }
}
/* 19.10.2026, замечание владельца: на телефоне после нажатия «View / Edit» текст становился белым (залипал вид «наведения»
   с белым текстом на светлом фоне) — на телефоне кнопка всегда зелёным текстом, открытая — светло-зелёный фон */
@media (max-width: 767px) {
  .v4co-page .v4co-bag a.v4co-editTop, .v4co-page .v4co-bag a.v4co-editTop:hover, .v4co-page .v4co-bag a.v4co-editTop:focus, .v4co-page .v4co-bag a.v4co-editTop:active { color: #0F5C45 !important; background: #fff !important; border-color: #CFE5DA !important; }
  .v4co-page .v4co-bag a.v4co-editTop *, .v4co-page .v4co-bag a.v4co-editTop:hover * { color: #0F5C45 !important; }
  .v4co-page .v4co-bag.v4co-itemsOpen a.v4co-editTop, .v4co-page .v4co-bag.v4co-itemsOpen a.v4co-editTop:hover { background: #E8F3EE !important; }
  .v4co-page .v4co-bag a.v4co-editTop { -webkit-tap-highlight-color: transparent; }
}
/* контур «View / Edit» на телефоне заметнее: закрыто — зелёная рамка на белом, открыто — тёмно-зелёная рамка на светло-зелёном */
@media (max-width: 767px) {
  .v4co-page .v4co-bag a.v4co-editTop, .v4co-page .v4co-bag a.v4co-editTop:hover, .v4co-page .v4co-bag a.v4co-editTop:focus, .v4co-page .v4co-bag a.v4co-editTop:active { border: 1.5px solid #008556 !important; }
  .v4co-page .v4co-bag.v4co-itemsOpen a.v4co-editTop, .v4co-page .v4co-bag.v4co-itemsOpen a.v4co-editTop:hover { border-color: #0F5C45 !important; background: #DCEEE5 !important; }
}
/* 16.10.2026, слово владельца: кошелёк клиента на оформлении — карточка в стиле поля купона: «Your Wallet [Use]  сумма» */
.v4co-bag tr.v4co-row:has(td.ty-wallet-row) { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; background: #F2F8F4 !important; border: 1.5px dashed #9CC5AE !important; border-radius: 14px; padding: 10px 12px !important; margin: 10px 0 !important; }
.v4co-bag td.ty-wallet-row { display: flex !important; align-items: center; gap: 10px; flex-wrap: wrap; color: #1E2421 !important; font: 600 14px Inter, system-ui, sans-serif !important; background: none !important; padding: 0 !important; border: 0 !important; width: auto !important; }
.v4co-bag td.ty-wallet-row.ty-right, .v4co-bag td.ty-wallet-row.ty-right * { color: #0F5C45 !important; font: 700 15px Inter, system-ui, sans-serif !important; background: none !important; }
.v4co-bag td.ty-wallet-row .ty-wallet-use-btn { order: 2; display: inline-flex !important; align-items: center; background: #0F5C45 !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 6px 16px !important; margin: 0 !important; font: 700 13px/1.2 Inter, system-ui, sans-serif !important; height: auto !important; min-height: 0 !important; box-shadow: none !important; text-transform: none !important; }
.v4co-bag td.ty-wallet-row .ty-wallet-use-btn:hover { background: #0b4a37 !important; }
.v4co-bag tr.v4co-row:has(td.ty-wallet-row) { box-sizing: border-box; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
.v4co-bag tr.v4co-row:has(td.ty-wallet-row) td.ty-wallet-row:first-child { flex: 1 1 auto; min-width: 0; }
/* кошелёк применён: строка «Used ×   Edit −сумма» под карточкой кошелька */
.v4co-bag tr.v4co-row:has(.ty-edit-used-wallet) { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 12px 8px !important; }
.v4co-bag tr.v4co-row:has(.ty-edit-used-wallet) td { display: flex !important; align-items: center; gap: 8px; padding: 0 !important; font: 600 14px Inter, system-ui, sans-serif !important; color: #1E2421 !important; }
.v4co-bag tr.v4co-row:has(.ty-edit-used-wallet) form { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; }
.v4co-bag tr.v4co-row:has(.ty-edit-used-wallet) .ty-price, .v4co-bag tr.v4co-row:has(.ty-edit-used-wallet) form > span, .v4co-bag tr.v4co-row:has(.ty-edit-used-wallet) .ty-price__cnt, .v4co-bag tr.v4co-row:has(.ty-edit-used-wallet) .ty-price__cnt * { color: #0F5C45 !important; font: 700 15px Inter, system-ui, sans-serif !important; }
.v4co-bag .ty-edit-used-wallet { font: 700 12px Inter, system-ui, sans-serif !important; color: #0F5C45 !important; text-transform: uppercase; letter-spacing: .04em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.v4co-bag tr.v4co-row:has(.ty-edit-used-wallet) .ty-coupons__item-delete { display: inline-flex !important; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #E4ECE7 !important; color: #3D4A43 !important; font: 700 13px/1 Inter, system-ui, sans-serif !important; text-decoration: none !important; }
.v4co-bag tr.v4co-row:has(.ty-edit-used-wallet) .ty-coupons__item-delete:hover { background: #C9473F !important; color: #fff !important; }
.v4co-bag tr.v4co-row:has(.ty-edit-used-wallet) { box-sizing: border-box; width: 100% !important; max-width: 100% !important; }
.v4co-bag tr.v4co-row:has(.ty-edit-used-wallet) td:last-child { margin-left: auto; }
/* 16.10.2026, слово владельца: ползунок суммы кошелька под строкой «Used»; ручное поле «Edit» скрыто */
.v4co-bag tr.v4-wsl-on .ty-edit-used-wallet, .v4co-bag tr.v4-wsl-on .ty-price__input { display: none !important; }
.v4co-bag tr.v4-wsl-row { display: block !important; padding: 0 12px 10px !important; }
.v4co-bag tr.v4-wsl-row td { display: block !important; padding: 0 !important; border: 0 !important; }
.v4-wsl { display: block; }
.v4-wsl-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0; cursor: pointer; --p: 100%; }
.v4-wsl-range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, #0F5C45 0 var(--p), #D7E3DC var(--p) 100%); }
.v4-wsl-range::-moz-range-track { height: 8px; border-radius: 999px; background: #D7E3DC; }
.v4-wsl-range::-moz-range-progress { height: 8px; border-radius: 999px; background: #0F5C45; }
.v4-wsl-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%; background: #fff; border: 3px solid #0F5C45; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.v4-wsl-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #0F5C45; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.v4-wsl-range:focus-visible { outline: 2px solid #0F5C45; outline-offset: 4px; border-radius: 999px; }
.v4-wsl-ends { display: flex; justify-content: space-between; font: 500 12px Inter, system-ui, sans-serif; color: #6E746F; margin-top: 2px; }
.v4-wsl-busy { opacity: .55; pointer-events: none; }
.v4co-bag tr.v4-wsl-row { box-sizing: border-box; width: 100% !important; max-width: 100% !important; }
.v4co-bag tr.v4-wsl-row .v4-wsl-range { box-sizing: border-box; padding: 0 2px; }
/* 16.10.2026, слово владельца: сохранённые адреса — внутри «Shipping Address»: строка «📒 Your saved addresses  [Main] [New address]», на телефоне — в две строки, без линии */
.v4co-page .v4co-profiles.v4co-profilesIn { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 4px 0 14px !important; padding: 10px 14px !important; border-radius: 14px; background: #F4F6F5; border: 0 !important; }
.v4co-page .v4co-profiles.v4co-profilesIn > .ty-step__container-active { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.v4co-page .v4co-profiles.v4co-profilesIn > .ty-step__container-active, .v4co-page .v4co-profiles.v4co-profilesIn > .ty-step__container-active * { font: 700 15px Inter, system-ui, sans-serif !important; color: #1E2421 !important; }
.v4co-page .v4co-profiles.v4co-profilesIn .hidden-phone, .v4co-page .v4co-profiles.v4co-profilesIn .ty-step__title-active { display: inline !important; }
.v4co-page .v4co-profiles.v4co-profilesIn > .checkout__block { margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; }
.v4co-page .v4co-profiles.v4co-profilesIn > .checkout__block *:not(a):not(button) { border-bottom: 0 !important; }
.v4co-page .v4co-profiles.v4co-profilesIn > .checkout__block::after, .v4co-page .v4co-profiles.v4co-profilesIn > .checkout__block::before { display: none !important; }
@media (max-width: 560px) {
  .v4co-page .v4co-profiles.v4co-profilesIn { flex-direction: column; align-items: stretch; }
  .v4co-page .v4co-profiles.v4co-profilesIn > .checkout__block { display: flex !important; }
}
/* 16.10.2026, слово владельца («коряво»): сохранённые адреса — строка «маленькая подпись + кнопки адресов в ряд»; удаление адресов — только в кабинете */
.v4co-page .v4co-profiles.v4co-profilesIn { flex-direction: row !important; align-items: center !important; gap: 8px 14px !important; padding: 12px 14px !important; }
.v4co-page .v4co-profiles.v4co-profilesIn > .ty-step__container-active { flex: 0 0 auto; }
.v4co-page .v4co-profiles.v4co-profilesIn h3.ty-step__title-active { margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
.v4co-page .v4co-profiles.v4co-profilesIn h3.ty-step__title-active::before, .v4co-page .v4co-profiles.v4co-profilesIn h3.ty-step__title-active::after { display: none !important; content: none !important; }
.v4co-page .v4co-profiles.v4co-profilesIn .ty-step__title-txt { display: inline !important; font: 700 12px Inter, system-ui, sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #6E746F !important; }
.v4co-page .v4co-profiles.v4co-profilesIn > .checkout__block { flex: 1 1 auto; }
.v4co-page .v4co-profiles.v4co-profilesIn .select-profile, .v4co-page .v4co-profiles.v4co-profilesIn > .checkout__block > div { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 !important; }
.v4co-page .v4co-profiles.v4co-profilesIn .select-profile > label { display: none !important; }
.v4co-page .v4co-profiles.v4co-profilesIn .cm-profile-delete { display: none !important; }
.v4co-page .v4co-profiles.v4co-profilesIn .ty-btn { height: 38px !important; min-height: 0 !important; padding: 0 16px !important; margin: 0 !important; border-radius: 999px !important; font: 700 14px Inter, system-ui, sans-serif !important; display: inline-flex !important; align-items: center; }
.v4co-page .v4co-profiles.v4co-profilesIn .ty-btn__profile-new::before { content: "+ "; white-space: pre; }
@media (max-width: 560px) { .v4co-page .v4co-profiles.v4co-profilesIn { flex-direction: column !important; align-items: flex-start !important; } }
.v4co-page #step_two .ty-step-login:has(.select-profile) { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 14px !important; padding: 12px 14px !important; border-radius: 14px; background: #F4F6F5; }
/* подпись блока адресов — маленькая, без значка; кнопки адресов в один ряд (сильнее правил заголовков шагов) */
html.v4co-page body #step_two .ty-step-login h3.ty-step__title-active, html.v4co-page body #step_two .v4co-profiles h3 { margin: 0 !important; padding: 0 !important; min-height: 0 !important; display: block !important; }
html.v4co-page body #step_two .ty-step-login h3::before, html.v4co-page body #step_two .ty-step-login h3::after, html.v4co-page body #step_two .ty-step-login .ty-step__title-txt::before { display: none !important; content: none !important; }
html.v4co-page body #step_two .ty-step-login h3 .ty-step__title-txt { font: 700 12px/1.3 Inter, system-ui, sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #6E746F !important; }
html.v4co-page body #step_two .ty-step-login .select-profile { flex-wrap: wrap; justify-content: flex-start; }
/* 16.10.2026, слово владельца: «It's for a gift» — крупнее, карточкой со значком подарка */
.v4co-page .ty-gift-checkbox > label.ty-checkbox-label { display: flex !important; align-items: center; gap: 12px; margin: 6px 0 12px !important; padding: 12px 16px !important; border-radius: 14px; background: #fff; border: 1.5px solid #DDE5E1; cursor: pointer; font: 700 16px Inter, system-ui, sans-serif !important; color: #1E2421 !important; transition: border-color .15s, background .15s; }
.v4co-page .ty-gift-checkbox > label.ty-checkbox-label:hover { border-color: #9CC5AE; }
.v4co-page .ty-gift-checkbox > label.ty-checkbox-label::after { content: "🎁"; order: -1; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: #FBEFE0; font-size: 20px; }
.v4co-page .ty-gift-checkbox > label.ty-checkbox-label input.cm-for-gift { order: 2; margin: 0 0 0 auto !important; width: 22px; height: 22px; accent-color: #0F5C45; cursor: pointer; }
.v4co-page .ty-gift-checkbox > label.ty-checkbox-label:has(input:checked) { border-color: #0F5C45; background: #F2F8F4; }
/* 16.10.2026, слово владельца: блок «A question about your tea? … contact us» под кнопкой заказа убран */
.v4co-page .v4co-help { display: none !important; }
html.v4co-page body #onestepcheckout .ty-checkout-block__right p.v4co-help, html body p.v4co-help { display: none !important; }

/* ===== 16.10.2026, отчёт юзабилити п.6 (слово владельца): упрощённая шапка и подвал оформления, сводка заказа сверху на телефоне ===== */
.v4h-coSlim { display: none !important; }
html body #v4h_footer.v4h-fSlim > :not(.v4h-fBottom) { display: none !important; }
html.v4co-page #v4sp_tab { display: none !important; }
.v4co-head { display: flex; align-items: center; gap: 16px; padding: 14px clamp(16px, 4vw, 48px); background: #F5F1E6; border-bottom: 1px solid #E6E0D0; }
.v4co-headL { display: flex; align-items: center; gap: 18px; min-width: 0; }
.v4co-back { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border: 1.5px solid #D6E2DA; border-radius: 999px; background: #fff; color: #0F5C45 !important; font: 600 14px Inter, system-ui, sans-serif; text-decoration: none !important; white-space: nowrap; transition: background .2s, border-color .2s; }
.v4co-back:hover, .v4co-back:focus-visible { background: #E7F2EA; border-color: #0F5C45; }
.v4co-back svg { flex: 0 0 18px; width: 18px; height: 18px; transition: transform .2s; }
.v4co-back:hover svg { transform: translateX(-3px); }
.v4co-logo img { display: block; height: 48px; width: auto; }
.v4co-secure { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px; background: #E7F2EA; color: #0F5C45; font: 700 14px Inter, system-ui, sans-serif; white-space: nowrap; }
.v4co-lock { position: relative; display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #0F5C45; }
.v4co-lock::before { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: v4coPulse 2.8s ease-out infinite; }
.v4co-lock svg { width: 16px; height: 16px; overflow: visible; }
.v4co-lock .v4co-shackle { animation: v4coShackle 2.8s ease-in-out infinite; }
@keyframes v4coPulse { 0% { box-shadow: 0 0 0 0 rgba(15, 92, 69, .45); } 70%, 100% { box-shadow: 0 0 0 10px rgba(15, 92, 69, 0); } }
@keyframes v4coShackle { 0%, 50%, 100% { transform: translateY(0); } 60% { transform: translateY(-3px); } 72% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .v4co-lock::before, .v4co-lock .v4co-shackle { animation: none; } }
.v4co-sum { display: none; }
@media (max-width: 767px) {
  .v4co-head { gap: 10px; padding: 10px 16px; }
  .v4co-headL { gap: 10px; }
  .v4co-back { width: 40px; padding: 0; justify-content: center; }
  .v4co-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .v4co-logo img { height: 36px; }
  .v4co-secure { gap: 8px; padding: 5px 12px 5px 5px; font-size: 13px; }
  .v4co-lock { flex-basis: 26px; width: 26px; height: 26px; }
  .v4co-sum:not([hidden]) { display: block; position: sticky; top: 0; z-index: 999; background: #fff; border-bottom: 1px solid #E6E0D0; box-shadow: 0 6px 14px rgba(15, 40, 30, .06); }
  .v4co-sumBar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 16px; border: 0; background: none; cursor: pointer; text-align: left; }
  .v4co-sumT { font: 600 15px Inter, system-ui, sans-serif; color: #0F5C45; }
  .v4co-sumT i { display: inline-block; margin-left: 6px; font-style: normal; transition: transform .2s; }
  .v4co-sum.on .v4co-sumT i { transform: rotate(180deg); }
  .v4co-sumV { font: 700 17px Inter, system-ui, sans-serif; color: #1E2421; white-space: nowrap; }
  .v4co-sumBody { display: none; max-height: 60vh; overflow: auto; padding: 0 16px 12px; }
  .v4co-sum.on .v4co-sumBody { display: block; }
  .v4co-sumItem { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid #F0EEE8; font: 500 14px/1.3 Inter, system-ui, sans-serif; color: #1E2421; }
  .v4co-sumItem .v4co-thumb { position: relative; flex: 0 0 48px; }
  .v4co-sumItem .v4co-thumb img { display: block; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
  .v4co-sumItem .v4co-thumb b { position: absolute; top: -6px; left: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #0F5C45; color: #fff; font: 700 11px/18px Inter, system-ui, sans-serif; text-align: center; }
  .v4co-sumItem .v4co-iName { flex: 1; min-width: 0; }
  .v4co-sumItem .v4co-iName small { display: block; font-size: 12px; color: #6E746F; }
  .v4co-sumItem .v4co-iPrice { font-weight: 700; white-space: nowrap; }
  .v4co-sumRow { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font: 500 14px Inter, system-ui, sans-serif; color: #5A635E; }
  .v4co-sumRow.v4co-sumTot { margin-top: 4px; padding-top: 10px; border-top: 1px solid #F0EEE8; font-weight: 700; color: #1E2421; }
}
/* 16.10.2026: шрифт темы (узкий) перебивал — ссылка «Continue shopping» и строки сводки тем же шрифтом, что и вся страница */
html body .v4co-head .v4co-back, html body .v4co-head .v4co-back span { font: 600 14px Inter, system-ui, sans-serif !important; }
html body .v4co-sum .v4co-sumRow, html body .v4co-sum .v4co-sumRow span { font-family: Inter, system-ui, sans-serif !important; }

/* 16.10.2026, слово владельца: шапка оформления в три колонки — «← Continue shopping» | TEALYRA (по центру, заглавными, как в шапке телефона при прокрутке) | Secure checkout */
html body .v4co-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
html body .v4co-head .v4co-back { justify-self: start; }
html body .v4co-head .v4co-logo { justify-self: center; font: 800 26px/1 Inter, system-ui, sans-serif !important; letter-spacing: .08em; color: #0F5C45 !important; text-decoration: none !important; white-space: nowrap; }
html body .v4co-head .v4co-secure { justify-self: end; margin-left: 0; }
@media (max-width: 767px) { html body .v4co-head .v4co-logo { font-size: 20px !important; } }
@media (max-width: 360px) { html body .v4co-head .v4co-secT { display: none; } html body .v4co-head .v4co-secure { padding: 5px; } }

/* ===== 16.10.2026, отчёт юзабилити п.16, слово владельца (галочки на макете): блок оплаты одним списком, как DAVIDsTEA —
   строки «кружок · название · логотипы справа», выбранная — зелёная рамка и серое поле с картой; подсказки внутри полей (cc.tpl),
   кнопки «Save card» / «Remove» с подписью (фразы v4_card_save / v4_card_remove; 19.10 владелец просил значки без подписей — теперь одобрил макет с подписями).
   Названия способов — payments_list.tpl (.v4pay-name) ===== */
html.v4co-page body #onestepcheckout #step_four .ty-payments-list { display: block !important; margin: 0 !important; padding: 0 !important; border: 1px solid #D6E2DA !important; border-radius: 16px !important; overflow: hidden; background: #fff !important; }
html.v4co-page body #onestepcheckout #step_four .ty-payments-list__item { margin: 0 !important; padding: 0 !important; border: 0 !important; border-top: 1px solid #E6EAE7 !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important; background: #fff !important; }
html.v4co-page body #onestepcheckout #step_four .ty-payments-list__item:first-child { border-top: 0 !important; }
html.v4co-page body #onestepcheckout #step_four .ty-payments-list__item-group { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
html.v4co-page body #onestepcheckout #step_four .ty-payments-list__item-title { display: flex !important; align-items: center !important; gap: 12px !important; box-sizing: border-box; width: 100% !important; min-height: 58px !important; margin: 0 !important; padding: 14px 18px !important; cursor: pointer; }
html.v4co-page body #onestepcheckout #step_four .ty-payments-list__item.checked .ty-payments-list__item-title { box-shadow: inset 0 0 0 1.5px #0F5C45; border-radius: 16px 16px 0 0; }
html.v4co-page body #onestepcheckout #step_four .ty-payments-list__item:not(:first-child).checked .ty-payments-list__item-title { border-radius: 0; }
html.v4co-page body #onestepcheckout #step_four .ty-payments-list__item-title input[type=radio] { -webkit-appearance: none; appearance: none; position: static !important; flex: 0 0 22px; width: 22px !important; height: 22px !important; margin: 0 !important; border: 1.5px solid #B9C2BD; border-radius: 50%; background: #fff; }
html.v4co-page body #onestepcheckout #step_four .ty-payments-list__item-title input[type=radio]:checked { border: 7px solid #0F5C45; }
html.v4co-page body #onestepcheckout #step_four .v4pay-name { flex: 1; min-width: 0; font: 600 16px Inter, system-ui, sans-serif; color: #1E2421; }
html.v4co-page body #onestepcheckout #step_four .ty-payments-list__item-title img.ty-pict { order: 3; width: auto !important; height: 24px !important; max-width: 90px !important; margin: 0 0 0 auto !important; }
html.v4co-page body #onestepcheckout #step_four .ty-payments-list__item-title .v4co-cards { order: 3; flex: 0 0 auto; flex-wrap: nowrap !important; gap: 5px !important; margin: 0 0 0 auto !important; zoom: .62; }
html.v4co-page body #onestepcheckout #step_four .ty-payments-list__item-data { margin: 0 !important; padding: 16px 18px 18px !important; border: 0 !important; background: #F4F6F5 !important; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 12px !important; margin: 0 !important; padding: 0 !important; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card__control-group { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card__control-group:first-child { grid-column: 1 / -1; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card__control-group > label { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card input { box-sizing: border-box !important; width: 100% !important; height: 50px !important; padding: 0 14px !important; border: 1px solid #D6DCD9 !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; font: 400 16px Inter, system-ui, sans-serif !important; color: #1E2421 !important; text-align: left !important; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card input::placeholder { color: #7A827E; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card input:focus { border-color: #0F5C45 !important; outline: none !important; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card input.ty-credit-card__input { padding-right: 44px !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A827E' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") no-repeat right 14px center / 20px !important; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card__buttons { grid-column: 1 / -1; display: flex !important; flex-wrap: wrap; gap: 10px !important; margin: 0 !important; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card__buttons a.ty-card-save, html.v4co-page body #onestepcheckout #step_four .ty-credit-card__buttons a.ty-card-remove { display: inline-flex !important; align-items: center; gap: 7px; width: auto !important; min-width: 0 !important; height: 38px !important; padding: 0 16px 0 13px !important; border: 1px solid #D6DCD9 !important; border-radius: 999px !important; background: #fff !important; color: #0F5C45 !important; font: 600 14px/1 Inter, system-ui, sans-serif !important; white-space: nowrap; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card__buttons a.ty-card-save { background: #E8F3EE !important; border-color: #CFE5DA !important; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card__buttons a.ty-card-remove { color: #5A635E !important; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card__buttons a.ty-card-remove:hover { color: #B3261E !important; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card__buttons a.ty-card-save::before, html.v4co-page body #onestepcheckout #step_four .ty-credit-card__buttons a.ty-card-remove::before { display: block !important; flex: 0 0 17px !important; width: 17px !important; height: 17px !important; position: static !important; margin: 0 !important; transform: none !important; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card__buttons a [class^="ty-icon-"] { display: none !important; }
@media (max-width: 767px) {
  html.v4co-page body #onestepcheckout #step_four .ty-payments-list__item-title .v4co-cards > i:nth-child(n+4) { display: none !important; }
  html.v4co-page body #onestepcheckout #step_four .ty-payments-list__item-title .v4co-cards::after { content: "+1"; display: grid; place-items: center; min-width: 40px; border: 1.5px solid #E3E7E5; border-radius: 8px; background: #fff; font: 600 20px Inter, system-ui, sans-serif; color: #0F5C45; }
  html.v4co-page body #onestepcheckout #step_four .ty-payments-list__item-title { padding: 14px 16px !important; }
  html.v4co-page body #onestepcheckout #step_four .ty-payments-list__item-data { padding: 14px 16px 16px !important; }
}
/* 16.10.2026, замечание владельца («блоки оплаты коряво на мобильных»): правило темы до 767px (.et-checkout … .ty-radio-label — рамка 1px #333,
   .ty-radio-input — display:none) рисовало каждую строку в чёрной рамке и прятало кружок. В блоке оплаты — снято.
   У Apple Pay / Google Pay (кнопка оплаты своя, ty-direct-click) под строкой была пустая серая полоса — поле без фона и почти без отступа */
html.v4co-page body #onestepcheckout #step_four .ty-payments-list__item .ty-radio-label { border: 0 !important; background: transparent !important; }
html.v4co-page body #onestepcheckout #step_four .ty-payments-list__item .ty-radio-input { display: block !important; }
html.v4co-page body #onestepcheckout #step_four .ty-payments-list__item:has(.ty-direct-click) .ty-payments-list__item-data { background: #fff !important; padding: 0 16px 12px !important; }
/* 16.10.2026, слово владельца: «Your details» у вошедшего — email клиента и кнопка «Sign out» (v4-checkout.js) */
html.v4co-page #step_one.v4co-signed { position: relative; }
html.v4co-page #step_one .v4co-who { display: flex; align-items: center; gap: 8px; margin: -8px 0 16px 42px !important; font: 500 15px/1.3 Inter, system-ui, sans-serif; color: #1E2421; overflow-wrap: anywhere; }
html.v4co-page #step_one .v4co-who b { font-weight: 600; }
html.v4co-page #step_one .v4co-who svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: #0F5C45; stroke-width: 1.8; stroke-linejoin: round; }
html.v4co-page #step_one .v4co-out { position: absolute; top: 22px; right: 22px; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px 0 13px; border: 1.5px solid #D6DCD9; border-radius: 999px; background: #fff; color: #5A635E !important; font: 600 14px/1 Inter, system-ui, sans-serif !important; text-decoration: none !important; white-space: nowrap; transition: color .2s, border-color .2s; }
html.v4co-page #step_one .v4co-out:hover { color: #B3261E !important; border-color: #E8B4B0; }
html.v4co-page #step_one .v4co-out svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 767px) {
  html.v4co-page #step_one .v4co-who { margin-left: 0 !important; }
  html.v4co-page #step_one .v4co-out { top: 16px; right: 16px; height: 34px; padding: 0 12px 0 10px; font-size: 13px !important; }
}
/* 16.10.2026: то же правило темы до 767px (.et-checkout .ty-shipping-options__method .ty-radio-label — рамка 1px #333, .ty-radio-input — display:none)
   действует и на способы доставки: внутри светлой карточки была вторая, тёмная рамка, кружок выбора скрыт — снято, как в блоке оплаты */
@media (max-width: 767px) {
  html.v4co-page body #onestepcheckout .ty-shipping-options__method .ty-radio-label { border: 0 !important; background: transparent !important; padding: 0 !important; }
  html.v4co-page body #onestepcheckout .ty-shipping-options__method .ty-radio-input { display: inline-block !important; accent-color: #0F5C45; }
}
/* 16.10.2026, слово владельца («цена не смотрится — через дефис после названия, чтобы не съезжало и не вылезало»): способ доставки одной строкой
   «FEDEX 2-4 Days (except PO Box) — $6.77»; цена с тире не разрывается, длинное название переносится внутри карточки с отступом под текст (кружок слева) */
html.v4co-page body #onestepcheckout .ty-shipping-options__method label { display: block !important; position: relative; padding: 0 0 0 28px !important; margin: 0 !important; overflow-wrap: anywhere; }
html.v4co-page body #onestepcheckout .ty-shipping-options__method label > input.ty-radio-input { position: absolute; left: 0; top: .15em; margin: 0 !important; }
html.v4co-page body #onestepcheckout .ty-shipping-options__method label > span { display: inline !important; margin: 0 !important; padding: 0 !important; font-size: inherit !important; font-weight: 700; color: #0F5C45 !important; white-space: nowrap; }
html.v4co-page body #onestepcheckout .ty-shipping-options__method label > span::before { content: "— "; font-weight: 400; color: #6E746F; }
html.v4co-page body #onestepcheckout .ty-shipping-options__method input.ty-radio-input { accent-color: #0F5C45; }
/* в шаблоне между названием и ценой нет пробела — цена отдельным неразрывным блоком с отступом: при нехватке места целиком переходит на следующую строку */
html.v4co-page body #onestepcheckout .ty-shipping-options__method label > span { display: inline-block !important; margin-left: .35em !important; }
/* 16.10.2026, снимок владельца (узкий экран): кружок налезал на название — правило до 767px с «padding:0» (селектор с .ty-radio-label) было сильнее.
   Те же правила с более сильным селектором — действуют на любой ширине */
html.v4co-page body #onestepcheckout .ty-shipping-options__method label.ty-radio-label { display: block !important; position: relative !important; padding: 0 0 0 28px !important; margin: 0 !important; }
html.v4co-page body #onestepcheckout .ty-shipping-options__method label.ty-radio-label > input.ty-radio-input { display: block !important; position: absolute !important; left: 0 !important; top: .2em !important; margin: 0 !important; }
html.v4co-page body #onestepcheckout .ty-shipping-options__method label.ty-radio-label > span { display: inline-block !important; margin: 0 0 0 .35em !important; padding: 0 !important; white-space: nowrap; }
/* 16.10.2026, слово владельца («некоторые переходят на вторую строку, некоторые нет — сделаем по умолчанию на второй строке»): цена доставки всегда
   второй строкой под названием «— $6.77», на любой ширине одинаково */
html.v4co-page body #onestepcheckout .ty-shipping-options__method label.ty-radio-label > span { display: block !important; margin: 2px 0 0 !important; }
/* 16.10.2026, повторный аудит п.1: адрес, который сервер не принял, — текст остаётся, поле подсвечено, под ним подсказка вместо «The Address field is mandatory» */
html.v4co-page .v4co-addrBad input { border-color: #E0A33A !important; background: #FFF9EE !important; }
html.v4co-page .v4co-addrBad .help-inline { display: none !important; }
html.v4co-page .v4co-addrHint { margin: 6px 0 0 !important; font: 500 13.5px/1.4 Inter, system-ui, sans-serif; color: #8A5300; }
/* 16.10.2026, повторный аудит: страница «заказ оформлен» — галочка рисуется сразу (до анимации выглядела «незагруженной иконкой»), на телефоне меньше;
   в подвале нет предложения «Get 20% off your first order» (только что оформили заказ) — соцсети остаются */
.v4done-check { animation-duration: .35s !important; }
.v4done-check path { animation-delay: .1s !important; animation-duration: .4s !important; }
@media (max-width: 767px) { .v4done-check { width: 44px !important; height: 44px !important; } }
html.v4done-page .v4h-fNews > h4, html.v4done-page .v4h-fNews > p:not(.v4h-fSocTitle), html.v4done-page .v4h-fNews > .v4h-fForm { display: none !important; }

/* 17.10.2026, слово владельца («убери фразу „A few simple steps…“ полностью», «на мобильном и „Your next tea moment“ скрыть,
   чтобы сократить шапку», «сократить высоту блока Sign In… уменьшить кнопку, проверь на всех языках»): подзаголовок убран
   (v4-checkout.js), его отступ — у заголовка; на телефоне без надзаголовка; плашка входа в одну строку — текст слева,
   кнопка справа (без стрелки и значка чашки), тексты короче (миграция 20261020q): 76px на всех языках вместо 145 */
.v4co-hero h1 { margin: 0 0 18px !important; }
@media (max-width: 560px) {
  .v4co-hero { padding-top: 14px; }
  .v4co-k { display: none !important; }
  .v4co-steps { margin-bottom: 18px !important; }
  .v4co-page .v4co-login { flex-wrap: nowrap !important; gap: 10px !important; padding: 12px 12px 12px 14px !important; border-radius: 16px !important; }
  .v4co-page .v4co-login .v4co-loginTxt { flex: 1 1 auto; min-width: 0; gap: 10px; }
  .v4co-page .v4co-loginTxt i.v4co-cupIco { display: none !important; }
  .v4co-page .v4co-loginTxt b { font-size: 14.5px; line-height: 1.25; }
  .v4co-page .v4co-loginTxt span { font-size: 12px; line-height: 1.35; gap: 1px; }
  .v4co-page .v4co-login .checkout__block { flex: 0 0 auto; }
  .v4co-page .v4co-login a.cm-dialog-opener.ty-login-checkout-btn { height: 34px !important; padding: 0 13px !important; font-size: 13px !important; white-space: nowrap; }
  .v4co-page .v4co-login a.cm-dialog-opener.ty-login-checkout-btn::after { content: none !important; }
}

/* 17.10.2026, слово владельца («фраза слишком близка по высоте к блоку, добавь расстояния», «баннер Welcome back совсем поехал»,
   снимок узкого окна компьютера ~555px): в плашке входа сервер на компьютере добавляет кнопку PayPal (.ty-other-checkouts в
   .checkout__block; на телефоне её нет — onestepcheckout.php снимает PayPal не для компьютера) — в одной flex-строке она забирала
   всю ширину, текст сжимался до 0. Теперь сетка: текст | «Sign in» в первой строке, быстрая оплата (если есть) — второй строкой
   во всю ширину; пустой контейнер заголовка темы скрыт. Над заголовком «Let’s make it yours.» на телефоне — 28px */
@media (max-width: 560px) {
  .v4co-hero { padding-top: 28px !important; }
  html.v4co-page .v4co-login { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 0; }
  html.v4co-page .v4co-login > .ty-step__container-active { display: none !important; }
  html.v4co-page .v4co-login > .v4co-loginTxt { grid-column: 1; grid-row: 1; }
  html.v4co-page .v4co-login > .checkout__block { display: contents !important; }
  html.v4co-page .v4co-login .checkout__block > #step_one_login { grid-column: 2; grid-row: 1; }
  html.v4co-page .v4co-login .ty-other-checkouts { grid-column: 1 / -1; grid-row: 2; float: none !important; max-width: 100% !important; min-width: 0; padding: 0 !important; margin: 0 !important; }
  html.v4co-page .v4co-login .ty-other-checkouts:has(iframe, a, button, img) { margin-top: 10px !important; }
}


/* 17.10.2026, снимки владельца (большой экран, Safari на Mac): плашка «Have an account?» — текст сжимался в узкую колонку, кнопка «Sign in»
   уезжала. Причина — кнопка PayPal (.ty-other-checkouts в .checkout__block): не видна, но держит ширину (~750px) в одной flex-строке.
   Та же сетка, что на телефоне (блок ниже для ≤560px): текст | «Sign in», PayPal — второй строкой во всю ширину. Проверено на копии
   плашки со стилями сайта: 340–1110px, PayPal невидимый 750px / пустой / без него — текст на всю ширину, кнопка справа */
@media (min-width: 561px) {
  html.v4co-page .v4co-login { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; row-gap: 0; }
  html.v4co-page .v4co-login > .ty-step__container-active { display: none !important; }
  html.v4co-page .v4co-login > .v4co-loginTxt { grid-column: 1; grid-row: 1; min-width: 0; }
  html.v4co-page .v4co-login > .checkout__block { display: contents !important; }
  html.v4co-page .v4co-login .checkout__block > .ty-checkout-login-block { display: none !important; }
  html.v4co-page .v4co-login .checkout__block > #step_one_login { grid-column: 2; grid-row: 1; }
  html.v4co-page .v4co-login .ty-other-checkouts { grid-column: 1 / -1; grid-row: 2; float: none !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; overflow: hidden; padding: 0 !important; margin: 0 !important; }
  html.v4co-page .v4co-login .ty-other-checkouts:has(iframe, a, button, img) { margin-top: 12px !important; }
}

/* 17.10.2026, слово владельца («вариант A»): Express checkout — блок с кнопкой Apple Pay / Google Pay над «Your details» (v4-express.js).
   Блок появляется, только если на устройстве есть Apple Pay или Google Pay */
.v4xp { background: #fff; border: 1px solid #E3E7E5; border-radius: 22px; padding: 18px 20px 14px; margin: 0 0 4px; box-shadow: 0 10px 30px rgba(15,40,32,.06); }
.v4xp-k { margin: 0 0 12px; text-align: center; font: 700 13px/1.2 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #5c6b66; }
.v4xp-btn { min-height: 48px; }
.v4xp-hint { margin: 10px 0 0; text-align: center; font: 400 12.5px/1.45 Inter, system-ui, sans-serif; color: #6E746F; }
.v4xp-or { display: flex; align-items: center; gap: 12px; margin: 14px 0 16px; color: #7a8682; font: 500 13px Inter, system-ui, sans-serif; }
.v4xp-or::before, .v4xp-or::after { content: ""; flex: 1 1 0; height: 1px; background: #E3E7E5; }
@media (max-width: 560px) { .v4xp { padding: 14px 14px 12px; border-radius: 18px; } .v4xp-hint { font-size: 12px; } }

/* 17.10.2026, снимок владельца (Chrome на iPhone): за кнопкой Apple Pay серая рамка другого размера — общие стили темы на контейнер Stripe; рамки и отступы сняты */
.v4xp-btn, .v4xp-btn > div, .v4xp-btn .StripeElement { border: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; height: auto !important; }
.v4xp-btn iframe { border: 0 !important; display: block; width: 100% !important; }

/* 17.10.2026, переход на Stripe Express Checkout Element: блок вставляется скрытым и показывается, только когда элемент нашёл Apple Pay или Google Pay */
/* за пределами экрана Stripe не прорисовывал кнопки (не было события ready) — блок на своём месте, прозрачный, до готовности */
.v4xp.v4xp-wait { visibility: hidden !important; }
.v4xp-or.v4xp-wait { display: none !important; }

/* 17.10.2026, слово владельца («блок немного медленно прогружается»): пока Stripe рисует кнопки — место под них с мягкой подсветкой загрузки */
.v4xp-loading .v4xp-btn { position: relative; min-height: 48px; }
.v4xp-loading .v4xp-btn::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 10px;
  background: linear-gradient(90deg, #EEF1EF 25%, #F7F8F7 37%, #EEF1EF 63%); background-size: 400% 100%; animation: v4xpShim 1.2s ease infinite; }
@keyframes v4xpShim { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .v4xp-loading .v4xp-btn::before { animation: none; } }

/* 17.10.2026, снимок владельца («сделай, чтобы было по центру»): обёртка кнопок Stripe — по центру и во всю ширину места */
.v4xp-btn > div { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }

/* 17.10.2026, слово владельца («две кнопки в одну строку, они слишком широкие … как на Shopify»): место под кнопки не шире 380px, по центру */
.v4xp-btn { max-width: 380px; margin-left: auto !important; margin-right: auto !important; }

/* 17.10.2026, слово владельца («на мобильном убери фразы Let's make it yours и следующий блок details delivery payment»):
   телефон — шапка оформления без заголовка, надзаголовка и шагов; остаётся только небольшой отступ сверху */
@media (max-width: 767px) {
  html.v4co-page .v4co-hero { padding: 12px 0 0 !important; }
  html.v4co-page .v4co-hero h1, html.v4co-page .v4co-hero .v4co-k, html.v4co-page .v4co-hero .v4co-steps { display: none !important; }
}

/* 17.10.2026, слово владельца («нужно две кнопки в ряд и уменьшить их»): два отдельных элемента Stripe по одной кнопке —
   ряд из ячеек по 168px по центру, промежуток 10px; одна кнопка (Safari) — одна ячейка по центру. Высота кнопки 44px */
.v4xp-btn.v4xp-row { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(0, 168px)); justify-content: center; gap: 10px; max-width: none; min-height: 44px; }
.v4xp-btn.v4xp-row > .v4xp-one { width: auto !important; max-width: none !important; margin: 0 !important; min-width: 0; }
.v4xp-loading .v4xp-btn.v4xp-row { min-height: 44px; }

/* 17.10.2026, слово владельца («фразу блока Details / Delivery / Payment со всех устройств не нужно выводить»): строка шагов скрыта везде */
html.v4co-page .v4co-hero .v4co-steps { display: none !important; }

/* 18.10.2026, слово владельца (рекомендация «Checkout: блок Your details», все устройства): у гостя — «Contact» и ссылка «Sign in» справа;
   плашка «Have an account?» и карточки «Checkout as Guest / Register an Account» скрыты (гостевой заказ выбран всегда) */
.v4co-page #step_one.v4co-contact .v4co-login, .v4co-page #step_one.v4co-contact .register-methods { display: none !important; }
.v4co-page #step_one.v4co-contact > h2.v4co-h { margin-bottom: 2px !important; }
.v4co-page #step_one.v4co-contact > .v4co-note { display: block !important; margin: 0 0 14px; }
.v4co-h .v4co-signin { margin-left: auto; font: 600 14px/1 var(--v4-sans, Inter), system-ui, sans-serif; color: #008556 !important; text-decoration: underline !important; text-underline-offset: 3px; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.v4co-h .v4co-signin:hover { color: #0F5C45 !important; }
/* страница «заказ оформлен»: блок «Save your details for next time» */
.v4done-acct { box-sizing: border-box; max-width: 620px; margin: 26px 0 !important; padding: 22px 24px 20px; border: 1px solid #E3E7E5; border-radius: 20px; background: linear-gradient(180deg, #F3F8F5, #fff 70%); float: none !important; width: auto !important; }
.v4done-acct .v4done-acctT { margin: 0 0 6px !important; padding: 0 !important; border: 0 !important; font: 600 24px/1.2 var(--v4-cond, Inter), sans-serif !important; color: #0F5C45 !important; text-transform: none !important; }
.v4done-acctTxt { margin: 0 0 12px; font: 400 15px/1.5 Inter, system-ui, sans-serif; color: #3E4A45; }
.v4done-acctList { list-style: none !important; margin: 0 0 18px !important; padding: 0 !important; }
.v4done-acctList li { position: relative; margin: 8px 0; padding-left: 28px; font: 500 14.5px/1.4 Inter, system-ui, sans-serif; color: #1E2421; }
.v4done-acctList li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%; background: #0F5C45; color: #fff; font: 700 11px/19px Inter, sans-serif; text-align: center; }
.v4done-acctEmail { margin: 0 0 10px; font: 400 14px Inter, system-ui, sans-serif; color: #5c6b66; }
.v4done-acctEmail b { color: #1E2421; }
.v4done-acctForm .ty-control-group { margin: 0 0 14px; }
.v4done-acctForm .ty-login__input { box-sizing: border-box; width: 100% !important; max-width: 380px; height: 48px; padding: 0 14px !important; border: 1.5px solid #CFD8D4 !important; border-radius: 12px !important; font-size: 16px; }
.v4done-acctForm .ty-checkout-complete__buttons { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.v4done-acctForm .ty-btn__primary { border-radius: 999px !important; padding: 13px 28px !important; font-weight: 700 !important; }
@media (max-width: 560px) { .v4done-acct { padding: 18px 16px; border-radius: 18px; } .v4done-acctForm .ty-login__input, .v4done-acctForm .ty-btn__primary { width: 100% !important; max-width: none; } }

/* 18.10.2026, снимок владельца («сделай это кнопкой»): «Sign in» у заголовка Contact — кнопка-таблетка с рамкой, при наведении заливается */
.v4co-h .v4co-signin { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 18px; border: 1.5px solid #0F5C45; border-radius: 999px;
  background: #fff; color: #0F5C45 !important; text-decoration: none !important; font: 700 14px/1 var(--v4-sans, Inter), system-ui, sans-serif; transition: background .15s, color .15s; }
.v4co-h .v4co-signin:hover, .v4co-h .v4co-signin:focus-visible { background: #0F5C45; color: #fff !important; text-decoration: none !important; }

/* 18.10.2026: заголовок блока «Save your details for next time» тема центрировала — по левому краю, как текст под ним */
.v4done-acct .v4done-acctT { text-align: left !important; }

/* 18.10.2026: карточка «You already have an account» на странице «заказ оформлен» — как блок создания аккаунта, кнопка-таблетка */
.v4done-have .v4done-signin { display: inline-flex !important; align-items: center; border-radius: 999px !important; padding: 13px 28px !important; font-weight: 700 !important; }
@media (max-width: 560px) { .v4done-have .v4done-signin { width: 100%; justify-content: center; box-sizing: border-box; } }

/* 18.10.2026: правило темы «.tygh-content .ty-btn__primary { border-radius: 6px !important }» перебивало таблетку «Sign in» — селектор сильнее */
.tygh-content .v4done-have a.v4done-signin.ty-btn__primary { border-radius: 999px !important; }

/* 18.10.2026, слово владельца: галочка SMS-подписки под полем телефона и пояснение «What we’ll send» (раскрывается; при отметке — само) */
.v4sms { margin: 4px 0 16px; text-align: left; }
.v4sms .v4sms-lbl { display: flex !important; align-items: flex-start; gap: 10px; margin: 0 !important; padding: 0 !important; font: 500 14px/1.4 Inter, system-ui, sans-serif !important; color: #1E2421 !important; text-align: left !important; cursor: pointer; float: none !important; width: auto !important; }
.v4sms .v4sms-lbl::after { content: none !important; }
.v4sms .v4sms-cb { flex: 0 0 18px; width: 18px !important; height: 18px !important; margin: 1px 0 0 !important; accent-color: #0F5C45; }
.v4sms .v4sms-more { display: inline-block; margin: 4px 0 0 28px; padding: 0; border: 0; background: none; color: #008556; font: 600 13px Inter, system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.v4sms .v4sms-info { margin: 8px 0 0 28px !important; padding: 10px 12px; border-radius: 10px; background: #F3F8F5; color: #4A5550; font: 400 12.5px/1.5 Inter, system-ui, sans-serif; }
.v4sms .v4sms-info[hidden] { display: none !important; }

/* 18.10.2026, слово владельца (снимок DavidsTea/Shopify): при отметке — поле «Mobile phone number» со значком телефона и текст согласия мелко */
.v4sms .v4sms-more { display: block; margin: 10px 0 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: none; cursor: auto; }
.v4sms .v4sms-more[hidden] { display: none !important; }
.v4sms .v4sms-ph { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 7px 14px !important; border: 1.5px solid #CFD8D4; border-radius: 12px; background: #fff; cursor: text; float: none !important; width: auto !important; text-align: left !important; }
.v4sms .v4sms-ph::after { content: none !important; }
.v4sms .v4sms-ph:focus-within { border-color: #0F5C45; }
.v4sms .v4sms-ph svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: #5c6b66; stroke-width: 1.8; stroke-linecap: round; }
.v4sms .v4sms-ph > span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.v4sms .v4sms-ph small { font: 400 12px/1.3 Inter, system-ui, sans-serif; color: #6E746F; }
.v4sms .v4sms-ph .v4sms-tel { width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; outline: none; font: 500 15px/1.4 Inter, system-ui, sans-serif; color: #1E2421; }
.v4sms .v4sms-info { margin: 8px 0 0 !important; padding: 0 !important; background: none !important; border-radius: 0; font: 400 12px/1.5 Inter, system-ui, sans-serif; color: #6E746F; }
.v4sms .v4sms-links a { color: #4A5550 !important; text-decoration: underline !important; text-underline-offset: 2px; }

/* 18.10.2026, снимок владельца («подписка по телефону всегда под полем телефона»): блок SMS внутри поля телефона — отступ от поля */
.ty-control-group > .v4sms { margin: 10px 0 2px; }

/* 18.10.2026, снимок владельца («некрасиво: иконка»; «выпадающий список area code»): SMS-номер — код страны с флагом и номер в одну строку,
   поля в стиле остальных полей оформления; прежнее поле со значком телефона не используется */
.v4sms .v4sms-row { display: flex; gap: 8px; }
.v4sms .v4sms-cc, .v4sms .v4sms-tel { box-sizing: border-box; height: 48px !important; margin: 0 !important; border: 1px solid #E3E7E5 !important; border-radius: 12px !important;
  background-color: #F6F7F6 !important; box-shadow: none !important; font: 500 15px Inter, system-ui, sans-serif !important; color: #1E2421 !important; }
.v4sms .v4sms-cc { flex: 0 0 auto; width: auto !important; min-width: 104px; padding: 0 30px 0 12px !important; cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%235c6b66' stroke-width='1.6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 12px center !important; }
.v4sms .v4sms-tel { flex: 1 1 auto; min-width: 0; width: auto !important; padding: 0 14px !important; }
.v4sms .v4sms-cc:focus, .v4sms .v4sms-tel:focus { border-color: #0F5C45 !important; outline: none; background-color: #fff !important; }
/* 18.10.2026, снимок владельца («инфозначок на поле телефона»): «?» справа в поле телефона, подсказка по наведению или нажатию */
.v4ph-wrap { position: relative; display: block; }
.v4ph-wrap > input { padding-right: 46px !important; }
.v4ph-wrap .v4ph-q { position: absolute; right: 12px; top: 24px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0; padding: 0; border: 0; background: none; color: #6E746F; cursor: help; }
.v4ph-wrap .v4ph-q:hover, .v4ph-wrap.v4ph-on .v4ph-q { color: #0F5C45; }
.v4ph-wrap .v4ph-q svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.v4ph-wrap .v4ph-tip { display: none; position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 40; max-width: 260px; padding: 8px 11px; border-radius: 8px; background: #1E2421; color: #fff;
  font: 500 12.5px/1.4 Inter, system-ui, sans-serif; text-align: left; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.v4ph-wrap .v4ph-q:hover + .v4ph-tip, .v4ph-wrap.v4ph-on .v4ph-tip { display: block; }

/* 18.10.2026, снимок владельца («каряво выглядит»: галочка SMS наезжала на «Zip/postal code»): тема делает подписи в полях адреса
   плавающими (.ty-profile-field__item label — position: absolute), и строка «Text me…» не занимала места — возвращена в поток */
.v4co-page #onestepcheckout .v4sms label.v4sms-lbl { position: static !important; transform: none !important; top: auto !important; left: auto !important; right: auto !important;
  height: auto !important; line-height: 1.4 !important; pointer-events: auto !important; opacity: 1 !important; background: none !important; }
.v4co-page #onestepcheckout .v4sms .v4sms-cb { position: static !important; opacity: 1 !important; }

/* 18.10.2026 (владелец: «после выбора country code поле неактивно, чтобы ввести номер»): в узкой колонке список кодов занимал почти всё место,
   поле номера сжималось в квадратик — теперь у номера минимальная ширина, при нехватке места он переносится под код.
   Отступ под «?» в поле телефона — правилом сильнее темы (номер не уходит под значок) */
.v4co-page #onestepcheckout .v4sms .v4sms-row { flex-wrap: wrap; }
.v4co-page #onestepcheckout .v4sms .v4sms-cc { flex: 0 0 auto; min-width: 92px; max-width: 100%; }
.v4co-page #onestepcheckout .v4sms .v4sms-tel { flex: 1 1 150px; min-width: 150px !important; }
.v4co-page #onestepcheckout .v4ph-wrap > input { padding-right: 46px !important; }

/* 18.10.2026: правила темы для полей оформления сильнее — список кодов растягивался во всю колонку, отступ под «?» сбрасывался до 14px */
html.v4co-page body #onestepcheckout .v4sms select.v4sms-cc { width: auto !important; min-width: 96px; max-width: 132px; flex: 0 0 auto; padding: 0 30px 0 12px !important; }
html.v4co-page body #onestepcheckout .v4sms input.v4sms-tel { width: auto !important; flex: 1 1 150px; min-width: 150px !important; padding: 0 14px !important; }
html.v4co-page body #onestepcheckout .v4ph-wrap > input { padding-right: 46px !important; }
/* 18.10.2026: правило темы «.v4co-page #onestepcheckout .ty-control-group input.ty-input-text { padding: 0 14px !important }» сильнее — отступ под «?» селектором выше */
html.v4co-page body #onestepcheckout .ty-control-group .v4ph-wrap > input[type] { padding-right: 46px !important; }

/* 18.10.2026, снимки владельца: адрес — сетка из 6 долей. Компьютер: имя | фамилия, компания | телефон, страна, город | провинция | индекс,
   адрес | адрес 2. Телефон (до 640px): имя | фамилия и город | провинция | индекс — рядом, остальное по одному. До 480px: город целой строкой,
   провинция | индекс. До 360px: всё по одному в строку */
html.v4co-page body #onestepcheckout .v4f-grid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 0 14px; }
html.v4co-page body #onestepcheckout .v4f-grid > .ty-profile-field__item { grid-column: span 3; }
html.v4co-page body #onestepcheckout .v4f-grid > .v4f-full { grid-column: 1 / -1; }
html.v4co-page body #onestepcheckout .v4f-grid > .v4f-half { grid-column: span 3; }
html.v4co-page body #onestepcheckout .v4f-grid > .v4f-third { grid-column: span 2; }
html.v4co-page body #onestepcheckout .v4f-grid > .v4f-city { grid-column: 1 / span 2; }
@media (max-width: 640px) {
  html.v4co-page body #onestepcheckout .v4f-grid > .ty-profile-field__item { grid-column: 1 / -1; }
  html.v4co-page body #onestepcheckout .v4f-grid > .v4f-half { grid-column: span 3; }
  html.v4co-page body #onestepcheckout .v4f-grid > .v4f-third { grid-column: span 2; }
  html.v4co-page body #onestepcheckout .v4f-grid > .v4f-city { grid-column: 1 / span 2; }
}
@media (max-width: 480px) {
  html.v4co-page body #onestepcheckout .v4f-grid > .v4f-city { grid-column: 1 / -1; }
  html.v4co-page body #onestepcheckout .v4f-grid > .v4f-third:not(.v4f-city) { grid-column: span 3; }
}
@media (max-width: 360px) {
  html.v4co-page body #onestepcheckout .v4f-grid > .ty-profile-field__item, html.v4co-page body #onestepcheckout .v4f-grid > .v4f-half,
  html.v4co-page body #onestepcheckout .v4f-grid > .v4f-third, html.v4co-page body #onestepcheckout .v4f-grid > .v4f-city { grid-column: 1 / -1; }
}
/* 18.10.2026: подпись SMS-галочки брала узкий шрифт и 12px из правил подписей полей темы — шрифт и размер формы */
html.v4co-page body #onestepcheckout .v4sms label.v4sms-lbl, html.v4co-page body #onestepcheckout .v4sms label.v4sms-lbl span { font: 500 14px/1.4 Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: #1E2421 !important; }
/* 18.10.2026: до 360px провинция и индекс тоже по одному (правило 480px с :not() было сильнее) */
@media (max-width: 360px) { html.v4co-page body #onestepcheckout .v4f-grid > .v4f-third:not(.v4f-city) { grid-column: 1 / -1; } }
/* 18.10.2026, слово владельца («совместить в одну строку почтовый код, провинцию и город»): до 480px тройка тоже в одну строку, как у Shopify; по одному — только до 360px */
@media (max-width: 480px) and (min-width: 361px) { html.v4co-page body #onestepcheckout .v4f-grid > .v4f-city { grid-column: 1 / span 2; } html.v4co-page body #onestepcheckout .v4f-grid > .v4f-third:not(.v4f-city) { grid-column: span 2; } }
/* 18.10.2026: в тройке город | провинция | индекс длинная подпись («Zip/postal code») переносится — поля выравниваются по низу, чтобы стояли ровно */
html.v4co-page body #onestepcheckout .v4f-grid > .v4f-third { align-self: end; }

/* 18.10.2026 (владелец: «изменений не вижу»): в настоящей разметке поле — в своей обёртке div.ty-row внутри общего блока; сетка из 6 долей
   раскладывает обёртки (.v4f-u). Компьютер: имя | фамилия, компания | телефон, страна, город | провинция | индекс, адрес | адрес 2.
   Телефон (до 640px): имя | фамилия и город | провинция | индекс рядом, остальное по одному. До 360px — всё по одному */
html.v4co-page body #onestepcheckout .v4f-grid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 0 14px !important; }
html.v4co-page body #onestepcheckout .v4f-grid::before, html.v4co-page body #onestepcheckout .v4f-grid::after { display: none !important; }
html.v4co-page body #onestepcheckout .v4f-grid > * { grid-column: 1 / -1; min-width: 0; }
html.v4co-page body #onestepcheckout .v4f-grid > .v4f-u { grid-column: span 3; float: none !important; width: auto !important; }
html.v4co-page body #onestepcheckout .v4f-grid > .v4f-u.ty-row { display: block !important; margin: 0 !important; }
html.v4co-page body #onestepcheckout .v4f-grid > .v4f-u.ty-row > .ty-profile-field__item { float: none !important; width: auto !important; max-width: none !important; }
html.v4co-page body #onestepcheckout .v4f-grid > .v4f-u.v4f-full { grid-column: 1 / -1; }
html.v4co-page body #onestepcheckout .v4f-grid > .v4f-u.v4f-half { grid-column: span 3; }
html.v4co-page body #onestepcheckout .v4f-grid > .v4f-u.v4f-third { grid-column: span 2; align-self: end; }
html.v4co-page body #onestepcheckout .v4f-grid > .v4f-u.v4f-third.v4f-city { grid-column: 1 / span 2; }
@media (max-width: 640px) {
  html.v4co-page body #onestepcheckout .v4f-grid > .v4f-u { grid-column: 1 / -1; }
  html.v4co-page body #onestepcheckout .v4f-grid > .v4f-u.v4f-half { grid-column: span 3; }
  html.v4co-page body #onestepcheckout .v4f-grid > .v4f-u.v4f-third { grid-column: span 2; }
  html.v4co-page body #onestepcheckout .v4f-grid > .v4f-u.v4f-third.v4f-city { grid-column: 1 / span 2; }
}
@media (max-width: 360px) {
  html.v4co-page body #onestepcheckout .v4f-grid > .v4f-u.v4f-half, html.v4co-page body #onestepcheckout .v4f-grid > .v4f-u.v4f-third,
  html.v4co-page body #onestepcheckout .v4f-grid > .v4f-u.v4f-third.v4f-city { grid-column: 1 / -1; }
}
/* 18.10.2026: правило «.v4co-page #onestepcheckout #step_two .ty-row { display: grid; 1fr 1fr }» (два id) делало каждую обёртку поля сеткой пополам — поле занимало половину своей ячейки */
html.v4co-page body #onestepcheckout #step_two .v4f-grid > .v4f-u.ty-row { display: block !important; width: auto !important; margin: 0 !important; }
/* 18.10.2026: списки страны и провинции — во всю ширину ячейки (список кодов SMS-номера не трогаем) */
html.v4co-page body #onestepcheckout #step_two .v4f-grid > .v4f-u select:not(.v4sms-cc), html.v4co-page body #onestepcheckout #step_two .v4f-grid > .v4f-u input.ty-input-text { width: 100% !important; max-width: none !important; box-sizing: border-box; }
/* 18.10.2026: ячейка поля у темы inline-block — сжималась по содержимому (страна, провинция узкие) */
html.v4co-page body #onestepcheckout #step_two .v4f-grid > .v4f-u > .ty-profile-field__item, html.v4co-page body #onestepcheckout #step_two .v4f-grid > .ty-profile-field__item.v4f-u { display: block !important; width: auto !important; }
/* 18.10.2026: код и номер SMS помещаются в одну строку и в половине формы (минимум номера 120px) */
html.v4co-page body #onestepcheckout .v4sms input.v4sms-tel { flex: 1 1 120px; min-width: 120px !important; }
html.v4co-page body #onestepcheckout .v4sms select.v4sms-cc { min-width: 92px; max-width: 120px; }
/* 18.10.2026, слово владельца («сначала почтовый код, потом провинция, только потом город»): тройка в исходном порядке; первая в тройке (.v4f-start) — с начала строки */
html.v4co-page body #onestepcheckout .v4f-grid > .v4f-u.v4f-third.v4f-start { grid-column: 1 / span 2; }
@media (max-width: 640px) { html.v4co-page body #onestepcheckout .v4f-grid > .v4f-u.v4f-third.v4f-start { grid-column: 1 / span 2; } }
@media (max-width: 360px) { html.v4co-page body #onestepcheckout .v4f-grid > .v4f-u.v4f-third.v4f-start { grid-column: 1 / -1; } }/* 18.10.2026 (журнал диагностики: на живой странице поля лежат в div.ty-row ПАРАМИ): обёртки-пары «прозрачные» (display: contents),
   поля — ячейки общей сетки из 6 долей. Компьютер: имя | фамилия, компания | телефон, страна, индекс | провинция | город, адрес, адрес 2.
   Телефон (до 640px): имя | фамилия и индекс | провинция | город рядом, остальное по одному. До 360px — всё по одному */
html.v4co-page body #onestepcheckout #step_two .v4f-grid > .ty-row.v4f-rows { display: contents !important; }
html.v4co-page body #onestepcheckout #step_two .v4f-grid > .v4f-rows > :not(.v4f-u) { grid-column: 1 / -1; }
html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u { grid-column: span 3; display: block !important; float: none !important; width: auto !important; max-width: none !important; min-width: 0; box-sizing: border-box; }
html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u.v4f-full { grid-column: 1 / -1; }
html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u.v4f-half { grid-column: span 3; }
html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u.v4f-third { grid-column: span 2; align-self: end; }
html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u.v4f-third.v4f-start { grid-column: 1 / span 2; }
html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u select:not(.v4sms-cc), html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u input.ty-input-text { width: 100% !important; max-width: none !important; box-sizing: border-box; }
@media (max-width: 640px) {
  html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u { grid-column: 1 / -1; }
  html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u.v4f-half { grid-column: span 3; }
  html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u.v4f-third { grid-column: span 2; }
  html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u.v4f-third.v4f-start { grid-column: 1 / span 2; }
}
@media (max-width: 360px) {
  html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u.v4f-half, html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u.v4f-third,
  html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u.v4f-third.v4f-start { grid-column: 1 / -1; }
}/* 18.10.2026, слово владельца («для компьютеров оставим zip-код, провинцию, город в одну строку; на мобильном сжато — переносить город в следующую строку»):
   до 640px — индекс | провинция, город целой строкой ниже */
@media (max-width: 640px) {
  html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u.v4f-third { grid-column: span 3; }
  html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u.v4f-third.v4f-start { grid-column: 1 / span 3; }
  html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u.v4f-third.v4f-city { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u.v4f-third, html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u.v4f-third.v4f-start { grid-column: 1 / -1; }
}/* 18.10.2026, слово владельца («переделать название подписей и полей, как у нас на старом сайте»): подпись — мелко внутри поля, в левом верхнем углу,
   значение — под ней (поля адреса доставки и оплаты и e-mail). Обязательная звёздочка — как была */
html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u,
html.v4co-page body #onestepcheckout #step_one .ty-control-group:has(> input[name="user_data[email]"]) { position: relative !important; }
html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u label.ty-control-group__title,
html.v4co-page body #onestepcheckout #step_one .ty-control-group:has(> input[name="user_data[email]"]) > label.ty-control-group__title {
  position: absolute !important; top: 8px !important; left: 15px !important; right: 44px !important; z-index: 2; margin: 0 !important; padding: 0 !important;
  font: 500 12px/1.2 Inter, system-ui, sans-serif !important; color: #6E746F !important; text-align: left !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; background: none !important; transform: none !important; }
html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u label.ty-control-group__title *,
html.v4co-page body #onestepcheckout #step_one .ty-control-group:has(> input[name="user_data[email]"]) > label.ty-control-group__title * { font-size: 12px !important; }
html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u input.ty-input-text,
html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u select:not(.v4sms-cc),
html.v4co-page body #onestepcheckout #step_one .ty-control-group > input[name="user_data[email]"] {
  height: 54px !important; padding: 22px 14px 4px !important; line-height: 1.3 !important; font-size: 15px !important; }
html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u select:not(.v4sms-cc) { padding-right: 34px !important; }
html.v4co-page body #onestepcheckout #step_two .ty-control-group .v4ph-wrap > input[type] { padding-right: 46px !important; }
html.v4co-page body #onestepcheckout .v4ph-wrap .v4ph-q { top: 50%; }/* 18.10.2026: запас справа под «?» — только у подписи телефона; у остальных подписи не обрезаются раньше времени (Zip/postal code, State/province) */
html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u label.ty-control-group__title,
html.v4co-page body #onestepcheckout #step_one .ty-control-group:has(> input[name="user_data[email]"]) > label.ty-control-group__title { right: 12px !important; }
html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u:has(.v4ph-wrap) label.ty-control-group__title { right: 44px !important; }/* 18.10.2026: «(optional)» в подписи — тем же шрифтом, что подпись */
html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u label.ty-control-group__title *, html.v4co-page body #onestepcheckout #step_one .ty-control-group > label.ty-control-group__title * { font-family: Inter, system-ui, sans-serif !important; font-weight: 400 !important; }
/* 18.10.2026: подпись телефона обёрнута в span.ty-refresh-field — он занимал строку и опускал поле на несколько пикселей */
html.v4co-page body #onestepcheckout #step_two .v4f-grid .v4f-u > .ty-refresh-field { display: block !important; height: 0 !important; line-height: 0 !important; margin: 0 !important; }
/* 18.10.2026, снимок владельца («убрать свободное место под email и расширить чуть-чуть блоки по ширине»): под e-mail — меньше отступ;
   на телефоне у карточек оформления боковые поля 14px вместо 24px и сами карточки на 8px шире с каждой стороны */
html.v4co-page body #onestepcheckout #step_one .ty-control-group:has(> input[name="user_data[email]"]) { margin-bottom: 4px !important; }
html.v4co-page body #onestepcheckout #step_one.v4co-contact { padding-bottom: 16px !important; }
@media (max-width: 640px) {
  html.v4co-page body .v4co-card { padding: 18px 14px !important; margin-left: -8px !important; margin-right: -8px !important; }
  html.v4co-page body .v4co-card .v4co-card { margin-left: 0 !important; margin-right: 0 !important; }
  html.v4co-page body #onestepcheckout #step_one.v4co-contact { padding-bottom: 12px !important; }
}
/* 18.10.2026, слово владельца: значок «i» рядом с «Save card / Remove», подсказка по наведению или нажатию */
.v4card-info { position: relative; display: inline-flex; vertical-align: middle; margin-left: 8px; }
.v4card-info .v4card-i { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1.5px solid #CFD8D4; border-radius: 50%;
  background: #fff; color: #5c6b66; cursor: help; }
.v4card-info .v4card-i:hover, .v4card-info.v4card-on .v4card-i { border-color: #0F5C45; color: #0F5C45; }
.v4card-info .v4card-i svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.v4card-info .v4card-tip { display: none; position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 50; width: 260px; max-width: 80vw; padding: 9px 12px; border-radius: 10px;
  background: #1E2421; color: #fff; font: 500 12.5px/1.45 Inter, system-ui, sans-serif; text-align: left; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); white-space: normal; }
.v4card-info:hover .v4card-tip, .v4card-info.v4card-on .v4card-tip, .v4card-info:focus-within .v4card-tip { display: block; }

/* 18.10.2026, слово владельца («фразу заменим на Checkout … прикольный символ, анимацию»; «во всех девайсах»): вместо
   «Your next tea moment / Let’s make it yours.» — спокойный заголовок «Checkout» (H1) и чашка, из которой поднимается пар.
   Показывается на всех устройствах (раньше на телефоне заголовок был скрыт); переливание текста выключено — движется только пар. */
html.v4co-page .v4co-hero .v4co-k { display: none !important; }
html.v4co-page .v4co-hero h1 { display: flex !important; align-items: center; gap: 10px; font: 600 34px/1.1 var(--v4-cond), sans-serif !important; color: #0F5C45 !important; margin: 0 0 16px !important; letter-spacing: 0 !important; }
html.v4co-page .v4co-hero h1 .v4co-w { background: none !important; color: #0F5C45 !important; -webkit-text-fill-color: #0F5C45 !important; animation: none !important; }
html.v4co-page .v4co-cup { display: inline-flex; flex: 0 0 auto; width: 36px; height: 36px; margin-top: -4px; }
html.v4co-page .v4co-cup svg { width: 100%; height: 100%; overflow: visible; }
html.v4co-page .v4co-cup .v4co-st { stroke: #B8934A; stroke-width: 2; opacity: 0; animation: v4coSteam 2.6s ease-in-out infinite; }
html.v4co-page .v4co-cup .v4co-st:nth-child(2) { animation-delay: .45s; }
html.v4co-page .v4co-cup .v4co-st:nth-child(3) { animation-delay: .9s; }
@keyframes v4coSteam { 0% { opacity: 0; transform: translateY(4px); } 35% { opacity: .95; } 100% { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { html.v4co-page .v4co-cup .v4co-st { animation: none; opacity: .8; } }
@media (max-width: 767px) {
  html.v4co-page .v4co-hero { padding: 22px 0 0 !important; margin: 0 -16px !important; }  /* по левому краю полей (16px), ниже полосы «Order summary» */
  html.v4co-page .v4co-hero h1 { font-size: 28px !important; margin: 0 0 6px !important; }
  html.v4co-page .v4co-cup { width: 30px; height: 30px; }
}

/* 18.10.2026, рекомендация (слово владельца «есть ещё рекомендации»): телефон — поля шире. Было три слоя отступов (страница 32px,
   рамка карточки, её внутренний отступ 22px): поле e-mail на 390px — 296px (76%). Теперь до 767px разделы без рамок и фона,
   отделены заголовком и тонкой линией сверху, по бокам 16px: поле ~358px (92%). На планшете и компьютере карточки как были. */
@media (max-width: 767px) {
  /* селектор усилен: правило темы «.tygh-content .ty-checkout-block__left .ty-step__container-active» (!important) возвращало рамку и 20/22px */
  html.v4co-page body .v4co-card, html.v4co-page body .tygh-content .v4co-card.v4co-card { border: 0 !important; border-top: 1px solid #E3E7E5 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; padding: 20px 0 6px !important; margin: 0 -16px !important; }
  html.v4co-page body .v4co-card .v4co-card, html.v4co-page body .tygh-content .v4co-card .v4co-card.v4co-card { border: 0 !important; padding: 0 !important; margin: 0 !important; }
}

/* 18.10.2026, слово владельца («делай CheckouTEA … с эффектом перелива и более выделенной tea»): в английском заголовке «TEA» —
   крупнее и жирнее, перелив золото → светлое золото → зелень (5 с по кругу); при «уменьшить движение» — просто золото */
html.v4co-page .v4co-hero h1 .v4co-tea { display: inline-block; font-weight: 800; font-size: 1.14em; letter-spacing: .02em; margin-left: 1px;
  background: linear-gradient(100deg, #B8934A 0%, #E9CF8C 22%, #B8934A 40%, #0F5C45 60%, #008556 75%, #B8934A 100%); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent !important;
  animation: v4coTea 5s ease-in-out infinite; }
@keyframes v4coTea { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@media (prefers-reduced-motion: reduce) { html.v4co-page .v4co-hero h1 .v4co-tea { animation: none; background: none; color: #B8934A !important; -webkit-text-fill-color: #B8934A !important; } }

/* 18.10.2026, слово владельца («три иконки: что идёт покупка, потом доставка, и третье — наслаждение чаем»): рядом с заголовком
   пакет → грузовик → чашка; по кругу 4,5 с значки по очереди подпрыгивают, между ними пробегают золотые точки, у грузовика «ветер»,
   у чашки — пар. Заменяет одну чашку (.v4co-cup). При «уменьшить движение» — без движения. */
html.v4co-page .v4co-hero h1 { flex-wrap: wrap; row-gap: 4px; }
html.v4co-page .v4co-path { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; }
html.v4co-page .v4co-ic { display: inline-flex; width: 34px; height: 34px; font-style: normal; transform-origin: 50% 90%; animation: v4coHop 4.5s ease-in-out infinite; }
html.v4co-page .v4co-ic svg { width: 100%; height: 100%; overflow: visible; }
html.v4co-page .v4co-ic2 { animation-delay: 1.5s; }
html.v4co-page .v4co-ic3 { animation-delay: 3s; }
@keyframes v4coHop { 0%, 22%, 100% { transform: none; } 6% { transform: translateY(-5px) scale(1.08); } 12% { transform: none; } }
html.v4co-page .v4co-dots { display: inline-flex; gap: 3px; font-style: normal; }
html.v4co-page .v4co-dots b { display: block; width: 4px; height: 4px; border-radius: 50%; background: #B8934A; opacity: .3; animation: v4coDot 4.5s ease-in-out infinite; }
html.v4co-page .v4co-ic1 + .v4co-dots b:nth-child(1) { animation-delay: .45s; }
html.v4co-page .v4co-ic1 + .v4co-dots b:nth-child(2) { animation-delay: .7s; }
html.v4co-page .v4co-ic1 + .v4co-dots b:nth-child(3) { animation-delay: .95s; }
html.v4co-page .v4co-ic2 + .v4co-dots b:nth-child(1) { animation-delay: 1.95s; }
html.v4co-page .v4co-ic2 + .v4co-dots b:nth-child(2) { animation-delay: 2.2s; }
html.v4co-page .v4co-ic2 + .v4co-dots b:nth-child(3) { animation-delay: 2.45s; }
@keyframes v4coDot { 0%, 20%, 100% { opacity: .3; } 7% { opacity: 1; } }
html.v4co-page .v4co-ic2 .v4co-wind { opacity: 0; animation: v4coWind 1.1s linear infinite; }
@keyframes v4coWind { 0% { opacity: 0; transform: translateX(3px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateX(-3px); } }
html.v4co-page .v4co-ic3 .v4co-st { stroke: #B8934A; stroke-width: 2; opacity: 0; animation: v4coSteam 2.6s ease-in-out infinite; }
html.v4co-page .v4co-ic3 .v4co-st:nth-child(2) { animation-delay: .45s; }
html.v4co-page .v4co-ic3 .v4co-st:nth-child(3) { animation-delay: .9s; }
@media (max-width: 767px) {
  html.v4co-page .v4co-path { gap: 3px; }
  html.v4co-page .v4co-ic { width: 27px; height: 27px; }
  html.v4co-page .v4co-dots { gap: 2px; }
  html.v4co-page .v4co-dots b { width: 3px; height: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  html.v4co-page .v4co-ic, html.v4co-page .v4co-dots b, html.v4co-page .v4co-ic2 .v4co-wind { animation: none; }
  html.v4co-page .v4co-dots b { opacity: .6; }
  html.v4co-page .v4co-ic3 .v4co-st { animation: none; opacity: .8; }
}

/* 18.10.2026, слово владельца («delivery-опции немножко совсем близко к бордюрам»): на телефоне у способов доставки из темы — отступ −10px
   с каждой стороны: карточки шире полей и в 6px от края экрана. Теперь по краю полей (16px), как примечание о сроках под ними. */
@media (max-width: 767px) {
  html.v4co-page body #onestepcheckout #shipping_rates_list .ty-shipping-options__method { margin-left: 0 !important; margin-right: 0 !important; }
}
/* 18.10.2026, слово владельца («на мобильных убери этот баннер»): полоса «Good tea. Great moments.» под комментарием — только на компьютере и планшете */
@media (max-width: 767px) {
  html.v4co-page .v4co-moment { display: none !important; }
}

/* 18.10.2026, рекомендация (слово владельца «по шиппингу да, можно передвинуть влево, но иконку оставь»): на телефоне тема ставила заголовки
   «Shipping Address» / «Billing Address» по центру — теперь по левому краю, как Contact, Delivery, Payment; значок остаётся */
@media (max-width: 767px) {
  html.v4co-page body #onestepcheckout #step_two h3.ty-step__title-active { text-align: left !important; justify-content: flex-start !important; }
}
/* 18.10.2026, рекомендация: на телефоне блок Express checkout — на ширину полей (по 16px от краёв экрана), рамка остаётся */
@media (max-width: 767px) {
  html.v4co-page .v4xp { margin-left: -16px !important; margin-right: -16px !important; }
}

/* 18.10.2026: кнопка «Complete Order» под Payment слева на компьютере (v4-checkout.js, .v4co-btnLeft) — во всю ширину левой колонки */
html.v4co-page #checkout_complete_buttons.v4co-btnLeft { float: none !important; width: auto !important; margin: 6px 0 28px !important; padding: 0 !important; }
html.v4co-page #checkout_complete_buttons.v4co-btnLeft .ty-complete-order { width: 100% !important; }

/* 18.10.2026, слово владельца («сделай кнопку с иконкой»): «Sign in» в карточке Contact — со значком человека (как у аккаунта в шапке);
   значок цвета текста — при наведении белеет вместе с надписью */
.v4co-h .v4co-signin { gap: 7px; }
.v4co-h .v4co-signin::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.6' r='4.4'/%3E%3Cpath d='M3.4 21.2a8.6 8.6 0 0 1 17.2 0z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.6' r='4.4'/%3E%3Cpath d='M3.4 21.2a8.6 8.6 0 0 1 17.2 0z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* 18.10.2026: подсказки адреса на оформлении (v4-adres.js) — список под полем Address */
.v4adr { box-sizing: border-box; position: absolute; z-index: 10050; background: #fff; border: 1px solid #d9d4c7; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); overflow: hidden; font-size: 14px; line-height: 1.35; }
.v4adr-i { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #f0ece3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v4adr-i:hover, .v4adr-i.is-act { background: #f6f3ec; }
.v4adr-m { color: #1f2a24; font-weight: 600; }
.v4adr-s { color: #7a7d78; }
.v4adr-by { padding: 4px 12px 6px; text-align: right; font-size: 11px; color: #9a9c97; }
@media (max-width: 767px) { .v4adr-i { padding: 12px; white-space: normal; } }
/* 18.10.2026: список прокручивается (Royal Mail раскрывает дом в десятки квартир); на телефоне видно 4 строки — не уходит под клавиатуру */
.v4adr-l { max-height: 360px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.v4adr-more .v4adr-s { color: #0F5C45; }
@media (max-width: 767px) { .v4adr-l { max-height: 230px; } }
/* 18.10.2026 (владелец: «форма карты Stripe на британском сайте корявая, мелкая»): поле карты (Stripe SCA) — как остальные поля оформления */
html.v4co-page body #onestepcheckout .ty-stripe-payment-card { box-sizing: border-box; width: 100% !important; max-width: none !important; min-height: 52px; padding: 16px 16px !important;
  border: 1px solid #D9DFDB !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; }
html.v4co-page body #onestepcheckout .ty-stripe-payment-card.StripeElement--focus { border-color: #008556 !important; box-shadow: 0 0 0 3px rgba(0, 133, 86, .12) !important; }
html.v4co-page body #onestepcheckout .ty-stripe-payment-card.StripeElement--invalid { border-color: #D64545 !important; }
html.v4co-page body #onestepcheckout .ty-stripe-payment-card__errors:not(:empty) { margin-top: 8px; color: #D64545; font: 500 13px/1.4 Inter, system-ui, sans-serif; }

/* ===== 18.10.2026, слово владельца: сохранённая карта одной строкой (cc.tpl, .v4cc) — «Visa •••• 1234  06/32» + CVC + Remove;
   ниже «+ Add new card» (пустые поля), в режиме новой карты — «Use saved card •••• 1234» ===== */
html.v4co-page body #onestepcheckout #step_four .ty-credit-card .v4cc-saved, html.v4co-page body #onestepcheckout #step_four .ty-credit-card .v4cc-links { display: none; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card.v4cc-use-saved { grid-template-columns: minmax(0, 1fr) 104px auto; align-items: center; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card.v4cc-use-saved > .ty-credit-card__control-group:nth-child(-n+3) { display: none !important; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card.v4cc-use-saved .v4cc-saved { display: flex; order: -1; align-items: center; gap: 10px; min-width: 0; height: 50px; box-sizing: border-box; padding: 0 14px; border: 1px solid #D6DCD9; border-radius: 12px; background: #F7F9F8; font: 500 15px Inter, system-ui, sans-serif; color: #111614; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card .v4cc-ico { flex: 0 0 26px; width: 26px; height: 19px; fill: none; stroke: #0F5C45; stroke-width: 1.6; stroke-linecap: round; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card .v4cc-brand { font-weight: 600; white-space: nowrap; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card .v4cc-num { white-space: nowrap; letter-spacing: .06em; color: #5A635E; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card .v4cc-num b { font-weight: 600; color: #111614; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card .v4cc-exp { margin-left: auto; white-space: nowrap; color: #5A635E; font-variant-numeric: tabular-nums; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card.v4cc-use-saved .ty-credit-card__buttons { grid-column: auto !important; flex-wrap: nowrap !important; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card.v4cc-use-saved .ty-card-save, html.v4co-page body #onestepcheckout #step_four .ty-credit-card.v4cc-use-saved .v4card-info, html.v4co-page body #onestepcheckout #step_four .ty-credit-card.v4cc-has.v4cc-new .ty-card-remove { display: none !important; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card.v4cc-use-saved .v4cc-links, html.v4co-page body #onestepcheckout #step_four .ty-credit-card.v4cc-has.v4cc-new .v4cc-links { display: flex; grid-column: 1 / -1; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card.v4cc-use-saved .v4cc-back, html.v4co-page body #onestepcheckout #step_four .ty-credit-card.v4cc-new .v4cc-add { display: none; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card .v4cc-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; box-sizing: border-box; border: 1.5px dashed #CFD8D4; border-radius: 12px; font: 600 14.5px Inter, system-ui, sans-serif; color: #0F5C45 !important; text-decoration: none !important; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card .v4cc-add:hover { border-color: #0F5C45; background: #F2F8F5; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card .v4cc-add span { font-size: 19px; line-height: 1; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card .v4cc-back { font: 600 14px Inter, system-ui, sans-serif; color: #0F5C45 !important; text-decoration: underline !important; text-underline-offset: 3px; }
@media (max-width: 520px) {
  html.v4co-page body #onestepcheckout #step_four .ty-credit-card.v4cc-use-saved { grid-template-columns: minmax(0, 1fr) auto; }
  html.v4co-page body #onestepcheckout #step_four .ty-credit-card.v4cc-use-saved .v4cc-saved { grid-column: 1 / -1; }
}
/* v4cc: шлифовка 18.10.2026 (снимок владельца): дата — плашкой с отступом от края, CVC шире; «Use saved card» — кнопкой, как «Add new card» */
html.v4co-page body #onestepcheckout #step_four .ty-credit-card.v4cc-use-saved { grid-template-columns: minmax(0, 1fr) 112px auto; column-gap: 12px !important; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card.v4cc-use-saved .v4cc-saved { gap: 12px; padding: 0 8px 0 14px; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card .v4cc-exp { flex: none; margin-left: auto; padding: 5px 10px; border: 1px solid #E3E7E5; border-radius: 8px; background: #fff; font: 600 13.5px Inter, system-ui, sans-serif; color: #1E2421; line-height: 1.2; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card .v4cc-back { display: inline-flex; align-items: center; gap: 8px; height: 40px; box-sizing: border-box; padding: 0 16px; border: 1.5px solid #CFE5DA; border-radius: 999px; background: #fff; text-decoration: none !important; font: 600 14px Inter, system-ui, sans-serif; color: #0F5C45 !important; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card .v4cc-back::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h11a5 5 0 0 1 0 10h-3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h11a5 5 0 0 1 0 10h-3'/%3E%3C/svg%3E") center / contain no-repeat; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card .v4cc-back:hover { background: #F2F8F5; border-color: #0F5C45; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card .v4cc-backnum { color: #5A635E; font-weight: 500; }
@media (max-width: 520px) { html.v4co-page body #onestepcheckout #step_four .ty-credit-card.v4cc-use-saved { grid-template-columns: minmax(0, 1fr) auto; } }
/* v4cc: белое поле, как у CVC (снимок владельца 18.10.2026: строка карты сливалась с фоном, дата прилипала к CVC) */
html.v4co-page body #onestepcheckout #step_four .ty-credit-card.v4cc-use-saved .v4cc-saved { background: #fff; border: 1px solid #D6DCD9; padding: 0 6px 0 14px; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card .v4cc-exp { border: 0; background: #F1F4F2; color: #3D4641; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card .v4cc-ico { stroke: #3D4641; }
/* v4cc: отступы (общее правило «.ty-credit-card > * padding: 0 !important» их съедало) и серый фон, темнее поля — снимок владельца 18.10.2026 */
html.v4co-page body #onestepcheckout #step_four .ty-credit-card.v4cc-use-saved .v4cc-saved { padding: 0 8px 0 16px !important; gap: 12px; background: #EDF1EF; border: 1px solid #D6DCD9; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card .v4cc-exp { margin-left: auto; padding: 5px 10px !important; background: #fff; color: #1E2421; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card .v4cc-ico { stroke: #0F5C45; }

/* ===== 18.10.2026, слово владельца: страница «заказ оформлен» — блок «How was your experience?» (views/checkout/components/v4_feedback.tpl) ===== */
.v4fb { margin: 18px 0 0; padding: 24px clamp(18px, 3vw, 28px); border: 1px solid #E3E7E5; border-radius: 22px; background: #fff; box-shadow: 0 12px 30px rgba(15,40,32,.05); font-family: Inter, system-ui, sans-serif; }
.v4fb .v4fb-title { margin: 0 0 4px !important; padding: 0 !important; border: 0 !important; font: 600 22px/1.25 Inter, system-ui, sans-serif !important; color: #0F5C45 !important; text-transform: none !important; }
.v4fb .v4fb-sub { margin: 0 0 14px !important; font: 400 14px/1.5 Inter, system-ui, sans-serif; color: #5A635E; }
.v4fb .v4fb-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 !important; padding: 12px 0 !important; border: 0 !important; border-top: 1px solid #EEF1EF !important; min-width: 0; }
.v4fb .v4fb-row:first-of-type { border-top: 0 !important; }
.v4fb .v4fb-q { float: left; display: flex; flex-direction: column; gap: 2px; margin: 0 !important; padding: 0 !important; border: 0 !important; width: auto !important; font: inherit !important; }
.v4fb .v4fb-q b { font: 600 15px/1.3 Inter, system-ui, sans-serif; color: #1E2421; }
.v4fb .v4fb-q small { font: 400 13px/1.35 Inter, system-ui, sans-serif; color: #6E746F; }
.v4fb .v4fb-stars { display: inline-flex; flex-direction: row-reverse; flex: none; gap: 2px; }
.v4fb .v4fb-stars input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.v4fb .v4fb-stars label { display: inline-flex !important; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0 !important; padding: 0 !important; border-radius: 10px; font: 400 30px/1 Arial, sans-serif !important; color: #D6DCD9 !important; cursor: pointer; transition: color .12s, transform .12s; }
.v4fb .v4fb-stars label::after, .v4fb .v4fb-stars label::before { content: none !important; }
.v4fb .v4fb-stars label:hover, .v4fb .v4fb-stars label:hover ~ label, .v4fb .v4fb-stars input:checked ~ label { color: #E0A526 !important; }
.v4fb .v4fb-stars label:hover { transform: scale(1.12); }
.v4fb .v4fb-stars input:focus-visible + label { outline: 2px solid #0F5C45; outline-offset: 1px; }
.v4fb .v4fb-comment { display: block; box-sizing: border-box; width: 100% !important; margin: 12px 0 0 !important; padding: 12px 14px !important; border: 1px solid #D6DCD9 !important; border-radius: 14px !important; background: #F7F9F8 !important; font: 400 15px/1.45 Inter, system-ui, sans-serif !important; color: #111614 !important; resize: vertical; }
.v4fb .v4fb-comment:focus { outline: none; border-color: #0F5C45 !important; background: #fff !important; }
.v4fb .v4fb-msg { margin: 10px 0 0 !important; font: 500 13.5px Inter, system-ui, sans-serif; color: #B3261E; }
.v4fb .v4fb-msg[hidden], .v4fb [hidden] { display: none !important; }
.v4fb .v4fb-send { margin: 14px 0 0 !important; height: 46px !important; padding: 0 26px !important; border: 0 !important; border-radius: 999px !important; background: #008556 !important; color: #fff !important; font: 600 15px Inter, system-ui, sans-serif !important; }
.v4fb .v4fb-send:hover { background: #0F5C45 !important; }
.v4fb .v4fb-thanks { margin: 6px 0 0 !important; padding: 14px 16px; border-radius: 14px; background: #E8F3EE; font: 500 15px/1.5 Inter, system-ui, sans-serif; color: #0F5C45; }
@media (max-width: 560px) {
  .v4fb .v4fb-row { flex-direction: column; align-items: flex-start; }
  .v4fb .v4fb-stars label { width: 42px; height: 40px; font-size: 32px !important; }
}
.v4fb .v4fb-send { text-transform: none !important; letter-spacing: 0 !important; }

/* 19.10.2026, снимки владельца: заголовок «заказ оформлен» — в одну строку; на телефоне баннер ниже, анимация меньше и справа, текст слева */
.v4done-page h1.v4done-title { font-size: clamp(24px, 3vw, 38px) !important; }
@media (max-width: 720px) {
  .v4done-hero { grid-template-columns: minmax(0, 1fr) 92px !important; gap: 10px !important; padding: 20px 16px !important; }
  .v4done-hero .v4done-text { grid-template-columns: 40px minmax(0, 1fr) !important; column-gap: 12px !important; }
  .v4done-check { width: 40px !important; height: 40px !important; }
  .v4done-page h1.v4done-title { font-size: 22px !important; line-height: 1.15 !important; }
  .v4done-hero .ty-checkout-complete__order-success, .v4done-hero .ty-checkout-complete__order-success * { font-size: 13.5px !important; }
  .v4done-art { max-width: 92px !important; margin: 0 !important; align-self: center; }
}

/* 19.10.2026, снимок владельца: поля карты после автозаполнения (1Password, RoboForm, браузер) — белые, как при ручном вводе */
html.v4co-page body #onestepcheckout #step_four .ty-credit-card input:-webkit-autofill,
html.v4co-page body #onestepcheckout #step_four .ty-credit-card input:-webkit-autofill:hover,
html.v4co-page body #onestepcheckout #step_four .ty-credit-card input:-webkit-autofill:focus,
html.v4co-page body #onestepcheckout #step_four .ty-credit-card input:autofill { -webkit-box-shadow: 0 0 0 100px #fff inset !important; box-shadow: 0 0 0 100px #fff inset !important; -webkit-text-fill-color: #111614 !important; background-color: #fff !important; }

/* 19.10.2026, слово владельца («несколько карт»): остальные сохранённые карты под строкой текущей — кнопками, нажатие делает карту текущей */
html.v4co-page body #onestepcheckout #step_four .ty-credit-card .v4cc-others { display: none; }
html.v4co-page body #onestepcheckout #step_four .ty-credit-card.v4cc-use-saved .v4cc-others { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; grid-column: 1 / -1; }
html.v4co-page body #onestepcheckout #step_four .v4cc-othersT { flex: 1 0 100%; font: 600 13px Inter, system-ui, sans-serif; color: #5A635E; }
html.v4co-page body #onestepcheckout #step_four .v4cc-pick { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1.5px solid #D6DCD9; border-radius: 12px; background: #fff; font: 500 14px Inter, system-ui, sans-serif; color: #1E2421; cursor: pointer; }
html.v4co-page body #onestepcheckout #step_four .v4cc-pick b { font-weight: 600; }
html.v4co-page body #onestepcheckout #step_four .v4cc-pick span { color: #6E746F; font-size: 13px; }
html.v4co-page body #onestepcheckout #step_four .v4cc-pick:hover { border-color: #0F5C45; background: #F2F8F5; }
html.v4co-page body #onestepcheckout #step_four .v4cc-pick:disabled { opacity: .6; cursor: wait; }
/* 19.10.2026, снимок владельца: подсказка у «i» рядом с «Save card» обрезалась слева — раскрывается вправо от значка */
html.v4co-page body #onestepcheckout #step_four .v4card-info .v4card-tip { left: -8px !important; right: auto !important; width: 280px; max-width: calc(100vw - 48px); }

/* 19.10.2026: поле карты с ошибкой (проверка при Complete Order) — красная рамка */
html.v4co-page body #onestepcheckout #step_four .ty-credit-card input.v4cc-bad { border-color: #B3261E !important; box-shadow: 0 0 0 3px rgba(179,38,30,.15) !important; }