/* ==========================================================================
   60 — WooCommerce

   Woo 11 renders the archive through the Product Collection block, so the card
   is a <li class="wc-block-product">. Our own badge and rating are injected by
   the classic hooks, which that block still fires.
   ========================================================================== */

.woocommerce-page .jn-main,
.post-type-archive-product .jn-main,
.tax-product_cat .jn-main {
	padding-block: 3rem 5rem;
}

/* Woo's archive content has no shell of its own. */
.woocommerce-page .jn-main > *,
.post-type-archive-product .jn-main > *,
.tax-product_cat .jn-main > * {
	box-sizing: border-box;
	max-width: var( --jn-shell );
	margin-inline: auto;
	padding-inline: var( --jn-gutter );
}

.woocommerce-products-header,
.woocommerce-products-header__title {
	margin: 0 0 .5rem;
}

/* --------------------------------------------------------------------------
   Breadcrumb and result count
   -------------------------------------------------------------------------- */

.jn-crumbs,
.woocommerce-breadcrumb,
.wp-block-woocommerce-breadcrumbs {
	/* Space above as well as below, so the trail is not flush against the
	   header on one side and the page title on the other. */
	margin-block: 1.5rem;
	color: hsl( var( --jn-muted-foreground ) );
	font-size: .875rem;
}

.jn-crumbs a,
.woocommerce-breadcrumb a {
	color: hsl( var( --jn-muted-foreground ) );
	text-decoration: none;
}

.jn-crumbs a:hover,
.woocommerce-breadcrumb a:hover {
	color: hsl( var( --jn-primary-text ) );
}

.jn-crumb__sep {
	margin-inline: .5rem;
	opacity: .5;
}

.woocommerce-result-count {
	margin: 0;
	color: hsl( var( --jn-muted-foreground ) );
	font-size: .9375rem;
}

.woocommerce-ordering select,
.wc-block-product-sort-select select {
	min-height: 2.75rem;
	padding: 0 2rem 0 .75rem;
	border: 1px solid hsl( var( --jn-border ) );
	border-radius: .5rem;
	background-color: hsl( var( --jn-input ) );
	color: hsl( var( --jn-foreground ) );
	font-family: inherit;
	font-size: .9375rem;
}

/* --------------------------------------------------------------------------
   The product grid

   Woo hard-codes columns-3 on the list; ours is four across, matching live.
   -------------------------------------------------------------------------- */

ul.wc-block-product-template,
.wp-site-blocks ul.wc-block-product-template {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 1.5rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

ul.wc-block-product-template.columns-3,
.wp-site-blocks ul.wc-block-product-template.columns-3 {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}

li.wc-block-product,
.wp-site-blocks li.wc-block-product {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: auto;
	margin: 0;
	padding: 0 0 1.25rem;
	border: 1px solid hsl( var( --jn-primary ) / .2 );
	border-radius: var( --jn-radius );
	background: linear-gradient( 135deg, hsl( var( --jn-card ) ), hsl( var( --jn-background-secondary ) ) );
	box-shadow: var( --jn-shadow-card );
	overflow: hidden;
	transition: var( --jn-transition );
}

li.wc-block-product:hover {
	border-color: hsl( var( --jn-primary ) / .4 );
	box-shadow: var( --jn-shadow-luxury );
	transform: translateY( -2px );
}

/* Image */
li.wc-block-product .wc-block-components-product-image {
	margin: 0 0 1rem;
}

li.wc-block-product .wc-block-components-product-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
}

/* Title, price, button all share the card's inline padding. */
li.wc-block-product > :not( .wc-block-components-product-image ) {
	padding-inline: 1rem;
}

li.wc-block-product .wp-block-post-title {
	margin: 0 0 .375rem;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
}

li.wc-block-product .wp-block-post-title a {
	color: hsl( var( --jn-foreground ) );
	text-decoration: none;
}

li.wc-block-product .wp-block-post-title a:hover {
	color: hsl( var( --jn-primary-text ) );
}

li.wc-block-product .wc-block-components-product-price {
	margin: .5rem 0 .875rem;
	font-size: 1.0625rem;
	font-weight: 700;
	text-align: left;
	color: hsl( var( --jn-primary-text ) );
}

