/* -------------------------------------------------------------------------
   WooCommerce: product grid, single product, cart, checkout and account.
   The product card styles are shared with the homepage grid.
   ---------------------------------------------------------------------- */

/* Woo's primary colour, so block-based UI matches the theme too. */
:root {
	--wc-primary: var(--fb-green);
	--wc-primary-text: var(--fb-white);
	--wc-green: var(--fb-green);
}

/* `.alt` buttons (add to cart, proceed to checkout) are painted by Woo with
   a more specific selector than the base button rule, so restate them. */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce div.product form.cart button.single_add_to_cart_button {
	background: var(--fb-green);
	border-color: var(--fb-green);
	color: var(--fb-white);
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
	background: var(--fb-black);
	border-color: var(--fb-black);
	color: var(--fb-white);
}

.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	background: var(--fb-grey-400);
	border-color: var(--fb-grey-400);
	color: var(--fb-grey-700);
	opacity: 1;
}

/* --- Archive header ---------------------------------------------------- */
.fb-archive-header {
	padding: clamp(14px, 1.7vw, 24px) 0 clamp(20px, 2.6vw, 34px);
	text-align: center;
}

.fb-archive-header .fb-section-head { margin-bottom: 0; }

/* Cart, checkout and account: the flanking rules sit twice as far out. */
.fb-archive-header .fb-section-head--marked { gap: 40px; }

@media (max-width: 480px) {
	.fb-archive-header .fb-section-head--marked { gap: 14px; }
}

/* Product archives run the title left, on the same edge as the filter column. */
.fb-archive-header--left { text-align: left; }

.fb-archive-header--left .fb-section-head { justify-content: flex-start; }

.fb-archive-header--left .fb-archive-header__desc { margin-inline: 0; }

.fb-archive-header__title {
	margin: 0;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
}

.fb-archive-header__desc {
	max-width: 900px;
	margin: 14px auto 0;
	color: var(--fb-grey-800);
	font-size: .875rem;
	line-height: 1.8;
}

.fb-archive-header__desc p:last-child { margin-bottom: 0; }

/* --- Archive layout ---------------------------------------------------- */
.fb-shop-archive { padding-bottom: clamp(40px, 6vw, 80px); }

.fb-shop-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 30px;
	align-items: start;
}

.fb-shop-main { min-width: 0; }

/* --- Filter widgets ---------------------------------------------------- */
.fb-filter { margin-bottom: 18px; }

.fb-filter__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 11px 16px;
	border: 0;
	border-radius: var(--fb-radius);
	background: var(--fb-black);
	color: var(--fb-white);
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

/* The +/− affordance, drawn rather than shipped as an icon. */
.fb-filter__sign {
	position: relative;
	flex: none;
	width: 12px;
	height: 12px;
}

.fb-filter__sign::before,
.fb-filter__sign::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 12px;
	height: 1.5px;
	background: currentColor;
	transform: translateY(-50%);
	transition: opacity var(--fb-transition), transform var(--fb-transition);
}

.fb-filter__sign::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }

.fb-filter__title[aria-expanded="false"] .fb-filter__sign::after { opacity: 1; }

.fb-filter__body { padding: 14px 4px 4px; }

.fb-filter__title[aria-expanded="false"] + .fb-filter__body { display: none; }

.fb-filter__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .875rem;
}

.fb-filter__list a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--fb-grey-800);
}

.fb-filter__list a:hover { color: var(--fb-green); }

.fb-filter__list--check li { margin-bottom: 9px; }

.fb-filter__box {
	flex: none;
	width: 15px;
	height: 15px;
	border: 1px solid var(--fb-grey-500);
	border-radius: 3px;
	background: var(--fb-white);
	transition: background var(--fb-transition), border-color var(--fb-transition);
}

.fb-filter__list--check li.is-active .fb-filter__box {
	border-color: var(--fb-black);
	background: var(--fb-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9.6 16.6 5 12l1.4-1.4 3.2 3.2 8-8L19 7.2z'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.fb-filter__list--check li.is-active .fb-filter__label { font-weight: 600; color: var(--fb-black); }

.fb-filter__count { color: var(--fb-grey-500); font-size: .8125rem; }

.fb-filter__list--pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.fb-filter__list--pills a {
	padding: 5px 12px;
	border: 1px solid var(--fb-grey-300);
	border-radius: var(--fb-radius);
	background: var(--fb-grey-100);
	font-size: .8125rem;
}

.fb-filter__list--pills li.is-active a,
.fb-filter__list--pills a:hover {
	border-color: var(--fb-black);
	background: var(--fb-black);
	color: var(--fb-white);
}

.fb-filter__list--plain li { margin-bottom: 8px; }

.fb-filter__list--plain li.is-active a { color: var(--fb-black); font-weight: 600; }

.fb-filter__list--rating li { margin-bottom: 7px; }

.fb-filter__list--rating li.is-active a { font-weight: 600; }

/* Star meter used by the rating filter. */
.fb-stars {
	position: relative;
	display: inline-block;
	width: 5.4em;
	height: 1em;
	overflow: hidden;
	font-size: .8125rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23d9d9d9'%3E%3Cpath d='m12 17.3-6.2 3.7 1.7-7L2 9.2l7.1-.6L12 2l2.9 6.6 7.1.6-5.5 4.8 1.7 7z'/%3E%3C/svg%3E") repeat-x left center / 1.08em;
}

.fb-stars__fill {
	position: absolute;
	inset: 0 auto 0 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23fe5b03'%3E%3Cpath d='m12 17.3-6.2 3.7 1.7-7L2 9.2l7.1-.6L12 2l2.9 6.6 7.1.6-5.5 4.8 1.7 7z'/%3E%3C/svg%3E") repeat-x left center / 1.08em;
}

/* --- Active filter chips ----------------------------------------------- */
.fb-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
	font-size: .8125rem;
}

.fb-active-filters__label { color: var(--fb-text-muted); }

.fb-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border: 1px solid var(--fb-grey-300);
	border-radius: var(--fb-radius-pill);
	background: var(--fb-grey-100);
	font-weight: 500;
}

