/* WooCommerce pages: shop, product, order list, checkout, account. */

/* Breadcrumb */
.crumbs {
	margin-bottom: var(--s-3);
	color: var(--muted);
	font-size: var(--step--1);
}

.crumbs a {
	display: inline-block;
	padding-block: var(--s-2);
	color: var(--muted);
}

.crumbs__sep {
	margin-inline: var(--s-2);
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	margin: 0 0 var(--s-4);
	padding: var(--s-3) var(--s-4);
	border-left: 4px solid var(--border-strong);
	border-radius: var(--radius);
	background: var(--surface);
	list-style: none;
}

.woocommerce-message {
	border-left-color: var(--success);
}

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

.woocommerce-message .button,
.woocommerce-info .button {
	display: flex;
	margin-top: var(--s-2);
}

.notice-link {
	font-weight: 700;
}

/* Archive */
.shop-toolbar {
	position: sticky;
	top: var(--search-row);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	margin-inline: calc(var(--gutter) * -1);
	padding: var(--s-2) var(--gutter);
	background: var(--bg);
}

.admin-bar .shop-toolbar {
	top: calc(var(--search-row) + 46px);
}

.shop-toolbar__count {
	margin: 0;
	color: var(--muted);
	font-size: var(--step--1);
}

.shop-toolbar .btn {
	padding-inline: var(--s-4);
}

.filter-count {
	min-width: 1.5rem;
	padding-inline: var(--s-1);
	border-radius: 999px;
	background: var(--brand);
	color: var(--on-brand);
	font-size: var(--step--1);
	line-height: 1.5rem;
}

.load-more {
	margin-top: var(--s-5);
}

.woocommerce-pagination[hidden] {
	display: none;
}

.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-2);
	margin: var(--s-5) 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap);
	min-height: var(--tap);
	border-radius: var(--radius);
	color: var(--text);
	font-weight: 600;
}

.woocommerce-pagination .current {
	background: var(--brand-soft);
	color: var(--brand-text);
}

.empty-state {
	padding-top: var(--s-4);
}

.empty-state__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin-bottom: var(--s-6);
}

/* Filter sheet: rises from the bottom on phones. */
.filter-sheet {
	position: fixed;
	inset: auto 0 0;
	width: 100%;
	max-width: 100%;
	max-height: 88dvh;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	background: var(--surface);
	color: var(--text);
}

.filter-sheet[open] {
	display: flex;
}

.filter-sheet[open] {
	animation: sheet-up 200ms ease-out;
}

.filter-sheet::backdrop {
	background: var(--backdrop);
}

@keyframes sheet-up {
	from {
		transform: translateY(40px);
		opacity: 0;
	}
}

.filter-sheet__form {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0;
}

.filter-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
	border-bottom: 1px solid var(--border);
}

.filter-sheet__head h2 {
	margin: 0;
}

.filter-sheet__body {
	flex: 1;
	min-height: 0;
	padding: var(--s-2) var(--s-4) var(--s-4);
	overflow-y: auto;
}

.filter-sheet__foot {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4) calc(var(--s-3) + var(--safe-bottom));
	border-top: 1px solid var(--border);
}

.filter-sheet__foot .btn {
	padding-inline: var(--s-2);
}

.filter-group {
	margin: 0;
	padding: var(--s-3) 0;
	border: 0;
	border-bottom: 1px solid var(--border);
}

.filter-group__title {
	display: block;
	padding: 0 0 var(--s-2);
	font-size: var(--step-0);
	font-weight: 700;
}

.filter-group--fold summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	padding: 0;
	cursor: pointer;
	list-style: none;
}

.filter-group--fold summary::-webkit-details-marker {
	display: none;
}

.filter-group--fold[open] summary .icon {
	transform: rotate(180deg);
}

.filter-check {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	min-height: 44px;
	font-weight: 400;
	cursor: pointer;
}

.filter-check--solo {
	padding-block: var(--s-2);
	border-bottom: 1px solid var(--border);
	font-weight: 700;
}

.filter-price {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-3);
}

.filter-price label {
	display: block;
	margin-bottom: var(--s-1);
	color: var(--muted);
	font-size: var(--step--1);
}

/* Product page */
.has-buy-bar {
	padding-bottom: calc(var(--bottom-nav-height) + var(--buy-bar-height) + var(--safe-bottom));
}

