/**
 * WAASI BESPOKE - woocommerce.css
 *
 * Product cards, shop archive, single product, cart, checkout and account.
 * Loaded only when WooCommerce is active.
 */

/* -------------------------------------------------------------------------
 * 1. Product grid and card
 * ---------------------------------------------------------------------- */

.product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wb-gap) 0.85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.product-grid {
		gap: var(--wb-gap-lg) var(--wb-gap);
	}
}

@media (min-width: 900px) {
	.product-grid--cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.product-grid--cols-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.product-card {
	display: flex;
	flex-direction: column;
}

.product-card__link {
	display: block;
	position: relative;
	color: inherit;
	text-decoration: none;
}

.product-card__media {
	background: var(--wb-stone);
}

.product-card__labels {
	position: absolute;
	top: 0.7rem;
	left: 0.7rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.product-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding-top: 0.95rem;
}

.product-card__name {
	margin: 0;
	font-family: var(--wb-serif);
	font-size: var(--wb-step-1);
	line-height: 1.25;
	font-weight: 400;
}

.product-card__fabric {
	margin: 0;
	color: var(--wb-ink-muted);
	font-size: 0.76rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.product-card__price {
	margin: 0.15rem 0 0;
	font-size: 0.95rem;
	color: var(--wb-ink);
}

.product-card__price .price del {
	color: var(--wb-ink-muted);
	margin-right: 0.4rem;
}

.product-card__price .price ins {
	text-decoration: none;
}

.price--consult {
	font-size: 0.76rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wb-accent-ink);
}

.product-card__action {
	margin-top: 0.85rem;
}

.product-card__action .btn {
	width: 100%;
}

.product-card__action .added_to_cart {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * 2. Shop archive
 * ---------------------------------------------------------------------- */

.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wb-gap);
	margin-bottom: var(--wb-gap-lg);
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--wb-line);
}

.woocommerce-result-count {
	margin: 0;
	color: var(--wb-ink-muted);
	font-size: 0.76rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.shop-ordering {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
}

.shop-ordering__label {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wb-ink-muted);
}

.shop-ordering__select {
	width: auto;
	min-width: 12rem;
	padding-block: 0.55rem;
	font-size: 0.85rem;
}

.shop-ordering {
	position: relative;
}

.shop-ordering__icon {
	position: absolute;
	right: 0.9rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--wb-ink-muted);
}

.shop-layout {
	display: grid;
	gap: var(--wb-gap-lg);
}

@media (min-width: 1000px) {
	.shop-layout--has-filters {
		grid-template-columns: 15rem 1fr;
		gap: clamp(2rem, 1rem + 2vw, 3.5rem);
	}
}

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

.no-results--shop {
	padding-block: var(--wb-gap-lg);
	text-align: center;
}

.no-results__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wb-gap);
	justify-content: center;
	margin-top: var(--wb-gap-lg);
}

/* -------------------------------------------------------------------------
 * 3. Single product
 * ---------------------------------------------------------------------- */

.site-main--product {
	padding-bottom: var(--wb-pad);
}

.product-crumbs {
	padding-top: clamp(1.75rem, 1.2rem + 2vw, 3rem);
	padding-bottom: 1.25rem;
}

.product-single__inner {
	display: grid;
	gap: var(--wb-gap-lg);
	align-items: start;
}

@media (min-width: 900px) {
	.product-single__inner {
		grid-template-columns: 1.1fr 0.9fr;
		gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
	}

	.product-single__summary {
		position: sticky;
		top: calc(var(--wb-header) + 2rem);
	}
}

.product-single__summary .product_title {
	margin: 0 0 0.6rem;
	font-size: var(--wb-step-3);
	line-height: 1.1;
}

.product-single__summary .price {
	display: block;
	margin-bottom: 1.1rem;
	font-size: var(--wb-step-1);
}

/* -------------------------------------------------------------------------
 * 4. Product gallery
 * ---------------------------------------------------------------------- */

.woocommerce-product-gallery {
	position: relative;
}

.woocommerce-product-gallery__wrapper {
	margin: 0;
}

.woocommerce-product-gallery__image {
	background: var(--wb-stone);
}

.woocommerce-product-gallery__image a {
	display: block;
}

.woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.6rem;
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	cursor: pointer;
	opacity: 0.72;
	transition: opacity var(--wb-fast) var(--wb-ease);
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover {
	opacity: 1;
}

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
	z-index: 2;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--wb-line);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: var(--wb-ink);
	text-decoration: none;
	line-height: 2.4rem;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * 5. Summary: fabric, consultation, excerpt, meta
 * ---------------------------------------------------------------------- */

