/*
 * Anakko Department: WooCommerce.
 *
 * Sits on top of WooCommerce's own stylesheets. Layout fixes use !important
 * where WooCommerce's float grid has to be switched off; colours and type do
 * not, so Elementor's WooCommerce widgets can still restyle them.
 */

/* ---------- Product grid ---------- */

body.ankd ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 12px;
	clear: both;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

body.ankd ul.products::before,
body.ankd ul.products::after {
	display: none !important;
}

body.ankd ul.products li.product {
	position: relative;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0;
	text-align: left;
}

@media (min-width: 700px) {
	body.ankd ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 36px 20px;
	}
}

@media (min-width: 1000px) {
	body.ankd ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	body.ankd ul.products.columns-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.ankd ul.products.columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.ankd ul.products.columns-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	body.ankd ul.products.columns-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* Product rows on the homepage scroll sideways instead of wrapping. */
body.ankd ul.products.ankd-row__track {
	display: flex;
	gap: 12px;
	margin-bottom: 0;
}

@media (min-width: 700px) {
	body.ankd ul.products.ankd-row__track {
		gap: 16px;
	}
}

/* ---------- Product card ---------- */

body.ankd ul.products li.product a {
	color: inherit;
	text-decoration: none;
}

.ankd-product__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	margin-bottom: 12px;
	overflow: hidden;
	background: var(--ankd-surface);
}

body.ankd ul.products li.product .ankd-product__media img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 0.5s;
}

body.ankd ul.products li.product:hover .ankd-product__media img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	body.ankd ul.products li.product .ankd-product__media img {
		transition: none;
	}
}

.ankd-product__brand {
	display: block;
	margin-bottom: 2px;
	color: var(--ankd-ink);
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.4;
}

body.ankd ul.products li.product .woocommerce-loop-product__title,
body.ankd ul.products li.product .woocommerce-loop-category__title {
	margin: 0 0 6px;
	padding: 0;
	color: var(--ankd-text);
	font-family: var(--ankd-font-body), var(--ankd-font-fallback);
	font-weight: var(--ankd-weight-body);
	font-size: 0.875rem;
	letter-spacing: normal;
	line-height: 1.4;
	text-transform: none;
}

body.ankd ul.products li.product .price {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	margin: 0;
	color: var(--ankd-ink);
	font-weight: 600;
	font-size: 0.9375rem;
}

body.ankd .price del {
	color: var(--ankd-muted);
	font-weight: 400;
	opacity: 1;
}

body.ankd .price ins {
	order: -1;
	color: var(--ankd-sale);
	font-weight: 600;
	text-decoration: none;
}

body.ankd ul.products li.product .star-rating {
	margin: 0 0 6px;
	font-size: 0.75rem;
}

body.ankd ul.products li.product .button {
	width: 100%;
	margin-top: 12px;
}

body.ankd span.onsale,
body.ankd ul.products li.product .onsale {
	position: absolute;
	top: 8px;
	right: auto;
	left: 8px;
	z-index: 2;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 5px 8px;
	border-radius: 0;
	background: var(--ankd-bg);
	color: var(--ankd-sale);
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* ---------- Buttons ---------- */

body.ankd :is(a.button, button.button, input.button, .button.alt),
body.ankd #review_form #respond .form-submit input#submit,
body.ankd .wc-block-components-button:not(.is-link) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid var(--ankd-accent);
	border-radius: var(--ankd-radius);
	background-color: var(--ankd-accent);
	color: var(--ankd-on-accent);
	font-family: var(--ankd-font-button), var(--ankd-font-fallback);
	font-weight: var(--ankd-weight-button);
	font-size: 0.9375rem;
	letter-spacing: var(--ankd-tracking-button);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: var(--ankd-transform-button);
	transition: background-color 0.15s, color 0.15s;
}

body.ankd :is(a.button, button.button, input.button, .button.alt):hover,
body.ankd #review_form #respond .form-submit input#submit:hover,
body.ankd .wc-block-components-button:not(.is-link):hover {
	background-color: var(--ankd-bg);
	color: var(--ankd-accent);
}

body.ankd .button.alt.disabled,
body.ankd .button.alt:disabled,
body.ankd .button.alt:disabled[disabled],
body.ankd .button:disabled[disabled] {
	border-color: var(--ankd-accent);
	background-color: var(--ankd-accent);
	color: var(--ankd-on-accent);
	opacity: 0.4;
}

/* ---------- Shop and category pages ---------- */

body.ankd .woocommerce-breadcrumb {
	margin: 0 0 16px;
	color: var(--ankd-muted);
	font-size: 0.8125rem;
}

body.ankd .woocommerce-breadcrumb a {
	color: var(--ankd-muted);
	text-decoration: none;
}

body.ankd .woocommerce-breadcrumb a:hover {
	color: var(--ankd-ink);
	text-decoration: underline;
}

.ankd-crumb-sep {
	margin: 0 8px;
}

body.ankd .woocommerce-products-header {
	margin-bottom: 20px;
}

body.ankd .woocommerce-products-header__title {
	margin: 0 0 8px;
}