/* Product gallery: swipe or arrows, the video as the last slide, thumbnails (with a play mark on the video's), a counter.
   Phones: full-width photo that leaves the name and price on the first screen, thumbnails in a row underneath.
   Tablets and desktop: thumbnails in a column beside the photo. */
.gallery {
	position: relative;
	margin-inline: calc(var(--gutter) * -1);
}

.gallery__main {
	position: relative;
	background: var(--photo-bg);
}

.gallery__track {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.gallery__track::-webkit-scrollbar {
	display: none;
}

.gallery__track:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: -2px;
}

.gallery__slide {
	position: relative;
	flex: 0 0 100%;
	height: min(42dvh, 100vw);
	scroll-snap-align: start;
	scroll-snap-stop: always;
	cursor: zoom-in;
}

.gallery__slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--photo-bg);
}

/* Arrows: always visible while there is somewhere to go, so swiping is not the only way. */
.gallery__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--bg);
	box-shadow: var(--shadow-raised);
	color: var(--text);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 0.2s var(--ease), transform 0.15s var(--ease);
}

.gallery__arrow::before {
	/* A 48px touch target around the 40px circle. */
	content: "";
	position: absolute;
	inset: -4px;
}

.gallery__arrow:active {
	transform: translateY(-50%) scale(0.92);
}

.gallery__arrow:disabled {
	opacity: 0;
	pointer-events: none;
}

.gallery__arrow .icon {
	width: 20px;
	height: 20px;
}

.gallery__arrow--prev {
	left: var(--s-2);
}

.gallery__arrow--next {
	right: var(--s-2);
}