.product-fabric {
	margin: 0 0 1rem;
	font-size: 0.82rem;
	color: var(--wb-ink-soft);
}

.product-fabric__label {
	display: inline-block;
	margin-right: 0.5rem;
	color: var(--wb-ink-muted);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.woocommerce-product-details__short-description {
	margin-bottom: var(--wb-gap);
	color: var(--wb-ink-soft);
}

.waasi-consult {
	margin-bottom: var(--wb-gap);
	padding-top: var(--wb-gap);
	border-top: 1px solid var(--wb-line);
}

.waasi-consult__note {
	margin: 0.75rem 0 0;
	color: var(--wb-ink-muted);
	font-size: 0.8rem;
	line-height: 1.6;
}

.product-help {
	margin: var(--wb-gap) 0 0;
	padding-top: var(--wb-gap);
	border-top: 1px solid var(--wb-line);
	color: var(--wb-ink-muted);
	font-size: 0.82rem;
}

.product-help a {
	color: var(--wb-ink);
}

.product_meta {
	margin-top: var(--wb-gap);
	padding-top: var(--wb-gap);
	border-top: 1px solid var(--wb-line);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	color: var(--wb-ink-muted);
}

.product_meta > span {
	display: block;
	margin-bottom: 0.35rem;
}

/* -------------------------------------------------------------------------
 * 6. Add to cart, quantity and variations
 * ---------------------------------------------------------------------- */

form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: var(--wb-gap);
}

.quantity {
	display: inline-flex;
	align-items: center;
}

/* Sold-individually items show the figure and post a hidden field. */
.quantity.hidden {
	display: none;
}

.quantity__fixed {
	color: var(--wb-ink-muted);
	font-variant-numeric: tabular-nums;
}

/* Display-only quantity (WooCommerce passes $readonly). */
.quantity--readonly input.qty {
	border-color: transparent;
	background: none;
	pointer-events: none;
}

.quantity input.qty {
	width: 4.75rem;
	padding: 0.8rem 0.5rem;
	text-align: center;
}

.single_add_to_cart_button,
.woocommerce div.product form.cart .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.85rem 1.8rem;
	border: 1px solid var(--wb-navy);
	border-radius: var(--wb-radius);
	background: var(--wb-navy);
	color: #fff;
	cursor: pointer;
	font-size: var(--wb-step--1);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--wb-fast) var(--wb-ease), border-color var(--wb-fast) var(--wb-ease);
}

.single_add_to_cart_button:hover,
.woocommerce div.product form.cart .button:hover {
	background: var(--wb-navy-soft);
	border-color: var(--wb-navy-soft);
	color: #fff;
}

/* Generic WooCommerce buttons (cart, checkout, account, notices). */
.woocommerce .button,
.woocommerce input.button,
.woocommerce button.button,
.woocommerce a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.85rem 1.6rem;
	border: 1px solid var(--wb-ink);
	border-radius: var(--wb-radius);
	background: var(--wb-ink);
	color: #fff;
	cursor: pointer;
	font-size: var(--wb-step--1);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--wb-fast) var(--wb-ease), border-color var(--wb-fast) var(--wb-ease);
}

.woocommerce .button:hover,
.woocommerce input.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover {
	background: var(--wb-navy);
	border-color: var(--wb-navy);
	color: #fff;
}

.variations {
	margin-bottom: var(--wb-gap);
}

.variations th,
.variations td {
	padding: 0.4rem 0;
	text-align: left;
	vertical-align: middle;
}

.variations label {
	margin: 0;
}

.reset_variations {
	font-size: 0.78rem;
}

.woocommerce-variation-price {
	margin-bottom: 0.75rem;
}

.stock {
	margin: 0 0 1rem;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.stock.out-of-stock {
	color: #8a2f2f;
}

/* -------------------------------------------------------------------------
 * 7. Tabs, related and up-sells
 * ---------------------------------------------------------------------- */

.product-single__details {
	margin-top: var(--wb-pad);
}

.woocommerce-tabs {
	margin-bottom: var(--wb-pad);
}

.woocommerce-tabs .tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0 0 var(--wb-gap-lg);
	padding: 0 0 0.75rem;
	border-bottom: 1px solid var(--wb-line);
	list-style: none;
}

.woocommerce-tabs .tabs li a {
	color: var(--wb-ink-muted);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce-tabs .tabs li.active a,
.woocommerce-tabs .tabs li a:hover {
	color: var(--wb-ink);
}

.woocommerce-tabs .panel > h2 {
	font-size: var(--wb-step-2);
}

.woocommerce-tabs .panel {
	max-width: 70ch;
}

.shop_attributes th,
.shop_attributes td {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--wb-line);
	text-align: left;
	font-size: 0.9rem;
}

