/**
 * VSK Woo Cart — Styles
 *
 * Requires variables.css (loaded inline by VOSKA enqueue.php).
 * All colours and spacing come from --vsk-* tokens — no hardcoded values.
 *
 * Module tokens (override per-project in variables.css or a project CSS file):
 *
 *   --vsk-cart--width          Panel width on desktop (default 420px)
 *   --vsk-cart--z-index        Stacking context (default 999999)
 *   --vsk-cart--item-img-w     Thumbnail width  (default 76px)
 *   --vsk-cart--item-img-h     Thumbnail height (default 92px)
 *   --vsk-cart--progress-h     Progress bar track height (default 3px)
 *
 * ─────────────────────────────────────────────────────────────────────────────
 *  TABLE OF CONTENTS
 *
 *  1.  Module tokens
 *  2.  Backdrop
 *  3.  Panel shell (slide-in)
 *  3b. Dark theme
 *  4.  Panel inner layout
 *  5.  Header
 *  6.  Scrollable body
 *  7.  Progress bar
 *  8.  Cart items list
 *  9.  Cart item row
 * 10.  Quantity stepper
 * 11.  Upsells & Promos
 * 12.  Upsell card
 * 13.  Cart footer / totals
 * 14.  Checkout button
 * 15.  Empty state
 * 16.  Variant sheet
 * 17.  Variant form inside sheet
 * 18.  Cart trigger button
 * 19.  Loading / transition states
 * 20.  Mobile overrides (< 600px)
 * ─────────────────────────────────────────────────────────────────────────────
 */


/* ─── 1. MODULE TOKENS ───────────────────────────────────────────────────── */

:root {
	--vsk-cart--width:        420px;
	--vsk-cart--z-index:      999999;
	--vsk-cart--item-img-w:   76px;
	--vsk-cart--item-img-h:   92px;
	--vsk-cart--progress-h:   3px;

	/* Theme origin — capture inherited values before any panel-level
	   overrides so dark/light theme swap is non-circular. */
	--_vsk-cart-bg:     var(--vsk-clr--background);
	--_vsk-cart-text:   var(--vsk-clr--text);
	--_vsk-cart-faded:  var(--vsk-clr--text-faded);
	--_vsk-cart-border: var(--vsk-clr--border);

	/* Border shades — derived from --vsk-clr--border at fixed opacities.
	   100 = subtle dividers, 200 = section borders, 300 = interactive borders. */
	--vsk-clr--border-100: rgba(from var(--vsk-clr--border) r g b / 0.1);
	--vsk-clr--border-200: rgba(from var(--vsk-clr--border) r g b / 0.15);
	--vsk-clr--border-300: rgba(from var(--vsk-clr--border) r g b / 0.3);

	/* Text hover — subtle bg tint for interactive elements on hover. */
	--vsk-clr--text-hover: rgba(from var(--vsk-clr--text) r g b / 0.06);
}


/* ─── 2. BACKDROP ────────────────────────────────────────────────────────── */

.vsk-cart-backdrop {
	position:   fixed;
	inset:      0;
	z-index:    calc(var(--vsk-cart--z-index) - 1);
	background: rgba(from var(--vsk-clr--text) r g b / 0.35);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity:    0;
	pointer-events: none;
	transition: opacity var(--vsk-trns--duration) var(--vsk-trns--ease);
}

.vsk-cart-backdrop.is-open {
	opacity:        1;
	pointer-events: auto;
}


/* ─── 3. PANEL SHELL ─────────────────────────────────────────────────────── */

.vsk-cart__panel {
	position:   fixed;
	top:        0;
	right:      0;
	bottom:     0;
	width:      var(--vsk-cart--width);
	z-index:    var(--vsk-cart--z-index);
	background: var(--vsk-clr--background, #fffefc);
	overflow:   hidden;        /* clips variant sheet; focus({ preventScroll: true })
	                              in JS prevents scrollLeft shifts               */

	transform:  translateX(100%);
	transition: transform var(--vsk-trns--duration) var(--vsk-trns--ease);

	display:        flex;
	flex-direction: column;
}

.vsk-cart__panel.is-open {
	transform: translateX(0);
}

/* ─── 3b. DARK THEME ────────────────────────────────────────────────────── */

/*
 * Inverts panel colors by swapping --vsk-clr--background ↔ --vsk-clr--text.
 * Uses --_vsk-cart-* origin variables defined on :root (parent scope) to
 * avoid circular CSS custom property references.
 *
 * Activated via VSK_CART_THEME = 'dark' in config.php → adds class
 * .vsk-cart--dark on #vsk-cart-panel.
 */

.vsk-cart--dark {
	--vsk-clr--background:  var(--_vsk-cart-text);
	--vsk-clr--text:        var(--_vsk-cart-bg);
	--vsk-clr--text-faded:  rgba(from var(--_vsk-cart-bg) r g b / 0.6);
	--vsk-clr--border:      var(--_vsk-cart-border);
	--vsk-clr--border-100:  rgba(from var(--_vsk-cart-border) r g b / 0.15);
	--vsk-clr--border-200:  rgba(from var(--_vsk-cart-border) r g b / 0.25);
	--vsk-clr--border-300:  rgba(from var(--_vsk-cart-border) r g b / 0.4);
	--vsk-clr--text-hover:  rgba(from var(--_vsk-cart-bg) r g b / 0.08);
}

/* Prevent body scroll while panel is open */
body.vsk-cart-open {
	overflow: hidden;
}


/* ─── 4. PANEL INNER LAYOUT ──────────────────────────────────────────────── */

.vsk-cart__panel-inner {
	display:        flex;
	flex-direction: column;
	height:         100%;
	overflow:       hidden;
}


/* ─── 5. HEADER ──────────────────────────────────────────────────────────── */

.vsk-cart__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-shrink:     0;
	padding:         20px 24px 16px;
	border-bottom:   var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-200);
}

.vsk-cart__header-left {
	display:     flex;
	align-items: center;
	gap:         10px;
}

