/* =============================================
   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);
	border-radius: var(--po-sidecart-panel-radius, 0);
	/* Without this, rounding the panel's corners would just round the
	   background box while the header/body/footer content (which fills the
	   panel edge-to-edge) keeps its square corners and visibly overhangs
	   them. */
	overflow: hidden;

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

/* POSITION */
/* translateX(100%) alone only moves the panel by its own width - it doesn't
   know about the margin (--po-sidecart-padding-outer) that also insets the
   panel from that edge. With outer padding set, that left just enough of
   the panel poking back into view at the screen edge while "closed" for the
   margin gap to still show. Adding the margin itself to the translate
   distance closes that gap completely regardless of the outer padding
   value (0 outer padding falls back to the old translateX(100%) behaviour). */
.po-sidecart-panel[data-position="right"] {
	right: 0;
	transform: translateX(calc(100% + var(--po-sidecart-padding-outer, 0px)));
}

.po-sidecart-panel[data-position="left"] {
	left: 0;
	transform: translateX(calc(-100% - var(--po-sidecart-padding-outer, 0px)));
}

.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);
}


/* =============================================
   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 {
	padding-right: 20px;
}

.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);
	text-transform: var(--po-sidecart-product-title-transform, none);
}

/* SUBTITLE (mapped ACF fields — see psc_enable_product_subtitle) */

.po-sidecart-subtitle {
	font-size: var(--po-sidecart-variation-font-size);
	opacity: 0.7;
}

.po-sidecart-subtitle-item {
	display: block;
}


/* 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);
}


/* GIFT CARD META (recipient name/email, scheduled delivery date) */

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

.po-sidecart-gc-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;
	text-transform: var(--po-sidecart-btn-font-style);
	font-weight: var(--po-sidecart-btn-font-weight);

	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}


/* =============================================
   CART QUANTITY BADGE
   Used by [po_sidecart_count] and the nav menu item "show cart
   quantity" toggle. Sits wherever the shortcode/menu item is placed
   in the page, not inside the sidecart panel - see the :root-scoped
   variables in po_sidecart_css_vars() (includes/enqueue.php).
============================================= */

.po-sidecart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: var(--po-sidecart-count-min, 18px);
	height: var(--po-sidecart-count-min, 18px);
	padding: 0 4px;
	font-size: var(--po-sidecart-count-size, 11px);
	font-weight: var(--po-sidecart-count-weight, 700);
	line-height: 1;
	color: var(--po-sidecart-count-text, #ffffff);
	background: var(--po-sidecart-count-bg, #000000);
	border-radius: var(--po-sidecart-count-radius, 9px);
	vertical-align: middle;
	white-space: nowrap;
}

.po-sidecart-count--hidden {
	display: none;
}

/* Overlay position — for a trigger like the header cart icon, e.g.
   <a class="po-open-sidecart" style="position:relative">...
     <i class="fa-light fa-bag-shopping"></i>
     [po_sidecart_count]
   </a>
   The trigger itself needs position: relative for this to sit
   correctly. Two sub-positions: top-right corner (default) or dead
   center over the trigger. */
.po-sidecart-count--overlay {
	position: absolute;
}

.po-sidecart-count--overlay-top-right {
	top: calc(-6px + var(--po-sidecart-count-offset-top, 0px));
	right: -8px;
}

.po-sidecart-count--overlay-center {
	display: block;
	top: calc(0px + var(--po-sidecart-count-offset-top, 0px));
	left: 0;
	right: 0;
	line-height: var(--po-sidecart-count-min, 18px);
	text-align: center;
}

/* Inline position — sits directly before/after whatever it follows
   instead of overlapping it (e.g. "Cart (3)" style triggers, or nav
   items where an absolutely-positioned badge would get clipped). */
.po-sidecart-count--inline {
	position: static;
}

.po-sidecart-count--inline-after {
	margin-left: 6px;
}

.po-sidecart-count--inline-before {
	margin-right: 6px;
}


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

/* max-width:100% alone caps the panel to the viewport's full width, but the
   panel also carries margin: var(--po-sidecart-padding-outer) on all sides
   (see PANEL above) - that margin sits OUTSIDE the width, so a 100%-wide
   box plus outer-padding margin on both sides added more than 100vw of
   total space, pushing the panel past the right (or left) edge of the
   screen. Subtracting twice the outer padding from the cap keeps the
   panel plus its margin within the viewport. */
.po-sidecart-panel{max-width: calc(100% - (var(--po-sidecart-padding-outer, 0px) * 2))}

}