/* ==========================================================================
   Project Kuzuri — WooCommerce
   ========================================================================== */

.pk-shop {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	grid-template-columns: minmax(0, 1fr);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

@media (min-width: 1000px) {
	.pk-shop:has(.pk-shop__aside) { grid-template-columns: 260px minmax(0, 1fr); }
	.pk-shop__aside { grid-row: 1; grid-column: 1; }
	.pk-shop__main { grid-row: 1; grid-column: 2; }
}

/* Breadcrumb shown on single products, where there is no dark banner. */
.pk-crumbs--light,
.pk-crumbs--light .woocommerce-breadcrumb {
	margin-top: 0;
	margin-bottom: 1.5rem;
	color: var(--pk-grey);
}

.pk-crumbs--light .woocommerce-breadcrumb a { color: var(--pk-graphite); }
.pk-crumbs--light .woocommerce-breadcrumb a:hover { color: var(--pk-yellow-dark); }

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-top-color: var(--pk-yellow);
	background: var(--pk-smoke);
	list-style: none;
}

.woocommerce-message::before, .woocommerce-info::before { color: var(--pk-yellow); }

/* ------------------------------------------------------- Loop / grid ----- */

.woocommerce ul.products {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	background: var(--pk-smoke);
	position: relative;
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
}

.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--pk-shadow); }

.woocommerce ul.products li.product a img {
	margin: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: #fff;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--pk-font-display);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 1.3rem !important;
	line-height: 1.05;
	color: var(--pk-black);
	padding: 1rem 1.1rem .35rem !important;
	margin: 0;
}

.woocommerce ul.products li.product .price {
	display: block;
	padding: 0 1.1rem;
	color: var(--pk-graphite);
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: .9rem;
}

.woocommerce ul.products li.product .price del { opacity: .55; font-weight: 400; margin-right: .4rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

.woocommerce ul.products li.product .woocommerce-loop-product__link { display: block; }

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin: auto 1.1rem 1.2rem;
	align-self: flex-start;
}

.pk-badge {
	position: absolute;
	top: 12px; left: 0;
	z-index: 2;
	padding: .3rem 1rem .3rem .8rem;
	background: var(--pk-yellow);
	color: var(--pk-black);
	font-family: var(--pk-font-display);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .85rem;
	clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.woocommerce span.onsale { display: none; }

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

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .widget_shopping_cart a.button {
	background: var(--pk-yellow);
	color: var(--pk-black);
	font-family: var(--pk-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: 1.02rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: .8rem 1.6rem;
	border-radius: 0;
	line-height: 1.2;
	clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
	transition: background-color .18s ease, color .18s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--pk-black);
	color: var(--pk-yellow);
}

.woocommerce a.added_to_cart {
	display: inline-block;
	font-weight: 700;
	text-transform: uppercase;
	font-size: .85rem;
	letter-spacing: .06em;
	border-bottom: 3px solid var(--pk-yellow);
	text-decoration: none;
	padding-bottom: 2px;
}

/* ---------------------------------------------------- Single product ----- */

.woocommerce div.product { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }

@media (min-width: 900px) {
	.woocommerce div.product { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
	.woocommerce div.product div.images { width: 100% !important; float: none !important; margin: 0 !important; }
	.woocommerce div.product div.summary { width: 100% !important; float: none !important; margin: 0 !important; }
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related,
	.woocommerce div.product .upsells { grid-column: 1 / -1; }
}

.woocommerce div.product .product_title { font-size: clamp(2rem, 5vw, 3.2rem); }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--pk-black);
	font-family: var(--pk-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: 2rem;
}

.woocommerce div.product form.cart { margin-block: 1.5rem; }
.woocommerce div.product form.cart div.quantity { margin-right: .75rem; }

.woocommerce .quantity .qty {
	width: 5rem;
	padding: .8rem .5rem;
	border: 2px solid var(--pk-line);
	text-align: center;
	font: inherit;
	font-weight: 700;
}

.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 1.5rem; border-bottom: 3px solid var(--pk-black); display: flex; flex-wrap: wrap; gap: .25rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: var(--pk-smoke);
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: .7rem 1.25rem;
	font-family: var(--pk-font-display);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--pk-black);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--pk-black); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--pk-yellow); }

.pk-product-pledge {
	clear: both;
	margin-top: 1.25rem;
	padding: .8rem 1rem;
	border-left: 5px solid var(--pk-yellow);
	background: var(--pk-smoke);
	font-size: .93rem;
}

/* ------------------------------------------- Cart / checkout / account ---- */

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

.woocommerce table.shop_table th {
	background: var(--pk-black);
	color: var(--pk-contrast);
	font-family: var(--pk-font-display);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: .8rem 1rem;
}

.woocommerce table.shop_table td { padding: .9rem 1rem; border-top: 1px solid var(--pk-line); }

.woocommerce-cart table.cart img { width: 72px; }

.woocommerce .cart-collaterals .cart_totals > h2,
.woocommerce-checkout h3,
.woocommerce-account h2 { font-size: 1.5rem; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	padding: .75rem .9rem;
	border: 2px solid var(--pk-line);
	border-radius: 0;
	height: auto;
	font: inherit;
}

.woocommerce form .form-row label { font-weight: 600; }

.woocommerce-checkout #payment { background: var(--pk-smoke); border-radius: 0; }
.woocommerce-checkout #payment div.payment_box { background: #fff; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #fff; }

.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--pk-line); }
.woocommerce-MyAccount-navigation li a { display: block; padding: .7rem .25rem; text-decoration: none; font-weight: 600; }
.woocommerce-MyAccount-navigation li.is-active a { color: var(--pk-yellow-dark); }

/* --------------------------------------------------------- Sorting ------- */

.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-result-count { margin-bottom: 1.5rem; }

.woocommerce .woocommerce-ordering select {
	padding: .6rem .8rem;
	border: 2px solid var(--pk-line);
	font: inherit;
}

/* --------------------------------------------------------- Widgets ------- */

.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background: var(--pk-yellow); }

.woocommerce .widget_shopping_cart .total { border-top: 3px solid var(--pk-black); }
