/*
 * Falz. Shop pages: catalogue, product, cart, checkout.
 * WooCommerce's own stylesheets are switched off; this file replaces them.
 */

.shop {
	padding-block: clamp(36px, 5vw, 72px) clamp(64px, 8vw, 128px);
}

/* Notices ---------------------------------------------------------------- */

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 28px;
	padding: 16px 20px;
	color: var(--fz-ink);
	list-style: none;
	background: #f1f3f5;
	border-left: 3px solid var(--fz-ink);
}

.woocommerce-message {
	border-left-color: var(--fz-ok);
}

.woocommerce-error {
	display: grid;
	gap: 6px;
	justify-content: stretch;
	border-left-color: var(--fz-error);
}

.woocommerce-message .button,
.woocommerce-info .button {
	order: 2;
	min-height: 40px;
	padding: 6px 18px;
	font-size: 15px;
}

.woocommerce-message:focus-visible,
.woocommerce-error:focus-visible,
.woocommerce-info:focus-visible {
	outline-offset: 0;
}

/* Catalogue -------------------------------------------------------------- */

.woocommerce-products-header {
	margin-bottom: clamp(24px, 3vw, 44px);
}

.shop-cats {
	margin-bottom: clamp(28px, 4vw, 56px);
}

.shop-cats ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px clamp(18px, 2.4vw, 36px);
	padding-bottom: 14px;
	list-style: none;
	border-bottom: 1px solid var(--fz-on-wall-line);
}

.shop-cats a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 18px;
	color: var(--fz-on-wall-muted);
	text-decoration: none;
}

.shop-cats a:hover,
.shop-cats a[aria-current] {
	color: var(--fz-on-wall);
}

.shop-cats a[aria-current] {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 8px;
}

.woocommerce-ordering {
	display: flex;
	justify-content: flex-end;
	margin: calc(-1 * clamp(28px, 4vw, 56px) - 62px) 0 clamp(28px, 4vw, 56px);
	pointer-events: none;
}

.woocommerce-ordering select {
	width: auto;
	min-height: 44px;
	padding: 6px 12px;
	font-size: 16px;
	color: var(--fz-on-wall);
	background: var(--fz-wall);
	border-color: var(--fz-on-wall-line);
	pointer-events: auto;
}

.woocommerce-ordering select option {
	color: var(--fz-ink);
	background: var(--fz-paper);
}

@media (max-width: 900px) {
	.woocommerce-ordering {
		justify-content: flex-start;
		margin: 0 0 28px;
	}
}

.woocommerce-pagination {
	margin-top: clamp(40px, 5vw, 72px);
}

.woocommerce-pagination ul {
	display: flex;
	gap: 8px;
	justify-content: center;
	list-style: none;
}

.woocommerce-pagination a,
.woocommerce-pagination span {
	display: grid;
	min-width: 44px;
	min-height: 44px;
	place-items: center;
	text-decoration: none;
	border: 1px solid var(--fz-on-wall-line);
}

.woocommerce-pagination .current {
	color: var(--fz-ink);
	background: var(--fz-paper);
	border-color: var(--fz-paper);
}

/* Product page ----------------------------------------------------------- */

.single-product .shop {
	padding-top: 0;
}

.single-product .shop > .wrap {
	max-width: none;
	padding-inline: 0;
}

.single-product .woocommerce-notices-wrapper {
	padding: 20px var(--fz-gutter) 0;
}

.single-product .woocommerce-notices-wrapper > * {
	margin-bottom: 20px;
}

.product-page__top {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
}

.product-page__gallery {
	display: grid;
	align-content: center;
	min-height: min(100vh - var(--fz-header), 860px);
	padding: clamp(20px, 3vw, 48px);
	background: var(--fz-wall);
}

.product-gallery__main {
	display: grid;
	place-items: center;
}

.product-gallery__main img {
	width: 100%;
	max-width: 760px;
	max-height: min(100vh - var(--fz-header) - 180px, 720px);
	object-fit: contain;
}

.product-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: clamp(12px, 2vw, 24px);
	list-style: none;
}

.product-gallery__thumbs button {
	display: grid;
	width: 76px;
	height: 76px;
	padding: 6px;
	place-items: center;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--fz-radius);
	cursor: pointer;
	transition: border-color 0.15s;
}