.fb-chip:hover {
	border-color: var(--fb-black);
	background: var(--fb-black);
	color: var(--fb-white);
}

.fb-active-filters__clear {
	margin-left: 4px;
	color: var(--fb-text-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- Mobile filter drawer ---------------------------------------------- */
.fb-filter-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	padding: 11px 18px;
	border: 1px solid var(--fb-black);
	border-radius: var(--fb-radius);
	background: var(--fb-white);
	font-family: inherit;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
}

.fb-shop-sidebar__head { display: none; }

/* --- Shop notices ------------------------------------------------------ */
.fb-shop .woocommerce-notices-wrapper:empty,
.fb-shop-main .woocommerce-notices-wrapper:empty { display: none; }

/* --- Product grid ------------------------------------------------------ */
/* Row spacing lives on the card, not in the grid: the cards subgrid onto the
   row's tracks, so a row gap here would open up inside every card. */
.woocommerce ul.products,
ul.products.fb-product-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 20px;
	clear: both;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Woo's own clearfix pseudo-elements would become grid items. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products.fb-product-grid::before,
ul.products.fb-product-grid::after { display: none; }

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

.woocommerce ul.products li.product,
ul.products.fb-product-grid li.product {
	position: relative;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	width: auto !important;
	margin: 0 0 40px !important;
	padding: 0;
	float: none !important;
	border: 1px solid var(--fb-grey-300);
	border-radius: var(--fb-radius-lg);
	background: var(--fb-white);
	overflow: hidden;
	text-align: left;
	transition: box-shadow var(--fb-transition), border-color var(--fb-transition);
}

.woocommerce ul.products li.product:hover {
	border-color: var(--fb-grey-400);
	box-shadow: var(--fb-shadow-lg);
}

/* Media */
.woocommerce ul.products li.product .fb-card__media {
	position: relative;
	display: block;
	background: var(--fb-grey-100);
	overflow: hidden;
}

.woocommerce ul.products li.product .fb-card__media > a { display: block; }

.woocommerce ul.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0;
	object-fit: contain;
	background: var(--fb-grey-100);
	transition: opacity var(--fb-transition);
}

.woocommerce ul.products li.product .fb-card__hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--fb-transition);
	pointer-events: none;
}

.woocommerce ul.products li.product .fb-card__hover img { height: 100%; }

.woocommerce ul.products li.product:hover .fb-card__hover { opacity: 1; }

/* Sale badge */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	z-index: 2;
	min-width: 44px;
	min-height: 24px;
	margin: 0;
	padding: 0 10px;
	border-radius: var(--fb-radius-pill);
	background: var(--fb-orange);
	color: var(--fb-white);
	font-size: .75rem;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
}

/* Body */
.woocommerce ul.products li.product .fb-card__body {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	padding: 16px 18px 18px;
}

.woocommerce ul.products li.product .fb-card__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 6px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 0;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.45;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a { color: var(--fb-black); }

.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover { color: var(--fb-green-dark); }

.woocommerce ul.products li.product .price {
	margin: 0;
	color: var(--fb-black);
	font-size: .9375rem;
	font-weight: 700;
}

.woocommerce ul.products li.product .price del {
	margin-right: .4em;
	color: var(--fb-grey-500);
	font-weight: 500;
}

.woocommerce ul.products li.product .price ins {
	background: none;
	text-decoration: none;
}

.woocommerce ul.products li.product .star-rating {
	width: 5.4em;
	height: 1em;
	margin: 0;
	color: var(--fb-orange);
	font-size: .75rem;
}

/* Add-to-cart reveals on hover on pointer devices. */
.woocommerce ul.products li.product .button {
	margin-top: auto;
	align-self: flex-start;
}

/* "Bestellen" darkens rather than going black on hover. */
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus {
	background: var(--fb-green-dark);
	border-color: var(--fb-green-dark);
	color: var(--fb-white);
}

.woocommerce ul.products li.product .added_to_cart {
	margin-top: 8px;
	font-size: .75rem;
	text-decoration: underline;
}

/* --- Single product ---------------------------------------------------- */
.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 3.5vw, 50px);
	align-items: start;
	padding-top: clamp(20px, 2.5vw, 34px);
}

/* Gallery: thumbnail rail pinned to the left of the main image. */
.woocommerce div.product .woocommerce-product-gallery {
	position: relative;
	width: 100% !important;
	float: none !important;
	margin: 0;
	padding-left: 92px;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper {
	border: 1px solid var(--fb-grey-300);
	border-radius: var(--fb-radius-lg);
	background: var(--fb-grey-100);
	overflow: hidden;
}

.woocommerce div.product .woocommerce-product-gallery__image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--fb-grey-100);
}

