/* =========================================================================
   Voley PLT — cart drawer and cart page

   The drawer is dark, like the header and the mega menu, so it reads as part of
   the site's furniture rather than as page content. The cart page is white, like
   the shop.
   ========================================================================= */

/* Drawer ------------------------------------------------------------------ */
.voley-cart {
	position: fixed;
	inset: 0;
	z-index: 1300;
}

.voley-cart[hidden] {
	display: none;
}

.voley-cart__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	transition: opacity 0.34s var(--v-ease);
}

.voley-cart.is-open .voley-cart__scrim {
	opacity: 1;
}

.voley-cart__panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(420px, 92vw);
	height: 100%;
	background: var(--v-ink);
	color: var(--v-white);
	transform: translateX(100%);
	transition: transform 0.36s var(--v-ease);
}

.voley-cart.is-open .voley-cart__panel {
	transform: none;
}

/* Mid-update: dim it and swallow clicks, so a second tap cannot race the
   first while the server is still deciding what the cart holds. */
.voley-cart__panel.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

.voley-cart__inner {
	display: flex;
	flex-direction: column;
	min-height: 0;
	height: 100%;
}

.voley-cart__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex: none;
	padding: 18px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.voley-root.voley-root .voley-cart__heading {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--v-font-display);
	font-size: 18px;
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--v-white);
}

.voley-cart__heading span {
	display: grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: var(--v-r-pill);
	background: var(--v-accent);
	font-family: var(--v-font-body);
	font-size: var(--v-fs-xs);
	font-style: normal;
	font-weight: 700;
}

/* Free shipping progress -------------------------------------------------- */
.voley-cart__ship {
	flex: none;
	padding: 16px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
}

.voley-cart__ship p {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 10px;
	font-size: var(--v-fs-sm);
	color: rgba(255, 255, 255, 0.78);
}

.voley-cart__ship .woocommerce-Price-amount,
.voley-cart__ship .voley-amount {
	font-weight: 700;
	color: var(--v-white);
}

.voley-cart__ship.is-free p {
	color: var(--v-white);
	font-weight: 600;
}

.voley-cart__ship.is-free svg {
	color: var(--v-accent);
}

.voley-cart__bar {
	display: block;
	height: 4px;
	border-radius: var(--v-r-pill);
	background: rgba(255, 255, 255, 0.14);
	overflow: hidden;
}

.voley-cart__bar i {
	display: block;
	width: var(--v-pct, 0%);
	height: 100%;
	border-radius: var(--v-r-pill);
	background: var(--v-accent);
	transition: width 0.45s var(--v-ease);
}

/* Lines ------------------------------------------------------------------- */
.voley-cart__list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px 20px;
}

.voley-cline {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) 26px;
	gap: 14px;
	align-items: start;
	padding: 16px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.voley-cline:last-child {
	border-bottom: 0;
}

.voley-cline__media {
	display: block;
	aspect-ratio: 1;
	border-radius: 10px;
	overflow: hidden;
	background: var(--v-white);
}

.voley-root .voley-cline__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.voley-cline__body {
	display: block;
	min-width: 0;
}

.voley-cline__title {
	display: block;
	font-size: var(--v-fs-sm);
	font-weight: 600;
	line-height: 1.4;
	color: var(--v-white);
}

.voley-cline__title a:hover {
	color: var(--v-accent);
}

.voley-cline__meta {
	display: block;
	margin-top: 3px;
	font-size: var(--v-fs-xs);
	color: rgba(255, 255, 255, 0.5);
}

.voley-cline__meta p {
	margin: 0;
}

.voley-cline__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
}

.voley-cline__price {
	font-family: var(--v-font-display);
	font-size: var(--v-fs-sm);
	font-style: italic;
	font-weight: 800;
	color: var(--v-white);
}

.voley-cline__remove {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.45);
	transition: background-color 0.2s var(--v-ease), color 0.2s var(--v-ease);
}

.voley-cline__remove:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--v-white);
}