.gallery__count {
	position: absolute;
	right: var(--s-3);
	bottom: var(--s-3);
	z-index: 2;
	margin: 0;
	padding: 2px var(--s-2);
	border-radius: 999px;
	background: var(--overlay);
	color: var(--on-overlay);
	font-size: var(--step--1);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

/* The video slide: the main photo dimmed behind a big Play button; YouTube loads only after Play. */
.gallery__slide--video {
	display: grid;
	place-items: center;
	background: var(--ink);
	cursor: default;
}

.gallery__slide--video .gallery__poster {
	position: absolute;
	inset: 0;
	opacity: 0.3;
	background: transparent;
	filter: grayscale(0.4);
}

.gallery__play {
	position: relative;
	display: grid;
	gap: var(--s-2);
	justify-items: center;
	padding: var(--s-3);
	border: 0;
	background: none;
	color: var(--on-ink);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.gallery__play-icon {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	border-radius: 999px;
	background: var(--brand);
	box-shadow: 0 6px 20px rgb(0 0 0 / 35%);
	color: var(--on-brand);
	transition: transform 0.15s var(--ease);
}

.gallery__play:hover .gallery__play-icon,
.gallery__play:focus-visible .gallery__play-icon {
	transform: scale(1.06);
}

.gallery__play-icon .icon {
	width: 28px;
	height: 28px;
	margin-left: 4px;
}

.gallery__video-note {
	position: absolute;
	bottom: var(--s-3);
	left: var(--s-3);
	margin: 0;
	color: var(--on-ink);
	font-size: var(--step--1);
	opacity: 0.75;
}

.gallery__slide--video.is-playing {
	display: block;
}

.gallery__slide--video iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Thumbnails */
.gallery__thumbs {
	display: flex;
	gap: var(--s-2);
	margin: var(--s-2) 0 0;
	padding: 2px var(--gutter);
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.gallery__thumbs::-webkit-scrollbar {
	display: none;
}

.gallery__thumbs li {
	flex: none;
	margin: 0;
}

.gallery__thumbs button {
	position: relative;
	display: block;
	width: 56px;
	height: 56px;
	padding: 0;
	overflow: hidden;
	border: 2px solid var(--border);
	border-radius: var(--radius);
	background: var(--photo-bg);
	cursor: pointer;
}

.gallery__thumbs [aria-current="true"] {
	border-color: var(--brand);
}

.gallery__thumbs img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery__thumb--video {
	background: var(--ink) !important;
}

.gallery__thumb--video img {
	opacity: 0.55;
}

.gallery__thumb-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #ffffff;
}

.gallery__thumb-play .icon {
	width: 24px;
	height: 24px;
	padding: 5px;
	border-radius: 999px;
	background: var(--brand);
	color: var(--on-brand);
}

@media (hover: hover) {
	.gallery__thumbs button:hover {
		border-color: var(--muted);
	}
}

@media (min-width: 769px) {
	.gallery {
		display: grid;
		gap: var(--s-3);
		margin-inline: 0;
		grid-template-columns: 64px minmax(0, 1fr);
	}

	.gallery:not(.gallery--many) {
		grid-template-columns: minmax(0, 1fr);
	}

	.gallery__main {
		overflow: hidden;
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
	}

	.gallery__slide {
		height: min(62dvh, 40rem);
	}

	.gallery__arrow {
		width: 44px;
		height: 44px;
	}

	.gallery__arrow--prev {
		left: var(--s-3);
	}

	.gallery__arrow--next {
		right: var(--s-3);
	}

	.gallery__thumbs {
		flex-direction: column;
		order: -1;
		max-height: min(62dvh, 40rem);
		margin: 0;
		padding: 2px;
		overflow: hidden auto;
	}

	.gallery__thumbs button {
		width: 60px;
		height: 60px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gallery__arrow,
	.gallery__play-icon {
		transition: none;
	}
}

/* Full-screen photos: arrows at the sides, counter at the bottom. */
.zoom__arrow {
	position: fixed;
}

.zoom__count {
	position: fixed;
	right: auto;
	bottom: calc(var(--s-4) + var(--safe-bottom, 0px));
	left: 50%;
	transform: translateX(-50%);
}

.zoom {
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	padding: 0;
	border: 0;
	background: var(--photo-bg);
}

.zoom::backdrop {
	background: var(--photo-bg);
}

.zoom__close {
	position: fixed;
	top: var(--s-2);
	right: var(--s-2);
	z-index: 1;
	background: var(--overlay);
	color: var(--on-overlay);
}

.zoom__close:hover {
	background: var(--overlay);
}

.zoom__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: auto;
	touch-action: pinch-zoom pan-x pan-y;
}

.zoom__stage img {
	max-width: 100%;
	max-height: 100%;
	cursor: zoom-in;
}

.zoom__stage.is-enlarged {
	align-items: flex-start;
	justify-content: flex-start;
}

.zoom__stage.is-enlarged img {
	width: 200%;
	max-width: none;
	max-height: none;
	cursor: zoom-out;
}

.product-brand {
	color: var(--muted);
	font-weight: 600;
	text-decoration: none;
}

.product-brand:hover {
	text-decoration: underline;
}

.product_title {
	margin: var(--s-1) 0 var(--s-1);
}

.product-sku {
	margin-bottom: var(--s-3);
	color: var(--muted);
	font-size: var(--step--1);
}

.product-price {
	font-size: var(--step-2);
	font-weight: 700;
	font-stretch: 85%;
	line-height: 1.15;
	color: var(--text);
}

.product-price .wholesale_price_container {
	font-size: var(--step-1);
}

.screen-reader-text + .amount {
	color: var(--muted);
}

.product-sale {
	margin-bottom: var(--s-2);
}

.summary .stock {
	margin: var(--s-3) 0;
	font-weight: 600;
}

.stock.in-stock {
	color: var(--success);
}

.stock.out-of-stock {
	color: var(--danger);
}

form.cart {
	margin-top: var(--s-4);
}

.quantity:has(input[type="hidden"]) {
	display: none;
}

/* On phones the action buttons stay in reach, above the bottom navigation. */
.buy-bar {
	position: fixed;
	right: 0;
	bottom: calc(var(--bottom-nav-height) + var(--safe-bottom));
	left: 0;
	z-index: 38;
	display: flex;
	gap: var(--s-2);
	padding: var(--s-2) var(--gutter);
	background: var(--surface);
	box-shadow: var(--shadow-raised);
}

.buy-bar > * {
	flex: 1;
	padding-inline: var(--s-2);
	font-size: 0.9375rem;
}

.buy-bar .icon {
	width: 1.25rem;
	height: 1.25rem;
}

/* Variable products */
table.variations {
	margin-bottom: var(--s-3);
}

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

table.variations th {
	margin-bottom: var(--s-1);
}

.reset_variations {
	display: inline-block;
	padding-block: var(--s-2);
}

.woocommerce-variation-price {
	margin-bottom: var(--s-3);
	font-size: var(--step-2);
	font-weight: 800;
	font-stretch: 85%;
}

.woocommerce-variation-availability .stock {
	margin-top: 0;
}

.single_add_to_cart_button.disabled {
	opacity: 1;
	background: var(--surface-2);
	color: var(--muted);
	border-color: var(--border-strong);
}

.product-section {
	padding-top: var(--s-6);
}

.product-section .product-sheet {
	margin-top: var(--s-2);
}

.woocommerce-product-attributes th {
	width: 45%;
	padding-left: 0;
	color: var(--muted);
	font-weight: 500;
}

.woocommerce-product-attributes td p {
	margin: 0;
}

.woocommerce-product-attributes a {
	color: inherit;
	text-decoration: none;
	pointer-events: none;
}

@media (min-width: 600px) {
	.gallery {
		margin-inline: 0;
	}
}

@media (min-width: 1024px) {
	.shop-toolbar {
		position: static;
		margin-inline: 0;
		padding-inline: 0;
	}

	/* Filter panel slides from the right on desktop. */
	.filter-sheet {
		inset: 0 0 0 auto;
		width: 26rem;
		max-height: 100dvh;
		height: 100dvh;
		border-radius: var(--radius-lg) 0 0 var(--radius-lg);
	}

	.has-buy-bar {
		padding-bottom: 0;
	}

	.buy-bar {
		position: static;
		display: flex;
		margin-top: var(--s-3);
		padding: 0;
		box-shadow: none;
		background: transparent;
	}

	.buy-bar > * {
		padding-inline: var(--s-4);
		font-size: var(--step-0);
	}
}

/* Forms */
.form-row {
	margin: 0 0 var(--s-4);
}

.form-row > label,
.list-note label {
	display: block;
	margin-bottom: var(--s-1);
}

.form-row .optional {
	color: var(--muted);
	font-weight: 400;
}

.form-row .required {
	color: var(--danger);
	text-decoration: none;
}

.form-row[hidden] {
	display: none;
}

.form-row.woocommerce-invalid input {
	border-color: var(--danger);
}

.woocommerce-input-wrapper {
	display: block;
}

/* Delivery or pickup: two large choices. */
.fulfilment-field .woocommerce-input-wrapper {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: var(--s-1) var(--s-3);
}

.fulfilment-field .woocommerce-input-wrapper label {
	display: flex;
	align-items: center;
	min-height: var(--tap);
	margin: 0;
	font-weight: 600;
	cursor: pointer;
}

/* Order list */
.list-items {
	margin: 0 calc(var(--gutter) * -1) var(--s-4);
	padding: 0;
	border-top: 1px solid var(--border);
	list-style: none;
}

.list-item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: var(--s-2) var(--s-3);
	padding: var(--s-3) var(--gutter);
	border-bottom: 1px solid var(--border);
}

.list-item__image {
	display: block;
	border-radius: 6px;
	overflow: hidden;
	background: var(--photo-bg);
}

.list-item__name {
	display: block;
	color: var(--text);
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
}

.list-item__sku {
	display: block;
	color: var(--muted);
	font-size: 0.8125rem;
}

.list-item__unit {
	display: block;
	margin-top: 2px;
	color: var(--muted);
	font-size: var(--step--1);
}

.list-item__unit .wholesale_price_container {
	display: inline;
	font-size: inherit;
}

.list-item__remove {
	margin: calc(var(--s-2) * -1) calc(var(--s-2) * -1) 0 0;
	color: var(--muted);
}

.list-item__qty {
	grid-column: 2;
}

.list-item__subtotal {
	grid-column: 3;
	align-self: center;
	font-size: var(--step-1);
	font-weight: 800;
	font-stretch: 85%;
	text-align: right;
	white-space: nowrap;
}

.list-item__subtotal .price-on-request {
	font-size: var(--step--1);
}

.list-update {
	margin-bottom: var(--s-4);
}

.list-update[hidden] {
	display: none;
}

.list-note {
	margin-bottom: var(--s-4);
}

.list-total {
	padding: var(--s-4);
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--border);
}