.woocommerce div.product div.images .flex-control-thumbs,
.woocommerce div.product .flex-control-thumbs {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 76px;
	max-height: 100%;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	scrollbar-width: thin;
}

.woocommerce div.product div.images .flex-control-thumbs li,
.woocommerce div.product .flex-control-thumbs li {
	width: 100%;
	margin: 0;
	float: none;
	list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li,
.woocommerce div.product .flex-control-thumbs li { cursor: pointer; }

.woocommerce div.product div.images .flex-control-thumbs img,
.woocommerce div.product .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--fb-grey-300);
	border-radius: var(--fb-radius);
	background: var(--fb-grey-100);
	object-fit: contain;
	opacity: .75;
	cursor: pointer;
	transition: opacity var(--fb-transition), border-color var(--fb-transition);
}

.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs img.flex-active {
	border-color: var(--fb-black);
	opacity: 1;
}

/* Lightbox trigger: black ring, search glyph, no emoji. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger,
.woocommerce div.product .woocommerce-product-gallery__trigger {
	top: 14px;
	right: 14px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 0;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M11 3a8 8 0 1 0 4.9 14.32l4.39 4.39a1 1 0 0 0 1.42-1.42l-4.39-4.39A8 8 0 0 0 11 3zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/%3E%3C/svg%3E") center / 22px no-repeat;
	font-size: 0;
	color: transparent;
	text-indent: -9999px;
	overflow: hidden;
	transition: opacity var(--fb-transition);
}

/* Woo draws its own magnifier out of two pseudo-elements; ours is the icon. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before,
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after,
.woocommerce div.product .woocommerce-product-gallery__trigger::before,
.woocommerce div.product .woocommerce-product-gallery__trigger::after { display: none; }

.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover,
.woocommerce div.product .woocommerce-product-gallery__trigger:hover {
	opacity: .6;
}

/* The zoom library still runs so the trigger exists; its overlay stays hidden. */
.woocommerce div.product .woocommerce-product-gallery__image .zoomImg { display: none !important; }

/* Summary */
.woocommerce div.product .summary {
	width: 100% !important;
	float: none !important;
	margin: 0;
}

.woocommerce div.product .product_title {
	margin-bottom: .45em;
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	font-weight: 700;
	line-height: 1.35;
	text-transform: uppercase;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	display: block;
	margin-bottom: .4em;
	color: var(--fb-black);
	font-size: 1.375rem;
	font-weight: 700;
}

.woocommerce div.product p.price del { margin-right: .4em; color: var(--fb-grey-500); font-size: 1rem; }

.woocommerce div.product p.price ins { background: none; text-decoration: none; }

.woocommerce div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: .8em;
	font-size: .8125rem;
}

.woocommerce div.product .stock {
	margin-bottom: 1.2em;
	font-size: .8125rem;
	font-weight: 600;
}

.woocommerce div.product .stock.in-stock { color: var(--fb-black); }

.woocommerce div.product .stock.out-of-stock { color: #d63638; }

.woocommerce div.product .woocommerce-product-details__short-description {
	margin-bottom: 22px;
	color: var(--fb-grey-800);
	font-size: .9375rem;
}

/* Add to cart row */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin-bottom: 18px;
}

/* Quantity stepper — product form, cart and anywhere else Woo prints one. */
.woocommerce .quantity {
	display: inline-flex;
	align-items: stretch;
	flex: 0 0 auto;
	border: 1px solid var(--fb-grey-300);
	border-radius: var(--fb-radius);
	overflow: hidden;
}

.fb-qty__btn {
	width: 34px;
	border: 0;
	background: var(--fb-white);
	color: var(--fb-black);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--fb-transition);
}

.fb-qty__btn:hover { background: var(--fb-grey-200); }

.woocommerce div.product form.cart .quantity { margin: 0; }

.woocommerce div.product form.cart .quantity input.qty {
	width: 46px;
	height: 100%;
	padding: .7em 0;
	border: 0;
	border-left: 1px solid var(--fb-grey-300);
	border-right: 1px solid var(--fb-grey-300);
	border-radius: 0;
	text-align: center;
	-moz-appearance: textfield;
}

.woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.woocommerce div.product form.cart button.single_add_to_cart_button {
	flex: 1 1 220px;
	min-height: 46px;
}

.woocommerce div.product form.cart .variations {
	width: 100%;
	margin-bottom: 8px;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	padding: 6px 0;
	border: 0;
	background: none;
}

.woocommerce div.product form.cart .reset_variations { font-size: .8125rem; }

/* Delivery promises */
.fb-product-usps {
	display: grid;
	gap: 8px;
	width: 100%;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.fb-product-usps li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: .8125rem;
	color: var(--fb-grey-800);
}

.fb-product-usps .fb-icon { flex: none; color: var(--fb-black); }

.woocommerce div.product .product_meta {
	padding-top: 16px;
	border-top: 1px solid var(--fb-border);
	color: var(--fb-text-muted);
	font-size: .8125rem;
}

.woocommerce div.product .product_meta > span { display: block; margin-bottom: 4px; }

/* Tabs and related span the full width. */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product .woocommerce-product-gallery + .summary ~ * {
	grid-column: 1 / -1;
}

