/* Gabion needs - the cart page banner (inc/gabion-needs/cart-banner/cart-banner.php).
   Same family as the category tabs' "live cart calculation" box: white, the
   brand green frame, slate copy. The add buttons are green (client,
   2026-09-24): the cart's orange Checkout is the one orange button. */

.wf-cart-needs-wrap:empty {
	display: none;
}

.wf-cart-needs {
	margin: 0 0 20px;
	border: 2px solid #03ba48;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 4px 12px rgba(3, 186, 72, 0.08);
	overflow: hidden;
}

/* Header bar ------------------------------------------------------------- */

.wf-cart-needs__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 12px 16px;
	border: 0;
	border-radius: 0;
	background: #f0fdf4;
	box-shadow: none;
	font-size: 14px;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
	color: #1e293b;
	cursor: pointer;
}

.wf-cart-needs__toggle:hover,
.wf-cart-needs__toggle:focus-visible {
	background: #dcfce7;
	color: #1e293b;
}

.wf-cart-needs__toggle:focus-visible {
	outline: 2px solid #03ba48;
	outline-offset: -2px;
}

.wf-cart-needs__title {
	flex: 0 1 auto;
	min-width: 0;
	font-size: 18px;
	font-weight: 700;
}

.wf-cart-needs__cta {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2px;
	text-transform: uppercase;
	white-space: nowrap;
	color: #03ba48;
}

.wf-cart-needs__toggle[aria-expanded="true"] .wf-cart-needs__cta-show {
	display: none;
}

/* The chevron: the product page's collapse button (Szilard, 2026-09-23) - the
   Font Awesome glyph in a grey disc. It points down while the drawer is
   closed (the up glyph turned round) and up while it is open. */
.wf-cart-needs__arrow {
	flex: 0 0 auto;
	margin-top: 0;
	padding: 9px 8px 7px;
	border-radius: 50%;
	background: #e0e0e0;
	font-size: 18px;
	line-height: 1;
	color: #212121;
	cursor: pointer;
}

.wf-cart-needs__arrow .fa {
	display: block;
	transform: rotate(180deg);
	transition: transform 0.3s ease;
}

/* The glyph sits low in its box; the padding swaps with the turn so it stays
   centred in the disc either way. */
.wf-cart-needs__toggle[aria-expanded="true"] .wf-cart-needs__arrow {
	padding: 7px 8px 9px;
}

.wf-cart-needs__toggle[aria-expanded="true"] .wf-cart-needs__arrow .fa {
	transform: rotate(0deg);
}

/* Drawer ----------------------------------------------------------------- */

.wf-cart-needs__drawer {
	padding: 16px;
	border-top: 1px dashed #bbf7d0;
	background: #f0fdf4;
}

.wf-cart-needs__drawer[hidden] {
	display: none;
}

.wf-cart-needs__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.wf-cart-needs__col {
	min-width: 0;
}

.wf-cart-needs__heading {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: #15803d;
}

.wf-cart-needs__heading small {
	font-size: 13px;
	font-weight: 400;
	text-transform: none;
	color: #64748b;
}

.wf-cart-needs__sub {
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 1.4;
	color: #64748b;
}

.wf-cart-needs__sub a {
	font-weight: 600;
	color: #02a441;
}

/* The backfilling panels line above the stone rows: what the panels do
   (client, 2026-10-06), a tick once they are in the basket. */
.wf-cart-needs__panels {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: #166534;
}

.wf-cart-needs__panels .wf-cart-needs__tick {
	margin-top: 1px;
}