body.ankd .term-description,
body.ankd .page-description {
	max-width: 70ch;
	color: var(--ankd-muted);
}

.ankd-archive-chips {
	margin-top: 16px;
}

body.ankd .woocommerce-result-count {
	margin: 0 0 20px;
	padding-top: 10px;
	color: var(--ankd-muted);
	font-size: 0.875rem;
}

body.ankd .woocommerce-ordering {
	margin: 0 0 20px;
}

body.ankd .woocommerce-ordering select {
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid var(--ankd-field-border);
	border-radius: var(--ankd-radius);
	background-color: var(--ankd-bg);
	color: var(--ankd-ink);
	font: inherit;
	font-size: 0.875rem;
}

body.ankd nav.woocommerce-pagination {
	margin-top: 16px;
}

body.ankd nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 0;
	border: 0;
}

body.ankd nav.woocommerce-pagination ul li {
	float: none;
	border: 0;
}

body.ankd nav.woocommerce-pagination ul li :is(a, span) {
	display: grid;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	place-items: center;
	border: 1px solid var(--ankd-border);
	background: none;
	color: var(--ankd-ink);
}

body.ankd nav.woocommerce-pagination ul li span.current,
body.ankd nav.woocommerce-pagination ul li a:hover {
	border-color: var(--ankd-ink);
	background: var(--ankd-ink);
	color: var(--ankd-bg);
}

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

body.ankd div.product {
	position: relative;
}

body.ankd div.product div.images img {
	background: var(--ankd-surface);
}

body.ankd div.product .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin: 8px 0 0;
}

body.ankd div.product .flex-control-thumbs li {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

body.ankd div.product > .woocommerce-product-gallery,
body.ankd div.product > .summary {
	float: none !important;
	width: auto !important;
	margin: 0 0 24px !important;
}

@media (min-width: 900px) {
	body.ankd div.product {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: 24px 56px;
		align-items: start;
	}

	body.ankd div.product > .woocommerce-product-gallery,
	body.ankd div.product > .summary {
		margin: 0 !important;
	}

	body.ankd div.product > :not(.woocommerce-product-gallery):not(.summary):not(.onsale) {
		grid-column: 1 / -1;
	}
}

.ankd-product__brand--single {
	margin: 0 0 4px;
	font-size: 1rem;
}

.ankd-product__brand--single a {
	text-decoration: none;
}

.ankd-product__brand--single a:hover {
	text-decoration: underline;
}

body.ankd div.product .product_title {
	margin: 0 0 12px;
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
}

body.ankd div.product :is(p.price, span.price) {
	display: flex;
	flex-wrap: wrap;
	gap: 0 10px;
	align-items: baseline;
	margin: 0 0 16px;
	color: var(--ankd-ink);
	font-weight: 600;
	font-size: 1.375rem;
}

body.ankd div.product :is(p.price, span.price) del {
	font-size: 1rem;
}

body.ankd div.product .woocommerce-product-rating {
	margin-bottom: 12px;
}

body.ankd .star-rating span::before,
body.ankd p.stars a {
	color: var(--ankd-ink);
}

body.ankd div.product form.cart {
	margin: 24px 0;
}

body.ankd div.product form.cart:not(.variations_form):not(.grouped_form),
body.ankd div.product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

body.ankd div.product form.cart::before,
body.ankd div.product form.cart::after {
	display: none;
}

body.ankd div.product form.cart div.quantity {
	float: none;
	margin: 0;
}

body.ankd .quantity .qty {
	width: 76px;
	min-height: 52px;
	padding: 0 8px;
	border: 1px solid var(--ankd-field-border);
	border-radius: var(--ankd-radius);
	text-align: center;
}

body.ankd div.product form.cart .single_add_to_cart_button {
	flex: 1 1 200px;
	float: none;
	min-height: 52px;
	font-size: 1rem;
}

body.ankd div.product form.cart table.variations {
	width: 100%;
	margin: 0 0 16px;
	border: 0;
}

body.ankd div.product form.cart table.variations :is(th, td) {
	display: block;
	padding: 0;
	border: 0;
	text-align: left;
	line-height: 1.4;
}

body.ankd div.product form.cart table.variations th {
	margin: 12px 0 6px;
}

body.ankd div.product form.cart table.variations label {
	font-weight: 600;
}

body.ankd div.product form.cart table.variations select {
	width: 100%;
	min-width: 0;
	margin: 0;
}

body.ankd div.product .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 0.8125rem;
}

body.ankd div.product .product_meta {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--ankd-border);
	color: var(--ankd-muted);
	font-size: 0.8125rem;
}

body.ankd div.product .product_meta > span {
	display: block;
	padding: 2px 0;
}

/* Tabs */
.ankd.woocommerce div.product .woocommerce-tabs ul.tabs,
.ankd .woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 28px;
	margin: 32px 0 24px;
	padding: 0;
	overflow-x: auto;
	border-bottom: 1px solid var(--ankd-border);
}