/* Quantity stepper -------------------------------------------------------- */
.voley-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--v-r-pill);
}

.voley-qty__btn {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	color: var(--v-white);
	transition: background-color 0.2s var(--v-ease), color 0.2s var(--v-ease);
}

.voley-qty__btn:hover:not(:disabled) {
	background: var(--v-accent);
}

.voley-qty__btn:disabled {
	opacity: 0.3;
	cursor: default;
}

.voley-qty__n {
	min-width: 22px;
	font-size: var(--v-fs-sm);
	font-weight: 700;
	text-align: center;
}

/* Foot -------------------------------------------------------------------- */
.voley-cart__foot {
	flex: none;
	padding: 18px 20px 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	background: var(--v-ink-2);
}

.voley-cart__sum {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	font-size: var(--v-fs-body);
}

.voley-cart__sum span {
	color: rgba(255, 255, 255, 0.62);
}

.voley-cart__sum b {
	font-family: var(--v-font-display);
	font-size: 21px;
	font-style: italic;
	font-weight: 800;
	color: var(--v-white);
}

.voley-cart__note {
	margin: 4px 0 16px;
	font-size: var(--v-fs-xs);
	color: rgba(255, 255, 255, 0.42);
}

.voley-cart__view {
	display: block;
	margin-top: 12px;
	font-size: var(--v-fs-sm);
	font-weight: 600;
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
	transition: color 0.2s var(--v-ease);
}

.voley-cart__view:hover {
	color: var(--v-accent);
}

/* Empty ------------------------------------------------------------------- */
.voley-cart__empty {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 40px 30px;
	text-align: center;
}

.voley-cart__empty i {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.5);
}

.voley-cart__empty p {
	margin: 0;
	font-size: var(--v-fs-sm);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.55);
}

.voley-cart__empty b {
	display: block;
	margin-bottom: 4px;
	font-family: var(--v-font-display);
	font-size: 17px;
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--v-white);
}

/* =========================================================================
   Cart page
   ========================================================================= */

.voley-cartpage {
	padding-block: 46px 90px;
	background: var(--v-white);
}

/* Two columns: the items, then the totals panel pinned alongside them. The
   wrapper bounds the sticky panel — same reasoning as the product gallery. */
.voley-cartpage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 20px 46px;
	align-items: start;
}

.voley-cartpage > form.woocommerce-cart-form {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

.voley-cartpage > .cart-collaterals {
	grid-column: 2;
	grid-row: 1;
	width: auto;
}

/* Everything else WooCommerce prints (notices, cross-sells) runs full width. */
.voley-cartpage > .woocommerce-notices-wrapper,
.voley-cartpage > .cart-empty,
.voley-cartpage > .return-to-shop,
.voley-cartpage > p {
	grid-column: 1 / -1;
}

/* Items ------------------------------------------------------------------
   WooCommerce's cart is a real <table>, so it is re-declared as blocks and laid
   out as a grid per row.

   Everything here is scoped to the cart *form*. The totals panel further down
   is also a table.shop_table, and an unscoped `tr { display: block }` would
   outrank its own flex rule and stack every label above its value. */
.voley-cartpage .woocommerce-cart-form table.shop_table {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
}

.voley-cartpage .woocommerce-cart-form table.shop_table thead {
	display: none;
}

.voley-cartpage .woocommerce-cart-form table.shop_table tbody,
.voley-cartpage .woocommerce-cart-form table.shop_table tr,
.voley-cartpage .woocommerce-cart-form table.shop_table td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
}

.voley-cartpage .woocommerce-cart-form table.shop_table tr.cart_item {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr) auto;
	gap: 8px 18px;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid var(--v-line-soft);
}

.voley-cartpage tr.cart_item td.product-remove {
	grid-column: 3;
	grid-row: 1;
	align-self: start;
	justify-self: end;
}