.list-total__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-3);
	font-weight: 700;
}

.list-total__row strong {
	font-size: var(--step-2);
	font-weight: 800;
	font-stretch: 85%;
}

.list-total p {
	margin: var(--s-1) 0 0;
	color: var(--muted);
	font-size: var(--step--1);
}

/* Send order */
.send-order__summary {
	margin-top: var(--s-5);
}

.customer-type {
	margin-bottom: 0;
	color: var(--muted);
}

.customer-type strong {
	color: var(--text);
}

.woocommerce-account-fields {
	margin-bottom: var(--s-4);
}

.create-account label.checkbox {
	display: flex;
	gap: var(--s-3);
	font-weight: 400;
	cursor: pointer;
}

.woocommerce-checkout-review-order-table {
	margin-bottom: var(--s-4);
}

.woocommerce-checkout-review-order-table thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding-inline: 0;
}

.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
	white-space: nowrap;
}

.woocommerce-checkout-review-order-table tfoot .order-total td {
	font-size: var(--step-1);
	font-weight: 800;
	font-stretch: 85%;
}

/* WhatsApp is the only method, so there is nothing to choose between. */
#payment ul.payment_methods {
	display: none;
}

#payment #place_order {
	width: 100%;
	margin-top: var(--s-3);
}

.woocommerce-privacy-policy-text {
	color: var(--muted);
	font-size: var(--step--1);
}