.vsk-cart__title {
	font-family:    var(--vsk-font--family-heading);
	font-size:      var(--vsk-font--size-text);
	font-weight:    var(--vsk-font--wgt-text-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var(--vsk-clr--text-faded);
	margin:         0;
}

.vsk-cart__count {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       20px;
	height:          20px;
	padding-inline:  5px;
	background:      var(--vsk-clr--accent);
	color:           var(--vsk-clr--background);
	border-radius:   10px;
	font-size:       11px;
	font-weight:     var(--vsk-font--wgt-text-bold);
	line-height:     1;
	transition:      background var(--vsk-trns--duration) var(--vsk-trns--ease);
}

.vsk-cart__close {
	display:     flex;
	align-items: center;
	justify-content: center;
	width:       32px;
	height:      32px;
	border:      var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-200);
	background:  transparent;
	cursor:      pointer;
	color:       var(--vsk-clr--text);
	transition:  background var(--vsk-trns--duration) var(--vsk-trns--ease),
	             border-color var(--vsk-trns--duration) var(--vsk-trns--ease);
	flex-shrink: 0;
}

.vsk-cart__close:hover {
	background:   var(--vsk-clr--text-hover);
	border-color: var(--vsk-clr--border);
}

.vsk-cart__close:focus-visible {
	outline:        2px solid var(--vsk-clr--accent);
	outline-offset: 2px;
}


/* ─── 6. SCROLLABLE BODY ─────────────────────────────────────────────────── */

.vsk-cart__body {
	flex:       1;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.vsk-cart__body::-webkit-scrollbar {
	width: 3px;
}
.vsk-cart__body::-webkit-scrollbar-track {
	background: transparent;
}
.vsk-cart__body::-webkit-scrollbar-thumb {
	background:    var(--vsk-clr--border-200);
	border-radius: 2px;
}


/* ─── 7. PROGRESS BAR ────────────────────────────────────────────────────── */

.vsk-cart__progress {
	padding: 14px 24px 20px;
	border-bottom: var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-100);
}

.vsk-cart__progress-label {
	font-size:   var(--vsk-font--size-text-s);
	font-weight: var(--vsk-font--wgt-text);
	color:       var(--vsk-clr--text-faded);
	margin:      0 0 8px;
	line-height: var(--vsk-font--lh-text-s);
}

.vsk-cart__progress-label strong {
	font-weight: var(--vsk-font--wgt-text-bold);
	color:       var(--vsk-clr--text);
}

.vsk-cart__progress--achieved .vsk-cart__progress-label {
	color:       var(--vsk-clr--text);
	font-weight: var(--vsk-font--wgt-text-bold);
}

.vsk-cart__progress-track {
	position:      relative;
	height:        var(--vsk-cart--progress-h);
	background:    var(--vsk-clr--border-100);
	overflow:      visible;
}

.vsk-cart__progress-fill {
	height:     100%;
	width:      var(--_fill, 0%);
	background: var(--vsk-clr--accent);
	transition: width 0.6s var(--vsk-trns--ease);
	position:   relative;
}

/* Dot indicator at fill end */
.vsk-cart__progress-fill::after {
	content:          '';
	position:         absolute;
	right:            -4px;
	top:              50%;
	transform:        translateY(-50%);
	width:            9px;
	height:           9px;
	border-radius:    50%;
	background:       var(--vsk-clr--accent);
	opacity:          1;
	transition:       opacity 0.3s;
}

.vsk-cart__progress--achieved .vsk-cart__progress-fill::after {
	opacity: 0;
}

/* Milestone marker at 100% */
.vsk-cart__progress-track::after {
	content:       '';
	position:      absolute;
	right:         0;
	top:           50%;
	transform:     translateY(-50%);
	width:         9px;
	height:        9px;
	border-radius: 50%;
	border:        2px solid var(--vsk-clr--accent);
	background:    var(--vsk-clr--background);
}

.vsk-cart__progress--achieved .vsk-cart__progress-track::after {
	background: var(--vsk-clr--accent);
}


/* ─── 8. CART ITEMS LIST ─────────────────────────────────────────────────── */

.vsk-cart__items {
	list-style: none;
	margin:     0;
	padding:    0;
}


/* ─── 9. CART ITEM ROW ───────────────────────────────────────────────────── */

.vsk-cart-item {
	display:       flex;
	gap:           14px;
	padding:       16px 24px;
	border-bottom: var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-100);
	position:      relative;
	transition:    opacity var(--vsk-trns--duration) var(--vsk-trns--ease);
}

.vsk-cart-item:last-child {
	border-bottom: none;
}

/* Optimistic remove animation */
.vsk-cart-item.is-removing {
	opacity:        0.4;
	pointer-events: none;
}

/* Qty update loading */
.vsk-cart-item.is-updating .vsk-cart-item__qty {
	opacity:        0.5;
	pointer-events: none;
}

/* Thumbnail */
.vsk-cart-item__thumb {
	display:         block;
	width:           var(--vsk-cart--item-img-w);
	min-width:       var(--vsk-cart--item-img-w);
	height:          var(--vsk-cart--item-img-h);
	overflow:        hidden;
	flex-shrink:     0;
	text-decoration: none;
}

.vsk-cart-item__img,
.vsk-cart-item__img--placeholder {
	width:       100%;
	height:      100%;
	object-fit:  cover;
	display:     block;
}

.vsk-cart-item__img--placeholder {
	background: var(--vsk-clr--border-100);
}

/* Info column */
.vsk-cart-item__info {
	flex:           1;
	display:        flex;
	flex-direction: column;
	gap:            4px;
	min-width:      0;
}

.vsk-cart-item__name {
	font-size:       var(--vsk-font--size-text-s);
	font-weight:     var(--vsk-font--wgt-text-bold);
	color:           var(--vsk-clr--text);
	text-decoration: none;
	line-height:     var(--vsk-font--lh-text-s);
	white-space:     nowrap;
	overflow:        hidden;
	text-overflow:   ellipsis;
}

.vsk-cart-item__name:hover {
	color: var(--vsk-clr--accent);
}

.vsk-cart-item__attrs {
	font-size:   var(--vsk-font--size-text-s);
	font-weight: var(--vsk-font--wgt-text);
	color:       var(--vsk-clr--text-faded);
	margin:      0;
	display:     flex;
	align-items: center;
	gap:         6px;
	flex-wrap:   wrap;
}

