/* ==========================================================================
   55TH Avenue - WooCommerce surface styling
   Theme disables WooCommerce's default stylesheet (see
   inc/woocommerce-setup.php) so every WC-generated element is restyled here
   to match the monochrome editorial system.
   ========================================================================== */

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

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
	list-style: none;
	max-width: var(--container-max);
	margin: 24px auto;
	padding: 20px var(--margin-mobile);
	border: 1px solid var(--color-outline-variant);
	background: var(--color-surface-container-low);
	font-size: var(--size-body-md);
	color: var(--color-on-surface);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.woocommerce-error {
	border-color: var(--color-error);
}

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
	order: 2;
}

/* Quantity input -------------------------------------------------------------- */

.quantity {
	display: inline-flex;
	border: 1px solid var(--color-outline-variant);
}

.quantity .qty {
	width: 56px;
	border: none;
	background: none;
	text-align: center;
	padding: 12px 0;
}

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

.fa-cart-layout {
	display: flex;
	flex-direction: column;
	gap: var(--section-gap);
}

.fa-cart-list {
	display: flex;
	flex-direction: column;
}

.fa-cart-item {
	display: grid;
	grid-template-columns: 96px 1fr auto auto;
	align-items: center;
	gap: 24px;
	padding: 24px 0;
	border-bottom: 1px solid var(--color-outline-variant);
}

.fa-cart-item .fa-cart-item__media {
	align-self: start;
}

/* The qty/price columns don't fit alongside a 96px thumbnail at mobile
   widths (the price gets pushed off-screen) — drop to two columns and
   let qty + price wrap onto their own full-width row underneath. */
@media (max-width: 767px) {
	.fa-cart-item {
		grid-template-columns: 96px 1fr;
		row-gap: 16px;
	}

	.fa-cart-item [data-cart-row-qty],
	.fa-cart-item__end {
		grid-column: 2 / -1;
	}

	.fa-cart-item__end {
		text-align: left;
	}
}

.fa-cart-item__media {
	display: block;
	width: 96px;
	height: 128px;
	overflow: hidden;
}

.fa-cart-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fa-cart-item__title {
	font-size: var(--size-body-lg);
	color: var(--color-on-surface);
	margin-bottom: 8px;
}

.fa-cart-item__meta {
	color: var(--color-on-surface-variant);
	margin-bottom: 8px;
}

.fa-cart-item__price {
	color: var(--color-on-surface-variant);
	margin-bottom: 16px;
}

.fa-cart-item__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.fa-cart-item__action {
	background: none;
	border: none;
	padding: 0;
	color: var(--color-on-surface-variant);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s var(--ease);
}

.fa-cart-item__action:hover {
	color: var(--color-primary);
}

.fa-cart-item__action.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

.fa-cart-item__end {
	text-align: right;
}

.fa-cart-item__subtotal {
	color: var(--color-on-surface);
}

.fa-cart-actions {
	padding-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
}

.coupon {
	display: flex;
	gap: 12px;
	align-items: center;
}

.coupon input#coupon_code {
	border: 1px solid var(--color-outline-variant);
	padding: 12px;
	background: transparent;
}

.cart_totals {
	width: 100%;
	background: var(--color-surface-container-low);
	border: 1px solid var(--color-outline-variant);
	padding: 32px;
}

.cart_totals h2 {
	font-family: var(--font-serif);
	font-size: var(--size-headline-md);
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-outline-variant);
}

.cart_totals table {
	width: 100%;
}

.cart_totals table th,
.cart_totals table td {
	padding: 10px 0;
	text-align: left;
}

.cart_totals table th {
	color: var(--color-on-surface-variant);
	font-weight: 400;
}

.cart_totals .order-total th,
.cart_totals .order-total td {
	border-top: 1px solid var(--color-primary);
	padding-top: 16px;
	font-family: var(--font-serif);
	font-size: var(--size-headline-md);
}

.wc-proceed-to-checkout {
	max-width: 420px;
	margin: 24px auto 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wc-proceed-to-checkout a {
	width: 100%;
}

.fa-cart-continue-shopping {
	display: block;
	text-align: center;
	margin-top: 16px;
	color: var(--color-on-surface-variant);
}

.fa-cart-checkout-actions {
	margin-top: 32px;
}

.fa-cart-checkout-actions .wc-proceed-to-checkout {
	margin-top: 0;
}

.fa-gift-message {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--color-outline-variant);
}

.fa-gift-message__title {
	font-family: var(--font-serif);
	font-size: var(--size-headline-md);
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-outline-variant);
}

.fa-gift-message__desc {
	color: var(--color-on-surface-variant);
	max-width: 560px;
	margin-bottom: 20px;
}