.woocommerce div.product .woocommerce-tabs { margin-top: clamp(24px, 3vw, 44px); }

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0 0 0 4px;
	border-bottom: 1px solid var(--fb-grey-300);
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 1px solid var(--fb-grey-300);
	border-bottom: 0;
	border-radius: var(--fb-radius) var(--fb-radius) 0 0;
	background: var(--fb-grey-100);
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 13px 22px;
	color: var(--fb-text-muted);
	font-size: .9375rem;
	font-weight: 600;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	position: relative;
	bottom: -1px;
	background: var(--fb-white);
}

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

.woocommerce div.product .woocommerce-tabs .panel {
	margin: 0;
	padding: clamp(22px, 3vw, 38px) 0 0;
}

.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; }

.woocommerce div.product .woocommerce-tabs .panel h2 {
	margin-top: 1.4em;
	font-size: 1.375rem;
}

/* The reviews tab opens on a heading; without this it would start lower than
   the description and attributes tabs do. */
.woocommerce div.product .woocommerce-tabs .panel > *:first-child,
.woocommerce div.product .woocommerce-tabs .panel #reviews > *:first-child,
.woocommerce div.product .woocommerce-tabs .panel .woocommerce-Reviews-title {
	margin-top: 0;
}

/* Every tab closes on the same amount of space. */
.woocommerce div.product .woocommerce-tabs .panel { padding-bottom: clamp(10px, 1.4vw, 18px); }

.woocommerce div.product .woocommerce-tabs .panel h3 { margin-top: 1.3em; font-size: 1.125rem; }

/* Headings inside the description carry the same divider the section heads do,
   so a long product text reads with the rest of the site. Woo owns this markup,
   hence the pseudo-element. The tab's own "Beschrijving" h2 is hidden above. */
.woocommerce div.product .woocommerce-tabs #tab-description h2::after,
.woocommerce div.product .woocommerce-tabs #tab-description h3::after {
	content: "";
	display: block;
	width: 190px;
	max-width: 100%;
	height: 1px;
	margin-top: .45em;
	background: linear-gradient(90deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
	animation: fb-divider-glow-dark 2.6s ease-in-out infinite;
}

.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li {
	color: var(--fb-grey-800);
	font-size: .9375rem;
}

/* Woo zeroes the value cell's padding and pushes it onto the inner <p>, which
   leaves the value flush against the label column. */
.woocommerce div.product .woocommerce-tabs .shop_attributes th,
.woocommerce div.product .woocommerce-tabs .shop_attributes td {
	padding: .75em 1em;
}

.woocommerce div.product .woocommerce-tabs .shop_attributes th {
	width: 220px;
	font-weight: 600;
}

.woocommerce div.product .woocommerce-tabs .shop_attributes td { font-style: normal; }

.woocommerce div.product .woocommerce-tabs .shop_attributes td p {
	margin: 0;
	padding: 0;
}

/* Related products */
.woocommerce div.product .related,
.woocommerce div.product .upsells { margin-top: clamp(34px, 4vw, 60px); }

/* Same treatment as the homepage product headings: centred, flanked by two
   mirrored hairlines. Drawn with pseudo-elements since Woo owns this markup. */
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-bottom: 28px;
	font-size: clamp(1.35rem, 2.4vw, 1.875rem);
	text-align: center;
}

.woocommerce div.product .related > h2::before,
.woocommerce div.product .related > h2::after,
.woocommerce div.product .upsells > h2::before,
.woocommerce div.product .upsells > h2::after {
	content: "";
	width: 130px;
	max-width: 22vw;
	height: 1px;
	background: linear-gradient(90deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
	animation: fb-divider-glow-dark 2.6s ease-in-out infinite;
}

.woocommerce div.product .related > h2::after,
.woocommerce div.product .upsells > h2::after {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75));
}

/* Reviews */

/* Stars carry the same amber as the sidebar rating filter. Woo leaves them on
   the inherited link colour, which reads black here and flips green on hover
   like every other link. */
.woocommerce div.product .star-rating,
.woocommerce div.product p.stars a,
.woocommerce div.product p.stars a:hover,
.woocommerce div.product p.stars a:focus,
.woocommerce div.product p.stars.selected a.active,
.woocommerce div.product p.stars.selected a:not(.active) { color: var(--fb-orange); }

.woocommerce #reviews .woocommerce-Reviews-title::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	margin: -.1em 10px 0 0;
	border-radius: 50%;
	background: var(--fb-black);
	box-shadow: 0 0 0 4px rgba(0, 0, 0, .12);
}

/* ...and the divider beneath, the way every other section head carries it. */
.woocommerce #reviews .woocommerce-Reviews-title::after {
	content: "";
	display: block;
	width: 190px;
	max-width: 100%;
	height: 1px;
	margin-top: .45em;
	background: linear-gradient(90deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
	animation: fb-divider-glow-dark 2.6s ease-in-out infinite;
}

.woocommerce #reviews #comments ol.commentlist {
	margin: 0 0 30px;
	padding: 0;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
	padding: 20px;
	border: 1px solid var(--fb-grey-300);
	border-radius: var(--fb-radius-lg);
}

/* The form fields are the thing that wants a narrow measure, not the whole
   wrapper — capping the wrapper made the "Wees de eerste om ..." heading wrap
   onto a second line as soon as a product had a long name. */
.woocommerce #review_form_wrapper .comment-form { max-width: 640px; }

.woocommerce #reviews #respond .comment-reply-title { display: block; }

.woocommerce #reviews #respond input#submit:hover,
.woocommerce #reviews #respond input#submit:focus {
	background: var(--fb-green-dark);
	border-color: var(--fb-green-dark);
	color: var(--fb-white);
}

