.vv-product-add { display:inline-flex!important; vertical-align:middle; align-items:center; justify-content:center; width:28px; height:28px; padding:0!important; margin:0 0 0 9px; border:0!important; border-radius:50%; background:transparent!important; color:#b4bcc3!important; cursor:pointer; line-height:1; }
.vv-product-add svg { width:16px; height:16px; display:block; pointer-events:none; }
.vv-product-add:hover { color:#233140!important; background:#f1f3f5!important; }
.vv-product-add:focus-visible { outline:2px solid #233140; outline-offset:2px; }
.vv-product-add[disabled] { cursor:wait; opacity:.5; }
.vv-header-cart,.vv-mobile-cart { position:relative; cursor:pointer!important; text-decoration:none!important; }
.vv-cart-count { position:absolute; top:-4px; right:-5px; min-width:19px; height:19px; padding:0 4px; display:inline-flex; justify-content:center; align-items:center; border-radius:999px; background:#fff; color:#233140; font:700 11px/1 sans-serif; box-sizing:border-box; }
.vv-cart-count[hidden] { display:none!important; }
.vv-basket-dialog { position:fixed; inset:0; margin:auto; width:min(440px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:30px; border:0; border-radius:24px; color:#233140; background:#fff; box-shadow:0 20px 80px #0003; box-sizing:border-box; font:inherit; }
.vv-basket-dialog::backdrop { background:#14212e88; }
.vv-basket-dialog h2 { font-size:24px; line-height:1.25; margin:0 30px 16px 0; }
.vv-basket-dialog p { margin:12px 0; line-height:1.5; }
.vv-basket-close { position:absolute; right:15px; top:12px; width:32px; height:32px; padding:0; background:transparent; color:#233140; border:0; font-size:28px; cursor:pointer; }
.vv-basket-colors { border:0; padding:0; margin:20px 0; display:flex; gap:12px; flex-wrap:wrap; }
.vv-basket-colors legend { margin-bottom:12px; font-weight:700; }
.vv-basket-colors label { display:flex; gap:8px; align-items:center; border:1px solid #dce2e7; padding:12px 18px; border-radius:999px; cursor:pointer; }
.vv-basket-colors input { accent-color:#233140; width:16px; height:16px; margin:0; }
.vv-basket-primary { border:0; border-radius:999px; background:#ffc702; color:#233140; font:inherit; font-weight:700; padding:14px 24px; cursor:pointer; }
.vv-basket-primary:disabled { opacity:.6; cursor:wait; }
.vv-basket-feedback { color:#a33232; min-height:1.5em; }
.vv-basket-toast { position:fixed; right:24px; bottom:24px; z-index:12000; max-width:calc(100vw - 48px); padding:16px 22px; border-radius:18px; background:#233140; color:#fff; box-shadow:0 8px 28px #0002; line-height:1.5; }
.vv-basket-toast a { color:#ffc702; text-decoration:underline; margin-left:10px; }
/* Match the site's .main-journal container on desktop; retain compact mobile gutters below. */
.vv-basket-page { --vv-ink:#233140; --vv-muted:#72808f; --vv-line:#dfe5ec; --vv-soft:#f4f6f8; width:100%; max-width:calc(94.4rem + var(--space-md,24px) * 2); box-sizing:border-box; margin:0 auto 84px; padding:0 20px; color:var(--vv-ink); font-size:16px; line-height:1.45; }
.vv-basket-page *, .vv-basket-page *::before, .vv-basket-page *::after { box-sizing:border-box; }
.vv-basket-page a { text-decoration:none; }
.vv-basket-back { color:var(--vv-muted); font-size:14px; }
.vv-basket-back:hover { color:var(--vv-ink); }
.vv-basket-heading { display:flex; align-items:center; gap:18px; margin:22px 0 4px; }
.vv-basket-page h1 { font-size:clamp(36px,4.4vw,58px); font-weight:400; line-height:1.12; margin:0; }
.vv-basket-heading-count { background:var(--vv-soft); border-radius:999px; padding:7px 13px; color:var(--vv-muted); font-size:14px; white-space:nowrap; }
.vv-basket-heading-count:empty { display:none; }
.vv-basket-intro { color:var(--vv-muted); margin:12px 0 24px; font-size:18px; }
.vv-basket-notice { display:flex; align-items:center; gap:12px; padding:15px 20px; margin:0 0 28px; background:#fff9e3; border-radius:18px; font-size:14px; }
.vv-basket-notice p { margin:0; }
.vv-basket-notice-dot { flex:0 0 8px; width:8px; height:8px; background:#e8ad00; border-radius:50%; }
.vv-basket-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,390px); gap:30px; align-items:start; }
/* Desktop summary: 390px × 1.25. Keep existing tablet/mobile columns. */
@media(min-width:1200px) {
 .vv-basket-layout { grid-template-columns:minmax(0,1fr) 487.5px; }
 .vv-basket-page .vv-basket-checkout { max-width:none; }
}
.vv-basket-main { min-width:0; }
.vv-basket-panel { border:1px solid var(--vv-line); border-radius:28px; padding:26px; background:#fff; margin-top:22px; }
.vv-basket-section-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.vv-basket-page h2 { margin:0; font-size:25px; font-weight:700; line-height:1.2; }
.vv-basket-soon { display:inline-flex; align-items:center; justify-content:center; padding:5px 12px; border-radius:999px; background:var(--vv-soft); color:var(--vv-muted); font-size:12px; font-weight:700; }
.vv-basket-muted { color:var(--vv-muted); font-size:14px; line-height:1.5; }
.vv-basket-recipient { display:flex; gap:16px; align-items:center; padding:24px 26px; background:var(--vv-soft); border-radius:28px; min-height:106px; }
.vv-basket-recipient-icon { display:flex; align-items:center; justify-content:center; width:48px; height:48px; flex:0 0 48px; border-radius:50%; background:#fff; }
.vv-basket-recipient-icon svg { width:25px; height:25px; }
.vv-basket-recipient-info { flex:1; min-width:0; }
.vv-basket-page .vv-basket-eyebrow { margin:0 0 3px; color:var(--vv-muted); font-size:13px; }
.vv-basket-recipient-name { margin:0; font-weight:700; overflow-wrap:anywhere; }
.vv-basket-recipient-email { margin:3px 0 0; font-size:14px; color:var(--vv-muted); overflow-wrap:anywhere; }
.vv-basket-recipient-email:empty { display:none; }
.vv-basket-recipient-edit { color:var(--vv-ink); font-size:13px; border-bottom:1px solid #a5afb9; white-space:nowrap; }
.vv-basket-recipient-edit:hover { border-color:var(--vv-ink); }
.vv-basket-delivery-options { display:grid; grid-template-columns:minmax(0,350px); gap:12px; }
.vv-basket-page .vv-basket-delivery-option { display:flex; align-items:center; gap:12px; width:100%; padding:18px 14px; border:1px solid var(--vv-line); border-radius:18px; background:#fafbfc; color:var(--vv-muted); text-align:left; font:inherit; cursor:not-allowed; opacity:1; }
.vv-basket-delivery-option svg { flex:0 0 25px; width:25px; height:25px; }
.vv-basket-delivery-option strong { display:block; font-size:15px; font-weight:700; }
.vv-basket-delivery-option small { display:block; font-size:12px; margin-top:4px; line-height:1.4; }
.vv-basket-delivery > .vv-basket-muted { margin:16px 0 0; }
.vv-basket-products .vv-basket-section-head { margin-bottom:4px; }
.vv-basket-row { display:grid; grid-template-columns:144px minmax(0,1fr); gap:22px; padding:24px 0; border-bottom:1px solid var(--vv-line); }
.vv-basket-row:last-child { border-bottom:0; padding-bottom:4px; }
.vv-basket-picture { position:relative; display:block; align-self:stretch; width:100%; min-height:184px; background:var(--vv-soft); border-radius:20px; overflow:hidden; }
.vv-basket-row img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.vv-basket-item-info { min-width:0; }
.vv-basket-line-price { display:block; font-size:23px; font-weight:700; margin-bottom:8px; line-height:1.2; white-space:nowrap; }
.vv-basket-name { display:block; color:var(--vv-ink); font-size:17px; font-weight:700; line-height:1.35; }
.vv-basket-name:hover { text-decoration:underline; }
.vv-basket-details { color:var(--vv-muted); margin:7px 0 0; font-size:13px; overflow-wrap:anywhere; }
.vv-basket-item-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:18px; }
.vv-basket-quantity { display:inline-flex; align-items:center; justify-content:space-between; gap:8px; padding:4px; border:1px solid var(--vv-line); border-radius:999px; background:#fff; }
.vv-basket-quantity span { min-width:26px; text-align:center; font-weight:700; font-size:14px; }
.vv-basket-page .vv-basket-quantity button { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0!important; border:0; border-radius:50%; background:var(--vv-soft); color:var(--vv-ink); font:inherit; font-size:21px; line-height:1; cursor:pointer; }
.vv-basket-quantity button:hover:not(:disabled) { background:#fff0b5; }
.vv-basket-page .vv-basket-quantity button:disabled { opacity:.35; cursor:default; }
.vv-basket-quantity button svg { display:block; width:17px; height:17px; flex:none; pointer-events:none; }
.vv-basket-sidebar { min-width:0; background:var(--vv-soft); padding:22px; border-radius:30px; }
.vv-basket-summary,.vv-basket-payment { padding:24px; background:#fff; border-radius:22px; }
.vv-basket-summary h2 { font-size:24px; margin-bottom:24px; }
.vv-basket-promo label { display:block; font-size:13px; font-weight:700; margin-bottom:8px; }
.vv-basket-page .vv-basket-promo input { display:block; width:100%; min-width:0; height:46px; border:1px solid var(--vv-line); border-radius:13px; padding:0 14px; background:#fafbfc; font:inherit; font-size:14px; color:var(--vv-muted); opacity:1; cursor:not-allowed; }
.vv-basket-promo input::placeholder { color:#8995a2; opacity:1; }
.vv-basket-promo p { margin:7px 0 22px; color:var(--vv-muted); font-size:11px; }
.vv-basket-breakdown { margin:0; font-size:14px; }
.vv-basket-breakdown > div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:12px 0; }
.vv-basket-breakdown dt { color:var(--vv-muted); }
.vv-basket-breakdown dd { margin:0; text-align:right; }
.vv-basket-pending { font-size:12px; color:var(--vv-muted); }
.vv-basket-total { display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--vv-line); padding-top:20px; margin-top:20px; font-size:25px; font-weight:700; }
.vv-basket-total strong { white-space:nowrap; }
.vv-basket-total-note { color:var(--vv-muted); font-size:11px; margin:8px 0 0; line-height:1.45; }
.vv-basket-payment { margin-top:16px; padding:22px; }
.vv-basket-payment .vv-basket-section-head { margin-bottom:18px; }
.vv-basket-payment h2 { font-size:21px; }
.vv-basket-payment-option { display:flex; align-items:center; gap:12px; }
.vv-basket-payment-icon { display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex:0 0 40px; background:var(--vv-soft); border-radius:13px; color:var(--vv-muted); }
.vv-basket-payment-icon svg { width:23px; height:23px; }
.vv-basket-payment-option strong { display:block; font-size:14px; }
.vv-basket-payment-option p { color:var(--vv-muted); font-size:12px; margin:4px 0 0; line-height:1.45; }
.vv-basket-page .vv-basket-checkout { display:flex; justify-content:center; align-items:center; gap:14px; width:100%; padding:17px 16px; border:0; border-radius:999px; background:#ffc702; color:var(--vv-ink); font:inherit; font-size:19px; font-weight:700; margin-top:20px; cursor:pointer; opacity:1; }
.vv-basket-page .vv-basket-checkout:hover:not(:disabled) { background:#f3bd00; }
.vv-basket-page .vv-basket-checkout:disabled { cursor:not-allowed; }
.vv-basket-checkout span { font-size:22px; line-height:1; }
.vv-basket-checkout-feedback { margin:12px 4px 0; color:#566676; font-size:12px; line-height:1.5; }
.vv-basket-checkout-feedback[hidden] { display:none; }
.vv-basket-consents { display:grid; gap:13px; margin:20px 4px 0; color:#566676; font-size:12px; line-height:1.5; }
.vv-basket-consent { display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; align-items:start; }
.vv-basket-page .vv-basket-consent input[type="checkbox"] { appearance:none; -webkit-appearance:none; display:block; position:static; flex:none; width:20px; height:20px; margin:0; padding:0; border:1px solid #a7b2bd; border-radius:6px; background:#fff; opacity:1; cursor:pointer; }
.vv-basket-page .vv-basket-consent input[type="checkbox"]:checked { border-color:#ffc702; background:#ffc702 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10 3.5 3.5L15 6.5' fill='none' stroke='%23233140' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat; }
.vv-basket-consent input:focus-visible { outline:2px solid var(--vv-ink); outline-offset:3px; }
.vv-basket-page .vv-basket-consent input[type="checkbox"].is-attention:not(:checked) { border-color:#b07800; box-shadow:0 0 0 3px #ffc70230; animation:vv-consent-shake .36s ease-out; }
@keyframes vv-consent-shake {
 0%,100% { transform:translateX(0); }
 20%,60% { transform:translateX(-4px); }
 40%,80% { transform:translateX(4px); }
}
@media(prefers-reduced-motion:reduce) {
 .vv-basket-page .vv-basket-consent input[type="checkbox"].is-attention:not(:checked) { animation:none; }
}
.vv-basket-consent label { display:block; margin:0; padding:0; font:inherit; color:inherit; cursor:pointer; }
.vv-basket-consents a { color:var(--vv-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:#adb7c1; }
.vv-basket-consents a:hover { text-decoration-color:var(--vv-ink); }
.vv-basket-consent p { margin:4px 0 0; color:var(--vv-muted); font-size:11px; line-height:1.5; }
.vv-basket-policy { justify-self:start; margin-left:30px; font-size:11px; }
.vv-basket-secure-payment { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px; margin-top:20px; padding-top:19px; border-top:1px solid var(--vv-line); color:var(--vv-ink); font-size:13px; line-height:1.4; }
.vv-basket-secure-payment svg { flex:none; width:19px; height:22px; color:var(--vv-muted); }
/* Reuse the original Ozon Pay artwork as two aligned sprite regions. */
.vv-basket-ozonpay { display:inline-flex; align-items:center; flex:none; gap:4px; width:128px; height:24px; }
.vv-basket-ozonpay::before,.vv-basket-ozonpay::after { content:""; display:block; flex:none; width:62px; background-image:url("/bitrix/images/ozon.ozonpay/ozonpay.png"); background-repeat:no-repeat; background-size:62px auto; }
.vv-basket-ozonpay::before { height:15px; background-position:left top; }
.vv-basket-ozonpay::after { height:23.4px; background-position:left bottom; }
.vv-basket-empty { padding:38px 12px 28px; text-align:center; }
.vv-basket-empty h3 { font-size:22px; margin:0 0 10px; }
.vv-basket-empty p { font-size:14px; color:var(--vv-muted); margin:0 0 22px; }
.vv-basket-empty a { display:inline-flex; align-items:center; justify-content:center; background:#ffc702; border-radius:999px; padding:13px 24px; color:var(--vv-ink); font-size:14px; font-weight:700; }
.vv-basket-page-status { color:#a33232; font-size:14px; margin:12px 0; }
.vv-basket-page-status:empty { display:none; }
.vv-basket-help { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:24px 4px 0; font-size:14px; color:var(--vv-muted); }
.vv-basket-help a { color:var(--vv-ink); font-weight:700; }
.vv-basket-page .vv-basket-contact { display:inline-flex; align-items:center; justify-content:center; gap:12px; width:auto; max-width:100%; min-height:52px; padding:14px 28px; margin:0; border:0; border-radius:999px; background:var(--vv-soft); color:var(--vv-ink); font:inherit; font-size:16px; font-weight:700; line-height:1.4; cursor:pointer; }
.vv-basket-page .vv-basket-contact:hover:not(:disabled) { background:#e7ebef; }
.vv-basket-page .vv-basket-contact:disabled { cursor:wait; opacity:.7; }
.vv-basket-help [role="status"] { flex-basis:100%; margin:0; font-size:13px; line-height:1.5; }
.vv-basket-help [role="status"]:empty { display:none; }
.vv-basket-page button:focus-visible,.vv-basket-page a:focus-visible { outline:2px solid var(--vv-ink); outline-offset:4px; }
@media(max-width:1000px) {
 .vv-basket-page { padding:0 20px; }
 .vv-basket-layout { grid-template-columns:minmax(0,1fr) 330px; gap:20px; }
 .vv-basket-panel { padding:20px; }
 .vv-basket-recipient { padding:20px; flex-wrap:wrap; gap:12px; }
 .vv-basket-recipient-edit { margin-left:60px; }
 .vv-basket-delivery-options { grid-template-columns:1fr; }
 .vv-basket-sidebar { padding:16px; }
 .vv-basket-summary,.vv-basket-payment { padding:20px; }
 .vv-basket-row { grid-template-columns:112px minmax(0,1fr); gap:16px; }
 .vv-basket-picture { min-height:176px; }
 .vv-basket-total { font-size:23px; }
}
@media(max-width:760px) {
 .vv-basket-page { margin:0 auto 48px; padding:0 18px; }
 .vv-basket-layout { grid-template-columns:1fr; gap:24px; }
 .vv-basket-intro { font-size:16px; }
 .vv-basket-notice { padding:14px 16px; font-size:13px; }
 .vv-basket-recipient { flex-wrap:nowrap; }
 .vv-basket-recipient-edit { margin-left:0; }
 .vv-basket-delivery-options { grid-template-columns:minmax(0,350px); }
 .vv-basket-sidebar { border-radius:26px; padding:18px; }
 .vv-basket-summary,.vv-basket-payment { padding:24px; }
 .vv-basket-total { font-size:28px; }
 .vv-basket-panel { border-radius:24px; }
 .vv-basket-help { margin-top:20px; }
 .vv-basket-dialog { padding:24px; }
}
@media(max-width:440px) {
 .vv-basket-page { padding:0 14px; }
 .vv-basket-page h2 { font-size:22px; }
 .vv-basket-heading { gap:12px; }
 .vv-basket-heading-count { font-size:12px; }
 .vv-basket-recipient { padding:18px; gap:10px; flex-wrap:wrap; }
 .vv-basket-recipient-icon { width:42px; height:42px; flex-basis:42px; }
 .vv-basket-recipient-edit { margin-left:52px; }
 .vv-basket-delivery-options { grid-template-columns:1fr; }
 .vv-basket-row { grid-template-columns:104px minmax(0,1fr); gap:14px; }
 .vv-basket-picture { min-height:170px; border-radius:16px; }
 .vv-basket-name { font-size:15px; }
 .vv-basket-line-price { font-size:21px; }
 .vv-basket-details { font-size:12px; }
 .vv-basket-item-actions { gap:8px; }
 .vv-basket-summary,.vv-basket-payment { padding:20px; }
 .vv-basket-total { font-size:25px; }
}