/* "Zmień" variant button */
.vsk-cart-item__var-btn {
	font-size:      var(--vsk-font--size-text-s);
	font-weight:    var(--vsk-font--wgt-text-bold);
	color:          var(--vsk-clr--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	background:     transparent;
	border:         none;
	padding:        0;
	cursor:         pointer;
	line-height:    inherit;
	transition:     color var(--vsk-trns--duration) var(--vsk-trns--ease);
}

.vsk-cart-item__var-btn:hover {
	color: var(--vsk-clr--text);
}

.vsk-cart-item__var-link {
	font-size:       var(--vsk-font--size-text-s);
	font-weight:     var(--vsk-font--wgt-text-bold);
	color:           var(--vsk-clr--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Actions row */
.vsk-cart-item__actions {
	display:     flex;
	align-items: center;
	gap:         8px;
	margin-top:  auto;
	padding-top: 8px;
}

/* Price */
.vsk-cart-item__price {
	font-size:   var(--vsk-font--size-text-s);
	font-weight: var(--vsk-font--wgt-text-bold);
	color:       var(--vsk-clr--text);
	margin-left: auto;
	white-space: nowrap;
}

/* Remove button */
.vsk-cart-item__remove {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           22px;
	height:          22px;
	background:      transparent;
	border:          none;
	cursor:          pointer;
	color:           var(--vsk-clr--text-faded);
	padding:         0;
	flex-shrink:     0;
	transition:      color var(--vsk-trns--duration) var(--vsk-trns--ease);
}

.vsk-cart-item__remove:hover {
	color: var(--vsk-clr--text);
}

/* Hidden variation form wrapper — hidden by default, shown only when
 * cloned into the variant sheet by JS (the clone gets display:block via
 * the rule below). The [hidden] attribute alone isn't enough because CSS
 * specificity would override it; explicit display:none is safest. */
.vsk-cart-item__var-form-wrap {
	display: none;
}

/* When the JS clones the wrapper into the sheet body it removes [hidden]
 * but the class remains, so we override display here. */
#vsk-cart-var-sheet .vsk-cart-item__var-form-wrap {
	display: block;
}


/* ─── 10. QUANTITY STEPPER ───────────────────────────────────────────────── */

.vsk-cart-item__qty {
	display:  flex;
	align-items: center;
	border:   var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-300);
}

.vsk-cart-item__qty-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           28px;
	height:          28px;
	background:      transparent;
	border:          none;
	cursor:          pointer;
	color:           var(--vsk-clr--text-faded);
	padding:         0;
	transition:      background var(--vsk-trns--duration) var(--vsk-trns--ease),
	                 color      var(--vsk-trns--duration) var(--vsk-trns--ease);
}

.vsk-cart-item__qty-btn:hover:not(:disabled) {
	background: var(--vsk-clr--text-hover);
	color:      var(--vsk-clr--text);
}

.vsk-cart-item__qty-btn:disabled {
	opacity: 0.35;
	cursor:  not-allowed;
}

.vsk-cart-item__qty-input {
	width:       28px;
	height:      28px;
	border:      none;
	border-inline: var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-200);
	background:  transparent;
	text-align:  center;
	font-family: var(--vsk-font--family-text);
	font-size:   var(--vsk-font--size-text-s);
	font-weight: var(--vsk-font--wgt-text-bold);
	color:       var(--vsk-clr--text);
	padding:     0;

	/* Hide browser spin buttons */
	-moz-appearance: textfield;
}
.vsk-cart-item__qty-input::-webkit-inner-spin-button,
.vsk-cart-item__qty-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
}
.vsk-cart-item__qty-input:focus {
	outline: none;
}


/* ─── 11. UPSELLS & PROMOS ───────────────────────────────────────────────── */

.vsk-cart__upsells,
.vsk-cart__promos {
	padding:       0 0 4px;
	border-top:    var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-100);
	flex-shrink:   0;
}

.vsk-cart__upsells-head,
.vsk-cart__promos-head {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         14px 24px 10px;
}

.vsk-cart__upsells-title,
.vsk-cart__promos-title {
	font-size:      var(--vsk-font--size-text-s);
	font-weight:    var(--vsk-font--wgt-text-bold);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color:          var(--vsk-clr--text-faded);
	margin:         0;
}

.vsk-cart__upsells-nav,
.vsk-cart__promos-nav {
	display: flex;
	gap:     4px;
}

.vsk-cart__upsells-btn,
.vsk-cart__promos-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           26px;
	height:          26px;
	border:          var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-200);
	background:      transparent;
	cursor:          pointer;
	color:           var(--vsk-clr--text);
	transition:      background var(--vsk-trns--duration) var(--vsk-trns--ease);
}

.vsk-cart__upsells-btn:hover:not(:disabled),
.vsk-cart__promos-btn:hover:not(:disabled) {
	background: var(--vsk-clr--text-hover);
}

.vsk-cart__upsells-btn:disabled,
.vsk-cart__promos-btn:disabled {
	opacity: 0.3;
	cursor:  not-allowed;
}

.vsk-cart__upsells-swiper,
.vsk-cart__promos-swiper {
	overflow: hidden;
	padding:  0 24px 14px;
}

.vsk-cart__upsells-list,
.vsk-cart__promos-list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-wrap:  nowrap;
}


/* ─── 12. UPSELL / PROMO CARD ────────────────────────────────────────────── */

.vsk-cart-upsell {
	width:          150px;
	flex-shrink:    0;
	display:        flex;
	flex-direction: column;
	gap:            0;
}

.vsk-cart-upsell__thumb {
	display:         block;
	width:           100%;
	aspect-ratio:    3 / 4;
	overflow:        hidden;
	text-decoration: none;
	flex-shrink:     0;
	margin-bottom:   7px;
}

.vsk-cart-upsell__img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.4s var(--vsk-trns--ease);
}

.vsk-cart-upsell__thumb:hover .vsk-cart-upsell__img {
	transform: scale(1.04);
}

.vsk-cart-upsell__info {
	flex:           1;
	display:        flex;
	flex-direction: column;
	gap:            3px;
	margin-bottom:  8px;
}

.vsk-cart-upsell__name {
	font-size:       var(--vsk-font--size-text-s);
	font-weight:     var(--vsk-font--wgt-text-bold);
	color:           var(--vsk-clr--text);
	text-decoration: none;
	line-height:     1.35;
	display:         -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:        hidden;
}

.vsk-cart-upsell__price {
	font-size:   var(--vsk-font--size-text-s);
	font-weight: var(--vsk-font--wgt-text);
	color:       var(--vsk-clr--text-faded);
}