li.wc-block-product .wc-block-components-product-price del {
	margin-right: .5rem;
	color: hsl( var( --jn-muted-foreground ) );
	font-weight: 400;
	font-size: .9375rem;
}

li.wc-block-product .wc-block-components-product-price ins {
	text-decoration: none;
}

/* Add to cart pinned to the card's foot, so uneven titles still line up. */
li.wc-block-product .wc-block-components-product-button {
	margin-top: auto;
	text-align: left;
}

li.wc-block-product .wc-block-components-product-button__button,
li.wc-block-product .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 2.75rem;
	padding-inline: 1rem;
	border: 0;
	border-radius: .5rem;
	background-color: var( --jn-gold-500 );
	color: #111;
	font-family: inherit;
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: var( --jn-transition );
}

li.wc-block-product .wc-block-components-product-button__button:hover {
	background-color: var( --jn-gold-400 );
}

li.wc-block-product .wc-block-components-product-button__button.added,
li.wc-block-product .wc-block-components-product-button__button.loading {
	opacity: .75;
}

/* --------------------------------------------------------------------------
   Our badge and rating

   Both are absolutely placed over the image, as live has them, so they do not
   push the title down.
   -------------------------------------------------------------------------- */

li.wc-block-product .jn-badge,
.jn-badge {
	position: absolute;
	top: .75rem;
	left: .75rem;
	z-index: 2;
	padding: .25rem .625rem;
	border-radius: 999px;
	background-color: var( --jn-gold-500 );
	color: #111;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* Woo's own sale flash sits opposite ours. */
li.wc-block-product .wc-block-components-product-sale-badge {
	position: absolute;
	top: .75rem;
	right: .75rem;
	z-index: 2;
	padding: .25rem .625rem;
	border: 0;
	border-radius: 999px;
	background-color: hsl( var( --jn-destructive ) );
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
}

.jn-rating {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	font-size: .8125rem;
	color: hsl( var( --jn-muted-foreground ) );
}

/* Five stars painted once, then clipped to the score. */
.jn-rating__stars {
	position: relative;
	display: inline-block;
	width: 5.25em;
	height: 1em;
	font-size: .875rem;
	line-height: 1;
}

.jn-rating__stars::before,
.jn-rating__stars::after {
	content: "★★★★★";
	position: absolute;
	inset: 0;
	letter-spacing: .05em;
	white-space: nowrap;
}

.jn-rating__stars::before {
	color: hsl( var( --jn-border ) );
}

.jn-rating__stars::after {
	width: var( --jn-rating, 0% );
	overflow: hidden;
	color: var( --jn-gold-500 );
}

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

   The theme supplies its own templates/single-product.html, so this styles our
   own blocks rather than Woo's blockified default.
   -------------------------------------------------------------------------- */

.jn-single,
.wp-site-blocks .jn-single {
	/* The breadcrumb brings its own top margin now, so the wrapper adds none. */
	padding-block: 0;
}

.jn-single__crumbs,
.wp-site-blocks .jn-single__crumbs {
	margin-block: 0;
}

.jn-single__top,
.wp-site-blocks .jn-single__top {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 3rem;
	margin-block: 0 4rem;
}

.jn-single__top > *,
.wp-site-blocks .jn-single__top > * {
	min-width: 0;
	margin-block: 0;
}

/* Woo's gallery floats by default, which would escape the grid track. */
.jn-single .woocommerce-product-gallery,
.jn-single .wp-block-woocommerce-product-image-gallery {
	float: none;
	width: 100%;
	margin: 0;
}

.jn-single .woocommerce-product-gallery img {
	border-radius: var( --jn-radius );
}

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

.jn-single .flex-control-thumbs {
	display: flex;
	gap: .625rem;
	margin: .75rem 0 0;
	padding: 0;
	list-style: none;
}

.jn-single .flex-control-thumbs li {
	flex: 0 0 5rem;
	margin: 0;
}

.jn-single .flex-control-thumbs img {
	border-radius: .5rem;
	cursor: pointer;
	opacity: .6;
}

.jn-single .flex-control-thumbs img.flex-active,
.jn-single .flex-control-thumbs img:hover {
	opacity: 1;
}

.jn-single .jn-single__title {
	margin: 0 0 .5rem;
	font-size: clamp( 1.75rem, 3vw, 2.5rem );
	line-height: 1.15;
}

.jn-single .jn-single__rating {
	margin: 0 0 1rem;
}

.jn-single .jn-single__price {
	margin: 0 0 1.25rem;
	color: hsl( var( --jn-primary-text ) );
	font-size: 1.75rem;
	font-weight: 700;
}

.jn-single .jn-single__price del {
	margin-right: .625rem;
	color: hsl( var( --jn-muted-foreground ) );
	font-size: 1.125rem;
	font-weight: 400;
}

.jn-single .jn-single__price ins {
	text-decoration: none;
}

.jn-single .jn-single__lede {
	margin: 0 0 1.25rem;
	color: hsl( var( --jn-muted-foreground ) );
	line-height: 1.7;
}

.jn-single .jn-single__stock {
	margin: 0 0 1rem;
	font-size: .9375rem;
	font-weight: 600;
}

.jn-single__story,
.wp-site-blocks .jn-single__story {
	padding-block: 0 4rem;
}

.jn-single__related,
.wp-site-blocks .jn-single__related {
	padding-block: 4rem;
}

.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin: 1.5rem 0;
}

