/* =========================================================================
   POPUP CART  —  edit the variables below to fine-tune the design
   ========================================================================= */
:root {
	--pc-yellow:      #F9D503;   /* right column background            */
	--pc-green:       #09D12E;   /* "Add to cart" button              */
	--pc-left-bg:     #F2F0EF;   /* left column background             */
	--pc-black:       #000;
	--pc-white:       #ffffff;

	--pc-serif: 'STKBureauSefif', "Times New Roman", "Times", serif;      /* titles / prices */
	--pc-mono:  'HALTimezoneMono', "Courier", monospace;            /* labels          */

	--pc-width:       68vw;      /* whole popup width on desktop      */
	--pc-max-width:   1120px;
	--pc-left-width:  360px;     /* fixed width of the left column     */
	--pc-anim:        600ms cubic-bezier(0.47, 0.7, 0.36, 1.15);
}

/* ---- The menu trigger button (Cart (0)) -------------------------------- */
.cart-menu {
	display: inline-block;
	cursor: pointer;
}
.cart-menu .cart-text {
	font-family: var(--pc-serif);
	font-size: 24px;
	color: var(--pc-black);
	line-height: normal;
	white-space: nowrap;
}

/* ---- Overlay ----------------------------------------------------------- */
.popup-cart-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--pc-anim), visibility var(--pc-anim);
	z-index: 99998;
}
.popup-cart-overlay.is-visible {
	opacity: 1;
	visibility: visible;
}

/* ---- The sliding panel ------------------------------------------------- */
.popup-cart-wrapper {
	position: fixed;
	transform: translateX(120%);
	transition: transform var(--pc-anim);
	z-index: 99999;
	width: 720px;
    max-width: calc(100vw);
    height: calc(100vh - 80px);
    top: 40px;
    right: 40px;
    border-radius: 5px;
    overflow: hidden;
	box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
}
.popup-cart-wrapper.is-open {
	transform: translateX(0);
}
.cart-popup-wrap {
	display: flex;
	height: 100%;
	overflow: hidden;
}


/* =========================================================================
   LEFT COLUMN — You may also like
   ========================================================================= */
.also-like-col {
	background: var(--pc-left-bg);
	overflow-y: auto;
	width: 240px;
    padding: 45px 20px;
}
.also-like-col h5 {
	font-family: 'HALTimezoneMono' !important;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--pc-black);
	text-align: center;
	font-weight: 400;
    font-size: 18px;
    margin-bottom: 40px;
    letter-spacing: normal;
	margin-top: 0px;
}

.product-list-cart-rel {
	list-style: none;
	margin: 0;
	padding: 0;
}
.product-list-cart-rel .product-item {
	margin-bottom: 40px;
}
.product-list-cart-rel .product-item:last-child {
	margin-bottom: 0;
}

.img-but-wrap {
	position: relative;
	line-height: 0;
	border-radius: 5px;
    overflow: hidden;
}
.img-but-wrap .featured-img,
.img-but-wrap .product-wrap-cart {
	line-height: 0;
}
.img-but-wrap .featured-img img {
	display: block;
	width: 100%;
	height: 266px;
	object-fit: cover;
}

/* Green button sitting at the bottom of the image */
.addtocart-button,
.addtocart-button-var {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	background: var(--pc-green);
	text-align: center;
	text-decoration: none;
	padding: 13px 10px;
	transition: filter .15s ease;
	font-size: 14px;
    font-family: 'STKBureauSefif';
    font-weight: 600;
    color: #000 !important;
    height: 30px;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: normal;
}
.addtocart-button:hover,
.addtocart-button-var:hover {
	background: #000 !important;
    color: #F2F0EE !important;
}
/* Hide WooCommerce's auto "View cart" link + loading text */
.also-like-col .added_to_cart {
	display: none !important;
}

.product-cart-info {
	margin-top: 8px;
}
.title-price-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}
.product-title-cart {
	font-family: var(--pc-serif);
	font-weight: 700;
	font-size: 14px;
	line-height: normal;
	color: var(--pc-black);
	margin: 0;
}
.pr-price-cart {
	color: var(--pc-black);
	white-space: nowrap;
	font-size: 14px;
    font-weight: 600;
    font-family: 'STKBureauSefif';
    line-height: normal;
}
.pr-price-cart del {
	opacity: .5;
	font-weight: 400;
	margin-right: 4px;
}
.pr-subtitle-rel {
	font-family: var(--pc-serif);
	font-size: 18px;
	color: var(--pc-black);
	margin-top: 3px;
}

/* =========================================================================
   RIGHT COLUMN — Cart
   ========================================================================= */
.cart-list-col {
	background: var(--pc-yellow);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding: 40px;
    width: 480px;
}
.cart-col-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 35px;
}
.col-title {
	font-family: var(--pc-serif);
	color: var(--pc-black);
	font-size: 24px;
    font-weight: 400;
    line-height: normal;
}
.popup-cart-close {
	font-family: var(--pc-serif);
	font-size: 36px;
	line-height: 1;
	color: var(--pc-black);
	cursor: pointer;
	user-select: none;
}