.vsk-cart-upsell__add {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             4px;
	width:           100%;
	height:          28px;
	border:          var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border);
	background:      transparent;
	font-family:     var(--vsk-font--family-text);
	font-size:       11px;
	font-weight:     var(--vsk-font--wgt-text-bold);
	letter-spacing:  0.03em;
	color:           var(--vsk-clr--text);
	cursor:          pointer;
	text-decoration: none;
	transition:      background var(--vsk-trns--duration) var(--vsk-trns--ease),
	                 color      var(--vsk-trns--duration) var(--vsk-trns--ease);
}

.vsk-cart-upsell__add:hover:not(:disabled) {
	background: var(--vsk-clr--text);
	color:      var(--vsk-clr--background);
}

.vsk-cart-upsell__add:disabled,
.vsk-cart-upsell__add.is-adding {
	opacity:        0.5;
	pointer-events: none;
}

.vsk-cart-upsell__add--link {
	border-color: var(--vsk-clr--border-300);
}


/* ─── 12b. PROMO CARD (horizontal layout) ────────────────────────────────── */

.vsk-cart-promo {
	display:      flex;
	align-items:  center;
	gap:          12px;
	flex-shrink:  0;
	padding:      10px 0;
}

.vsk-cart-promo__thumb {
	display:     block;
	width:       56px;
	height:      56px;
	flex-shrink: 0;
	overflow:    hidden;
	text-decoration: none;
}

.vsk-cart-promo__img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.4s var(--vsk-trns--ease);
}

.vsk-cart-promo__thumb:hover .vsk-cart-promo__img {
	transform: scale(1.06);
}

.vsk-cart-promo__info {
	flex:       1;
	min-width:  0;
	display:    flex;
	flex-direction: column;
	gap:        2px;
}

.vsk-cart-promo__name {
	font-size:       var(--vsk-font--size-text-s);
	font-weight:     var(--vsk-font--wgt-text-bold);
	color:           var(--vsk-clr--text);
	text-decoration: none;
	line-height:     1.35;
	white-space:     nowrap;
	overflow:        hidden;
	text-overflow:   ellipsis;
}

.vsk-cart-promo__price {
	font-size:   var(--vsk-font--size-text-s);
	font-weight: var(--vsk-font--wgt-text);
	color:       var(--vsk-clr--text-faded);
	line-height: 1.3;
}

.vsk-cart-promo__price del {
	color:           var(--vsk-clr--text-faded);
	text-decoration: line-through;
	margin-right:    4px;
	opacity:         0.6;
}

.vsk-cart-promo__price ins {
	text-decoration: none;
	color:           var(--vsk-clr--text);
	font-weight:     var(--vsk-font--wgt-text-bold);
}

.vsk-cart-promo__add {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           32px;
	height:          32px;
	flex-shrink:     0;
	border:          var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border);
	background:      transparent;
	color:           var(--vsk-clr--text);
	cursor:          pointer;
	text-decoration: none;
	transition:      background var(--vsk-trns--duration) var(--vsk-trns--ease),
	                 color      var(--vsk-trns--duration) var(--vsk-trns--ease);
}

.vsk-cart-promo__add:hover:not(:disabled) {
	background: var(--vsk-clr--text);
	color:      var(--vsk-clr--background);
}

.vsk-cart-promo__add:disabled,
.vsk-cart-promo__add.is-adding {
	opacity:        0.5;
	pointer-events: none;
}


/* ─── 12c. PEEK BAR (accordion rows above footer) ───────────────────────── */

/*
 * Full-width section bars that appear above the footer when upsells/promos
 * sections are scrolled below the visible area. Clicking a bar smooth-scrolls
 * to the corresponding section. Bars stack in source order (upsells, promos).
 */

.vsk-cart__peek-bar {
	flex-shrink: 0;
	display:     none;
	flex-direction: column;
	border-top:  var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-200);
}

.vsk-cart__peek-bar.is-visible {
	display: flex;
}

.vsk-cart__peek-tab {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	width:           100%;
	padding:         10px 24px;
	border:          none;
	border-bottom:   var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-100);
	background:      var(--vsk-clr--background);
	font-family:     var(--vsk-font--family-text);
	font-size:       11px;
	font-weight:     var(--vsk-font--wgt-text-bold);
	letter-spacing:  0.05em;
	text-transform:  uppercase;
	color:           var(--vsk-clr--text-faded);
	cursor:          pointer;
	transition:      background var(--vsk-trns--duration) var(--vsk-trns--ease);
}

.vsk-cart__peek-tab:last-child {
	border-bottom: none;
}

.vsk-cart__peek-tab:hover {
	background: var(--vsk-clr--text-hover);
}

/* Down chevron */
.vsk-cart__peek-tab::after {
	content:      '';
	display:      block;
	width:        8px;
	height:       8px;
	border-right: 1.5px solid var(--vsk-clr--text-faded);
	border-bottom: 1.5px solid var(--vsk-clr--text-faded);
	transform:    rotate(45deg);
	flex-shrink:  0;
	margin-top:   -2px;
}

.vsk-cart__peek-tab[hidden] {
	display: none;
}


/* ─── 13. CART FOOTER / TOTALS ───────────────────────────────────────────── */

.vsk-cart__footer {
	flex-shrink:  0;
	padding:      16px 24px 20px;
	border-top:   var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-200);
	background:   var(--vsk-clr--background);
}

/* Body breakdown — totals inside scrollable area (mobile only) */
.vsk-cart__body-breakdown {
	display: none;   /* Hidden on desktop — shown via mobile breakpoint */
	padding: 0 24px 8px;
	border-top: var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-200);
	margin-top: 4px;
	padding-top: 12px;
}

/* Footer breakdown — totals inside sticky footer (desktop only) */
.vsk-cart__footer-breakdown {
	margin-bottom: 12px;
}

/* Footer bar — contains Łącznie + CTA */
.vsk-cart__footer-bar {}

/* Total display (inside footer-bar) */
.vsk-cart__footer-total {
	display:         flex;
	align-items:     baseline;
	justify-content: space-between;
	border-top:      var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-200);
	margin-top:      4px;
	padding-top:     10px;
}

.vsk-cart__footer-total-label {
	font-size:   var(--vsk-font--size-text);
	font-weight: var(--vsk-font--wgt-text-bold);
	color:       var(--vsk-clr--text);
}

.vsk-cart__footer-total-value {
	font-size:   var(--vsk-font--size-text);
	font-weight: var(--vsk-font--wgt-text-bold);
	color:       var(--vsk-clr--text);
}

.vsk-cart__totals {
	margin-bottom: 0;
}