.single-product .quantity input[ type="number" ] {
	width: 5rem;
	min-height: 2.75rem;
	padding-inline: .625rem;
	border: 1px solid hsl( var( --jn-border ) );
	border-radius: .5rem;
	background-color: hsl( var( --jn-input ) );
	color: hsl( var( --jn-foreground ) );
	font-family: inherit;
}

.single-product button.single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding-inline: 1.75rem;
	border: 0;
	border-radius: .5rem;
	background-color: var( --jn-gold-500 );
	color: #111;
	font-family: inherit;
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: var( --jn-transition );
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single-product button.single_add_to_cart_button:hover {
	background-color: var( --jn-gold-400 );
	color: #111;
}

/* Specs table, from the data imported off live. */
.jn-specs {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid hsl( var( --jn-border ) );
}

.jn-specs .jn-specs__title {
	margin: 0 0 1rem;
	font-family: Inter, system-ui, sans-serif;
	font-size: 1.0625rem;
	font-weight: 600;
}

.jn-specs__list {
	margin: 0;
	display: grid;
	gap: 0;
}

.jn-specs__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .625rem 0;
	border-bottom: 1px solid hsl( var( --jn-border ) / .5 );
}

/* `.jn-sec p` would otherwise give these a top margin and stretch every row. */
.jn-specs .jn-specs__dt,
.jn-specs .jn-specs__dd,
.jn-sec .jn-specs__dt,
.jn-sec .jn-specs__dd {
	margin: 0;
	font-size: .9375rem;
}

.jn-specs .jn-specs__dt {
	color: hsl( var( --jn-muted-foreground ) );
}

.jn-specs .jn-specs__dd {
	font-weight: 600;
	text-align: right;
}

/* Related products */
.related.products,
.up-sells.products {
	grid-column: 1 / -1;
	margin-top: 4rem;
}

.related.products > h2,
.up-sells.products > h2 {
	margin-bottom: 1.5rem;
	font-size: clamp( 1.5rem, 2.5vw, 2rem );
}

.related.products ul.products,
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: auto;
	margin: 0;
	padding: 0 0 1.25rem;
	border: 1px solid hsl( var( --jn-primary ) / .2 );
	border-radius: var( --jn-radius );
	background: linear-gradient( 135deg, hsl( var( --jn-card ) ), hsl( var( --jn-background-secondary ) ) );
	overflow: hidden;
}

.woocommerce ul.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin-bottom: 1rem;
}

.woocommerce ul.products li.product > :not( a[ class*="image" ] ):not( .jn-badge ) {
	padding-inline: 1rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 .375rem;
	padding-inline: 1rem;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.0625rem;
	font-weight: 600;
}

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

.woocommerce ul.products li.product .price {
	display: block;
	padding-inline: 1rem;
	color: hsl( var( --jn-primary-text ) );
	font-weight: 700;
}