.related,
.up-sells,
.cross-sells {
	margin-bottom: var(--wb-gap-lg);
}

.related > h2,
.up-sells > h2,
.cross-sells > h2 {
	margin-bottom: var(--wb-gap-lg);
	font-size: var(--wb-step-2);
}

/* -------------------------------------------------------------------------
 * 8. Notices
 * ---------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wb-gap);
	margin: 0 0 var(--wb-gap);
	padding: 1rem 1.25rem;
	border-left: 2px solid var(--wb-accent);
	background: var(--wb-surface);
	list-style: none;
	font-size: 0.9rem;
}

.woocommerce-error {
	border-left-color: #8a2f2f;
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
}

/* -------------------------------------------------------------------------
 * 9. Cart
 * ---------------------------------------------------------------------- */

.cart-empty {
	max-width: 44rem;
	margin-inline: auto;
	padding-block: var(--wb-gap-lg);
	text-align: center;
}

.cart-empty__title {
	font-size: var(--wb-step-3);
}

.cart-empty__text {
	color: var(--wb-ink-soft);
}

.cart-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wb-gap);
	justify-content: center;
	margin-top: var(--wb-gap-lg);
}

.shop_table {
	margin-bottom: var(--wb-gap-lg);
	font-size: 0.92rem;
}

.shop_table th {
	padding: 0.85rem 0.75rem;
	border-bottom: 1px solid var(--wb-line-strong);
	font-family: var(--wb-sans);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: left;
	color: var(--wb-ink-muted);
}

.shop_table td {
	padding: 1rem 0.75rem;
	border-bottom: 1px solid var(--wb-line);
	vertical-align: middle;
}

.shop_table td.product-thumbnail img {
	width: 5rem;
}

.shop_table .product-name a {
	text-decoration: none;
	font-family: var(--wb-serif);
	font-size: 1.05rem;
}

.shop_table .product-remove a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border: 1px solid var(--wb-line);
	border-radius: 50%;
	color: var(--wb-ink-muted);
	text-decoration: none;
	line-height: 1;
}

.shop_table .product-remove a:hover {
	border-color: var(--wb-ink);
	color: var(--wb-ink);
}

.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: var(--wb-gap);
}

.actions .coupon .input-text {
	max-width: 14rem;
}

.cart-collaterals {
	display: grid;
	gap: var(--wb-gap-lg);
}

@media (min-width: 900px) {
	.cart-collaterals {
		grid-template-columns: 1fr minmax(20rem, 24rem);
		align-items: start;
	}
}

.cart_totals {
	padding: var(--wb-gap);
	border: 1px solid var(--wb-line);
	background: var(--wb-surface);
}

.cart_totals h2 {
	margin-bottom: 1rem;
	font-family: var(--wb-sans);
	font-size: 0.74rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.cart_totals table {
	margin-bottom: var(--wb-gap);
}

.cart_totals th,
.cart_totals td {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--wb-line);
	text-align: left;
	font-size: 0.9rem;
}

.cart_totals .order-total td {
	font-size: 1.05rem;
	border-bottom: 0;
}

.wc-proceed-to-checkout .checkout-button {
	width: 100%;
	background: var(--wb-navy);
	border-color: var(--wb-navy);
}

/* -------------------------------------------------------------------------
 * 10. Checkout
 * ---------------------------------------------------------------------- */

.woocommerce-checkout .col2-set {
	display: grid;
	gap: var(--wb-gap-lg);
}

@media (min-width: 860px) {
	.woocommerce-checkout .col2-set {
		grid-template-columns: repeat(2, 1fr);
	}
}

#customer_details h3,
#order_review_heading,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3 {
	margin-bottom: 1rem;
	font-family: var(--wb-sans);
	font-size: 0.74rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.form-row {
	margin-bottom: 1rem;
}

.form-row label {
	display: block;
	margin-bottom: 0.35rem;
}

.form-row .required {
	color: #8a2f2f;
	text-decoration: none;
}

#order_review {
	margin-top: var(--wb-gap-lg);
	padding: var(--wb-gap);
	border: 1px solid var(--wb-line);
	background: var(--wb-surface);
}

.woocommerce-checkout #payment {
	background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods {
	margin: 0 0 var(--wb-gap);
	padding: 0;
	border-bottom: 1px solid var(--wb-line);
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: 0.6rem 0;
}

.woocommerce-checkout #payment div.payment_box {
	margin: 0.5rem 0 0;
	padding: 0.9rem 1rem;
	background: var(--wb-bg);
	font-size: 0.86rem;
}