.vsk-cart__totals-row {
	display:         flex;
	align-items:     baseline;
	justify-content: space-between;
	margin-bottom:   5px;
}

.vsk-cart__totals-row:last-child {
	margin-bottom: 0;
}

.vsk-cart__totals-label {
	font-size:   var(--vsk-font--size-text-s);
	font-weight: var(--vsk-font--wgt-text);
	color:       var(--vsk-clr--text-faded);
}

.vsk-cart__totals-value {
	font-size:   var(--vsk-font--size-text-s);
	font-weight: var(--vsk-font--wgt-text-bold);
	color:       var(--vsk-clr--text);
}

.vsk-cart__totals-shipping {
	font-size:   var(--vsk-font--size-text-s);
	font-weight: var(--vsk-font--wgt-text);
	color:       var(--vsk-clr--text-faded);
}

.vsk-cart__totals-shipping strong {
	font-weight: var(--vsk-font--wgt-text-bold);
	color:       var(--vsk-clr--accent);
}

/* ─── 14. CHECKOUT BUTTON ───────────────────────────────────────────────── */

.vsk-cart__checkout-btn {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	width:           100%;
	height:          50px;
	padding-inline:  20px;
	background:      var(--vsk-clr--text);
	color:           var(--vsk-clr--background);
	border:          none;
	cursor:          pointer;
	text-decoration: none;
	font-family:     var(--vsk-font--family-button);
	font-size:       var(--vsk-font--size-btn);
	font-weight:     var(--vsk-font--wgt-btn);
	letter-spacing:  0.06em;
	text-transform:  uppercase;
	transition:      filter var(--vsk-trns--duration) var(--vsk-trns--ease);
	margin-top:      14px;
}

.vsk-cart__checkout-btn:hover {
	filter: brightness(var(--vsk-btn--hover-brightness));
}

.vsk-cart__checkout-btn--disabled {
	opacity:        0.35;
	pointer-events: none;
}


/* ─── 15. EMPTY STATE ────────────────────────────────────────────────────── */

.vsk-cart__empty {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             20px;
	padding:         48px 24px;
	text-align:      center;
}

.vsk-cart__empty-text {
	font-size:   var(--vsk-font--size-text-s);
	font-weight: var(--vsk-font--wgt-text);
	color:       var(--vsk-clr--text-faded);
	margin:      0;
}


/* ─── 16. VARIANT SHEET ──────────────────────────────────────────────────── */

/*
 * The sheet is an absolutely-positioned layer inside #vsk-cart-panel.
 * position:fixed would be broken by the panel's transform/overflow context.
 * overflow:hidden on the panel clips the sheet during slide animation.
 */

.vsk-cart__var-sheet {
	position:   absolute;
	inset:      0;
	z-index:    1;
	background: var(--vsk-clr--background, #fffefc);
	transform:  translateX(100%);
	transition: transform var(--vsk-trns--duration) var(--vsk-trns--ease);

	display:        flex;
	flex-direction: column;
}

.vsk-cart__var-sheet.is-open {
	transform: translateX(0);
}

.vsk-cart__var-sheet-inner {
	display:        flex;
	flex-direction: column;
	height:         100%;
}

.vsk-cart__var-sheet-head {
	display:     flex;
	align-items: center;
	gap:         12px;
	flex-shrink: 0;
	padding:     20px 24px 16px;
	border-bottom: var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-200);
}

.vsk-cart__var-back {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           32px;
	height:          32px;
	background:      transparent;
	border:          var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-200);
	cursor:          pointer;
	color:           var(--vsk-clr--text);
	flex-shrink:     0;
	transition:      background var(--vsk-trns--duration) var(--vsk-trns--ease);
}

.vsk-cart__var-back:hover {
	background: var(--vsk-clr--text-hover);
}

.vsk-cart__var-sheet-title {
	font-size:      var(--vsk-font--size-text-s);
	font-weight:    var(--vsk-font--wgt-text-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color:          var(--vsk-clr--text-faded);
	margin:         0;
}

.vsk-cart__var-sheet-body {
	flex:       1;
	overflow-y: auto;
	padding:    20px 24px;
}

.vsk-cart__var-sheet-foot {
	flex-shrink: 0;
	padding:     16px 24px 20px;
	border-top:  var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-200);
}

.vsk-cart__var-confirm {
	width:      100%;
	background: var(--vsk-clr--text);
	color:      var(--vsk-clr--background);
	border:     none;
}

.vsk-cart__var-confirm.vsk-btn-primary--dark {
	background: var(--vsk-clr--text);
	color:      var(--vsk-clr--background);
}

.vsk-cart__var-confirm:disabled,
.vsk-cart__var-confirm[aria-disabled="true"] {
	opacity:        0.35;
	pointer-events: none;
}


/* ─── 16b. SHEET TOAST NOTIFICATIONS ────────────────────────────────────── */

.vsk-cart__var-sheet-toast {
	padding:        10px 14px;
	margin-bottom:  12px;
	border-left:    2.5px solid;
	font-size:      var(--vsk-font--size-text-s);
	line-height:    1.45;
}

.vsk-cart__var-sheet-toast[hidden] {
	display: none;
}

.vsk-cart__var-sheet-toast--error {
	background:   rgba(from var(--vsk-clr--danger) r g b / 0.06);
	border-color: var(--vsk-clr--danger);
	color:        var(--vsk-clr--danger);
}

.vsk-cart__var-sheet-toast--warning {
	background:   rgba(from var(--vsk-clr--warning) r g b / 0.08);
	border-color: var(--vsk-clr--warning);
	color:        var(--vsk-clr--warning);
}


/* ─── 17. SHEET PRODUCT INFO ───────────────────────────────────────────── */

/*
 * Product name, price, stock status, and divider shown above the variation
 * form. Price and stock update reactively via JS on found_variation events.
 */

.vsk-cart__var-sheet-product {
	margin-bottom: 16px;
}

.vsk-cart__var-sheet-name {
	font-size:      var(--vsk-font--size-text);
	font-weight:    var(--vsk-font--wgt-text-bold);
	color:          var(--vsk-clr--text);
	line-height:    1.35;
}

.vsk-cart__var-sheet-name:empty {
	display: none;
}

.vsk-cart__var-sheet-meta {
	display:     flex;
	align-items: center;
	justify-content: space-between;
	gap:         12px;
	min-height:  24px;
	margin-top:  6px;
}

