/* ===========================================================================
   70-cart — the shopping cart, cloned from promo.octemplates.net (oct_promo).
   Measured 2026-08-10 with getComputedStyle against the live reference:
   design/clone/docs/research/octemplates-cart/ (drawer-filled-styles.json).

   Three pieces:
     1. the slide-in cart drawer (.vk-drawer) — right side, 600px, auto-opens
        on add-to-cart, replaces the old bootstrap dropdown mini-cart;
     2. the cart page (#checkout-cart) — white card rows + right rail card,
        replaces the stock bootstrap table;
     3. shared row anatomy (.vk-ci-*) used by both.
   =========================================================================== */

/* --- 0 · header cart button ------------------------------------------------ */
/* the cart count badge is RED on the reference (wishlist/compare stay navy) */
#cart .vk-badge{background:var(--pr-red-color)}
/* the old dropdown rules in 10-header.css keyed on `#cart .dropdown` — gone
   with the dropdown itself; the button is a plain .vk-hdr-stack now */

/* --- 1 · drawer shell ------------------------------------------------------ */
.vk-drawer-backdrop{
  position:fixed;inset:0;z-index:2000;
  background:rgba(18,23,21,.8);            /* --pr-popup-backdrop-bg-light */
  opacity:0;visibility:hidden;
  transition:opacity var(--pr-main-transition),visibility var(--pr-main-transition);
}
body.vk-cartdrawer-open .vk-drawer-backdrop{opacity:1;visibility:visible}
body.vk-cartdrawer-open{overflow:hidden}
/* floating chrome that would sit over the drawer while it is open:
   the mobile bottombar (z1030) and the advisor bubble (z~2^31) */
body.vk-cartdrawer-open .vk-bottombar,
body.vk-cartdrawer-open .os24adv-bubble,
body.vk-cartdrawer-open .os24adv-panel{display:none !important}
.vk-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:2001;
  width:600px;max-width:100vw;
  background:#fff;
  box-shadow:rgba(12,43,106,.05) 0 1px 10px 0;   /* measured on .pr-sidebar-cart */
  transform:translateX(102%);
  transition:transform var(--pr-main-transition);
  display:flex;flex-direction:column;
  font-weight:400;
}
.vk-drawer.open{transform:none}

/* head: 20/700 title + 32px light close (measured: #f0f0f0, r8, 14px icon) */
.vk-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;flex-shrink:0;
}
.vk-drawer-title{font-size:20px;line-height:30px;font-weight:700;color:var(--pr-dark-text-color)}
.vk-drawer-close{
  width:32px;height:32px;flex:0 0 32px;border:0;border-radius:8px;
  background:#f0f0f0;color:var(--pr-dark-text-color);font-size:14px;
  display:grid;place-items:center;cursor:pointer;
  transition:background-color var(--pr-main-transition);
}
.vk-drawer-close:hover{background:var(--pr-light-grey-color)}

/* grey band: running total left, clear-all link right (measured: #f3f3f3,
   16px 24px, total 20/600, link #357af0 14/500 underline) */
.vk-drawer-band{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 24px;background:var(--pr-bg);flex-shrink:0;
}
.vk-drawer-total{font-size:20px;line-height:30px;font-weight:600;color:var(--pr-dark-text-color)}
.vk-drawer-clear{
  font-size:14px;line-height:21px;font-weight:500;
  color:var(--pr-links-color) !important;text-decoration:underline;
  background:none;border:0;padding:0;cursor:pointer;white-space:nowrap;
}
.vk-drawer-clear:hover{color:var(--pr-primary-dark-color) !important}

/* scrollable middle */
.vk-drawer-scroll{flex:1 1 auto;overflow-y:auto;padding:8px 24px 16px;min-height:0}

/* backorder note: same voice as the product page's «Під замовлення» */
.vk-drawer-note{
  font-size:12px;line-height:18px;color:#c99417;font-weight:500;
  margin:12px 0 4px;display:flex;gap:8px;align-items:flex-start;
}
.vk-drawer-note i{margin-top:2px}

/* footer: primary checkout + light view-cart (ref: navy w-100, 12/600, r8) */
/* Height of the drawer's action footer. Declared on :root, not on the footer
   itself — the toast is a body-level sibling, and custom properties inherit
   down the tree, never sideways. Measured 129px at both 390 and 1440. */
:root{--vk-drawer-foot-h:129px}

.vk-drawer-foot{
  padding:16px 24px;border-top:1px solid var(--pr-border);flex-shrink:0;
  display:flex;flex-direction:column;gap:8px;
}

/* The add-to-cart toast (#os24-toast-wrap, os24-ux.js) is fixed at bottom:16px
   right:16px — exactly where the drawer's action footer sits — so it landed on
   top of «Перейти до кошика». Lift it clear while the drawer is open. */
body.vk-cartdrawer-open #os24-toast-wrap{
  bottom:calc(var(--vk-drawer-foot-h, 129px) + 32px);
}