/* Cart, checkout and account share the page template; their titles centre,
   and the editor's underlined-link rule does not belong on Woo tables. */
.fb-entry--shop .fb-entry__title {
	margin-bottom: .8em;
	text-align: center;
}

.fb-entry--shop .entry-content a { text-decoration: none; }

.fb-entry--shop .entry-content a:hover { color: var(--fb-green-dark); }

/* --- Cart -------------------------------------------------------------- */
.woocommerce table.shop_table {
	margin-bottom: 30px;
	border: 0;
	border-collapse: collapse;
	font-size: .9375rem;
}

.woocommerce table.shop_table th {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid var(--fb-grey-300);
	background: none;
	color: var(--fb-black);
	font-size: .8125rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce table.shop_table td {
	padding: 18px 14px;
	border: 0;
	border-bottom: 1px solid var(--fb-grey-300);
}

.woocommerce table.shop_table img {
	width: 64px;
	border-radius: var(--fb-radius);
	background: var(--fb-grey-100);
}

.woocommerce table.cart td.product-remove { width: 40px; padding-right: 0; }

.woocommerce table.cart .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--fb-grey-500) !important;
	font-size: 1.25rem;
	line-height: 1;
}

.woocommerce table.cart .product-remove a.remove:hover {
	background: none;
	color: #d63638 !important;
}

.woocommerce table.cart td.product-thumbnail { width: 84px; }

.woocommerce table.cart td.product-name a { color: var(--fb-black); }

.woocommerce table.cart td.product-name a:hover { color: var(--fb-green-dark); }

.woocommerce table.cart .product-price,
.woocommerce table.cart .product-subtotal { white-space: nowrap; }

/* Coupon / update row */
.woocommerce table.cart td.actions {
	padding: 20px 14px;
	border-bottom: 1px solid var(--fb-grey-300);
}

.woocommerce table.cart td.actions .coupon {
	display: flex;
	gap: 10px;
	float: none;
}

.woocommerce table.cart td.actions .coupon .input-text {
	width: 190px;
	padding: .6em .9em;
	font-size: .875rem;
}

.woocommerce table.cart td.actions .coupon .button,
.woocommerce table.cart td.actions .button[name="update_cart"] {
	background: transparent;
	border-color: transparent;
	color: var(--fb-black);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce table.cart td.actions .coupon .button:hover,
.woocommerce table.cart td.actions .button[name="update_cart"]:hover {
	background: transparent;
	border-color: transparent;
	color: var(--fb-green-dark);
}

.woocommerce table.cart td.actions .button[name="update_cart"] {
	float: right;
	padding-right: 0;
}

.woocommerce table.cart td.actions .button[name="update_cart"]:disabled,
.woocommerce table.cart td.actions .button[name="update_cart"][disabled] {
	background: transparent;
	border-color: transparent;
	color: var(--fb-grey-500);
	opacity: 1;
}

/* Woo stacks the cart rows below 768px with the column label floated left of
   the value, which holds each row at label + product name and pushed a 360px
   screen into horizontal scroll. A flex row lets the name wrap instead. */
@media (max-width: 768px) {
	.woocommerce table.shop_table_responsive tr.cart_item td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
		padding: 12px 0;
	}

	.woocommerce table.shop_table_responsive tr.cart_item td::before {
		float: none;
		flex: none;
	}

	.woocommerce table.shop_table_responsive tr.cart_item td.product-name a { text-align: right; }

	/* The thumbnail cell has no column label, so Woo prints a bare ":". */
	.woocommerce table.shop_table_responsive tr.cart_item td.product-thumbnail::before { display: none; }

	.woocommerce table.shop_table_responsive tr.cart_item td.product-thumbnail { justify-content: flex-start; }
}

@media (max-width: 480px) {
	/* The coupon field and its button do not fit side by side at this width. */
	.woocommerce table.cart td.actions { padding: 18px 0; }

	/* Stack the coupon field, its button and "update cart" rather than
	   wrapping them into each other. */
	.woocommerce table.cart td.actions .coupon {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.woocommerce table.cart td.actions .coupon .input-text { width: 100%; }

	.woocommerce table.cart td.actions .coupon .button { text-align: left; padding-left: 0; }

	.woocommerce table.cart td.actions .button[name="update_cart"] {
		float: none;
		display: block;
		margin-top: 10px;
		padding-left: 0;
		text-align: left;
	}
}

/* Totals */
.woocommerce-cart .cart-collaterals,
.woocommerce .cart-collaterals .cart_totals {
	width: 100%;
	float: none;
	max-width: none;
	display: block;
}

.woocommerce .cart_totals h2 {
	margin-bottom: 14px;
	font-size: 1.375rem;
}

.woocommerce .cart_totals table.shop_table { margin-bottom: 22px; }

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
	padding: 14px;
	border-bottom: 1px solid var(--fb-grey-300);
	font-size: .9375rem;
}

.woocommerce .cart_totals table.shop_table th { width: 220px; font-weight: 600; }

.woocommerce .wc-proceed-to-checkout { padding: 0; }

.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	margin: 0;
	font-size: .9375rem;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:focus {
	background: var(--fb-green-dark);
	border-color: var(--fb-green-dark);
	color: var(--fb-white);
}