.fa-gift-message__options {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fa-gift-message__options label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.fa-gift-message__options input[type="radio"] {
	width: 16px;
	height: 16px;
	accent-color: var(--color-primary);
}

.fa-gift-message__textarea {
	width: 100%;
	max-width: 480px;
	margin-top: 16px;
	padding: 12px;
	border: 1px solid var(--color-outline-variant);
	background: transparent;
	font-family: var(--font-sans);
	font-size: var(--size-body-md);
	resize: vertical;
	display: block;
}

.fa-gift-message__textarea[hidden] {
	display: none;
}

.fa-payment-methods {
	padding-top: 32px;
	border-top: 1px solid var(--color-outline-variant);
	text-align: center;
}

.fa-payment-methods__title {
	color: var(--color-on-surface-variant);
	margin-bottom: 16px;
}

.fa-payment-methods__icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 32px;
}

.fa-payment-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 40px;
	border: 1px solid var(--color-outline-variant);
	background: var(--color-surface-container-lowest);
}

.fa-payment-badge img {
	width: 40px;
	height: auto;
	max-height: 22px;
	object-fit: contain;
}

.fa-payment-methods__secure {
	margin-bottom: 8px;
}

.fa-payment-methods__note {
	color: var(--color-on-surface-variant);
	max-width: 420px;
	margin: 0 auto 16px;
}

/* "Information" toggle on the Taxes / Delivery method rows — a chevron
   accordion button (assets/js/cart.js) that opens a full-width row of its
   own directly beneath, rather than squeezing the explanation into the
   label cell's own narrow column. */
.fa-totals-info-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	padding: 0;
	background: none;
	border: none;
	font-size: var(--size-label-md);
	text-decoration: underline;
	text-underline-offset: 2px;
	color: var(--color-on-surface-variant);
	cursor: pointer;
}

.fa-totals-info-toggle svg {
	width: 10px;
	height: 10px;
	transform: rotate(-90deg);
	transition: transform 0.2s var(--ease);
}

.fa-totals-info-toggle[aria-expanded="true"] svg {
	transform: rotate(0deg);
}

.fa-totals-info-row td {
	padding-top: 0 !important;
	padding-bottom: 16px !important;
	font-size: var(--size-label-md);
	color: var(--color-on-surface-variant);
	border-bottom: none !important;
}

.fa-totals-info-row[hidden] {
	display: none;
}

.fa-totals-footnote {
	color: var(--color-on-surface-variant);
	margin-top: 12px;
}

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

.woocommerce-checkout #customer_details {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
	font-family: var(--font-serif);
	font-size: var(--size-headline-md);
	margin-bottom: 32px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-outline-variant);
}

.woocommerce-checkout .form-row {
	margin-bottom: 24px;
}

.woocommerce-checkout .form-row label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--size-label-caps);
	letter-spacing: var(--tracking-label-caps);
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout textarea,
.woocommerce-checkout .select2-selection {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--color-outline-variant);
	background: transparent;
	padding: 12px 0;
	font-size: var(--size-body-md);
}

.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus {
	outline: none;
	border-color: var(--color-primary);
}

.woocommerce-checkout .select2-container {
	width: 100% !important;
}

.woocommerce-checkout .select2-selection__arrow {
	top: 8px !important;
}

#order_review {
	background: var(--color-surface-container-low);
	border: 1px solid var(--color-outline-variant);
	padding: 32px;
}

.fa-checkout-right {
	align-self: start;
}

@media (min-width: 1024px) {
	.fa-checkout-right {
		position: sticky;
		top: 140px;
	}
}

/* table-layout: fixed + explicit column widths, rather than leaving the
   browser's default auto-layout to size columns from whatever happens to
   render in them — auto-layout recalculates column widths from content
   on every AJAX-refreshed render (switching shipping method, applying a
   coupon, etc.), so the label/value gap was visibly shifting between
   states instead of staying put. Three real columns now (Product / Qty /
   Subtotal — see woocommerce/checkout/review-order.php): every totals
   row still only has two cells, so its label gets colspan="2" there to
   land its value in the real Subtotal column instead of Qty's. */
#order_review table.shop_table {
	width: 100%;
	table-layout: fixed;
}

#order_review table.shop_table th,
#order_review table.shop_table td {
	padding: 12px 0;
	border-bottom: 1px solid var(--color-outline-variant);
	text-align: left;
	vertical-align: middle;
}

#order_review table.shop_table .product-name,
#order_review table.shop_table th:first-child {
	width: 52%;
}

#order_review table.shop_table .product-qty {
	width: 14%;
	text-align: center;
	color: var(--color-on-surface-variant);
}

#order_review table.shop_table .product-total,
#order_review table.shop_table th ~ td {
	width: 34%;
}