.product-gallery__thumbs button:hover,
.product-gallery__thumbs button[aria-pressed="true"] {
	border-color: rgb(255 255 255 / 70%);
}

.product-gallery__thumbs button:focus-visible {
	outline-color: #fff;
}

.product-gallery__thumbs img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.product-page__panel {
	display: grid;
	align-content: center;
	max-width: 660px;
	padding: clamp(28px, 4.5vw, 80px);
}

.product_title {
	font-size: clamp(32px, 3.4vw, 52px);
	letter-spacing: -0.02em;
}

.product-page__panel .price {
	margin-top: 14px;
	font-family: var(--fz-font-head);
	font-size: clamp(24px, 2.2vw, 32px);
	font-weight: 500;
	line-height: 1.1;
}

.woocommerce-product-details__short-description {
	max-width: 32em;
	margin-top: 18px;
	color: var(--fz-muted);
}

form.cart {
	margin-top: clamp(22px, 2.6vw, 34px);
}

table.variations {
	width: 100%;
	border-collapse: collapse;
}

table.variations tr {
	display: grid;
	gap: 8px;
	margin-bottom: 20px;
}

table.variations th,
table.variations td {
	padding: 0;
	text-align: left;
}

table.variations label {
	font-size: 14px;
	font-weight: 600;
	color: var(--fz-muted);
}

/* The select stays for WooCommerce scripts and screen readers; buttons replace it visually. */
table.variations td:has(.choice) select {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

table.variations select {
	min-height: 48px;
	padding: 8px 12px;
	background: var(--fz-paper);
	border: 1px solid var(--fz-line);
	border-radius: var(--fz-radius);
}

.choice {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.choice__option {
	display: inline-flex;
	gap: 9px;
	align-items: center;
	min-height: 46px;
	padding: 6px 16px;
	font-size: 16px;
	background: var(--fz-paper);
	border: 1px solid var(--fz-line);
	border-radius: var(--fz-radius);
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.choice__option:hover {
	border-color: var(--fz-ink);
}

.choice__option[aria-pressed="true"] {
	color: var(--fz-paper);
	background: var(--fz-ink);
	border-color: var(--fz-ink);
}

.choice__option:disabled {
	opacity: 0.35;
	cursor: default;
}

.choice__option i {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 20%), 0 0 0 1px rgb(255 255 255 / 60%);
}

.single_variation {
	min-height: 44px;
	margin-bottom: 16px;
}

.single_variation .price {
	margin-top: 0;
}

.woocommerce-variation-description,
.woocommerce-variation-availability {
	font-size: 15px;
	color: var(--fz-muted);
}

.woocommerce-variation-add-to-cart,
form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
}

.quantity {
	display: inline-flex;
}

.quantity .qty {
	width: 76px;
	min-height: 54px;
	padding: 0 10px;
	font-size: 17px;
	text-align: center;
	background: var(--fz-paper);
	border: 1px solid var(--fz-line);
	border-radius: var(--fz-radius);
}

.single_add_to_cart_button {
	flex: 1 1 200px;
	max-width: 320px;
}

.product-page__details {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 110px);
	max-width: calc(var(--fz-wrap) + 2 * var(--fz-gutter));
	margin-inline: auto;
	padding: clamp(48px, 6vw, 96px) var(--fz-gutter) 0;
}

.product-page__details h2,
.related > h2 {
	margin-bottom: 18px;
	font-size: clamp(26px, 2.4vw, 36px);
}

.related {
	max-width: calc(var(--fz-wrap) + 2 * var(--fz-gutter));
	margin-inline: auto;
	padding: clamp(56px, 7vw, 110px) var(--fz-gutter) 0;
}

.related > h2 {
	margin-bottom: clamp(20px, 3vw, 40px);
}

.related .product-card__image {
	background: #f1f3f5;
}

.related .product-card__image img {
	padding: 6%;
}

@media (max-width: 900px) {
	.product-page__top,
	.product-page__details {
		grid-template-columns: minmax(0, 1fr);
	}

	.product-page__gallery {
		min-height: 0;
	}

	.product-gallery__main img {
		max-height: 70vh;
	}

	.product-page__panel {
		max-width: none;
	}
}

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