/* Empty cart: a plain centred line, not a notice box. */
.woocommerce .cart-empty,
.woocommerce p.cart-empty {
	display: block;
	margin: 0 0 28px;
	padding: clamp(30px, 5vw, 62px) 0 0;
	border: 0;
	background: none;
	color: var(--fb-grey-700);
	font-size: clamp(1.25rem, 2.6vw, 1.625rem);
	font-weight: 600;
	text-align: center;
}

.woocommerce .cart-empty::before { display: none; }

.woocommerce .return-to-shop {
	margin-bottom: clamp(30px, 5vw, 62px);
	text-align: center;
}

.woocommerce .return-to-shop .button:hover,
.woocommerce .return-to-shop .button:focus {
	background: var(--fb-green-dark);
	border-color: var(--fb-green-dark);
	color: var(--fb-white);
}

/* --- Checkout ---------------------------------------------------------- */
/* Billing on the left, order review on the right, as on the live checkout. */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0 clamp(24px, 4vw, 56px);
	align-items: start;
}

.woocommerce-checkout form.checkout > * { grid-column: 1 / -1; }

.woocommerce-checkout form.checkout > #customer_details { grid-column: 1; }

/* Heading + table travel together — see woocommerce/checkout/form-checkout.php. */
.woocommerce-checkout form.checkout > .fb-checkout__review {
	grid-column: 2;
	grid-row: 1;
}

.woocommerce-checkout .fb-checkout__review > #order_review_heading { margin-top: 0; }

/* Shipping is off, so the billing/shipping pair stacks instead of splitting. */
.woocommerce-checkout .col2-set {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	width: 100%;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	width: 100%;
	float: none;
}

.woocommerce-checkout h3 {
	margin-bottom: .7em;
	font-size: 1.5rem;
}

.woocommerce-checkout #order_review_heading { font-size: 1.5rem; }

/* Field grid: first/last name share a row, everything else spans. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 14px;
}

.woocommerce form .form-row {
	width: auto;
	margin-bottom: 14px;
	padding: 0;
	float: none;
}

.woocommerce form .form-row-wide,
.woocommerce form .form-row-full,
.woocommerce form .notes { grid-column: 1 / -1; }

.woocommerce form .form-row label {
	margin-bottom: .4em;
	font-size: .8125rem;
	font-weight: 600;
}

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

.woocommerce form .select2-container .select2-selection--single,
.woocommerce form .form-row select {
	height: auto;
	padding: .8em 1em;
	border: 1px solid var(--fb-border);
	border-radius: var(--fb-radius);
}

/* Order review */
.woocommerce-checkout #order_review table.shop_table {
	margin-bottom: 24px;
	border: 1px solid var(--fb-grey-300);
	border-radius: var(--fb-radius);
	overflow: hidden;
}

.woocommerce-checkout #order_review table.shop_table th {
	padding: 12px 14px;
	background: var(--fb-grey-200);
	font-size: .8125rem;
}

.woocommerce-checkout #order_review table.shop_table td {
	padding: 12px 14px;
	font-size: .875rem;
}

.woocommerce-checkout #order_review table.shop_table tfoot th,
.woocommerce-checkout #order_review table.shop_table tfoot td {
	background: none;
	font-weight: 600;
}

.woocommerce-checkout #order_review table.shop_table tfoot tr:last-child th,
.woocommerce-checkout #order_review table.shop_table tfoot tr:last-child td {
	border-bottom: 0;
	font-size: 1rem;
}

.woocommerce-checkout .product-quantity { color: var(--fb-text-muted); }

/* Payment */
.woocommerce-checkout #payment {
	border-radius: 0;
	background: none;
}

.woocommerce-checkout #payment ul.payment_methods {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin-bottom: 10px;
	list-style: none;
}

/* The global block-level label rule would drop these under their radio. */
.woocommerce-checkout #payment ul.payment_methods li label {
	display: inline;
	margin: 0 0 0 8px;
	font-size: .9375rem;
	font-weight: 600;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
	width: auto;
	margin: 0;
	vertical-align: middle;
}

.woocommerce-checkout #payment div.payment_box {
	margin: 8px 0 0;
	padding: 14px 16px;
	border-radius: var(--fb-radius);
	background: var(--fb-grey-100);
	font-size: .875rem;
}

.woocommerce-checkout #payment div.payment_box::before { display: none; }

.woocommerce-checkout .woocommerce-privacy-policy-text {
	margin-bottom: 18px;
	color: var(--fb-text-muted);
	font-size: .8125rem;
}

.woocommerce-checkout #payment div.form-row.place-order { padding: 0; margin: 0; }

.woocommerce-checkout #place_order {
	display: flex;
	width: 100%;
	font-size: .9375rem;
}

.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #place_order:focus {
	background: var(--fb-green-dark);
	border-color: var(--fb-green-dark);
	color: var(--fb-white);
}

/* Coupon toggle above the form */
.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: 22px; }

.woocommerce-checkout form.checkout_coupon {
	margin-bottom: 24px;
	padding: 20px;
	border: 1px solid var(--fb-grey-300);
	border-radius: var(--fb-radius);
}

/* --- Account ----------------------------------------------------------- */
/* Layout ported from the sunseason.co.id account pages, in this palette. */

/* Logged out: login / register / reset as centred cards. */
.woocommerce-account .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	max-width: 900px;
	margin: 0 auto;
}

.woocommerce-account .u-columns.col2-set::before,
.woocommerce-account .u-columns.col2-set::after { content: none; display: none; }