.woocommerce-terms-and-conditions-wrapper p {
	margin-bottom: 0;
}

/* Order sent */
.order-sent__hero {
	max-width: 32rem;
	margin-inline: auto;
	text-align: center;
}

.order-sent__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin-bottom: var(--s-3);
	border-radius: 50%;
	background: var(--success);
	color: var(--surface);
}

.order-sent__icon .icon {
	width: 2.25rem;
	height: 2.25rem;
	stroke-width: 3;
}

.order-sent__hero h2 {
	font-size: var(--step-3);
}

.order-sent__fallback {
	margin: var(--s-3) 0 0;
}

.order-sent__call {
	margin-top: var(--s-4);
}

.steps--plain {
	margin-top: var(--s-2);
}

.woocommerce-order-details__title,
.woocommerce-column__title {
	font-size: var(--step-2);
}

.woocommerce-customer-details address {
	font-style: normal;
}

.woocommerce-table--order-details td:last-child,
.woocommerce-table--order-details tfoot td {
	text-align: right;
}

/* Account */
.woocommerce-MyAccount-navigation ul {
	display: flex;
	gap: var(--s-2);
	margin: 0 calc(var(--gutter) * -1) var(--s-5);
	padding: 2px var(--gutter);
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.woocommerce-MyAccount-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--s-4);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	color: var(--text);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.woocommerce-MyAccount-navigation .is-active a {
	border-color: var(--brand-text);
	background: var(--brand-soft);
	color: var(--brand-text);
}

.account-status {
	padding: var(--s-4);
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--border);
}

/* On phones the orders table becomes stacked rows. */
.woocommerce-orders-table thead {
	display: none;
}

.woocommerce-orders-table tr {
	display: block;
	padding-block: var(--s-3);
	border-bottom: 1px solid var(--border);
}

.woocommerce-orders-table td,
.woocommerce-orders-table th {
	display: flex;
	justify-content: space-between;
	gap: var(--s-3);
	padding: var(--s-1) 0;
	border: 0;
	text-align: right;
}

.woocommerce-orders-table td::before,
.woocommerce-orders-table th[data-title]::before {
	content: attr(data-title);
	color: var(--muted);
	font-weight: 400;
}

.woocommerce-orders-table__cell-order-actions {
	flex-wrap: wrap;
	justify-content: flex-start !important;
	padding-top: var(--s-2) !important;
}

.woocommerce-orders-table__cell-order-actions::before {
	display: none;
}

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-EditAccountForm,
.woocommerce-address-fields {
	max-width: 30rem;
}

.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	min-height: 44px;
	margin-bottom: var(--s-2);
	font-weight: 400;
}

.woocommerce-form-login .button,
.woocommerce-form-register .button {
	width: 100%;
}

/* Logging in is this screen’s one primary action; registering stays outlined. */
.woocommerce-form-login .button {
	border-color: transparent;
	background: var(--brand);
	color: var(--on-brand);
}

.woocommerce-form-login .button:hover {
	background: var(--brand-hover);
}

.lost_password a {
	display: inline-block;
	padding-block: var(--s-2);
}

.u-columns {
	display: grid;
	gap: var(--s-6);
}

.password-input {
	position: relative;
	display: block;
}

.show-password-input {
	position: absolute;
	top: 0;
	right: 0;
	width: var(--tap);
	height: var(--tap);
	border: 0;
	background: none;
	color: var(--muted);
	cursor: pointer;
}