.woocommerce-cart .page__body,
.woocommerce-checkout .page__body {
	max-width: none;
}

.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
	gap: clamp(28px, 5vw, 80px);
	align-items: start;
}

.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce > .cart-empty,
.woocommerce-cart .woocommerce > .return-to-shop,
.woocommerce-cart .woocommerce > .wc-empty-cart-message {
	grid-column: 1 / -1;
}

.cart-empty {
	font-size: clamp(20px, 1.8vw, 26px);
	background: none;
	border: 0;
	padding: 0;
}

table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid var(--fz-ink);
}

table.shop_table th {
	padding: 12px 12px 12px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--fz-muted);
	text-align: left;
	border-bottom: 1px solid var(--fz-line);
}

table.shop_table td {
	padding: 16px 12px 16px 0;
	vertical-align: middle;
	border-bottom: 1px solid var(--fz-line);
}

table.cart .product-thumbnail {
	width: 96px;
}

table.cart .product-thumbnail img {
	width: 84px;
	height: 84px;
	object-fit: contain;
}

table.cart .product-name a {
	font-family: var(--fz-font-head);
	font-size: 20px;
	font-weight: 500;
	text-decoration: none;
}

table.cart .product-name a:hover {
	color: var(--fz-wall);
}

dl.variation {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 2px 8px;
	margin: 6px 0 0;
	font-size: 15px;
	color: var(--fz-muted);
}

dl.variation dd {
	margin: 0;
}

dl.variation p {
	margin: 0;
}

table.cart .product-remove {
	width: 44px;
}

table.cart a.remove {
	display: grid;
	width: 36px;
	height: 36px;
	place-items: center;
	font-size: 22px;
	line-height: 1;
	color: var(--fz-muted);
	text-decoration: none;
	border-radius: 50%;
}

table.cart a.remove:hover {
	color: var(--fz-paper);
	background: var(--fz-error);
}

table.cart .product-price,
table.cart .product-subtotal {
	white-space: nowrap;
}

table.cart .quantity .qty {
	min-height: 46px;
}

table.cart td.actions {
	padding-right: 0;
}

table.cart td.actions .coupon {
	display: none;
}

table.cart td.actions > .button {
	float: right;
	min-height: 46px;
	color: var(--fz-ink);
	background: none;
	border-color: var(--fz-line);
}

table.cart td.actions > .button:hover:not(:disabled) {
	color: var(--fz-paper);
	background: var(--fz-ink);
	border-color: var(--fz-ink);
}

.cart_totals {
	padding: clamp(20px, 2.4vw, 32px);
	border: 1px solid var(--fz-line);
}

.cart_totals h2,
#order_review_heading,
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
.woocommerce-order h2,
.woocommerce-column__title {
	margin-bottom: 16px;
	font-size: clamp(22px, 2vw, 28px);
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: 12px 0;
	vertical-align: top;
}

.cart_totals table.shop_table td,
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
}

.woocommerce-shipping-methods {
	display: grid;
	gap: 6px;
	list-style: none;
	text-align: left;
}

.woocommerce-shipping-methods li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.woocommerce-shipping-methods input,
.wc_payment_methods input[type="radio"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 4px 0 0;
	accent-color: var(--fz-ink);
}

.woocommerce-shipping-destination,
.woocommerce-shipping-calculator {
	display: none;
}

table.shop_table .order-total th,
table.shop_table .order-total td {
	font-family: var(--fz-font-head);
	font-size: 22px;
	font-weight: 500;
	color: var(--fz-ink) !important;
	border-bottom: 0 !important;
}

.wc-proceed-to-checkout {
	margin-top: 18px;
}

.wc-proceed-to-checkout .button,
#place_order {
	width: 100%;
}

@media (max-width: 900px) {
	.woocommerce-cart .woocommerce {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	table.cart thead {
		display: none;
	}

	table.cart tr.cart_item {
		position: relative;
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr) auto;
		gap: 6px 14px;
		padding: 16px 0;
		border-bottom: 1px solid var(--fz-line);
	}

	table.cart tr.cart_item td {
		padding: 0;
		border: 0;
	}

	table.cart .product-thumbnail {
		grid-row: 1 / 4;
		width: auto;
	}

	table.cart .product-name {
		grid-column: 2;
	}

	table.cart .product-remove {
		grid-column: 3;
		grid-row: 1;
	}

	table.cart .product-price {
		display: none;
	}

	table.cart .product-quantity {
		grid-column: 2;
	}

	table.cart .product-subtotal {
		grid-column: 3;
		align-self: center;
	}
}