#order_review .product-name {
	padding-right: 16px;
}

#order_review .product-total {
	white-space: nowrap;
}

#payment {
	background: var(--color-surface-container-low);
	border: 1px solid var(--color-outline-variant);
	margin-top: 24px;
}

#payment ul.payment_methods {
	padding: 20px;
	border-bottom: 1px solid var(--color-outline-variant);
}

#payment ul.payment_methods li {
	padding: 12px 0;
}

#payment .payment_box {
	padding: 16px;
	background: var(--color-surface-container);
	margin-top: 8px;
	font-size: var(--size-body-md);
	color: var(--color-on-surface-variant);
}

#payment #place_order {
	width: calc(100% - 40px);
	margin: 20px;
}

/* My Account -------------------------------------------------------------------------- */

.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border: 1px solid var(--color-outline-variant);
}

.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--color-outline-variant);
}

.woocommerce-MyAccount-navigation li:last-child {
	border-bottom: none;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 16px 20px;
	font-size: var(--size-label-caps);
	letter-spacing: var(--tracking-label-caps);
	text-transform: uppercase;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

.woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
	padding: 16px 12px;
	border-bottom: 1px solid var(--color-outline-variant);
	text-align: left;
}

.woocommerce-MyAccount-content .addresses .title h3 {
	font-family: var(--font-serif);
	font-size: var(--size-headline-md);
}

.woocommerce-EditAccountForm .form-row,
.woocommerce-address-fields .form-row,
.woocommerce-ResetPassword .form-row {
	margin-bottom: 20px;
}

.woocommerce-EditAccountForm .form-row label,
.woocommerce-address-fields .form-row label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--size-label-caps);
	letter-spacing: var(--tracking-label-caps);
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.woocommerce-EditAccountForm input,
.woocommerce-address-fields input,
.woocommerce-ResetPassword input {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--color-outline-variant);
	background: transparent;
	padding: 12px 0;
}

/* WooCommerce's own "show password" toggle button (assets/js/frontend/add-to-cart.js
   appends it via JS on every .password-input field) ships unstyled outside the
   default theme stylesheets we intentionally dequeue, so without this it rendered
   as a bare, unstyled HTML button. */
.password-input {
	position: relative;
}

.password-input input[type="password"] {
	padding-right: 2.5rem;
}

.show-password-input {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	cursor: pointer;
}

.show-password-input::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="black"/></svg>');
}

.show-password-input.display-password::before {
	background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="black"/></svg>');
}

.u-columns.woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media (min-width: 768px) {
	.u-columns.woocommerce-Addresses {
		grid-template-columns: 1fr 1fr;
	}
}

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

/* Buttons (WC generates its own button classes) ------------------------------------------ */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
a.checkout-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 32px;
	border: 1px solid var(--color-primary);
	background: var(--color-primary);
	color: var(--color-on-primary) !important;
	font-family: var(--font-sans);
	font-size: var(--size-label-caps);
	letter-spacing: var(--tracking-label-caps);
	font-weight: 600;
	text-transform: uppercase;
	transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--color-inverse-surface);
}

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

/* Shop archive ------------------------------------------------------------------------------- */

ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gutter) 16px;
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (min-width: 768px) {
	ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	ul.products {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--gutter);
	}
}

ul.products li.product {
	list-style: none;
}

.woocommerce-result-count,
.woocommerce-ordering {
	display: none;
}

/* Star ratings ------------------------------------------------------------------------------ */

/* Read-only average (e.g. "Rated 4 out of 5"): WooCommerce renders this as
   <div class="star-rating"><span style="width:80%">Rated 4 out of 5</span></div>
   — the outer element draws five empty stars as its own ::before, the
   inner span (whose width WooCommerce sets inline as the percentage
   score) draws five gold stars on top of that, clipped to its own width
   by being absolutely positioned with overflow hidden on the parent. */
.star-rating {
	position: relative;
	overflow: hidden;
	width: 5.4em;
	height: 1.2em;
	font-size: var(--size-body-md);
	line-height: 1.2em;
	letter-spacing: 0.3em;
}

.star-rating::before {
	content: '\2606\2606\2606\2606\2606';
	position: absolute;
	top: 0;
	left: 0;
	color: var(--color-outline);
}

.star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	height: 100%;
}

.star-rating span::before {
	content: '\2605\2605\2605\2605\2605';
	position: absolute;
	top: 0;
	left: 0;
	color: var(--color-accent);
}

/* Interactive picker in the review form: WooCommerce's JS swaps the real
   <select id="rating"> for this — five stacked <a class="star-1">1 of 5
   stars</a> links whose visible text is that literal label (meant to stay
   for screen readers only, but this theme never defined the hiding
   technique WP core assumes every theme has — see .screen-reader-text in
   base.css, which doesn't apply here since this isn't marked up with that
   class, the link's own text content just needs the same visual-hide). */