.woocommerce-account .u-columns.col2-set .col-1,
.woocommerce-account .u-columns.col2-set .col-2 {
	width: auto;
	float: none;
}

.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword {
	max-width: 460px;
	margin: 0 auto;
	padding: 34px 32px;
	border: 1px solid var(--fb-grey-300);
	border-radius: var(--fb-radius-lg);
	background: var(--fb-white);
	box-shadow: 0 20px 46px rgba(0, 0, 0, .06);
}

.woocommerce-account .u-columns.col2-set form {
	max-width: none;
	margin: 0;
}

/* Woo prints the "Login" heading as a sibling of the form when registration
   is off, so it needs centring too — not only the two-column variant. */
.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2,
.woocommerce-account:not(.logged-in) .woocommerce > h2 {
	margin: 0 0 18px;
	font-size: 1.375rem;
	text-align: center;
}

.woocommerce-account .woocommerce-form-row,
.woocommerce-account .form-row {
	margin: 0 0 16px;
	padding: 0;
}

.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
}

.woocommerce-account .woocommerce-form-login__rememberme input { width: auto; }

.woocommerce-account .lost_password {
	margin: 14px 0 0;
	font-size: .875rem;
	text-align: center;
}

/* Form submits fill the card. */
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account .woocommerce-ResetPassword .button {
	display: flex;
	width: 100%;
	margin-top: 6px;
}

.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce-form-register__submit:hover,
.woocommerce-account .woocommerce-ResetPassword .button:hover {
	background: var(--fb-green-dark);
	border-color: var(--fb-green-dark);
	color: var(--fb-white);
}

/* Logged in: sidebar + content. */
.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

/* Woo's clearfix pseudos become grid items and shove the nav into column 2. */
.woocommerce-account.logged-in .woocommerce::before,
.woocommerce-account.logged-in .woocommerce::after { content: none; display: none; }

/* Out-specify Woo's float / percentage widths. */
.woocommerce-account .woocommerce-MyAccount-navigation {
	position: sticky;
	top: 120px;
	width: auto;
	float: none;
	padding: 14px;
	border: 1px solid var(--fb-grey-300);
	border-radius: var(--fb-radius-lg);
	background: var(--fb-grey-100);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0 0 2px;
	border: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 16px;
	border-radius: var(--fb-radius);
	color: var(--fb-black);
	font-size: .9375rem;
	font-weight: 600;
	transition: background var(--fb-transition), color var(--fb-transition);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--fb-white);
	color: var(--fb-green-dark);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--fb-black);
	color: var(--fb-white);
}

.woocommerce-account .woocommerce-MyAccount-content {
	width: auto;
	min-width: 0;
	float: none;
}

.woocommerce-account .woocommerce-MyAccount-content p { color: var(--fb-grey-800); }

.woocommerce-account .woocommerce-MyAccount-content mark {
	padding: 0 4px;
	background: var(--fb-grey-200);
	color: var(--fb-black);
}

