/* =============================================
   ROOT
============================================= */

.po-sidecart {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: var(--po-sidecart-z);
}

.po-sidecart.active {
	pointer-events: auto;
}


/* =============================================
   OVERLAY
============================================= */

.po-sidecart-overlay {
	position: absolute;
	inset: 0;
	background: var(--po-sidecart-overlay);
	opacity: 0;
	transition: opacity var(--po-sidecart-speed) ease;
}

.po-sidecart.active .po-sidecart-overlay {
	opacity: 1;
}


/* =============================================
   PANEL
============================================= */

.po-sidecart-panel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--po-sidecart-width);
	background: var(--po-sidecart-body-bg);

	display: flex;
	flex-direction: column;

	margin: var(--po-sidecart-padding-outer);

	transition: transform var(--po-sidecart-speed) ease;
}

/* POSITION */
.po-sidecart-panel[data-position="right"] {
	right: 0;
	transform: translateX(100%);
}

.po-sidecart-panel[data-position="left"] {
	left: 0;
	transform: translateX(-100%);
}

.po-sidecart.active .po-sidecart-panel {
	transform: translateX(0);
}


.po-sidecart {
	font-size: var(--po-sidecart-font-size);
	color: var(--po-sidecart-font-colour);
}

.po-sidecart button{padding: 0px}


/* =============================================
   HEADER
============================================= */

.po-sidecart-header {
	display: flex;
	justify-content: space-between;
	align-items: center;

	background: var(--po-sidecart-header-bg);
	color: var(--po-sidecart-header-text);

	padding: var(--po-sidecart-padding-inner);
}

.po-sidecart-header h3 {
	margin: 0;
	font-size: var(--po-sidecart-header-size);
	font-weight: var(--po-sidecart-header-weight);
}

.po-sidecart-close {
	background: none;
	border: none;
	cursor: pointer;
	font-size: var(--po-sidecart-header-size);
	color: var(--po-sidecart-header-close-colour);
	padding: 0px!important
}


/* =============================================
   BODY
============================================= */

.po-sidecart-body {
	flex: 1;
	overflow-y: auto;
	background: var(--po-sidecart-body-bg);
	padding: var(--po-sidecart-padding-inner);
}


/* =============================================
   PROGRESS BAR
============================================= */

.po-sidecart-progress {
	padding: 0 0 18px;
	text-align: center;
}

.po-sidecart-progress-message {
	margin: 0 0 10px;
	font-size: var(--po-sidecart-font-size, 14px);
	font-weight: 600;
}

