/* MUVIO: сторінка порожнього кошика (checkout.html): текст, дві кнопки, добірка товарів і способи оплати.
   Плоский стиль сайту, без карток-рамок. */
html:not(#_):not(#__):not(#___) .cs-page{max-width:1180px;margin:0 auto;padding:56px 24px 40px;text-align:center;box-sizing:border-box}
html:not(#_):not(#__):not(#___) .cs-page,html:not(#_):not(#__):not(#___) .cs-page *{box-sizing:border-box}
.cs-ico{display:block;margin:0 auto 28px;width:76px;height:76px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
html:not(#_):not(#__):not(#___) .cs-title{font-size:clamp(30px,4vw,44px);font-weight:400;line-height:1.15;letter-spacing:-.01em;text-transform:none;margin:0 0 18px}
html:not(#_):not(#__):not(#___) .cs-text{font-size:17px;line-height:1.7;opacity:.75;max-width:620px;margin:0 auto}
.cs-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:36px}
html:not(#_):not(#__):not(#___):not(#____) a.cs-btn,html:not(#_):not(#__):not(#___):not(#____) button.cs-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;font-size:15px;font-weight:500;letter-spacing:.01em;text-decoration:none;text-transform:none;background:#1D5D3B;color:#fff !important;border:1px solid #1D5D3B;border-radius:0;cursor:pointer;transition:background-color .15s ease}
html:not(#_):not(#__):not(#___):not(#____) a.cs-btn:hover,html:not(#_):not(#__):not(#___):not(#____) button.cs-btn:hover{background:#24754A;border-color:#24754A}
html:not(#_):not(#__):not(#___):not(#____) a.cs-btn.cs-ghost{background:transparent;color:#111827 !important;border:1px solid rgba(128,128,128,.6)}
html.dark:not(#_):not(#__):not(#___):not(#____) a.cs-btn.cs-ghost,html.theme-dark:not(#_):not(#__):not(#___):not(#____) a.cs-btn.cs-ghost,html[data-theme="dark"]:not(#_):not(#__):not(#___):not(#____) a.cs-btn.cs-ghost{color:#fff !important}
html:not(#_):not(#__):not(#___):not(#____) a.cs-btn.cs-ghost:hover{background:transparent;border-color:currentColor}

.cs-block{margin-top:96px}
html:not(#_):not(#__):not(#___) .cs-h2{font-size:clamp(26px,3.2vw,38px);font-weight:400;line-height:1.2;text-transform:none;letter-spacing:-.01em;margin:0 0 44px}
html:not(#_):not(#__):not(#___) .cs-h3{font-size:22px;font-weight:500;text-transform:none;margin:0 0 28px}

.cs-carousel{position:relative;padding:0 56px}
.cs-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.cs-track::-webkit-scrollbar{display:none}
.cs-card{position:relative;flex:0 0 calc((100% - 48px) / 3);scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;padding:22px 22px 24px;background:rgba(128,128,128,.10);border-radius:18px;text-align:center}
html:not(#_):not(#__):not(#___) a.cs-img{display:flex;align-items:center;justify-content:center;width:100%;height:210px;margin:18px 0 18px;text-decoration:none}
.cs-img img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:normal;border-radius:8px}
html:not(#_):not(#__):not(#___) a.cs-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:46px;font-size:16px;font-weight:500;line-height:1.4;color:inherit !important;text-decoration:none}
html:not(#_):not(#__):not(#___) .cs-price{font-size:18px;font-weight:600;margin:14px 0 20px}
html:not(#_):not(#__):not(#___) .cs-card button.cs-btn{width:100%;margin-top:auto}
.cs-heart{position:absolute;top:16px;right:16px;width:36px;height:36px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.cs-heart svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linejoin:round}
.cs-heart.cs-on svg{fill:#1D5D3B;stroke:#1D5D3B}
.cs-arrow{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;border:1px solid rgba(128,128,128,.4);border-radius:50%;background:transparent;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.cs-arrow:hover{border-color:currentColor}
.cs-arrow svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cs-prev{left:0}.cs-next{right:0}

.cs-pay{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 20px}
.cs-badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:48px;min-width:104px;padding:0 20px;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:10px;color:#111;font-size:17px;font-weight:600;white-space:nowrap}
.cs-badge svg{height:24px;width:auto}
html:not(#_):not(#__):not(#___) .cs-help{font-size:15px;line-height:1.7;opacity:.75;margin:36px auto 0;max-width:560px}
html:not(#_):not(#__):not(#___) .cs-help a{color:#1D5D3B !important;text-decoration:underline;text-underline-offset:3px}
html.dark:not(#_):not(#__):not(#___) .cs-help a,html.theme-dark:not(#_):not(#__):not(#___) .cs-help a,html[data-theme="dark"]:not(#_):not(#__):not(#___) .cs-help a{color:#34D399 !important}

@media (max-width:980px){.cs-card{flex-basis:calc((100% - 24px) / 2)}}
@media (max-width:640px){
  .cs-page{padding:40px 16px 24px}
  .cs-block{margin-top:72px}
  .cs-carousel{padding:0}
  .cs-arrow{display:none}
  .cs-card{flex-basis:78%}
  .cs-actions{flex-direction:column}
  html:not(#_):not(#__):not(#___):not(#____) a.cs-btn,html:not(#_):not(#__):not(#___):not(#____) button.cs-btn{width:100%}
  .cs-badge{min-width:92px;height:44px;padding:0 14px;font-size:15px}
}
/* Плашки платіжних систем: завжди світлий фон і темний текст (у темній темі колір інакше перебивається) */
html:not(#_):not(#__):not(#___):not(#____) .cs-badge{background:#fff !important;color:#111 !important}
html:not(#_):not(#__):not(#___):not(#____) .cs-badge span{color:inherit}

/* Логотип MUVIO всередині візка: зелений на світлій темі, білий на темній */
.cs-ico .cs-logo{fill:#1D5D3B;stroke:none}
html.dark .cs-ico .cs-logo,html.theme-dark .cs-ico .cs-logo,html[data-theme="dark"] .cs-ico .cs-logo{fill:#fff}

/* Тонка лінія візка, щоб гармоніювала з логотипом всередині */
html:not(#_):not(#__):not(#___):not(#____) svg.cs-ico{width:88px;height:88px;stroke-width:.4 !important;stroke-linecap:round;stroke-linejoin:round}
html:not(#_):not(#__):not(#___):not(#____) svg.cs-ico *{stroke-width:.4 !important}
html:not(#_):not(#__):not(#___):not(#____) svg.cs-ico .cs-logo{stroke:none !important}