/* Orders and other account tables read as cards. */
.woocommerce-account .shop_table {
	width: 100%;
	border: 1px solid var(--fb-grey-300);
	border-radius: var(--fb-radius-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce-account .shop_table thead th {
	padding: 14px 16px;
	border: 0;
	background: var(--fb-grey-200);
	color: var(--fb-grey-700);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.woocommerce-account .shop_table td {
	padding: 15px 16px;
	border: 0;
	border-top: 1px solid var(--fb-grey-300);
	font-size: .9375rem;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions { text-align: right; }

.woocommerce-account .woocommerce-orders-table__cell a.button {
	display: inline-flex;
	width: auto;
	padding: .55em 1.1em;
	font-size: .8125rem;
}

/* Addresses */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin: 18px 0 0;
}

.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after { content: none; display: none; }

.woocommerce-account .woocommerce-Addresses .u-column1,
.woocommerce-account .woocommerce-Addresses .u-column2,
.woocommerce-account .woocommerce-Address {
	width: auto;
	float: none;
}

.woocommerce-account .woocommerce-Address {
	padding: 22px 24px;
	border: 1px solid var(--fb-grey-300);
	border-radius: var(--fb-radius-lg);
	background: var(--fb-grey-100);
}

/* Woo prints these as h2; keep h3 covered in case a version switches back. */
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
	margin: 0 0 10px;
	font-size: 1.0625rem;
}

.woocommerce-account .woocommerce-Address-title h2::before,
.woocommerce-account .woocommerce-Address-title h3::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	margin: -.1em 10px 0 0;
	border-radius: 50%;
	background: var(--fb-black);
	box-shadow: 0 0 0 4px rgba(0, 0, 0, .12);
}

.woocommerce-account .woocommerce-Address address {
	color: var(--fb-grey-800);
	font-size: .9375rem;
	font-style: normal;
	line-height: 1.7;
}

/* Edit-account: the submit sits right under the password fieldset, so it
   needs breathing room, and it darkens rather than going black. */
.woocommerce-account form.edit-account > .clear + p { margin-top: 28px; }

.woocommerce-account form.edit-account .woocommerce-Button:hover,
.woocommerce-account form.edit-account .woocommerce-Button:focus,
.woocommerce-account form.edit-address .button:hover,
.woocommerce-account form.edit-address .button:focus {
	background: var(--fb-green-dark);
	border-color: var(--fb-green-dark);
	color: var(--fb-white);
}

/* A button inside a notice stays a small inline button, not a full-width bar. */
.woocommerce-account .woocommerce-info a.button,
.woocommerce-account .woocommerce-message a.button,
.woocommerce-account .woocommerce-error a.button,
.woocommerce-account .woocommerce-info .woocommerce-Button,
.woocommerce-account .woocommerce-message .woocommerce-Button {
	display: inline-flex;
	width: auto;
	margin: 0 0 0 8px;
	padding: .55em 1.1em;
	font-size: .8125rem;
}

.woocommerce-account .woocommerce-info a.button:hover,
.woocommerce-account .woocommerce-info a.button:focus,
.woocommerce-account .woocommerce-message a.button:hover,
.woocommerce-account .woocommerce-message a.button:focus,
.woocommerce-account .woocommerce-error a.button:hover,
.woocommerce-account .woocommerce-error a.button:focus,
.woocommerce-account .woocommerce-info .woocommerce-Button:hover,
.woocommerce-account .woocommerce-info .woocommerce-Button:focus,
.woocommerce-account .woocommerce-message .woocommerce-Button:hover,
.woocommerce-account .woocommerce-message .woocommerce-Button:focus {
	background: var(--fb-green-dark);
	border-color: var(--fb-green-dark);
	color: var(--fb-white);
}

/* --- Notices ----------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
	padding: 16px 20px;
	border: 1px solid var(--fb-grey-300);
	border-top: 3px solid var(--fb-green);
	border-radius: var(--fb-radius);
	background: var(--fb-grey-100);
	list-style: none;
	font-size: .875rem;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce-error { border-top-color: #d63638; }

.woocommerce-info { border-top-color: var(--fb-black); }

.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }

/* --- Pagination -------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--fb-grey-300);
	border-radius: var(--fb-radius);
	font-size: .875rem;
	font-weight: 600;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--fb-black);
	border-color: var(--fb-black);
	color: var(--fb-white);
}

/* --- Widgets in the shop sidebar --------------------------------------- */
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background: var(--fb-green); }

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
	.woocommerce ul.products,
	ul.products.fb-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* The filter column becomes a drawer. */
	.fb-shop-layout { grid-template-columns: minmax(0, 1fr); }

	.fb-filter-toggle { display: inline-flex; }

	.fb-shop-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 310;
		width: min(340px, 88vw);
		height: 100%;
		padding: 0 20px 30px;
		overflow-y: auto;
		background: var(--fb-white);
		/* Hidden from keyboard and screen readers while off-canvas. */
		visibility: hidden;
		transform: translateX(-100%);
		transition: transform .3s ease, visibility .3s ease;
	}

	.fb-shop-sidebar.is-open {
		visibility: visible;
		transform: translateX(0);
	}

	.fb-shop-sidebar__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 -20px 18px;
		padding: 18px 20px;
		border-bottom: 1px solid var(--fb-border);
	}

	.woocommerce div.product { grid-template-columns: minmax(0, 1fr); }

	/* Checkout stacks: billing first, then the review. */
	.woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr); }

	.woocommerce-checkout form.checkout > #customer_details,
	.woocommerce-checkout form.checkout > .fb-checkout__review {
		grid-column: 1;
		grid-row: auto;
	}

	.woocommerce-checkout form.checkout > .fb-checkout__review { margin-top: 26px; }

	.woocommerce-checkout .col2-set { grid-template-columns: minmax(0, 1fr); }
}

/* Below this the three tab labels no longer fit on one line, and wrapped tabs
   read as a stack of open-bottomed boxes. Stack them as full-width buttons
   instead, with the open tab outlined. */
@media (max-width: 600px) {
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		gap: 6px;
		padding-left: 0;
		border-bottom: 0;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li {
		width: 100%;
		border: 1px solid var(--fb-grey-300);
		border-radius: var(--fb-radius);
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
		bottom: 0;
		border-color: var(--fb-black);
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 12px 16px; }

	.woocommerce div.product .woocommerce-tabs .panel { padding-top: 22px; }
}

@media (max-width: 560px) {
	/* Thumbnail rail moves under the image. */
	.woocommerce div.product .woocommerce-product-gallery { padding-left: 0; }

	.woocommerce div.product div.images .flex-control-thumbs,
.woocommerce div.product .flex-control-thumbs {
		position: static;
		flex-direction: row;
		width: auto;
		margin-top: 10px;
		overflow-x: auto;
	}

	.woocommerce div.product div.images .flex-control-thumbs li,
	.woocommerce div.product .flex-control-thumbs li { flex: 0 0 72px; }

	.woocommerce div.product form.cart button.single_add_to_cart_button { flex: 1 1 100%; }
}

@media (max-width: 782px) {
	.woocommerce-account.logged-in .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 24px; }

	.woocommerce-account .woocommerce-MyAccount-navigation { position: static; }

	.woocommerce-account .u-columns.col2-set,
	.woocommerce-account .woocommerce-Addresses { grid-template-columns: minmax(0, 1fr); }

	.woocommerce-cart .cart-collaterals .cart_totals { max-width: 100%; }
}

@media (max-width: 560px) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-additional-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
	.woocommerce ul.products,
	ul.products.fb-product-grid { grid-template-columns: minmax(0, 1fr); column-gap: 20px; }

	.woocommerce ul.products li.product,
	ul.products.fb-product-grid li.product { margin-bottom: 20px !important; }
}