.product-list-in-cart {
	flex: 1 1 auto;
}
.cart-empty-msg {
	font-family: var(--pc-serif);
	font-size: 20px;
	color: var(--pc-black);
	margin: 10px 0;
}
.pr-list-in-cart {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pr-item-in-cart {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 30px;
	opacity: 1;
	transition: opacity .2s ease;
}
.pr-item-in-cart.removing {
	opacity: .35;
	pointer-events: none;
}
.pr-item-in-cart .featured-img {
	width: 75px;
	line-height: 0;
	display: block;
}
.pr-item-in-cart .featured-img img {
	object-fit: cover;
	display: block;
	width: 75px;
    height: 99px;
    border-radius: 2px;
}
.pr-info-mid {
	width: calc(100% - 175px);
	padding: 0px;
}
.pr-title {
	font-family: var(--pc-serif);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.15;
	color: var(--pc-black);
}
.pr-subtitle {
	font-family: var(--pc-serif);
	font-size: 20px;
	color: var(--pc-black);
	margin-top: 2px;
}
.pr-and-rem {
	flex: 0 0 auto;
	text-align: right;
	padding-top: 0px;
	margin-left: auto;
}
.pr-price {
	display: block;
	font-family: var(--pc-serif);
	color: var(--pc-black);
	font-weight: 600;
    font-size: 18px;
    line-height: normal;
}
.remove-pr-cart {
	display: inline-block;
	font-family: var(--pc-mono);
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--pc-black);
	cursor: pointer;
	user-select: none;
	margin: 0px;
    font-size: 14px;
    line-height: normal;
}
.remove-pr-cart:hover {
	text-decoration: underline;
}

.checkout-but {
	margin-top: auto;
	display: block;
	background: var(--pc-black);
	color: var(--pc-white);
	font-family: var(--pc-serif);
	text-align: center;
	text-decoration: none;
	padding: 22px 20px;
	transition: opacity .15s ease;
	font-size: 18px;
    font-weight: 600;
    padding: 15px 30px;
    border-radius: 5px;
    color: #f2f0ef !important;
}
.checkout-but:hover {
	color: #000 !important;
	background: #09D12E;
}

.also-like-col ,  .cart-list-col{
  overflow-y: auto; /* ή overflow: auto; αν θες και οριζόντιο scroll */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer / παλιό Edge */
}

.also-like-col::-webkit-scrollbar , .cart-list-col::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge, Opera */
  width: 0;
  height: 0;
}



/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1200px) {
	:root { --pc-width: 80vw; --pc-left-width: 320px; }
}
@media (max-width: 810px) {
	.popup-cart-wrapper {
		width: 100%;
		max-width: 100%;
	}
	.cart-popup-wrap {
		flex-direction: column;
		overflow-y: auto;
	}
	.also-like-col,
	.cart-list-col {
		flex: 0 0 auto;
		width: 100%;
		overflow: visible;
	}
	.cart-list-col { order: 1; }   /* cart first on mobile */
	.also-like-col { order: 2; }
	.checkout-but { margin-top: 26px; }
	.col-title { font-size: 26px; }


	.popup-cart-wrapper.is-open {
		top: 20px;
		right: 15px;
		width: calc(100% - 30px);
		height: calc(100% - 40px);
	}

	.cart-list-col {
		padding: 15px;
		height: calc(100% - 180px);
	}

	.cart-col-head {
		margin-bottom: 30px;
	}

	.col-title {
		font-size: 20px;
	}

	li.pr-item-in-cart {
		margin-bottom: 10px;
	}


	.pr-title {
		font-size: 14px;
	}

	span.pr-price {
		font-size: 14px;
	}

	span.remove-pr-cart {
		font-size: 13px;
	}

	.cart-list-col {}

	.also-like-col {
		padding: 15px;
		height: 180px;
	}

	.also-like-col h5 {
		text-align: left;
		font-size: 13px;
		margin-bottom: 15px;
	}

	ul.product-list-cart-rel {
		display: flex;
		overflow: auto;
	}

	.product-list-cart-rel .product-item {
		flex: 0 0 248px;
		margin-bottom: 0px;
		padding-right: 30px;
		margin-right: 30px;
		border-right: solid 1px #000;
		display: flex;
		gap: 5px;
	}

	.title-price-row {
		flex-direction: column;
		gap: 5px;
	}

	.product-cart-info {
		margin-top: 0px;
	}

	.img-but-wrap .featured-img img {
		height: 110px;
	}

	.addtocart-button, .addtocart-button-var {
		font-size: 13px;
		height: 25px;
	}

	.checkout-but {
		margin-top: 15px;
	}

	.product-list-in-cart {
		height: calc(100vh - 388px);
		overflow: auto;
	}

	.popup-cart-wrapper {
		top: 20px;
		right: 15px;
	}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.popup-cart-wrapper,
	.popup-cart-overlay {
		transition: none;
	}
}