/* ============================================================================
   Cart sidecar (slide-out panel) redesign, 2026-08-27.
   Design source: Figma "TOSN Refresh (Copy)", file Kptgj2QFh7qqlEQmlQ0Eq3,
   Mobile page, "Cart" frame (Verzija 2.2, node 101:1711) - see .claude/CLAUDE.md.
   New file, included from common/footer.twig.

   IMPORTANT - server-side asset optimizer quirks (Lightning extension),
   found the hard way on 2026-08-27 while building this component. Keep
   this file plain-ASCII, plain CSS2.1-ish syntax:
   1) CSS custom properties are silently dropped when this file gets
      inlined/minified (a :root block and every var(--x) usage just
      vanish - the property computes to nothing, not to the value).
      Fix: literal color values everywhere, no var().
   2) A single :where(...) selector anywhere in the file makes the
      minifier drop every rule that comes after it in the whole file
      (not just that rule). Fix: no :where(), no modern selector syntax.
   3) Any non-ASCII (multi-byte UTF-8, e.g. Cyrillic) text inside a
      comment corrupts the minifier's parsing state for everything that
      follows, up to the next thing that happens to resync - in practice
      this silently deleted ~500 lines of real rules. Fix: comments in
      this file are English/ASCII only.
   4) The theme's global stylesheet sets line-height directly on tags
      (p / a / span / h*). An inherited value from ".cart-sidecar" can
      never win against a direct rule on the element itself, so every
      text class below sets its own explicit line-height taken from the
      Figma node metadata (IBM Plex Sans "leading-normal" resolves to
      ~1.3: 12px->16, 13px->17, 14px->18, 16px->21, 18px->23). Without
      this the qty stepper renders 40px tall instead of 34px and the
      cross-sell description 64px instead of 40px.
   Net effect of 1+2: don't rely on cascade tricks to fix specificity
   (e.g. a low-specificity ".btn--variant{background:...}" losing to a
   generic ".cart-sidecar button{background:none}" reset) - instead the
   reset properties (border/background/cursor/padding/appearance for
   buttons, text-decoration for links) are duplicated directly into every
   concrete button/link class below, so there is no generic tag-level
   reset rule to lose a specificity fight against.
============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* Colors used throughout (kept literal, see note above):
   #06bec7 teal accent, #222/#1a1a1a dark text/bg, #585858/#999 gray text,
   #f5f5f5/#f3f3f3 light bg, #e8e8e8 border, #fb5133 discount badge. */

/* ---------- Panel + backdrop ---------- */

.cart-sidecar-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(20, 22, 22, 0.55);
	z-index: 99998;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility 0s linear .3s;
}
.cart-sidecar-backdrop.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s ease, visibility 0s linear 0s;
}

.cart-sidecar {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	max-width: 430px;
	height: 100vh;
	height: 100dvh;
	z-index: 99999;
	background: #fff;
	box-sizing: border-box;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .35s cubic-bezier(.4,0,.2,1), visibility 0s linear .35s;
	font-family: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
}
.cart-sidecar.is-open {
	transform: translateX(0);
	visibility: visible;
	transition: transform .35s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
}

html.cart-sidecar-lock,
html.cart-sidecar-lock body {
	overflow: hidden;
}

/* Reset so the theme's global stylesheet.css can't leak in */
.cart-sidecar,
.cart-sidecar *,
.cart-sidecar *::before,
.cart-sidecar *::after {
	box-sizing: border-box;
}
.cart-sidecar {
	margin: 0;
	padding: 0;
	line-height: normal;
	color: #222222;
}
/* NOTE: no generic ".cart-sidecar p/span/div{margin:0}" reset here on
   purpose - div/span already have zero default margin/padding in every
   browser, and a tag-qualified rule like ".cart-sidecar p" (specificity
   0,1,1) would beat a single-class rule like ".cart-sidecar__promo-title"
   (0,1,0), silently zeroing out real margins - this is the exact same
   class of bug as the button background issue explained above, just for
   <p> elements. Each <p>-based class below sets its own margin:0
   directly instead. */