.show-password-input::after {
	content: "Show";
	font-size: 0.75rem;
	font-weight: 600;
}

.show-password-input.display-password::after {
	content: "Hide";
}

@media (min-width: 600px) {
	.list-items {
		margin-inline: 0;
	}

	.list-item {
		padding-inline: 0;
	}

	.u-columns {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.order-list {
		max-width: 52rem;
	}

	.list-cta {
		justify-content: flex-end;
	}

	.list-cta .btn {
		flex: 0 0 auto;
		padding-inline: var(--s-6);
	}

	.send-order {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		gap: var(--s-7);
		align-items: start;
	}

	.send-order__summary {
		position: sticky;
		top: 8rem;
		margin-top: 0;
		padding: var(--s-5);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		background: var(--surface);
	}

	.woocommerce-account .site-main article > .woocommerce {
		display: grid;
		grid-template-columns: 15rem minmax(0, 1fr);
		gap: var(--s-6);
	}

	.woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.woocommerce-MyAccount-navigation a {
		display: flex;
	}

	.woocommerce-orders-table thead {
		display: table-header-group;
	}

	.woocommerce-orders-table tr {
		display: table-row;
		padding: 0;
	}

	.woocommerce-orders-table td,
	.woocommerce-orders-table th {
		display: table-cell;
		padding: var(--s-3);
		border-bottom: 1px solid var(--border);
		text-align: left;
	}

	.woocommerce-orders-table td::before,
	.woocommerce-orders-table th[data-title]::before {
		display: none;
	}
}

/* The field's own label already marks it required. */
.fulfilment-field .woocommerce-input-wrapper .required {
	display: none;
}

.button.alt.disabled:hover {
	background: var(--surface-2);
}

/* Delivery or pickup: two tiles side by side, the note below. The radio sits inside its tile. */
.fulfilment-field .woocommerce-input-wrapper {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-flow: row;
	gap: var(--s-2);
}

.fulfilment-field .woocommerce-input-wrapper input[type="radio"] {
	z-index: 1;
	grid-row: 1;
	align-self: center;
	justify-self: start;
	width: 20px;
	height: 20px;
	margin: 0 0 0 var(--s-3);
	accent-color: var(--brand);
	pointer-events: none;
}

.fulfilment-field .woocommerce-input-wrapper input[type="radio"]:nth-of-type(1),
.fulfilment-field .woocommerce-input-wrapper label:nth-of-type(1) {
	grid-column: 1;
}

.fulfilment-field .woocommerce-input-wrapper input[type="radio"]:nth-of-type(2),
.fulfilment-field .woocommerce-input-wrapper label:nth-of-type(2) {
	grid-column: 2;
}

.fulfilment-field .woocommerce-input-wrapper label {
	grid-row: 1;
	min-height: 52px;
	padding: var(--s-2) var(--s-2) var(--s-2) calc(var(--s-3) + 20px + var(--s-2));
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	background: var(--bg);
	line-height: 1.25;
	overflow-wrap: anywhere;
	transition: border-color 150ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fulfilment-field .woocommerce-input-wrapper input:checked + label {
	border-color: var(--brand);
	background: var(--brand-soft);
}

.fulfilment-field .woocommerce-input-wrapper input:focus-visible + label {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.fulfilment-field .woocommerce-input-wrapper .description {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--muted);
	font-size: 0.875rem;
}

/* Send Order on phones: the sticky bar steps aside while the real button is visible. Desktop has only the real one. */
.send-bar {
	transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.send-bar.is-away {
	transform: translateY(110%);
}

@media (min-width: 1024px) {
	.send-bar {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.send-bar {
		transition: none;
	}
}

/* Why log in: three short lines under the login form. */
.auth__why {
	display: grid;
	gap: var(--s-2);
	margin: var(--s-5) 0 0;
	padding: var(--s-4);
	border-radius: var(--radius);
	background: var(--surface);
	list-style: none;
	font-size: 0.9375rem;
}

.auth__why li {
	display: flex;
	gap: var(--s-2);
	align-items: flex-start;
}

.auth__why .icon {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: var(--brand-text);
}

.auth__help-title {
	margin-top: var(--s-6);
}

.auth__help-note {
	margin: 0 0 var(--s-1);
	color: var(--muted);
	font-size: 0.875rem;
}