/* Hide meta row when both children are empty (no variation selected yet) */
.vsk-cart__var-sheet-price:empty ~ .vsk-cart__var-sheet-stock:empty,
.vsk-cart__var-sheet-meta:has(.vsk-cart__var-sheet-price:empty):has(.vsk-cart__var-sheet-stock:empty) {
	display: none;
}

.vsk-cart__var-sheet-price {
	font-size:   var(--vsk-font--size-text);
	font-weight: var(--vsk-font--wgt-text-bold);
	color:       var(--vsk-clr--text);
	line-height: 1;
}

/* WC sale price: old price (del) + new price (ins) */
.vsk-cart__var-sheet-price del {
	font-weight:     var(--vsk-font--wgt-text);
	color:           var(--vsk-clr--text-faded);
	text-decoration: line-through;
	margin-right:    6px;
	font-size:       0.9em;
}

.vsk-cart__var-sheet-price ins {
	text-decoration: none;
}

/* Stock status with dot pseudo-element */
.vsk-cart__var-sheet-stock {
	font-size:       11px;
	font-weight:     var(--vsk-font--wgt-text-bold);
	letter-spacing:  0.03em;
	display:         flex;
	align-items:     center;
	gap:             5px;
	flex-shrink:     0;
}

.vsk-cart__var-sheet-stock:empty {
	display: none;
}

.vsk-cart__var-sheet-stock::before {
	content:       '';
	display:       inline-block;
	width:         6px;
	height:        6px;
	border-radius: 50%;
	flex-shrink:   0;
	background:    currentColor;
}

.vsk-cart__var-sheet-stock--in-stock    { color: var(--vsk-clr--success); }
.vsk-cart__var-sheet-stock--out-of-stock { color: var(--vsk-clr--danger); }
.vsk-cart__var-sheet-stock--low-stock   { color: var(--vsk-clr--warning); }

.vsk-cart__var-sheet-divider {
	height:     0.5px;
	background: var(--vsk-clr--border-200);
	margin-top: 16px;
}


/* ─── 18. VARIANT FORM INSIDE SHEET ─────────────────────────────────────── */

/*
 * Styles for the cloned WC .variations_form inside the variant sheet.
 * Targets the WC <table class="variations"> structure.
 * Own swatch buttons (.vsk-var-swatch) overlay the native <select> elements
 * so the UI is consistent everywhere — no third-party swatches plugin needed.
 */

.vsk-cart__var-sheet-body .variations_form {
	width: 100%;
}

.vsk-cart__var-sheet-body .variations {
	width:           100%;
	border-collapse: separate;
	border-spacing:  0;
}

/* Stack label above value (override table layout) */
.vsk-cart__var-sheet-body .variations,
.vsk-cart__var-sheet-body .variations tbody,
.vsk-cart__var-sheet-body .variations tr,
.vsk-cart__var-sheet-body .variations td {
	display: block;
}

.vsk-cart__var-sheet-body .variations tr {
	margin-bottom: 14px;
}

.vsk-cart__var-sheet-body .variations .label {
	padding: 0 0 8px;
}

.vsk-cart__var-sheet-body .variations .label label {
	font-size:      var(--vsk-font--size-text-s);
	font-weight:    var(--vsk-font--wgt-text-bold);
	color:          var(--vsk-clr--text-faded);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor:         default;
	display:        block;
}

.vsk-cart__var-sheet-body .variations .value {
	padding: 0;
}

/* Native <select> — visually hidden when swatches are rendered, but still
   functional for WC variation form logic and accessible to screen readers. */
.vsk-cart__var-sheet-body .variations .value select {
	width:          100%;
	height:         40px;
	padding-inline: 12px;
	border:         var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-300);
	background:     var(--vsk-clr--background);
	font-family:    var(--vsk-font--family-text);
	font-size:      var(--vsk-font--size-text-s);
	color:          var(--vsk-clr--text);
	appearance:     none;
	cursor:         pointer;
}

.vsk-cart__var-sheet-body .variations .value select:focus {
	outline:       2px solid var(--vsk-clr--accent);
	outline-offset: -1px;
}

/* SR-only: hides native <select> visually when swatch buttons are present,
   keeps it in the DOM for WC logic + screen readers. */
.vsk-cart__var-sheet-body .vsk-sr-only {
	position:  absolute;
	width:     1px;
	height:    1px;
	margin:    -1px;
	padding:   0;
	overflow:  hidden;
	clip:      rect(0, 0, 0, 0);
	border:    0;
}

/* ─── Swatch buttons (own UI, no third-party dependency) ──────────── */

.vsk-var-swatches {
	display:   flex;
	flex-wrap: wrap;
	gap:       6px;
	padding:   0;
}

.vsk-var-swatch {
	display:        inline-flex;
	align-items:    center;
	justify-content: center;
	min-width:      40px;
	height:         36px;
	padding-inline: 12px;
	border:         var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-300);
	background:     var(--vsk-clr--background);
	font-family:    var(--vsk-font--family-text);
	font-size:      var(--vsk-font--size-text-s);
	color:          var(--vsk-clr--text);
	cursor:         pointer;
	transition:     border-color 0.15s var(--vsk-trns--ease),
	                color 0.15s var(--vsk-trns--ease),
	                background-color 0.15s var(--vsk-trns--ease);
}

.vsk-var-swatch:hover {
	border-color: var(--vsk-clr--text);
}

.vsk-var-swatch.is-active {
	border-color:    var(--vsk-clr--text);
	background:      var(--vsk-clr--text);
	color:           var(--vsk-clr--background);
}

.vsk-var-swatch.is-unavailable,
.vsk-var-swatch:disabled {
	opacity:         0.2;
	cursor:          not-allowed;
	pointer-events:  none;
}

/* Out of stock — variant exists but no stock. Clickable so user sees
   "Niedostępny" in stock status. Diagonal line signals unavailability. */
.vsk-var-swatch.is-oos {
	opacity:  0.4;
	position: relative;
}

.vsk-var-swatch.is-oos::after {
	content:    '';
	position:   absolute;
	top:        50%;
	left:       4px;
	right:      4px;
	height:     0.5px;
	background: currentColor;
	transform:  rotate(-12deg);
}

/* When OOS swatch is selected — full opacity, line adapts to inverted bg */
.vsk-var-swatch.is-oos.is-active {
	opacity: 1;
}

.vsk-var-swatch.is-oos.is-active::after {
	background: var(--vsk-clr--background);
}