.cart-sidecar img {
	display: block;
	max-width: 100%;
	height: auto;
}
.cart-sidecar svg {
	display: block;
	flex-shrink: 0;
}
/* The theme's global stylesheet contains a bare "svg{fill:#878787}" rule.
   A CSS declaration always beats a presentation attribute in the markup,
   so the fill="none" written on every icon below was silently ignored and
   each outline icon got a grey fill - the truck in the free-shipping row
   rendered as a solid blob instead of the outline the design asks for.
   Re-assert it here with a class-qualified selector so it wins on
   specificity. Attribute selectors are plain CSS2.1 and safe for the asset
   minifier (unlike var() / :where(), see the header comment).
   The one shape that IS meant to be filled re-states itself below. */
.cart-sidecar svg[fill="none"],
.cart-sidecar svg[fill="none"] path,
.cart-sidecar svg[fill="none"] circle,
.cart-sidecar svg[fill="none"] rect,
.cart-sidecar svg[fill="none"] polyline,
.cart-sidecar svg[fill="none"] line {
	fill: none;
}
.cart-sidecar svg[fill="none"] path[fill="currentColor"],
.cart-sidecar svg[fill="none"] circle[fill="currentColor"],
.cart-sidecar svg[fill="none"] rect[fill="currentColor"] {
	fill: currentColor;
}

/* ---------- Layout: header / body / footer ---------- */

.cart-sidecar__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* ---------- Loading overlay ---------- */
/* Shown while checkout/popup content is being (re)fetched after opening
   the panel - see js/cart-sidecar.js showLoading()/hideLoading(). Hidden
   by default; ".cart-sidecar.is-loading" reveals it and hides whatever
   is currently in ".cart-sidecar__inner" (empty on first open, or the
   previous cart's content on a later one) so nothing stale flashes
   before the fresh content is swapped in. ".cart-sidecar" is itself
   "position: fixed", which is enough to anchor this absolute overlay -
   no extra positioning context needed. */

.cart-sidecar__loading {
	display: none;
}
.cart-sidecar.is-loading .cart-sidecar__loading {
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	background: #fff;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
}
.cart-sidecar.is-loading .cart-sidecar__inner {
	visibility: hidden;
}
.cart-sidecar__loading-spinner {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 3px solid #e8e8e8;
	border-top-color: #06bec7;
	animation: cart-sidecar-spin .7s linear infinite;
}
@keyframes cart-sidecar-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
.cart-sidecar__loading-text {
	margin: 0;
	padding: 0;
	font-family: 'IBM Plex Sans', Arial, sans-serif;
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
	color: #585858;
}