/* Checkout --------------------------------------------------------------- */

form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr);
	gap: 0 clamp(28px, 5vw, 80px);
	align-items: start;
}

form.checkout > .woocommerce-NoticeGroup,
form.checkout > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

#customer_details {
	grid-column: 1;
	grid-row: 2 / span 2;
}

#customer_details .col-2 {
	margin-top: 28px;
}

#order_review_heading {
	grid-column: 2;
	grid-row: 2;
}

#order_review {
	grid-column: 2;
	grid-row: 3;
}

#order_review {
	padding: clamp(20px, 2.4vw, 32px);
	border: 1px solid var(--fz-line);
}

#order_review_heading {
	margin-bottom: -1px;
	padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 32px) 0;
	border: 1px solid var(--fz-line);
	border-bottom: 0;
}

#order_review {
	padding-top: 12px;
	border-top: 0;
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
}

.woocommerce form .form-row {
	display: grid;
	gap: 6px;
	margin: 0;
}

.woocommerce form .form-row-wide,
.woocommerce form .notes {
	grid-column: 1 / -1;
}

.woocommerce form .form-row .required {
	color: var(--fz-error);
	text-decoration: none;
}

.woocommerce form .form-row .optional {
	font-weight: 400;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--fz-error);
}

.woocommerce form .form-row .checkout-inline-error-message {
	font-size: 14px;
	color: var(--fz-error);
}

.woocommerce-input-wrapper {
	display: block;
}

.woocommerce-checkout-review-order-table .product-name {
	color: var(--fz-ink);
	font-weight: 400;
}

.woocommerce-checkout-review-order-table .product-quantity {
	font-weight: 400;
	color: var(--fz-muted);
}

#payment {
	margin-top: 18px;
}

.wc_payment_methods {
	display: grid;
	gap: 10px;
	list-style: none;
}

.wc_payment_method {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 4px 10px;
}

.wc_payment_method > label {
	cursor: pointer;
}

.payment_box {
	grid-column: 2;
	padding: 4px 0 8px;
	font-size: 15px;
	color: var(--fz-muted);
}

.falz-pay__card {
	margin-top: 10px !important;
}

.place-order {
	margin-top: 20px !important;
}

@media (max-width: 900px) {
	form.checkout {
		grid-template-columns: minmax(0, 1fr);
	}

	#customer_details {
		grid-column: 1;
		grid-row: auto;
		margin-bottom: 32px;
	}

	#order_review_heading,
	#order_review {
		grid-column: 1;
		grid-row: auto;
	}
}

@media (max-width: 520px) {
	.woocommerce-billing-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Order received --------------------------------------------------------- */

.woocommerce-order {
	max-width: 760px;
}

.woocommerce-thankyou-order-received {
	margin-bottom: 24px;
	font-family: var(--fz-font-head);
	font-size: clamp(24px, 2.2vw, 32px);
	font-weight: 500;
	line-height: 1.15;
}

.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 16px 28px;
	margin-bottom: 36px;
	padding: 18px 0;
	list-style: none;
	border-top: 1px solid var(--fz-ink);
	border-bottom: 1px solid var(--fz-line);
}

.woocommerce-order-overview li {
	font-size: 14px;
	color: var(--fz-muted);
}

.woocommerce-order-overview strong {
	display: block;
	margin-top: 2px;
	font-size: 17px;
	font-weight: 500;
	color: var(--fz-ink);
}

.woocommerce-order-details,
.woocommerce-customer-details {
	margin-top: 36px;
}

.woocommerce-order-details .wc-item-meta {
	margin-top: 6px;
	font-size: 15px;
	color: var(--fz-muted);
	list-style: none;
}

.woocommerce-order-details .wc-item-meta p {
	display: inline;
	margin: 0;
}

.woocommerce-customer-details address {
	font-style: normal;
	color: var(--fz-muted);
}