.po-sidecart-progress-track {
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: var(--po-sidecart-progress-track-colour, #eeeeee);
	margin-right: 16px;
	overflow: visible;
}

.po-sidecart-progress-fill {
	height: 100%;
	border-radius: 999px;
	background: var(--po-sidecart-progress-colour, #dc2626);
	transition: width 0.4s ease;
}

.po-sidecart-progress-icon {
	position: absolute;
	top: 50%;
	right: -14px;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--po-sidecart-progress-icon-bg, #000000);
	color: var(--po-sidecart-progress-icon-colour, #ffffff);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
}

/* Confetti burst - plays once via JS adding .is-bursting the moment the bar
   transitions to complete, not on every subsequent cart refresh while it's
   already sitting at 100%. Uses only the already-configured bar/icon colours,
   no new palette. */
.po-sidecart-confetti {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.po-sidecart-confetti-piece {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4px;
	height: 4px;
	border-radius: 1px;
	opacity: 0;
	background: var(--po-sidecart-progress-colour, #dc2626);
}

.po-sidecart-confetti-piece:nth-child(even) {
	background: var(--po-sidecart-progress-icon-bg, #000000);
}

.po-sidecart-confetti-piece:nth-child(1) { --a: 0deg; }
.po-sidecart-confetti-piece:nth-child(2) { --a: 45deg; }
.po-sidecart-confetti-piece:nth-child(3) { --a: 90deg; }
.po-sidecart-confetti-piece:nth-child(4) { --a: 135deg; }
.po-sidecart-confetti-piece:nth-child(5) { --a: 180deg; }
.po-sidecart-confetti-piece:nth-child(6) { --a: 225deg; }
.po-sidecart-confetti-piece:nth-child(7) { --a: 270deg; }
.po-sidecart-confetti-piece:nth-child(8) { --a: 315deg; }

.po-sidecart-progress-icon.is-bursting .po-sidecart-confetti-piece {
	animation: po-sidecart-confetti-burst 0.7s ease-out forwards;
}

@keyframes po-sidecart-confetti-burst {
	0% {
		opacity: 1;
		transform: translate(-50%, -50%) rotate(var(--a)) translateX(0) rotate(0deg);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -50%) rotate(var(--a)) translateX(22px) rotate(360deg);
	}
}


/* =============================================
   PRODUCT ITEM
============================================= */

.po-sidecart-item {
	display: flex;
	gap: var(--po-sidecart-padding-inner);

	background: var(--po-sidecart-product-bg);
	padding: var(--po-sidecart-product-padding);
	border-radius: var(--po-sidecart-product-radius);

	margin-bottom: var(--po-sidecart-padding-inner);
	position: relative;
}

.po-product-downloadable .po-sidecart-price{display: none}


/* =============================================
   ALIGNMENT MODES
============================================= */

.po-sidecart-item.aligncenter {
	align-items: center;
}

.po-sidecart-item.aligntop {
	align-items: flex-start;
}

.po-sidecart-item.alignbottom {
	align-items: flex-end;
}


/* =============================================
   IMAGE
============================================= */

.po-sidecart-image {
	width: var(--po-sidecart-product-img-size);
	flex-shrink: 0;
	border-radius: var(--po-sidecart-product-image-border-radius); overflow: hidden
}

.po-sidecart-image img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}


/* =============================================
   DETAILS
============================================= */

.po-sidecart-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
	align-items: flex-start
}


/* TITLE */
.po-sidecart-title a {
	text-decoration: none;
	color: inherit;
	font-weight: var(--po-sidecart-product-title-weight);
	font-size: var(--po-sidecart-product-title-size);
}

/* BRAND */

.po-sidecart-brand {
	font-size: calc(var(--po-sidecart-product-title-size, 14px) - 2px);
	color: var(--po-sidecart-brand-colour, #000000);
}

.po-sidecart-brand a {
	color: inherit;
	text-decoration: none;
}

.po-sidecart-brand a:hover {
	text-decoration: underline;
}



/* REMOVE BUTTON */
.po-sidecart-remove {
	position: absolute;
	top: 0;
	right: 0;

	background: none!important;
	border: none;
	cursor: pointer;
	color: #000000;
	font-size: calc(var(--po-sidecart-product-title-size) - 2px);
	line-height: 1;
}


.po-sidecart-qty-total{display: flex; gap: 20px; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; padding-right:10px; margin-top: var(--po-sidecart-product-padding)}


.po-sidecart-price .amount, .po-sidecart-line-total .amount{color: var(--po-sidecart-price-font-colour); font-weight: var(--po-sidecart-price-font-weight)}

.po-sidecart-price ins{text-decoration-line: none}

.po-sidecart-price del{text-decoration-line: line-through;}

.po-sidecart-price del .amount{opacity: 0.5;}


.po-sidecart-variation-item{display: block}

.po-sidecart-variation-item span{font-weight: var(--po-sidecart-product-title-weight);}


/* =============================================
   FOOTER
============================================= */

.po-sidecart-footer {
	background: var(--po-sidecart-footer-bg);
	color: var(--po-sidecart-footer-text);
	padding: var(--po-sidecart-padding-inner);
}


/* VALUE ROWS */

.po-sidecart-value {
	display: flex;
	justify-content: space-between;
	padding-top: 10px;
}

.po-sidecart-value:first-child {
	padding-top: 0;
}


/* ACTION WRAPPER */

.po-sidecart-actions {
	padding-top: var(--po-sidecart-padding-inner);
}

.po-sidecart-message{padding-top:10px}


/* NOTICES (e.g. wholesale minimum order messages) */

.po-sidecart-notices {
	padding-top: 10px;
}

.po-sidecart-notice {
	padding: 8px 10px;
	border-radius: var(--po-sidecart-btn-radius);
	font-size: calc(var(--po-sidecart-font-size, 14px) - 1px);
	margin-bottom: 6px;
}

.po-sidecart-notice:last-child {
	margin-bottom: 0;
}

.po-sidecart-notice--error {
	background: #fdecea;
	color: #b91c1c;
}

.po-sidecart-notice--info {
	background: #eef2ff;
	color: #3730a3;
}


/* CHECKOUT BUTTON — disabled state */

.po-sidecart-btn-checkout.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.variation-type-, .variation-type-0{display: none!important}

.po-sidecart-variation{font-size: var(--po-sidecart-variation-font-size)}


/* FLEXIBLE PRODUCT FIELDS META (letters, custom options etc.) */

.po-sidecart-fpf-item {
	font-size: var(--po-sidecart-variation-font-size);
}

.po-sidecart-fpf-label {
	font-weight: var(--po-sidecart-product-title-weight);
}


/* =============================================
   FOOTER BUTTONS
============================================= */

.po-sidecart-footer a {
	display: block;
	text-align: center;

	background: var(--po-sidecart-btn-bg);
	color: var(--po-sidecart-btn-text);

	padding: 10px;
	margin-top: 10px;

	border-radius: var(--po-sidecart-btn-radius);
	text-decoration: none;

	transition: all 0.2s ease;
}

.po-sidecart-footer a:hover {
	background: var(--po-sidecart-btn-bg-hover);
	color: var(--po-sidecart-btn-text-hover);
}


/* =============================================
   BUTTON LAYOUTS
============================================= */

.po-sidecart-footer.layout-inline .po-sidecart-actions {
	display: flex;
	gap: 10px;
}

.po-sidecart-footer.layout-inline a {
	flex: 1;
	margin: 0;
}

.po-sidecart-footer.layout-split .po-sidecart-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.po-sidecart-footer.layout-split .po-sidecart-actions a{width: calc(50% - 5px)}

.po-sidecart-footer.layout-split .po-sidecart-actions a:last-child{width: 100%; margin-top:0px}


/* =============================================
   PROCESSING
============================================= */

.po-sidecart.processing {
	pointer-events: none;
}


/* =============================================
   LOADING STATE
============================================= */

.po-sidecart.loading .po-sidecart-inner,
.po-sidecart.loading .po-sidecart-footer {
	opacity: 0.4;
	pointer-events: none;
}

/* Spinner */
.po-sidecart.loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;

	border: 3px solid rgba(0,0,0,0.1);
	border-top-color: var(--po-sidecart-btn-bg);

	border-radius: 50%;
	animation: po-spin 0.8s linear infinite;
	z-index: 999;
}

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


.po-sidecart-empty-menu{list-style: none; padding-left:0px}

.po-sidecart-empty-menu li{margin-bottom: var(--po-sidecart-product-padding); }

.po-sidecart-empty-menu li:last-child{margin-bottom:0px}


/* =IPHONE
------------------------------------------------------- */
@media only screen and (max-width: 640px) {

.po-sidecart-panel{max-width: 100%}

}