/* empty state (ref: illustration + 18/700 line + primary continue) */
.vk-drawer-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;padding:32px 24px;text-align:center;
}
.vk-drawer-empty-icon{
  width:140px;height:140px;border-radius:50%;background:#e8eefb;
  display:grid;place-items:center;font-size:52px;color:var(--pr-primary-dark-color);
}
.vk-drawer-empty-text{font-size:18px;line-height:27px;font-weight:700;color:var(--pr-dark-text-color)}

/* --- 3 · shared line-item anatomy (drawer + page) -------------------------- */
.vk-ci{
  display:flex;align-items:center;gap:20px;
  padding:16px 0;border-top:1px solid var(--pr-border);
}
.vk-ci:first-child{border-top:0}
.vk-ci-img{flex:0 0 84px;align-self:flex-start;display:flex;justify-content:center}
.vk-ci-img img{width:80px;height:80px;object-fit:contain}
.vk-ci-img .pr-noimg{
  width:80px;height:80px;display:grid;place-items:center;
  background:var(--pr-bg);border-radius:8px;color:var(--pr-grey-color);font-size:24px;
}
.vk-ci-info{position:relative;flex:1 1 auto;min-width:0;padding-right:36px}
.vk-ci-title{font-size:14px;line-height:21px;font-weight:500;margin:0 0 2px}
.vk-ci-title a{color:var(--pr-dark-text-color)}
.vk-ci-title a:hover{color:var(--pr-links-color)}
.vk-ci-meta{font-size:12px;line-height:18px;font-weight:400;color:var(--pr-grey-color)}
.vk-ci-remove{
  position:absolute;top:0;right:0;border:0;background:none;padding:2px;cursor:pointer;
  color:var(--pr-dark-text-color);font-size:16px;line-height:1;
  transition:color var(--pr-main-transition);
}
.vk-ci-remove:hover{color:var(--pr-red-color)}
.vk-ci .vk-pill{margin-top:4px}

/* bottom row: stepper · × unit price · line total
   (measured: qty btns 32×32 #f3f3f3 r8; unit 16/500 grey; total 20/600 dark) */
.vk-ci-bottom{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.vk-ci-qty{display:inline-flex;align-items:stretch;gap:4px}
.vk-ci-qty button{
  width:32px;height:32px;border:0;border-radius:8px;background:var(--pr-bg);
  color:var(--pr-dark-text-color);font-size:14px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  transition:background-color var(--pr-main-transition);
}
.vk-ci-qty button:hover{background:var(--pr-light-grey-color)}
.vk-ci-qty input{
  width:40px;min-height:32px;height:32px;border:0;border-radius:0;padding:0;
  text-align:center;font-size:14px;font-weight:600;color:var(--pr-dark-text-color);
  background:transparent;
}
.vk-ci-qty input:focus{border:0;outline:0;box-shadow:none}
.vk-ci-unit{
  display:inline-flex;align-items:center;gap:8px;
  font-size:16px;line-height:24px;font-weight:500;color:var(--pr-grey-color);
  white-space:nowrap;
}
.vk-ci-unit i{font-size:10px}
.vk-ci-line-total{
  margin-left:auto;font-size:20px;line-height:30px;font-weight:600;
  color:var(--pr-dark-text-color);white-space:nowrap;
}
.vk-ci-min{font-size:12px;line-height:18px;color:var(--pr-red-color);margin-top:4px;width:100%}

/* --- 2 · cart page --------------------------------------------------------- */
#checkout-cart .breadcrumb{
  --bs-breadcrumb-divider:'›';
  font-size:12px;line-height:18px;font-weight:400;margin:16px 0 0;padding:0;
}
#checkout-cart .breadcrumb a{color:var(--pr-links-color)}
#checkout-cart .breadcrumb-item:last-child a{color:var(--pr-grey-color);pointer-events:none}
#checkout-cart .breadcrumb-item+.breadcrumb-item::before{color:var(--pr-grey-color)}
#checkout-cart{padding-bottom:32px}