.ankd.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.ankd .woocommerce div.product .woocommerce-tabs ul.tabs::before,
.ankd.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.ankd .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.ankd.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.ankd .woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.ankd.woocommerce div.product .woocommerce-tabs ul.tabs li,
.ankd .woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.ankd.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.ankd .woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 0;
	color: var(--ankd-muted);
	font-weight: 600;
	white-space: nowrap;
}

.ankd.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.ankd .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	box-shadow: inset 0 -2px 0 var(--ankd-ink);
	color: var(--ankd-ink);
}

body.ankd .woocommerce-Tabs-panel {
	max-width: 80ch;
}

body.ankd .woocommerce-Tabs-panel > h2:first-child {
	font-size: 1.25rem;
}

body.ankd :is(.related, .upsells, .cross-sells) > h2 {
	margin: 48px 0 20px;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

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

body.ankd :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	border-top: 0;
	border-left: 3px solid var(--ankd-ink);
	border-radius: 0;
	background: var(--ankd-surface);
	color: var(--ankd-text);
}

body.ankd :is(.woocommerce-message, .woocommerce-info)::before {
	color: var(--ankd-ink);
}

body.ankd :is(.woocommerce-message, .woocommerce-info) {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
}

body.ankd :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button {
	order: 2;
	float: none;
	min-height: 36px;
	margin: -4px 0 -4px auto;
	padding: 0 16px;
	font-size: 0.8125rem;
}

body.ankd .woocommerce-error {
	border-left-color: var(--ankd-sale);
}

body.ankd .woocommerce-error::before {
	color: var(--ankd-sale);
}

/* ---------- Forms ---------- */

body.ankd .woocommerce form .form-row :is(input.input-text, textarea, select),
body.ankd .select2-container .select2-selection--single {
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--ankd-field-border);
	border-radius: var(--ankd-radius);
	background-color: var(--ankd-bg);
	color: var(--ankd-text);
}

body.ankd .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--ankd-text);
	line-height: 26px;
}

body.ankd .select2-container .select2-selection--single .select2-selection__arrow {
	height: 46px;
}

body.ankd .woocommerce form .form-row label {
	margin-bottom: 4px;
	font-weight: 600;
	line-height: 1.4;
}

body.ankd .woocommerce form :is(.form-row .woocommerce-form__label-for-checkbox, .form-row label.checkbox) {
	font-weight: 400;
}

body.ankd .woocommerce form.login,
body.ankd .woocommerce form.register,
body.ankd .woocommerce form.checkout_coupon {
	border-color: var(--ankd-border);
	border-radius: 0;
}

/* ---------- Cart and checkout ---------- */

body.ankd table.shop_table {
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
}

body.ankd table.shop_table :is(th, td) {
	padding: 16px 8px;
	border-top: 1px solid var(--ankd-border);
}

body.ankd table.shop_table thead th {
	border-top: 0;
	color: var(--ankd-muted);
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.ankd table.shop_table td.product-name a {
	color: var(--ankd-ink);
	font-weight: 600;
	text-decoration: none;
}

body.ankd .woocommerce a.remove {
	color: var(--ankd-ink) !important;
}

body.ankd .woocommerce a.remove:hover {
	background: var(--ankd-ink);
	color: var(--ankd-bg) !important;
}

body.ankd .woocommerce table.cart td.actions .coupon .input-text {
	width: 200px;
	max-width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--ankd-field-border);
}

body.ankd .cart_totals h2,
body.ankd #order_review_heading,
body.ankd .woocommerce-billing-fields h3,
body.ankd .woocommerce-shipping-fields h3,
body.ankd .woocommerce-additional-fields h3 {
	font-size: 1.25rem;
}

body.ankd .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	min-height: 52px;
	margin-bottom: 0;
	padding: 0 24px;
	font-size: 1rem;
}

body.ankd #payment {
	border-radius: 0;
	background: var(--ankd-surface);
}

body.ankd #payment div.payment_box {
	background: var(--ankd-bg);
	color: var(--ankd-text);
}

body.ankd #payment div.payment_box::before {
	border-bottom-color: var(--ankd-bg);
}

body.ankd #place_order {
	width: 100%;
	min-height: 52px;
	font-size: 1rem;
}

/* Block-based cart and checkout */
body.ankd :is(.wc-block-cart, .wc-block-checkout) {
	font-size: 0.9375rem;
}

body.ankd :is(.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button) {
	min-height: 52px;
	font-size: 1rem;
}

body.ankd .wc-block-cart-item__prices,
body.ankd .wc-block-components-product-name {
	color: var(--ankd-ink);
}

body.ankd .wc-block-components-product-name {
	font-weight: 600;
	text-decoration: none;
}

body.ankd .wc-block-components-sale-badge {
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ankd-sale);
}

/* ---------- My account ---------- */

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

body.ankd .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 0;
	border-bottom: 1px solid var(--ankd-border);
	color: var(--ankd-muted);
	text-decoration: none;
}

body.ankd .woocommerce-MyAccount-navigation li.is-active a,
body.ankd .woocommerce-MyAccount-navigation li a:hover {
	color: var(--ankd-ink);
	font-weight: 600;
}