.desktop .product { width:75%; margin-inline:auto; }
.tablet .product { width:85%; margin-inline:auto; }

.product { 
	display:flex; 
	flex-wrap: wrap;
	flex-direction: row;
	gap:20px; 
	border-bottom: 1px solid rgba(0,0,0,.15);
	padding-block: 30px;
	margin-bottom: 20px;
	position: relative;
}
.no_border .product, .product:not(.force_border):last-child { border-bottom: 0; }

.pr-text { width:calc(100% - 170px); }
.lg .pr-text { width:calc(100% - 220px); }
.pr-title { font-size:18px; font-weight:bold; }
.pr-price { font-size:15px; padding-left:10px;  }

.pr-img { width: 150px; }
.pr-img img { 
	max-width: 150px; 
	border:4px solid rgba(0,0,0,.15);
	border-radius: 15px;
}

.lg .pr-img { width: 200px; height:200px; }
.lg .pr-img img { 
	width: 200px; 
	max-width: 200px; 
	height:200px;
}


.mobile .product { display: block; }
.mobile .pr-img { margin-inline:auto; width: 120px; margin-bottom:10px; }
.mobile .pr-img img { width: 120px }
.mobile .lg :is(.pr-img,.pr-img img) { width: 200px; max-width:200px; height:200px; }

.mobile .pr-text { width:100%; }
.mobile .pr-title, .mobile .pr-price { padding-left:0; text-align:center;  }
.mobile .pr-sub_title { text-align:center; }

.qty_input {
	border:2px solid rgba(0,0,0,.15);
	width: 150px !important;
	display: flex;
	border-radius: 25px;
	height: 40px;
	margin-inline: auto;
}

.qty_input button {
	border: 0;
	background-color: #f0f0f0;
	width: 50px;
	height: 100%;
	border-radius: 25px;
}
.qty_input input { 
	border:0; 
	text-align: center;
	width: 50px;
	height: 100%;
	outline: none;
}
.qty_input input:focus { border:0; background-color: #f0f0f0; }

.qty_input:focus-within  {
	background-color: #f0f0f0;
	border-color: #437ee1;
}
.qty_input:focus-within input { background-color: #f0f0f0; }

.soldout { 
	margin-top:20px;
	color:darkred; 
}
.comingsoon { 
	margin-top:20px;
	color:var(--blue); 
}

/* ----~~~~ Cart ~~~~---- */

.cart .thead {
	text-transform: uppercase;
	padding-bottom: 5px;
	font-size: 11px;
	color: gray;
	margin-bottom: 10px;
}
.cart .product { padding-block: 20px; margin-bottom: 10px; }
.mobile .cart .product { display: flex; }
.mobile .cart .product.thead { display:none; }

.cart .pr-img { width: 75px; }
.cart .pr-img img { max-width: 75px; }
.cart .pr-subtotal {
	width: 60px;
	text-align: right;
	font-weight: bold;
	height: 20px;
	position: relative;
}
.cart .pr-subtotal.loading:after { border-color: #000 transparent transparent; left:unset; right: 0; }
.cart .pr-text { width: calc(100% - 175px); }
.mobile .cart :is(.pr-title,.pr-price) { text-align:left; }
.mobile .cart .pr-price { padding-left:10px; }
.cart .qty_input { margin-inline:0; }
.cart .qty_ext { display:flex; gap:30px; }
.mobile .cart .qty_ext { margin-top:20px; }


.cart .qty_ext .trashcan {
	width: 40px;
	background: #ebebeb;
	border-radius: 50%;
	color: black;
}
.cart .qty_ext .trashcan:hover { color:red; }
.cart .product:last-child { border-bottom: 0; }
#subtotal {
	font-weight: bold;
	font-size: 20px;
	border-top: 2px solid #d9d9d9;
	padding-block: 5px;
	margin-top: 40px;
	margin-bottom: 0;
	border-bottom: 0;
}
.mobile #subtotal { display:flex; }

body:is(.mobile,.tablet) #col-checkout { width: 100%; max-width: 100%; flex: unset;}
body:is(.mobile,.tablet) #col-total { position: relative; top: unset; width: 100%; }
body:is(.mobile,.tablet) #checkout-pay { display:none; }

#cart_ship  { 
	padding-block: 0;
	border-bottom: 0;
	padding-left: 15px;
	font-style: italic;
}
#cart_empty {
	background: url(/img/misc/cart-empty.png) center no-repeat;
	width: 100%;
	height: 350px;
	font-size: 36px;
	font-weight: bold;
	padding-top: 30px;
	text-align: center;
}

.mobile #cart_empty { padding-top:80px; font-size: 22px; }
.mobile:not(.wide) #cart_empty { background-size:85%; }
.mobile.wide #cart_empty { background-size:75%; }
.desktop:not(.wide) #cart_empty { background-size:400px; }
.tablet #cart_empty { background-size:350px; }


/* ----~~~~ Sub Products ~~~~---- */
#sub_prds {
	display:flex;
	flex-wrap: wrap;
	gap:10px;
}
.mobile #sub_prds {
	justify-content: center;
	margin-top: 20px;
}

#sub_prds a {
	border:2px solid silver;
	border-radius: 5px;
	padding: 3px;
	transition:all .2s ease-in-out;
	position:relative;
	&:hover {
		border:2px solid var(--blue);
		box-shadow: 0 0 2px 3px rgba(0,0,0,.15);
	}
	&:is(:focus,:active) {
		top:1px;
		left:1px;
		box-shadow: none;
	}
	&:is(.active) {
		border:2px solid var(--blue);
	}
}

/* ----~~~~ Flip Image ~~~~---- */
.flip-container { 
	perspective: 1000px; 
	cursor:pointer; 
	position: relative; 
	height: 150px;
}
.flip-container.lg { height:200px; }


.flip-container.flip_tgl_a::after {
	content: "\e915";
	position: absolute;
	bottom: 14px;
	left: 20px;
	right: unset;
	transform: translateY(0%);
	top: unset;
	pointer-events: none;
}

a.flip_tgl {
	z-index: 3;
	position: absolute;
	bottom: 10px;
	left: 10px;
	background: #ebebeb;
	border-radius: 50%;
	height: 30px;
	width: 30px;
}
.mobile a.flip_tgl {
	height: 40px;
	width: 40px;
	background: transparent;
}

.flip-container.flip .flipper { transform: rotateY(180deg); }

.mobile :is(.flip-container,.front,.back) { width: 120px; height: 120px; }
.lg :is(.flip-container,.front,.back),
.mobile .lg :is(.flip-container,.front,.back) { width: 200px; height: 200px; }

.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}
.flipper .front, .flipper .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

.flipper .front { z-index: 2; transform: rotateY(0deg); }
.flipper .back { transform: rotateY(180deg); }