/* The tick: the SMB green box with a white tick (client, 2026-10-06) */
.wf-cart-needs__tick {
	flex: none;
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 6px;
	vertical-align: -2px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Crect width='17' height='17' rx='3' fill='%2303ba48'/%3E%3Cpath d='M5.23 8.5l1.838 1.962 3.845-3.924' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wf-cart-needs__panels .wf-cart-needs__tick {
	margin-right: 0;
}

@keyframes wf-cart-needs-spin {
	to {
		transform: rotate(360deg);
	}
}

/* The backfilling panels of several sizes: one row, folded (client,
   2026-10-06). "Choose sizes" opens the tick boxes; the button adds the
   ticked ones. */
.wf-cart-needs__combo {
	flex-wrap: wrap;
	align-items: flex-start;
}

/* The panels row's button lines up with the other rows' (client, 2026-10-20): the meta
   column shrinks to the row (basis 0, wrapping its long "N in your basket · N to add"
   line) instead of pushing the button under it; the row still wraps so the size list
   below can take a line of its own. */
.wf-cart-needs__combo .wf-cart-needs__meta {
	flex: 1 1 0;
}

/* The basket table's product names: the plain name of a product without a shop page (the
   hidden flipped wall baskets) weighs the same as a linked one (client, 2026-10-20, "a
   mixture of bold and not bold"). Here, not in style.css: this sheet is the cart page's own.
   The selector outweighs style.css's `.woocommerce .woocommerce-cart-form .cart td.product-name`
   (600), which set the plain name's weight: same class count, so `table` tips it. */
.woocommerce-cart .woocommerce-cart-form table.cart td.product-name {
	font-weight: 700;
}

/* The size list on a line of its own under the row, from the name's edge
   (thumbnail 48px + gap 12px) to the row's right edge. */
.wf-cart-needs__combo > .wf-cart-needs__combo-list {
	flex: 0 0 calc(100% - 60px);
	margin-left: 60px;
}

.wf-cart-needs__combo .wf-cart-needs__add,
.wf-cart-needs__combo .wf-cart-needs__done {
	margin-top: 6px;
}

.wf-cart-needs__combo-toggle {
	margin: 4px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: none;
	color: #15803d;
	cursor: pointer;
}

.wf-cart-needs__combo-toggle::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.wf-cart-needs__combo-toggle[aria-expanded="true"]::after {
	transform: translateY(1px) rotate(-135deg);
}

.wf-cart-needs__combo-toggle:hover {
	text-decoration: underline;
}

.wf-cart-needs__combo-list {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.wf-cart-needs__combo-list[hidden] {
	display: none;
}

.wf-cart-needs__combo-item {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 4px 0;
	border-top: 1px solid #f1f5f9;
	font-size: 12px;
	line-height: 1.4;
	color: #334155;
}

.wf-cart-needs__combo-item:first-child {
	border-top: 0;
}

.wf-cart-needs__combo-item label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

.wf-cart-needs__combo-check {
	flex: none;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1.5px solid #94a3b8;
	border-radius: 3px;
	background: #fff center / 100% 100% no-repeat;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.wf-cart-needs__combo-check:checked {
	border-color: #03ba48;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Crect width='17' height='17' rx='3' fill='%2303ba48'/%3E%3Cpath d='M5.23 8.5l1.838 1.962 3.845-3.924' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.wf-cart-needs__combo-check:focus {
	outline: none;
}

.wf-cart-needs__combo-check:focus-visible {
	outline: 2px solid #03ba48;
	outline-offset: 2px;
}

/* A size already in the basket: a basket icon where a size to add has its
   tick box, the size as plain text, an orange "N in your basket" pill at the
   end (2026-10-19; the green ticked badge of 2026-10-16 read like the tick
   boxes under it). */
.wf-cart-needs__combo-item.is-done {
	align-items: center;
	gap: 8px;
	color: #64748b;
}

.wf-cart-needs__combo-item.is-done > span:not([class]) {
	flex: 1 1 auto;
	min-width: 0;
}

.wf-cart-needs__combo-item.is-done .wf-cart-needs__basket {
	flex: none;
	width: 15px;
	height: 15px;
	color: #ea580c;
}

.wf-cart-needs__combo-in {
	margin-left: auto;
	padding: 1px 8px;
	border-radius: 999px;
	background: #ffedd5;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	white-space: nowrap;
	color: #c2410c;
}

/* "N in your basket" with its basket icon: under a name while more are to
   add, in the buttons' column once all are in. */
.wf-cart-needs__in {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 4px;
	padding: 2px 9px 2px 7px;
	border-radius: 999px;
	background: #ffedd5;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	white-space: nowrap;
	color: #c2410c;
}

.wf-cart-needs__in .wf-cart-needs__basket {
	flex: none;
}

.wf-cart-needs__done .wf-cart-needs__in {
	margin-top: 0;
	font-size: 12px;
}

/* The in-basket / to-add figures on their own line (Szilard, 2026-10-20). */
.wf-cart-needs__note-line {
	display: block;
}

.wf-cart-needs__note-in {
	font-weight: 700;
	color: #c2410c;
}

.wf-cart-needs__note-add {
	font-weight: 700;
	color: #15803d;
}

.wf-cart-needs__add:disabled {
	opacity: 0.5;
	cursor: default;
}

.wf-cart-needs__rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wf-cart-needs__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	background: #fff;
}

.wf-cart-needs__img {
	flex: 0 0 48px;
	line-height: 0;
}

.wf-cart-needs__img img {
	display: block;
	width: 48px;
	height: 48px;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	object-fit: cover;
}

.wf-cart-needs__meta {
	flex: 1 1 auto;
	min-width: 0;
}

.wf-cart-needs__name {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: #1e293b;
	text-decoration: none;
}

.wf-cart-needs__name:hover {
	color: #02a441;
}

.wf-cart-needs__name strong {
	color: #03ba48;
}

.wf-cart-needs__note {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.4;
	color: #64748b;
}

/* The product table's "Add to cart" shape in green, one width for every
   button of the drawer (client, 2026-09-24) - a longer label still grows. */
.wf-cart-needs__add {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-width: 190px;
	height: 36px;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid #03ba48;
	border-radius: 4px;
	background: #03ba48;
	box-shadow: none;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	text-transform: none;
	text-decoration: none;
	color: #fff;
}

.wf-cart-needs__add:hover,
.wf-cart-needs__add:focus-visible {
	border-color: #02a441;
	background: #02a441;
	color: #fff;
}

/* While WooCommerce is adding (its .loading) and until the banner has been
   re-rendered with the new basket (.is-busy, set by cart-banner.js), the
   button shows the site's add-to-cart spinner instead of its label. */
.wf-cart-needs__add::after {
	content: none !important;
}

.wf-cart-needs__add.loading,
.wf-cart-needs__add.is-busy {
	border-color: #cbd5e1;
	background: #fff url(../../../../assets/images/ajax-loader-green.gif) no-repeat center / 22px 22px;
	color: transparent !important;
	pointer-events: none;
}

.wf-cart-needs-wrap.is-refreshing .wf-cart-needs__drawer {
	opacity: 0.6;
	transition: opacity 0.15s ease;
}

/* In the buttons' column: as wide as they are, the tick centred. */
.wf-cart-needs__done {
	flex: 0 0 auto;
	min-width: 190px;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	color: #15803d;
}

.wf-cart-needs__more {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: #64748b;
}

.wf-cart-needs__more a {
	font-weight: 600;
	color: #02a441;
}

/* The savings banner is a peer of the box above; the theme's .wf-notice is
   80% and centred, right on a product page but misaligned here. */
.wf-cart-gabion-savings .wf-notice {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

@media (max-width: 768px) {
	.wf-cart-needs__toggle {
		flex-wrap: wrap;
		gap: 8px;
		padding: 10px 12px;
		font-size: 13px;
	}

	.wf-cart-needs__cta {
		display: none;
	}

	.wf-cart-needs__drawer {
		padding: 12px;
	}

	.wf-cart-needs__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.wf-cart-needs__title {
		font-size: 16px;
	}

	.wf-cart-needs__heading {
		font-size: 15px;
	}

	/* Phone row (Szilard's mockup, 2026-09-23): a bigger picture on the
	   left, name and note beside it, the add button under those. */
	.wf-cart-needs__row {
		display: grid;
		grid-template-columns: 80px minmax(0, 1fr);
		gap: 8px 12px;
		align-items: start;
		padding: 10px;
	}

	.wf-cart-needs__img {
		grid-row: 1 / span 2;
	}

	.wf-cart-needs__img img {
		width: 80px;
		height: 80px;
	}

	.wf-cart-needs__meta,
	.wf-cart-needs__add,
	.wf-cart-needs__done {
		grid-column: 2;
	}

	.wf-cart-needs__add,
	.wf-cart-needs__done {
		justify-self: start;
	}

	.wf-cart-needs__done {
		min-width: 0;
		text-align: left;
	}

	/* The size list across both columns: the phone's whole card width. */
	.wf-cart-needs__combo > .wf-cart-needs__combo-list {
		grid-column: 1 / -1;
		margin-left: 0;
	}

	/* A lighter button than the desktop one, still a 40px tap target with
	   more than 8px to the next one (Lighthouse's tap-target audit). */
	.wf-cart-needs__add {
		height: 40px;
		padding: 0 14px;
		font-size: 12px;
	}
}

/* Phone header: icon, title and the chevron disc on one line, the title
   wrapping inside its own box. */
@media (max-width: 768px) {
	.wf-cart-needs__title {
		flex: 1 1 0;
	}

	.wf-cart-needs__arrow {
		margin-left: auto;
	}
}

/* The theme's link rules (blue, underlined on phones) reach the button too;
   this is the one place the button's own colours must win. */
.wf-cart-needs a.wf-cart-needs__add,
.wf-cart-needs a.wf-cart-needs__add:hover,
.wf-cart-needs a.wf-cart-needs__add:focus {
	color: #fff !important;
	text-decoration: none !important;
}

/* The theme's cart link and button rules (blue underlined names, colours that
   change on hover) reach into the banner; the header bar and the product
   names keep their own colours in every state. */
.wf-cart-needs button.wf-cart-needs__toggle,
.wf-cart-needs button.wf-cart-needs__toggle:hover,
.wf-cart-needs button.wf-cart-needs__toggle:focus,
.wf-cart-needs button.wf-cart-needs__toggle:active {
	color: #1e293b !important;
	opacity: 1 !important;
}
.wf-cart-needs button.wf-cart-needs__toggle {
	background: #f0fdf4 !important;
}
.wf-cart-needs button.wf-cart-needs__toggle:hover,
.wf-cart-needs button.wf-cart-needs__toggle:focus-visible {
	background: #dcfce7 !important;
}
.wf-cart-needs a.wf-cart-needs__name,
.wf-cart-needs a.wf-cart-needs__name:visited {
	color: #1e293b !important;
	text-decoration: none !important;
	opacity: 1 !important;
}
.wf-cart-needs a.wf-cart-needs__name:hover,
.wf-cart-needs a.wf-cart-needs__name:focus {
	color: #02a441 !important;
	text-decoration: underline !important;
}

/* The panels row's buttons are <button>s: the theme's button rules (colours,
   capitals, height) must not reach them. */
.wf-cart-needs button.wf-cart-needs__add,
.wf-cart-needs button.wf-cart-needs__add:hover,
.wf-cart-needs button.wf-cart-needs__add:focus {
	color: #fff !important;
}
.wf-cart-needs button.wf-cart-needs__combo-toggle,
.wf-cart-needs button.wf-cart-needs__combo-toggle:hover,
.wf-cart-needs button.wf-cart-needs__combo-toggle:focus {
	height: auto;
	min-height: 0;
	background: none !important;
	box-shadow: none !important;
	color: #15803d !important;
}