/* ─── 19. CART TRIGGER BUTTON ────────────────────────────────────────────── */

.vsk-cart-trigger {
	position:    relative;
	display:     inline-flex;
	align-items: center;
	justify-content: center;
	background:  transparent;
	border:      none;
	cursor:      pointer;
	color:       currentColor;
	padding:     4px;
}

.vsk-cart-trigger__icon {
	display: block;
}

.vsk-cart-trigger__count {
	position:         absolute;
	top:              -4px;
	right:            -6px;
	min-width:        18px;
	height:           18px;
	padding-inline:   4px;
	background:       var(--vsk-clr--accent);
	color:            var(--vsk-clr--background);
	border-radius:    9px;
	font-size:        10px;
	font-weight:      var(--vsk-font--wgt-text-bold);
	line-height:      18px;
	text-align:       center;
	pointer-events:   none;
	transition:       transform var(--vsk-trns--duration) var(--vsk-trns--ease);
}

.vsk-cart-trigger__count[aria-hidden="true"]:empty {
	transform: scale(0);
}


/* ─── 20. LOADING / TRANSITION STATES ────────────────────────────────────── */

@keyframes vsk-cart-spin {
	to { transform: rotate(360deg); }
}

.vsk-cart-upsell__add.is-adding::before {
	content:    '';
	display:    inline-block;
	width:      10px;
	height:     10px;
	border:     1.5px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation:  vsk-cart-spin 0.6s linear infinite;
}


/* ─── 20b. SHORTCODE CONTAINERS ──────────────────────────────────────────── */

/*
 * [data-vsk-cart-sc] wrappers ensure swiper overflow is properly contained
 * when components are rendered on the page via shortcodes (outside the panel).
 *
 * Slide width is re-declared with higher specificity to prevent third-party
 * Swiper CSS (Elementor, WooCommerce gallery) from overriding our values.
 */

[data-vsk-cart-sc] {
	overflow: hidden;
}

[data-vsk-cart-sc] .vsk-cart__upsells-swiper,
[data-vsk-cart-sc] .vsk-cart__promos-swiper {
	overflow: hidden;
}

/* Vertical cards: fixed 150px width */
[data-vsk-cart-sc] .vsk-cart-upsell.swiper-slide,
.vsk-cart__panel .vsk-cart-upsell.swiper-slide {
	width: 150px;
}

/* Horizontal cards: Swiper calculates width from slidesPerView — ensure
   slides don't collapse or expand to 100% from third-party CSS. */
[data-vsk-cart-sc] .vsk-cart-promo.swiper-slide,
.vsk-cart__panel .vsk-cart-promo.swiper-slide {
	width: auto;
}


/* ─── 21. MOBILE OVERRIDES ───────────────────────────────────────────────── */

@media (max-width: 599px) {
	.vsk-cart__panel {
		width:         100%;
		top:           auto;
		left:          0;
		border-radius: 16px 16px 0 0;
		transform:     translateY(100%);
		max-height:    92dvh;
	}

	.vsk-cart__panel.is-open {
		transform: translateY(0);
	}

	.vsk-cart__var-sheet {
		border-radius: 0;
		transform:     translateX(100%);
	}

	.vsk-cart__var-sheet.is-open {
		transform: translateX(0);
	}

	.vsk-cart__header,
	.vsk-cart__progress,
	.vsk-cart-item,
	.vsk-cart__upsells-head,
	.vsk-cart__promos-head,
	.vsk-cart__upsells-swiper,
	.vsk-cart__promos-swiper,
	.vsk-cart__footer,
	.vsk-cart__var-sheet-head,
	.vsk-cart__var-sheet-body,
	.vsk-cart__var-sheet-foot {
		padding-inline: 20px;
	}

	/* ── Mobile footer redesign ──────────────────────────────── */

	/* Show breakdown in scrollable body */
	.vsk-cart__body-breakdown {
		display:       block;
		padding-inline: 20px;
	}

	/* Hide breakdown in sticky footer */
	.vsk-cart__footer-breakdown {
		display: none;
	}

	/* Compact footer: total + CTA in one row */
	.vsk-cart__footer {
		padding: 10px 20px 14px;
	}

	.vsk-cart__footer-bar {
		display:     flex;
		align-items: center;
		gap:         16px;
	}

	.vsk-cart__footer-total {
		flex-direction: column;
		flex-shrink:    0;
		gap:            0;
		border-top:     none;
		margin-top:     0;
		padding-top:    0;
	}

	.vsk-cart__footer-total-label {
		font-size:   var(--vsk-font--size-text-xs, 11px);
		font-weight: var(--vsk-font--wgt-text);
		color:       var(--vsk-clr--text-faded);
	}

	.vsk-cart__footer-total-value {
		font-size:   var(--vsk-font--size-text-l, 18px);
		font-weight: var(--vsk-font--wgt-text-bold);
	}

	.vsk-cart__checkout-btn {
		flex:       1;
		margin-top: 0;
		height:     46px;
	}
}

/* ─── UNIT PRICE (added separately) ─────────────────────────────────────── */

.vsk-cart-item__unit-price {
	font-size:   var(--vsk-font--size-text-s);
	font-weight: var(--vsk-font--wgt-text);
	color:       var(--vsk-clr--text-faded);
	margin:      0;
	line-height: var(--vsk-font--lh-text-s);
}