.vk-cart-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 384px;gap:16px;
  align-items:start;margin-top:16px;
}
.vk-cart-main{background:#fff;border-radius:12px;padding:24px;min-width:0}
.vk-cart-main h1{font-size:24px;line-height:36px;font-weight:700;margin:0 0 4px}
.vk-cart-main h1 .vk-cart-weight{font-weight:700}
.vk-cart-main .vk-hairline{margin:12px 0 0}
.vk-cart-items{display:flex;flex-direction:column}
.vk-cart-items .vk-ci{padding:20px 0}
.vk-cart-items .vk-ci-img{flex:0 0 104px}
.vk-cart-items .vk-ci-img img,.vk-cart-items .vk-ci-img .pr-noimg{width:100px;height:100px}
.vk-cart-items .vk-ci-line-total{font-size:18px;line-height:27px;font-weight:700}
.vk-cart-continue{margin-top:8px;font-size:14px}
.vk-cart-continue a{color:var(--pr-links-color) !important;text-decoration:underline}

/* attention strip (backorder / login-to-see-prices) — informational, not danger */
.vk-cart-attention{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--pr-bg);border-radius:8px;padding:12px 16px;
  font-size:13px;line-height:20px;font-weight:400;color:var(--pr-dark-grey-color);
  margin:16px 0 0;
}
.vk-cart-attention i{color:#c99417;margin-top:3px}

/* right rail */
.vk-cart-rail{
  background:#fff;border-radius:12px;padding:24px;min-width:0;
  position:sticky;top:calc(var(--pr-sticky-offset,0px) + 16px);
}
.vk-cart-rail-title{font-size:16px;line-height:24px;font-weight:700;color:var(--pr-dark-text-color);margin:0}
.vk-cart-rail-hint{font-size:13px;line-height:20px;font-weight:400;color:var(--pr-grey-color);margin:8px 0 0}
/* the modules are stock bootstrap accordion-items — restyle to reference:
   quiet 14/500 rows with a chevron, hairline separators, no borders/boxes */
.vk-cart-modules{margin-top:8px}
.vk-cart-modules .accordion-item{border:0;border-top:1px solid var(--pr-border);background:none}
.vk-cart-modules .accordion-item:first-child{border-top:0}
.vk-cart-modules .accordion-header{margin:0}
.vk-cart-modules .accordion-button{
  background:none;border:0;box-shadow:none;padding:14px 0;
  font-family:inherit;font-size:14px;line-height:21px;font-weight:500;
  color:var(--pr-dark-text-color);
  transition:color var(--pr-main-transition);
}
.vk-cart-modules .accordion-button:hover,
.vk-cart-modules .accordion-button:not(.collapsed){color:var(--pr-primary-dark-color)}
.vk-cart-modules .accordion-button::after{
  filter:grayscale(1);opacity:.55;background-size:14px;width:14px;height:14px;
}
.vk-cart-modules .accordion-body{padding:0 0 16px}
.vk-cart-modules .col-form-label{font-size:12px;font-weight:600;color:var(--pr-dark-text-color)}
.vk-cart-modules .btn-primary{
  background:var(--pr-primary-light-color);border:0;border-radius:8px;color:#fff;
  font-size:13px;font-weight:600;min-height:40px;padding:8px 16px;
}
.vk-cart-modules .btn-primary:hover{background:#44528a}
.vk-cart-modules .btn-danger{
  background:var(--pr-bg);border:0;border-radius:8px;color:var(--pr-red-color);
  font-size:13px;font-weight:600;min-height:40px;padding:8px 16px;
}

/* totals block */
.vk-cart-totals{border-top:1px solid var(--pr-border);margin-top:4px;padding-top:8px}
.vk-cart-total-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:6px 0;font-size:14px;line-height:21px;font-weight:400;color:var(--pr-dark-text-color);
}
.vk-cart-total-row .t{font-weight:400}
.vk-cart-total-row .v{font-weight:500;white-space:nowrap}
.vk-cart-total-row:last-child{padding-top:10px;font-size:16px}
.vk-cart-total-row:last-child .t,.vk-cart-total-row:last-child .v{font-weight:700}
.vk-cart-weight-row{font-size:12px;color:var(--pr-grey-color)}
.vk-cart-weight-row .v{font-weight:400;color:var(--pr-grey-color)}
.vk-cart-checkout{margin-top:16px;height:48px}

/* empty page state (ref: big outline bag + line + primary continue, centred) */
.vk-cart-empty{
  background:#fff;border-radius:12px;margin-top:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:24px;padding:80px 24px;text-align:center;
}
.vk-cart-empty i{font-size:96px;color:var(--pr-primary-dark-color)}
.vk-cart-empty p{font-size:18px;line-height:27px;font-weight:500;color:var(--pr-dark-text-color);margin:0}

/* --- responsive ------------------------------------------------------------ */
@media (max-width:1199px){
  .vk-cart-layout{grid-template-columns:minmax(0,1fr) 340px}
}
@media (max-width:991px){
  .vk-cart-layout{grid-template-columns:1fr}
  .vk-cart-rail{position:static}
}
@media (max-width:575px){
  .vk-drawer{width:100vw}
  .vk-drawer-head,.vk-drawer-band,.vk-drawer-foot{padding-inline:16px}
  .vk-drawer-scroll{padding-inline:16px}
  .vk-drawer-total{font-size:16px}
  .vk-cart-main,.vk-cart-rail{padding:16px}
  .vk-cart-main h1{font-size:20px;line-height:30px}
  .vk-ci{gap:12px}
  .vk-cart-items .vk-ci-img{flex-basis:72px}
  .vk-cart-items .vk-ci-img img,.vk-cart-items .vk-ci-img .pr-noimg{width:68px;height:68px}
  .vk-ci-img{flex-basis:64px}
  .vk-ci-img img,.vk-ci-img .pr-noimg{width:60px;height:60px}
  .vk-ci-unit{font-size:13px}
  .vk-ci-line-total{font-size:16px}
}