.comment-form-rating p.stars {
	margin: 4px 0 0;
}

.comment-form-rating p.stars a {
	position: relative;
	display: inline-block;
	width: 1.3em;
	height: 1.3em;
	margin-right: 4px;
	text-indent: -999px;
	overflow: hidden;
	text-decoration: none;
}

.comment-form-rating p.stars a::before {
	content: '\2605';
	position: absolute;
	top: 0;
	left: 0;
	text-indent: 0;
	font-size: 1.3em;
	line-height: 1;
	color: var(--color-outline);
}

/* Gold fills the clicked/hovered star and every star BEFORE it — WC's
   markup lists star-1..star-5 in forward DOM order, so a sibling
   combinator alone can only reach LATER stars; :has(~ …) is what lets a
   star check whether any LATER sibling is the active/hovered one, which
   is exactly "am I at or before the selected position". */
.comment-form-rating p.stars a:hover::before,
.comment-form-rating p.stars a:has(~ a:hover)::before,
.comment-form-rating p.stars.selected a.active::before,
.comment-form-rating p.stars.selected a:has(~ a.active)::before {
	color: var(--color-accent);
}

.woocommerce-tabs ul.tabs {
	display: flex;
	gap: 32px;
	border-bottom: 1px solid var(--color-outline-variant);
	margin-bottom: 32px;
}

.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 16px 0;
	font-size: var(--size-label-caps);
	letter-spacing: var(--tracking-label-caps);
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--color-primary);
	border-bottom: 2px solid var(--color-primary);
}

.woocommerce-Price-amount {
	font-family: var(--font-sans);
}

/* Related / upsell product rails ---------------------------------------------------------------- */

.related,
.upsells {
	padding: 0 var(--margin-mobile) var(--section-gap);
	max-width: var(--container-max);
	margin: 0 auto;
	border-top: 1px solid var(--color-outline-variant);
	padding-top: var(--section-gap);
}

@media (min-width: 1024px) {
	.related,
	.upsells {
		padding-left: var(--margin-desktop);
		padding-right: var(--margin-desktop);
	}
}

.related h2,
.upsells h2 {
	font-family: var(--font-serif);
	font-size: var(--size-headline-md);
	margin-bottom: 32px;
}

/* Single product gallery (stacked, scrollable) ------------------------------------------------- */

.woocommerce-product-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--unit);
}

/* WooCommerce hardcodes a raw magnifying-glass emoji into this zoom trigger
   and relies on its own (dequeued) default stylesheet to mask it behind a
   proper icon — without that it rendered as a stray emoji glyph over the
   gallery. There's no zoom/lightbox behavior wired up to open, so hide it
   rather than leave a trigger for a feature that doesn't do anything. */
.woocommerce-product-gallery__trigger {
	display: none;
}

.woocommerce-product-gallery__wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--unit);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-product-gallery__image {
	width: 100%;
	aspect-ratio: 3 / 4;
	background: var(--color-surface-container-low);
	overflow: hidden;
	cursor: zoom-in;
}

.woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.flex-control-thumbs {
	display: none;
}

/* Variation size pills, progressively enhanced from the native <select> ------------------------- */

table.variations {
	width: 100%;
	border: none;
}

table.variations tr {
	display: block;
}

table.variations td,
table.variations th {
	display: block;
	border: none;
	padding: 0;
}

table.variations label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--size-label-caps);
	letter-spacing: var(--tracking-label-caps);
	text-transform: uppercase;
	color: var(--color-on-surface);
}

table.variations .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: var(--size-label-md);
	color: var(--color-on-surface-variant);
	text-decoration: none;
}

.woocommerce-variation-add-to-cart {
	margin-top: 24px;
}

.single_add_to_cart_button {
	width: 100%;
}

/* Before a variable product's options are all chosen, WooCommerce adds
   .disabled but this theme had no matching style — the button looked and
   cursored as fully clickable regardless. */
.single_add_to_cart_button.disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.woocommerce-variation-price,
.woocommerce-variation-availability {
	margin-bottom: 16px;
	color: var(--color-on-surface-variant);
}

/* The Stripe gateway injects an off-screen input it only reads computed
   styles from (font, colour); the theme's full-width .input-text rule made
   it push the checkout past the viewport on phones and tablets. */
#wc-stripe-hidden-style-input {
	/* Absolutely positioned by Stripe, so a percentage width resolves
	   against a wider ancestor; it's never seen, so 1px is enough. */
	width: 1px !important;
	max-width: 1px;
}