.vsk-cart-item__unit-price ins {
	text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   NEW FEATURES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── LOW STOCK BADGE ──────────────────────────────────────────────────── */

.vsk-cart-item__low-stock {
	display:        inline-flex;
	align-items:    center;
	gap:            5px;
	font-size:      var(--vsk-font--size-text-xs, 11px);
	font-weight:    600;
	color:          var(--vsk-clr--warning, #e8a545);
	margin:         4px 0 0;
	line-height:    1;
	letter-spacing: 0.02em;
}

.vsk-cart-item__low-stock::before {
	content:       '';
	width:         6px;
	height:        6px;
	border-radius: 50%;
	background:    currentColor;
	flex-shrink:   0;
}


/* ─── CART ITEM ADDONS (WAPF, etc.) ───────────────────────────────────── */

.vsk-cart-item__addon {
	font-size:   var(--vsk-font--size-text-xs, 11px);
	color:       var(--vsk-clr--text-faded);
	margin:      2px 0 0;
	line-height: 1.4;
}


/* ─── SAVINGS ROW ──────────────────────────────────────────────────────── */

.vsk-cart__totals-row--savings .vsk-cart__totals-label,
.vsk-cart__totals-row--savings .vsk-cart__totals-value {
	color:       var(--vsk-clr--warning, #e8a545);
	font-weight: var(--vsk-font--wgt-text-bold, 600);
}


/* ─── COUPON CHIPS IN TOTALS ───────────────────────────────────────────── */

.vsk-cart__totals-row--coupon {
	display:     flex;
	align-items: center;
	justify-content: space-between;
	padding:     5px 0;
}

.vsk-cart__coupon-chip {
	display:        inline-flex;
	align-items:    center;
	gap:            6px;
	background:     rgba(from var(--vsk-clr--text) r g b / 0.06);
	padding:        4px 8px;
	border-radius:  4px;
	font-size:      var(--vsk-font--size-text-xs, 11px);
	font-weight:    700;
	color:          var(--vsk-clr--text);
	letter-spacing: 0.04em;
}

.vsk-cart__coupon-chip svg {
	color: var(--vsk-clr--success, #4caf50);
}

.vsk-cart__coupon-remove {
	display:    inline-flex;
	background: none;
	border:     none;
	color:      var(--vsk-clr--text-faded);
	font-size:  15px;
	cursor:     pointer;
	padding:    0 0 0 2px;
	line-height: 1;
}

.vsk-cart__coupon-remove:hover {
	color: var(--vsk-clr--text);
}

.vsk-cart__totals-value--coupon {
	color:       var(--vsk-clr--success, #4caf50);
	font-size:   var(--vsk-font--size-text-s);
}


/* ─── COUPON FIELD ─────────────────────────────────────────────────────── */

.vsk-cart__coupon {
	padding: 2px 0 4px;
}

.vsk-cart__coupon-toggle {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	width:           100%;
	background:      none;
	border:          none;
	color:           var(--vsk-clr--text-faded);
	font-family:     var(--vsk-font--family-text);
	font-size:       var(--vsk-font--size-text-s);
	padding:         6px 0;
	cursor:          pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vsk-cart__coupon-toggle svg {
	transition: transform 0.2s var(--vsk-trns--ease);
}

.vsk-cart__coupon-toggle.is-open svg {
	transform: rotate(180deg);
}

.vsk-cart__coupon-form {
	display: flex;
	gap:     8px;
	margin:  4px 0;
}

.vsk-cart__coupon-form[hidden] {
	display: none;
}

.vsk-cart__coupon-input {
	flex:          1;
	height:        36px;
	background:    rgba(from var(--vsk-clr--text) r g b / 0.04);
	border:        var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-200);
	border-radius: 4px;
	color:         var(--vsk-clr--text);
	font-family:   var(--vsk-font--family-text);
	font-size:     var(--vsk-font--size-text-s);
	padding:       0 12px;
	outline:       none;
}

.vsk-cart__coupon-input:focus {
	border-color: var(--vsk-clr--text);
}

.vsk-cart__coupon-input.is-error {
	border-color: var(--vsk-clr--danger, #e54d4d);
}

.vsk-cart__coupon-submit {
	height:          36px;
	padding:         0 16px;
	background:      var(--vsk-clr--text);
	color:           var(--vsk-clr--background);
	border:          none;
	font-family:     var(--vsk-font--family-button);
	font-size:       var(--vsk-font--size-text-xs, 11px);
	font-weight:     var(--vsk-font--wgt-btn, 700);
	text-transform:  uppercase;
	letter-spacing:  0.04em;
	cursor:          pointer;
	white-space:     nowrap;
	flex-shrink:     0;
}

.vsk-cart__coupon-error {
	font-size:   var(--vsk-font--size-text-xs, 11px);
	color:       var(--vsk-clr--danger, #e54d4d);
	margin-top:  4px;
	line-height: 1.4;
}

.vsk-cart__coupon-error[hidden] {
	display: none;
}


/* ─── UNDO REMOVE TOAST ────────────────────────────────────────────────── */

.vsk-cart__undo-toast {
	position:    absolute;
	bottom:      0;
	left:        0;
	right:       0;
	background:  var(--vsk-clr--background);
	border-top:  var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-200);
	z-index:     10;
	transform:   translateY(100%);
	transition:  transform 0.3s var(--vsk-trns--ease);
}

.vsk-cart__undo-toast.is-visible {
	transform: translateY(0);
}

.vsk-cart__undo-toast[hidden] {
	display: none;
}

.vsk-cart__undo-inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         12px 20px;
}

.vsk-cart__undo-text {
	font-size: var(--vsk-font--size-text-s);
	color:     var(--vsk-clr--text);
}

.vsk-cart__undo-btn {
	background:      none;
	border:          var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--text);
	color:           var(--vsk-clr--text);
	font-family:     var(--vsk-font--family-button);
	font-size:       var(--vsk-font--size-text-xs, 11px);
	font-weight:     var(--vsk-font--wgt-btn, 700);
	padding:         6px 14px;
	cursor:          pointer;
	text-transform:  uppercase;
	letter-spacing:  0.06em;
	flex-shrink:     0;
}

.vsk-cart__undo-progress {
	height:     2px;
	background: var(--vsk-clr--border-200);
}

.vsk-cart__undo-bar {
	height:     100%;
	width:      100%;
	background: var(--vsk-clr--text);
	transition: width 0.1s linear;
}

/* Page-level undo toast (shortcode context — fixed to viewport bottom) */
.vsk-cart__undo-toast--page {
	position:      fixed;
	bottom:        20px;
	left:          50%;
	right:         auto;
	transform:     translateX(-50%) translateY(calc(100% + 20px));
	max-width:     400px;
	width:         calc(100% - 40px);
	border-radius: 6px;
	border:        var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-200);
	box-shadow:    0 4px 24px rgba(0, 0, 0, 0.15);
	z-index:       99999;
	overflow:      hidden;
}

.vsk-cart__undo-toast--page.is-visible {
	transform: translateX(-50%) translateY(0);
}


/* ─── EMPTY STATE ──────────────────────────────────────────────────────── */

.vsk-cart__empty-icon {
	display:      block;
	margin:       0 auto 12px;
	color:        var(--vsk-clr--text-faded);
	opacity:      0.4;
}

.vsk-cart__bestsellers-list {
	display:        flex;
	flex-direction: column;
	gap:            8px;
	padding:        0 20px 20px;
}