.woocommerce-checkout #payment .form-row.place-order {
	margin: var(--wb-gap) 0 0;
}

#place_order {
	width: 100%;
	background: var(--wb-navy);
	border-color: var(--wb-navy);
}

.woocommerce-terms-and-conditions-wrapper {
	margin-bottom: var(--wb-gap);
	font-size: 0.86rem;
}

/* -------------------------------------------------------------------------
 * 11. My account
 * ---------------------------------------------------------------------- */

.woocommerce-account .woocommerce {
	display: grid;
	gap: var(--wb-gap-lg);
}

@media (min-width: 900px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: 14rem 1fr;
		gap: clamp(2rem, 1rem + 2vw, 3.5rem);
		align-items: start;
	}
}

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wb-line);
}

.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--wb-line);
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.85rem 0;
	font-size: 0.76rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wb-ink-muted);
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation a:hover {
	color: var(--wb-ink);
}

.woocommerce-MyAccount-content > p:first-child {
	color: var(--wb-ink-soft);
}

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword,
.woocommerce-EditAccountForm,
.woocommerce-address-fields {
	max-width: 34rem;
	padding: var(--wb-gap);
	border: 1px solid var(--wb-line);
	background: var(--wb-surface);
}

.woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.woocommerce-form-login__rememberme input {
	width: auto;
}

.woocommerce-LostPassword {
	margin: 0.75rem 0 0;
	font-size: 0.84rem;
}

.woocommerce-Addresses {
	display: grid;
	gap: var(--wb-gap-lg);
}

@media (min-width: 760px) {
	.woocommerce-Addresses {
		grid-template-columns: repeat(2, 1fr);
	}
}

.woocommerce-order-details,
.woocommerce-customer-details {
	margin-bottom: var(--wb-gap-lg);
}

.woocommerce-order-overview {
	display: grid;
	gap: var(--wb-gap);
	margin: 0 0 var(--wb-gap-lg);
	padding: var(--wb-gap);
	border: 1px solid var(--wb-line);
	background: var(--wb-surface);
	list-style: none;
	font-size: 0.86rem;
}

@media (min-width: 760px) {
	.woocommerce-order-overview {
		grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	}
}

.woocommerce-order-overview strong {
	display: block;
	margin-top: 0.25rem;
	font-family: var(--wb-serif);
	font-size: 1.1rem;
	font-weight: 400;
}

/* -------------------------------------------------------------------------
 * 12. Shop widgets and pagination
 * ---------------------------------------------------------------------- */

.widget-area--shop .widget + .widget {
	margin-top: var(--wb-gap-lg);
}

.widget_price_filter .price_slider_amount {
	margin-top: 0.75rem;
	font-size: 0.82rem;
}

.woocommerce-pagination {
	margin-top: var(--wb-gap-lg);
}

.woocommerce-breadcrumb {
	margin-bottom: 1rem;
	font-size: 0.76rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wb-ink-muted);
}

.woocommerce-breadcrumb a {
	text-decoration: none;
}

/* Hide star ratings and review counts: they do not fit a bespoke house. */
.woocommerce .star-rating,
.woocommerce-product-rating {
	display: none;
}

/* -------------------------------------------------------------------------
 * 13. Order received
 * ---------------------------------------------------------------------- */

.woocommerce-thankyou__title {
	font-size: var(--wb-step-3);
}

.woocommerce-thankyou__text {
	max-width: 52ch;
	color: var(--wb-ink-soft);
}

.woocommerce-thankyou__cta {
	margin-top: var(--wb-gap);
}

.backorder_notification {
	margin: 0.4rem 0 0;
	color: var(--wb-ink-muted);
	font-size: 0.76rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.woocommerce-product-gallery__image--placeholder {
	background: var(--wb-stone);
}

/* -------------------------------------------------------------------------
 * 14. Mobile table reflow
 * ---------------------------------------------------------------------- */

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

	.shop_table,
	.shop_table tbody,
	.shop_table tr,
	.shop_table td {
		display: block;
		width: 100%;
	}

	.shop_table tr {
		padding: var(--wb-gap) 0;
		border-bottom: 1px solid var(--wb-line);
	}

	.shop_table td {
		border: 0;
		padding: 0.3rem 0;
	}

	/* Row labels replace the hidden table head. */
	.shop_table td[data-title]::before {
		content: attr(data-title);
		display: inline-block;
		min-width: 6.5rem;
		color: var(--wb-ink-muted);
		font-size: 0.68rem;
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}

	.shop_table td.product-name::before {
		display: none;
	}

	.shop_table td.product-thumbnail img {
		width: 6.5rem;
	}

	.shop_table td.actions {
		padding-top: var(--wb-gap);
	}
}