.cart-sidecar__header {
	flex-shrink: 0;
	height: 64px;
	background: #fff;
	border-bottom: 1px solid #e8e8e8;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
}
.cart-sidecar__title-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}
.cart-sidecar__title {
	font-size: 20px;
	font-weight: 600;
	line-height: 23.6px;
	text-transform: uppercase;
	color: #222222;
}
.cart-sidecar__count {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 100px;
	background: #06bec7;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
}
.cart-sidecar__close {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #222222;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}
.cart-sidecar__close svg { width: 22px; height: 22px; }

.cart-sidecar__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: #f5f5f5;
	/* Scrollbar hidden to match the design: on desktop a classic scrollbar
	   would eat ~15px of width and shrink the 390px content column the
	   Figma layout is built on (430px panel - 2x20px padding). */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.cart-sidecar__body::-webkit-scrollbar { display: none; }

.cart-sidecar__warning {
	margin: 16px 20px 0;
	padding: 10px 14px;
	background: #fff4f2;
	border: 1px solid #fb5133;
	color: #fb5133;
	font-size: 13px;
	line-height: 17px;
	border-radius: 6px;
}

/* ---------- Free shipping indicator ---------- */

.cart-sidecar__shipping {
	background: #fff;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 11.5px;
}
.cart-sidecar__shipping-row {
	display: flex;
	align-items: center;
	gap: 14px;
}
.cart-sidecar__shipping-icon {
	width: 24px;
	height: 24px;
	/* Figma node 101:1731 strokes this icon in the brand teal, not in the
	   body text colour it sits next to. */
	color: #06bec7;
}
.cart-sidecar__shipping-text {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	color: #222222;
}
.cart-sidecar__shipping-text strong { font-weight: 600; }
.cart-sidecar__progress {
	width: 100%;
	height: 8px;
	border-radius: 4px;
	background: #e8e8e8;
	overflow: hidden;
}
.cart-sidecar__progress-fill {
	height: 100%;
	background: #06bec7;
	border-radius: inherit;
	transition: width .4s ease;
}

/* ---------- Empty cart state ---------- */
/* Shown when the panel is opened from the header cart icon with nothing in
   the cart (see checkout/popup.php, the else branch). */

.cart-sidecar__empty {
	background: #fff;
	padding: 48px 20px 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}
.cart-sidecar__empty-icon {
	width: 48px;
	height: 48px;
	color: #999;
	flex: none;
}
.cart-sidecar__empty-text {
	margin: 0;
	padding: 0;
	font-family: 'IBM Plex Sans', Arial, sans-serif;
	font-size: 16px;
	line-height: 21px;
	font-weight: 500;
	color: #585858;
}

/* ---------- Cart line items ---------- */

.cart-sidecar__items {
	background: #fff;
	padding: 0 20px 14px;
	display: flex;
	flex-direction: column;
	/* No gap: each row already carries 16px of its own vertical padding, so
	   consecutive rows sit 32px apart exactly as in the design. */
	gap: 0;
}
/* Figma (node 101:1738/101:1739) does NOT draw this row as a card: the
   frame is transparent, has no corner radius and no horizontal padding, so
   the product image lines up with the 20px panel gutter. The shadow in the
   design is a "drop shadow" effect on that transparent frame, i.e. CSS
   filter: drop-shadow(), which follows the silhouette of the image and the
   glyphs - not box-shadow, which would paint a card-shaped rectangle that
   the design does not have. Values below are the ones from the design. */
.cart-sidecar__item {
	position: relative;
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 16px 0;
	filter: drop-shadow(0 4px 6px rgba(0,0,0,.05));
}
.cart-sidecar__item-image {
	flex-shrink: 0;
	width: 86px;
	height: 86px;
	border-radius: 3.5px;
	overflow: hidden;
	background: #f3f3f3;
	text-decoration: none;
}
.cart-sidecar__item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cart-sidecar__item-info {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.cart-sidecar__item-name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
	color: #1a1a1a;
	text-decoration: none;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.cart-sidecar__item-option {
	margin: 0;
	font-size: 12px;
	line-height: 16px;
	color: #585858;
}
.cart-sidecar__item-price {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	color: #585858;
}
.cart-sidecar__qty {
	display: inline-flex;
	align-items: center;
	gap: 17.5px;
	width: fit-content;
	padding: 4px 14px;
	border-radius: 3.5px;
	background: #f3f3f3;
}
.cart-sidecar__qty-btn {
	font-size: 18px;
	font-weight: 600;
	color: #222222;
	line-height: 26px;
	height: 26px;
	min-width: 13px;
	text-align: center;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}
.cart-sidecar__qty-value {
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
	color: #222222;
	min-width: 9px;
	text-align: center;
}
.cart-sidecar__item-remove {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999999;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}
.cart-sidecar__item-remove svg { width: 13px; height: 13px; }

/* Desktop sizes (Figma Variant2) are at the END of this file - see
   "DESKTOP VARIANT" there; placed last so they win over the base rules. */

/* ---------- Shared button/link style (product cards, promo, footer CTAs) ---------- */

.cart-sidecar__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border-radius: 3.5px;
	text-transform: uppercase;
	font-weight: 700;
	white-space: nowrap;
	line-height: 18px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
}
.cart-sidecar__btn--product {
	width: 100%;
	height: 45px;
	background: #06bec7;
	color: #fff;
	font-size: 14px;
	padding: 0 12.5px;
}
.cart-sidecar__btn-price { font-weight: 500; }

/* ---------- "VSAK DODATNI IZDELEK -30% CENEJE" cross-sell block (2x2 grid) ---------- */

.cart-sidecar__cross-sell {
	background: #f5f5f5;
	padding: 22.5px 20px 32px;
}
.cart-sidecar__banner {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 9px 14.5px 9px 9px;
	border-radius: 36.5px;
	background: #fb5133;
	color: #fff;
}
.cart-sidecar__banner-icon { width: 15px; height: 15px; color: #fff; }
.cart-sidecar__banner span {
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.cart-sidecar__grid {
	margin-top: 23px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 24px;
	row-gap: 28px;
}

.cart-sidecar__product {
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.cart-sidecar__product-image {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 160 / 145;
	border-radius: 6px;
	overflow: hidden;
	background: #f8f8f8;
	text-decoration: none;
}
.cart-sidecar__product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cart-sidecar__product-info {
	display: flex;
	flex-direction: column;
	gap: 11px;
	justify-content: center;
	padding: 3.5px 6px;
	width: 100%;
}
/* Grid card zoom badge - Figma node 101:1765: a 60x60 circle of black at 17%
   opacity with the white "zoom_in" glyph inside, sitting 11px from the right
   and 10.8px from the bottom of the 183x165.84 image box. It used to be a
   29px white circle with a hand-drawn magnifier, which read as a completely
   different control. The glyph itself is in the template. */
.cart-sidecar__product-zoom {
	position: absolute;
	right: 11px;
	bottom: 10.8px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(0,0,0,.17);
	border: 0;
	display: block;
	color: #ffffff;
}
.cart-sidecar__product-zoom svg { width: 60px; height: 60px; display: block; }
.cart-sidecar__badge {
	position: absolute;
	left: 11px;
	bottom: 11.8px;
	background: #fb5133;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	padding: 5px 7px;
	border-radius: 36.5px;
	line-height: 14px;
}
.cart-sidecar__product-name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #000;
	text-decoration: none;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.cart-sidecar__product-desc {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: #585858;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ---------- Promo banner ---------- */

.cart-sidecar__promo {
	background: #f5f5f5;
	padding: 0 16px 24px;
}
.cart-sidecar__promo-box {
	display: flex;
	gap: 16px;
	padding: 20px;
	border-radius: 10.5px;
	background: #1a1a1a;
}
.cart-sidecar__promo-text {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
}
.cart-sidecar__promo-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 23px;
	color: #fff;
}
.cart-sidecar__promo-subtitle {
	margin: 4px 0 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 17px;
	color: #999999;
}
.cart-sidecar__promo-text .cart-sidecar__btn--product {
	width: 183px;
	max-width: 100%;
}
.cart-sidecar__promo-image {
	flex-shrink: 0;
	width: 100px;
	height: 120px;
	border-radius: 7px;
	background: #2a2a2a;
}

/* ---------- Second row (horizontal scroll) ---------- */

.cart-sidecar__row-wrap {
	background: #f3f3f3;
	padding: 20px 0 16px;
}
.cart-sidecar__row {
	display: flex;
	gap: 10px;
	padding: 0 16.7px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.cart-sidecar__row::-webkit-scrollbar { display: none; }
.cart-sidecar__row .cart-sidecar__product {
	flex: 0 0 218px;
	width: 218px;
	scroll-snap-align: start;
}
.cart-sidecar__row .cart-sidecar__product-image {
	aspect-ratio: 218 / 221;
	border: 1px solid rgba(0,0,0,.21);
}
/* The row cards use a different control from the grid ones - verified against
   Figma node 124:3264 over the REST API: a solid white 28.75px circle with
   the dark "open_in_full" arrow inside, 15.55px from the right and 14.64px
   from the bottom of the 218x221 image. Every property is restated so the
   grid values above do not leak in. */
.cart-sidecar__row .cart-sidecar__product-zoom {
	right: 15.55px;
	bottom: 14.64px;
	width: 28.75px;
	height: 28.75px;
	background: #fff;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #3b3b3b;
}
.cart-sidecar__row .cart-sidecar__product-zoom svg { width: 11.5px; height: 11.5px; }
.cart-sidecar__row .cart-sidecar__badge {
	left: 14.7px;
	bottom: 15.2px;
}
.cart-sidecar__scrollbar {
	position: relative;
	height: 4px;
	margin: 16px 17px 0;
	border-radius: 2px;
	background: rgba(0,0,0,.19);
	overflow: hidden;
}
.cart-sidecar__scrollbar-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 25%;
	border-radius: inherit;
	background: #06bec7;
}

/* ---------- Footer: floating CTAs + payment row ---------- */

.cart-sidecar__footer {
	flex-shrink: 0;
	background: #222222;
	padding: 16px 20px 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-shadow: 0 -12px 11px rgba(23,54,55,.22);
}
.cart-sidecar__btn--checkout {
	width: 100%;
	height: 52px;
	border-radius: 3.5px;
	background: #06bec7;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 21px;
	text-transform: uppercase;
}
.cart-sidecar__btn--continue {
	width: 100%;
	height: 46px;
	border-radius: 3.5px;
	background: rgba(255,255,255,.11);
	border: 1px solid rgba(255,255,255,.2);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
	text-transform: uppercase;
}
.cart-sidecar__payment-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 6px 8px;
	opacity: .44;
}
.cart-sidecar__payment-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	line-height: 22.4px;
	color: #fff;
	white-space: nowrap;
}
.cart-sidecar__payment-item svg { width: 14px; height: 14px; color: #fff; }
.cart-sidecar__payment-item--word {
	font-style: italic;
	letter-spacing: .02em;
}
.cart-sidecar__payment-sep {
	width: 1px;
	height: 16px;
	background: rgba(255,255,255,.35);
}
.cart-sidecar__payment-item--mastercard {
	display: inline-flex;
	width: 24px;
	height: 15px;
	align-items: center;
}
.cart-sidecar__payment-item--mastercard span {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	display: inline-block;
}
.cart-sidecar__payment-item--mastercard span:first-child { background: #eb001b; }
.cart-sidecar__payment-item--mastercard span:last-child { background: #f79e1b; margin-left: -6px; mix-blend-mode: screen; }

/* ---------- Tablet / desktop ---------- */

@media (min-width: 431px) {
	.cart-sidecar { box-shadow: -8px 0 32px rgba(0,0,0,.18); }
}

/* ============================================================================
   Fixes appended 2026-08-30. Deliberately at the END of the file: several of
   these override rules declared earlier in this same file, and with equal
   specificity the later declaration wins.
   ========================================================================== */

/* ---------- Hover states for the CTA buttons ---------- */
/* The theme's global stylesheet declares "a:hover{color:#06bec7}" - the exact
   teal these buttons use as their BACKGROUND. Our buttons are <a> elements
   with white text, so hovering repainted the label in the background colour
   and it vanished. Figma has no hover variants for these, so: keep the label
   white and darken the fill instead, which is the conventional cue.
   :focus is included so keyboard users get the same affordance. */

.cart-sidecar__btn--checkout:hover,
.cart-sidecar__btn--checkout:focus,
.cart-sidecar__btn--product:hover,
.cart-sidecar__btn--product:focus {
	background: #05a8b0;
	color: #ffffff;
	text-decoration: none;
}
.cart-sidecar__btn--continue:hover,
.cart-sidecar__btn--continue:focus {
	background: rgba(255,255,255,.18);
	color: #ffffff;
	text-decoration: none;
}

/* ---------- Equal-height cross-sell cards ---------- */
/* Card height used to follow its own text: a product whose name wrapped onto
   a second line made that card taller than its neighbours, so the "Dodaj"
   buttons no longer lined up across the grid. Two independent guards:
   1) the name always occupies exactly two lines (2 x 20px), whether it wraps
      or not - it is already clamped to two lines, this just reserves the box;
   2) the button is pushed to the bottom of the card, so even if the
      description ends up shorter on one card the buttons still align. */

.cart-sidecar__product {
	height: 100%;
}
.cart-sidecar__product-name {
	height: 40px;
}
.cart-sidecar__product .cart-sidecar__btn--product {
	margin-top: auto;
}

/* ---------- Make the horizontal row feel scrollable ---------- */
/* The native scrollbar is hidden (the design has none) and a mouse only
   emits vertical wheel deltas, so the row read as frozen. js/cart-sidecar.js
   adds wheel / grab-drag / draggable-thumb; these are the matching cursors
   and the enlarged hit area for the 4px indicator line. */

.cart-sidecar__row {
	cursor: grab;
}
.cart-sidecar__row.is-dragging {
	cursor: grabbing;
	user-select: none;
}
/* Kill the browser's native image drag, which would otherwise start instead
   of our scroll gesture as soon as the pointer goes down on a photo. */
.cart-sidecar__row img {
	-webkit-user-drag: none;
	user-select: none;
}
.cart-sidecar__scrollbar {
	cursor: pointer;
	/* was hidden: the thumb stays inside the track anyway, and clipping
	   would cut off the invisible grab area added below */
	overflow: visible;
}
/* A 4px-tall line is far too thin to grab. This pads the hit area out to
   ~24px without changing anything you can see. */
.cart-sidecar__scrollbar::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;
	bottom: -10px;
}
.cart-sidecar__scrollbar-fill {
	cursor: grab;
	border-radius: 2px;
}

/* ---------- Row gutter ---------- */
/* Figma puts the row's first card at 16.7px from the panel edge (node
   101:1828), but every block above it sits on a 20px gutter, so the row
   read as flush against the edge next to them. Deliberate deviation from
   that one Figma value, at the client's request, to keep one rhythm down
   the whole panel: 20px on mobile, 24px on desktop (where the rest of the
   desktop design uses 24 as well). */
.cart-sidecar__row {
	padding-left: 20px;
	padding-right: 20px;
	/* scroll-snap aligns a card's edge with the CONTAINER's edge and ignores
	   padding, so on load the row snapped itself sideways by exactly the
	   gutter and the first card ended up flush against the panel edge -
	   the padding above looked like it did nothing. scroll-padding tells
	   snapping to respect the gutter, so it has to track padding-left. */
	scroll-padding-left: 20px;
}
.cart-sidecar__scrollbar {
	margin-left: 20px;
	margin-right: 20px;
}

@media (min-width: 768px) {
	.cart-sidecar__row {
		padding-left: 24px;
		padding-right: 24px;
		scroll-padding-left: 24px;
	}
	.cart-sidecar__scrollbar {
		margin-left: 24px;
		margin-right: 24px;
	}
}

/* ============================================================================
   Add-ons inside the product row (08.10.2026): engraving / gift box bought
   with a product are shown as part of it - a light box under the quantity,
   one line per engraving place, own remove button. Quantity follows the
   product (cart library, os_extra_options OCMOD).
   ========================================================================= */
.cart-sidecar__addons {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 10px;
}
.cart-sidecar__addon {
	padding: 8px 10px;
	border-radius: 6px;
	background: #f3f3f3;
}
.cart-sidecar__addon-head {
	display: flex;
	align-items: center;
	gap: 8px;
}
.cart-sidecar__addon-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 17px;
	color: #222222;
}
.cart-sidecar__addon-price {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 500;
	line-height: 17px;
	color: #585858;
	white-space: nowrap;
}
.cart-sidecar__addon-remove {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin: 0 -4px 0 0;
	padding: 0;
	border: none;
	background: transparent;
	color: #999999;
	cursor: pointer;
}
.cart-sidecar__addon-remove:hover,
.cart-sidecar__addon-remove:focus {
	color: #222222;
	background: transparent;
}
.cart-sidecar__addon-remove svg {
	width: 12px;
	height: 12px;
}
.cart-sidecar__addon-line {
	margin: 3px 0 0;
	font-size: 12px;
	line-height: 16px;
	color: #585858;
	overflow-wrap: anywhere;
}
.cart-sidecar__addon-place {
	color: #222222;
	font-weight: 500;
}

/* Cart page (checkout/cart.twig): the add-on row under its product. */
.cart-info .cart-addon-row td {
	border-top: 0;
	background: #fafafa;
	vertical-align: middle;
}
.cart-info .cart-addon-row__name {
	text-align: left;
	padding-left: 24px;
}
.cart-info .cart-addon-row__title {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: #222222;
}
.cart-info .cart-addon-row__line {
	display: block;
	font-size: 12px;
	line-height: 17px;
	color: #585858;
}

/* ---------- Banner dot + grid zoom glyphs (08.10.2026) ---------- */
/* Figma "30 Popust pulsing": the banner starts with a white dot (mobile
   15.2, desktop 12), not an icon. */
.cart-sidecar__banner-dot {
	flex: 0 0 auto;
	width: 15.2px;
	height: 15.2px;
	border-radius: 50%;
	background: #ffffff;
}
/* Grid cards carry both glyphs; mobile shows zoom_in, desktop the arrow.
   Row cards only have the arrow. */
.cart-sidecar__zoom-glyph--full {
	display: none;
}
.cart-sidecar__row .cart-sidecar__zoom-glyph--full {
	display: block;
}

/* ============================================================================
   DESKTOP VARIANT (>= 768px) - Figma "Sidecart desktop", Variant2 (node
   50:6572). The prototype shows this variant: "Default" (50:6570) is the
   closed state (panel parked off-screen) that switches to Variant2 after a
   delay. Every number below is read from the 50:6572 node tree. At the END
   of the file on purpose - it overrides the base (mobile) rules above.
   ========================================================================== */
@media (min-width: 768px) {
	.cart-sidecar {
		max-width: 585px;
	}

	/* header 72, gutter 24, title 23/27, badge 23 (50:6575) */
	.cart-sidecar__header {
		height: 72px;
		padding: 0 24px;
	}
	.cart-sidecar__title {
		font-size: 23px;
		line-height: 27px;
	}
	.cart-sidecar__count {
		width: 23px;
		height: 23px;
		font-size: 15px;
		line-height: 23px;
	}

	/* free shipping (50:6583): padding 24, row 24 (truck 24), 14 + 4 to the
	   10px bar r4, text 16/20.8 500 */
	.cart-sidecar__shipping {
		padding: 24px;
		gap: 18px;
	}
	.cart-sidecar__shipping-row {
		min-height: 24px;
	}
	.cart-sidecar__shipping-text {
		font-size: 16px;
		line-height: 20.8px;
	}
	.cart-sidecar__progress {
		height: 10px;
		border-radius: 4px;
	}

	/* cart line (50:6599): gutter 24, 16 below; card pad 4 + 20, gap 20,
	   image 96 r7, name/price 16/20.8, stepper pill 107x38 */
	.cart-sidecar__items {
		padding: 0 24px 16px;
	}
	.cart-sidecar__item {
		gap: 20px;
		padding: 24px 4px;
	}
	.cart-sidecar__item-image {
		width: 96px;
		height: 96px;
		border-radius: 7px;
	}
	.cart-sidecar__item-name,
	.cart-sidecar__item-price {
		font-size: 16px;
		line-height: 20.8px;
	}
	.cart-sidecar__qty {
		gap: 20px;
		padding: 6px 16px;
		border-radius: 39px;
	}

	/* cross-sell (50:6613): padding 28 24, banner hugs its text: 32 tall,
	   pad 9 21.7 9 15.8, gap 12.1, dot 12, text 15/19.5 700 +0.9 */
	.cart-sidecar__cross-sell {
		padding: 28px 24px 0;
	}
	.cart-sidecar__banner {
		display: inline-flex;
		width: auto;
		max-width: 100%;
		gap: 12.1px;
		padding: 6px 21.7px 6px 15.8px;
		min-height: 32px;
	}
	.cart-sidecar__banner-dot {
		width: 12px;
		height: 12px;
	}
	.cart-sidecar__banner span {
		font-size: 15px;
		line-height: 19.5px;
		letter-spacing: .9px;
	}

	/* grid (50:6624): 2 x 254.5, gaps 28 / 32, 28 below the banner */
	.cart-sidecar__grid {
		margin-top: 28px;
		column-gap: 28px;
		row-gap: 32px;
	}
	.cart-sidecar__product {
		gap: 16px;
	}
	/* image 254.5 x 230.6 r6 */
	.cart-sidecar__product-image {
		aspect-ratio: 254.5 / 230.6;
	}
	/* zoom: open_in_full 14 (#3b3b3b) in a 35 white circle with a 0.82px
	   rgba(0,0,0,.19) ring, 18.5 from the right, 14.6 from the bottom */
	.cart-sidecar__product-zoom {
		right: 18.5px;
		bottom: 14.6px;
		width: 35px;
		height: 35px;
		background: #ffffff;
		border: .82px solid rgba(0,0,0,.19);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #3b3b3b;
	}
	.cart-sidecar__product-zoom .cart-sidecar__zoom-glyph--zoom {
		display: none;
	}
	.cart-sidecar__product-zoom .cart-sidecar__zoom-glyph--full {
		display: block;
		width: 14px;
		height: 14px;
	}
	/* -30% badge 55x25, 13.75/17.9 700 +0.82, 14 from left and bottom */
	.cart-sidecar__badge {
		left: 14px;
		bottom: 14.2px;
		min-width: 55px;
		height: 25px;
		padding: 0 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 13.75px;
		line-height: 17.9px;
		letter-spacing: .82px;
		border-radius: 41.8px;
	}
	/* text (50:6632): pad 3.5 6, gap 8.5, name 16/20 600, desc 15/20 */
	.cart-sidecar__product-info {
		gap: 8.5px;
	}
	.cart-sidecar__product-name {
		height: auto;
		font-size: 16px;
		line-height: 20px;
	}
	.cart-sidecar__product-desc {
		height: 40px;
		font-size: 15px;
		line-height: 20px;
	}
	/* button 50 r3.5, 14/18.2 700 */
	.cart-sidecar__btn--product {
		height: 50px;
		font-size: 14px;
		line-height: 18.2px;
	}

	/* promo (50:6677): 36.7 below the grid, gutter 24; box 537x180 r10.5,
	   pad 25.5 24, gap 20; title 21/27.3 700, subtitle 15/19.5 #999,
	   pill button 183x50 r50, image 132x134 r7 */
	.cart-sidecar__promo {
		padding: 36.7px 24px 0;
	}
	.cart-sidecar__promo-box {
		gap: 20px;
		padding: 25.5px 24px;
		min-height: 180px;
	}
	.cart-sidecar__promo-text {
		gap: 20.5px;
	}
	.cart-sidecar__promo-title {
		font-size: 21px;
		line-height: 27.3px;
	}
	.cart-sidecar__promo-subtitle {
		font-size: 15px;
		line-height: 19.5px;
	}
	.cart-sidecar__promo-text .cart-sidecar__btn--product {
		width: 183px;
		height: 50px;
		margin-top: 0;
		border-radius: 50px;
	}
	.cart-sidecar__promo-image {
		width: 132px;
		height: 134px;
	}

	/* second row (173:9089): 40.7 above, cards 218 (image 218x221), name
	   15/20, button 45; gutter stays 24 (aligned with the blocks above,
	   decided 30.08) */
	.cart-sidecar__row-wrap {
		margin-top: 0;
		padding: 40.7px 0 24px;
	}
	.cart-sidecar__row .cart-sidecar__product {
		flex-basis: 218px;
		width: 218px;
		gap: 11px;
	}
	.cart-sidecar__row .cart-sidecar__product-image {
		aspect-ratio: 218 / 221;
	}
	.cart-sidecar__row .cart-sidecar__product-zoom {
		right: 15.55px;
		bottom: 14.64px;
		width: 28.75px;
		height: 28.75px;
	}
	.cart-sidecar__row .cart-sidecar__product-zoom .cart-sidecar__zoom-glyph--full {
		width: 11.5px;
		height: 11.5px;
	}
	.cart-sidecar__row .cart-sidecar__badge {
		left: 15.7px;
		bottom: 14.2px;
		min-width: 48px;
		height: 24px;
		padding: 0 7px;
		font-size: 12px;
		line-height: 15.6px;
		letter-spacing: .72px;
		border-radius: 36.5px;
	}
	.cart-sidecar__row .cart-sidecar__product-name {
		height: 40px;
		font-size: 15px;
	}
	.cart-sidecar__row .cart-sidecar__btn--product {
		height: 45px;
	}

	/* footer (50:6743): pad 20 24 12, gap 8; checkout 56 (17/20.6 700),
	   continue 54 (14/18.2 600), payment row 39 (15/22.4 600 #838383) */
	.cart-sidecar__footer {
		padding: 20px 24px 12px;
		gap: 8px;
	}
	.cart-sidecar__btn--checkout {
		height: 56px;
		font-size: 17px;
		font-weight: 700;
		line-height: 20.6px;
	}
	.cart-sidecar__btn--continue {
		height: 54px;
		font-size: 14px;
		line-height: 18.2px;
	}
	.cart-sidecar__payment-row {
		gap: 12px;
		min-height: 39px;
		padding: 8px 22px;
	}
	.cart-sidecar__payment-item {
		font-size: 15px;
		line-height: 22.4px;
	}
}