.woocommerce ul.products li.product .price del {
	color: hsl( var( --jn-muted-foreground ) );
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   Cart, checkout and account
   -------------------------------------------------------------------------- */

.woocommerce-cart .jn-main,
.woocommerce-checkout .jn-main,
.woocommerce-account .jn-main {
	box-sizing: border-box;
	max-width: var( --jn-shell );
	margin-inline: auto;
	padding: 3rem var( --jn-gutter ) 5rem;
}

.woocommerce table.shop_table {
	width: 100%;
	border: 1px solid hsl( var( --jn-border ) );
	border-radius: var( --jn-radius );
	border-collapse: collapse;
	overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: .875rem 1rem;
	border-bottom: 1px solid hsl( var( --jn-border ) / .6 );
	text-align: left;
}

.woocommerce table.shop_table th {
	font-weight: 600;
}

.woocommerce .cart_totals,
.woocommerce-checkout-review-order {
	margin-top: 2rem;
	padding: 1.5rem;
	border: 1px solid hsl( var( --jn-primary ) / .2 );
	border-radius: var( --jn-radius );
	background-color: hsl( var( --jn-card ) );
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-input-wrapper input {
	width: 100%;
	min-height: 2.75rem;
	padding: .5rem .75rem;
	border: 1px solid hsl( var( --jn-border ) );
	border-radius: .5rem;
	background-color: hsl( var( --jn-input ) );
	color: hsl( var( --jn-foreground ) );
	font-family: inherit;
	font-size: .9375rem;
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: .375rem;
	font-size: .875rem;
	font-weight: 500;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid hsl( var( --jn-primary ) / .3 );
	border-radius: .5rem;
	background-color: hsl( var( --jn-primary ) / .08 );
	list-style: none;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media ( max-width: 1180px ) {
	ul.wc-block-product-template,
	.wp-site-blocks ul.wc-block-product-template,
	ul.wc-block-product-template.columns-3,
	.wp-site-blocks ul.wc-block-product-template.columns-3,
	.woocommerce ul.products,
	.related.products ul.products {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 900px ) {
	ul.wc-block-product-template,
	.wp-site-blocks ul.wc-block-product-template,
	ul.wc-block-product-template.columns-3,
	.wp-site-blocks ul.wc-block-product-template.columns-3,
	.woocommerce ul.products,
	.related.products ul.products {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.single-product div.product {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

@media ( max-width: 560px ) {
	ul.wc-block-product-template,
	.wp-site-blocks ul.wc-block-product-template,
	ul.wc-block-product-template.columns-3,
	.wp-site-blocks ul.wc-block-product-template.columns-3,
	.woocommerce ul.products,
	.related.products ul.products {
		grid-template-columns: 1fr;
	}
}

/* Woo's blockified gallery ships its own sale flash; ours is the card badge. */
.jn-single .onsale,
.jn-single .wc-block-components-product-sale-badge {
	display: none;
}

/* --------------------------------------------------------------------------
   The card step (rpayz receipt page)

   The fields themselves are drawn inside the provider's iframe, so only the
   frame around them is ours: a card, the error line, and the pay button.
   -------------------------------------------------------------------------- */

.jn-payform,
.wp-site-blocks .jn-payform {
	max-width: 32rem;
	margin-inline: auto;
	margin-block: 2rem 3rem;
	padding: 1.75rem;
	border: 1px solid hsl( var( --jn-border ) / .2 );
	border-radius: var( --jn-radius );
	background-color: hsl( var( --jn-card ) );
}

.jn-payform__fields {
	min-height: 12rem;
}

/* A class plus an element, so the section rules for <p> do not win. */
.jn-payform p.jn-payform__error,
.jn-payform .jn-payform__error {
	margin: .75rem 0 0;
	color: hsl( var( --jn-destructive ) );
	font-size: .9375rem;
	line-height: 1.5;
}

/* Empty until something goes wrong — an empty red line is still a gap. */
.jn-payform .jn-payform__error:empty {
	display: none;
}

.jn-payform button.jn-payform__submit,
.jn-payform .jn-payform__submit {
	width: 100%;
	margin-top: 1.25rem;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

/* Disabled until the hosted fields have really drawn, so it must look it. */
.jn-payform button.jn-payform__submit:disabled {
	cursor: not-allowed;
	opacity: .55;
}

.jn-pay__error {
	max-width: 32rem;
	margin-inline: auto;
	margin-block: 2rem 3rem;
	color: hsl( var( --jn-destructive ) );
}