.voley-cartpage tr.cart_item td.product-thumbnail {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.voley-cartpage tr.cart_item td.product-name {
	grid-column: 2;
	grid-row: 1;
}

/* Unit price is redundant next to the line subtotal at this width. */
.voley-cartpage tr.cart_item td.product-price {
	display: none;
}

.voley-cartpage tr.cart_item td.product-quantity {
	grid-column: 2;
	grid-row: 2;
}

.voley-cartpage tr.cart_item td.product-subtotal {
	grid-column: 3;
	grid-row: 2;
	justify-self: end;
	font-family: var(--v-font-display);
	font-size: var(--v-fs-body);
	font-style: italic;
	font-weight: 800;
	color: var(--v-ink);
}

.voley-root .voley-cartpage td.product-thumbnail img {
	width: 92px;
	height: 92px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--v-grey-50);
}

.voley-cartpage td.product-name a {
	font-size: var(--v-fs-body);
	font-weight: 600;
	color: var(--v-ink);
}

.voley-cartpage td.product-name a:hover {
	color: var(--v-accent);
}

.voley-cartpage td.product-name .variation {
	margin: 4px 0 0;
	font-size: var(--v-fs-xs);
	color: var(--v-grey-500);
}

.voley-cartpage td.product-name .variation p {
	margin: 0;
}

.voley-cartpage a.remove {
	display: grid !important;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--v-grey-100);
	color: var(--v-grey-600) !important;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s var(--v-ease), color 0.2s var(--v-ease);
}

.voley-cartpage a.remove:hover {
	background: var(--v-ink) !important;
	color: var(--v-white) !important;
}

.voley-cartpage .quantity {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 4px;
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-pill);
}

.voley-cartpage .quantity input.qty {
	width: 58px;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--v-fs-sm);
	font-weight: 700;
	text-align: center;
	color: var(--v-ink);
	appearance: textfield;
}

.voley-cartpage .quantity input.qty:focus {
	outline: none;
}

/* Coupon + update row ----------------------------------------------------- */
.voley-cartpage td.actions {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 26px !important;
}

.voley-cartpage td.actions .coupon {
	display: flex;
	gap: 10px;
}

.voley-cartpage td.actions input#coupon_code {
	width: 190px;
	height: 46px;
	padding: 0 18px;
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-pill);
	background: var(--v-white);
	font-size: var(--v-fs-sm);
	color: var(--v-ink);
}

.voley-cartpage td.actions input#coupon_code:focus {
	outline: none;
	border-color: var(--v-accent);
}

.voley-cartpage td.actions button {
	height: 46px;
	padding: 0 24px;
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-pill);
	background: var(--v-white);
	font-family: var(--v-font-display);
	font-size: var(--v-fs-xs);
	font-style: italic;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--v-ink);
	cursor: pointer;
	transition: background-color 0.2s var(--v-ease), color 0.2s var(--v-ease), border-color 0.2s var(--v-ease);
}

.voley-cartpage td.actions button:hover:not(:disabled) {
	border-color: var(--v-ink);
	background: var(--v-ink);
	color: var(--v-white);
}

.voley-cartpage td.actions button[name="apply_coupon"] {
	border-color: var(--v-accent);
	background: var(--v-accent);
	color: var(--v-white);
}

.voley-cartpage td.actions button[name="apply_coupon"]:hover {
	background: var(--v-accent-ink);
	border-color: var(--v-accent-ink);
}

.voley-cartpage td.actions button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Totals panel ------------------------------------------------------------ */
.voley-cartpage .cart_totals {
	padding: 26px 24px;
	border: 1px solid var(--v-line-soft);
	border-radius: var(--v-r-card);
	background: var(--v-grey-50);
}

.voley-root.voley-root .voley-cartpage .cart_totals > h2 {
	margin-bottom: 18px;
	font-size: var(--v-fs-h3);
	font-family: var(--v-font-display);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--v-ink);
}

.voley-cartpage .cart_totals table.shop_table,
.voley-cartpage .cart_totals table {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
}

.voley-cartpage .cart_totals table.shop_table tbody,
.voley-cartpage .cart_totals tbody {
	display: block;
}

.voley-cartpage .cart_totals table.shop_table tr,
.voley-cartpage .cart_totals tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--v-line-soft);
}

.voley-cartpage .cart_totals table.shop_table th,
.voley-cartpage .cart_totals table.shop_table td,
.voley-cartpage .cart_totals th,
.voley-cartpage .cart_totals td {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--v-fs-sm);
	text-align: right;
}

.voley-cartpage .cart_totals th {
	font-weight: 600;
	text-align: left;
	color: var(--v-grey-600);
}

.voley-cartpage .cart_totals table.shop_table tr.order-total,
.voley-cartpage .cart_totals tr.order-total {
	border-bottom: 0;
	padding-top: 14px;
}

.voley-cartpage .cart_totals tr.order-total th {
	font-size: var(--v-fs-body);
	color: var(--v-ink);
}

.voley-cartpage .cart_totals tr.order-total td {
	font-family: var(--v-font-display);
	font-size: 22px;
	font-style: italic;
	font-weight: 800;
	color: var(--v-ink);
}

.voley-cartpage .cart_totals .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.voley-cartpage .cart_totals .woocommerce-shipping-destination {
	margin: 6px 0 0;
	font-size: var(--v-fs-xs);
	color: var(--v-grey-500);
	text-align: left;
}

.voley-cartpage .wc-proceed-to-checkout {
	padding: 18px 0 0;
}

.voley-cartpage a.checkout-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	padding: 0 26px;
	border: 0;
	border-radius: var(--v-r-pill);
	background: var(--v-accent);
	color: var(--v-white);
	font-family: var(--v-font-display);
	font-size: var(--v-fs-sm);
	font-style: italic;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.25s var(--v-ease);
}

.voley-cartpage a.checkout-button:hover {
	background: var(--v-accent-ink);
}

/* Empty cart -------------------------------------------------------------- */
.voley-cartpage .cart-empty,
.voley-cartpage .wc-empty-cart-message {
	margin: 0 0 20px;
	font-family: var(--v-font-display);
	font-size: var(--v-fs-h3);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--v-ink);
}

.voley-cartpage .return-to-shop a.button {
	display: inline-flex;
	align-items: center;
	height: 46px;
	padding: 0 26px;
	border-radius: var(--v-r-pill);
	background: var(--v-accent);
	color: var(--v-white);
	font-family: var(--v-font-display);
	font-size: var(--v-fs-sm);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
	text-decoration: none;
}

/* Cross-sells ------------------------------------------------------------- */
.voley-cartpage .cross-sells {
	grid-column: 1 / -1;
	margin-top: 60px;
	padding-top: 44px;
	border-top: 1px solid var(--v-line-soft);
	width: auto;
}

.voley-root.voley-root .voley-cartpage .cross-sells > h2 {
	margin-bottom: 26px;
	font-size: var(--v-fs-h2);
}

/* Responsive -------------------------------------------------------------- */
@media (min-width: 1001px) and (min-height: 640px) {
	.voley-cartpage .cart-collaterals {
		position: sticky;
		top: calc(var(--v-header-h) + 20px);
	}
}

@media (max-width: 1000px) {
	.voley-cartpage {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	.voley-cartpage > form.woocommerce-cart-form,
	.voley-cartpage > .cart-collaterals {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

@media (max-width: 560px) {
	.voley-cartpage {
		padding-block: 30px 60px;
	}

	.voley-cartpage .woocommerce-cart-form table.shop_table tr.cart_item {
		grid-template-columns: 72px minmax(0, 1fr) auto;
		gap: 6px 14px;
	}

	.voley-root .voley-cartpage td.product-thumbnail img {
		width: 72px;
		height: 72px;
	}

	.voley-cartpage td.actions {
		flex-direction: column;
		align-items: stretch;
	}

	.voley-cartpage td.actions .coupon {
		width: 100%;
	}

	.voley-cartpage td.actions input#coupon_code {
		flex: 1 1 auto;
		width: auto;
	}
}