/* =============================================================================
   Imperfect Leadership - Elevated WooCommerce styling
   Brand tokens taken from the Divi colour palette + type stack already in use.
   ========================================================================== */

/* Warm and human: the neutrals carry a little warmth rather than being cool
   greys, the green does the work the orange used to, and the shapes are softer. */
:root {
	--il-ink:         #121619;
	--il-orange:      #ff5714;
	--il-green:       #09814a;
	--il-green-deep:  #2d4739;
	--il-paper:       #f7f3ee;
	--il-paper-warm:  #fbf9f6;
	--il-grey:        #5d5852;
	--il-line:        rgba(61, 48, 38, 0.16);
	--il-line-soft:   rgba(61, 48, 38, 0.09);
	--il-shadow:      0 1px 2px rgba(61, 48, 38, 0.04), 0 10px 28px rgba(61, 48, 38, 0.07);
	--il-shadow-lift: 0 2px 4px rgba(61, 48, 38, 0.06), 0 20px 44px rgba(61, 48, 38, 0.14);
	--il-radius:      18px;
	--il-radius-sm:   12px;
}

/* -----------------------------------------------------------------------------
   1. Layout corrections
   The previous custom CSS set `.woocommerce-page #content-area` to
   `display:flex; align-items:center`, which made the content shrink-wrap to its
   widest child instead of filling the 1440px band the rest of the site uses.
   -------------------------------------------------------------------------- */

/* The Theme Options custom CSS caps `.woocommerce-page #main-content` at 1440px
   with !important. On a wide monitor that leaves every section background - and
   the footer band - stopping short, with white either side. Sections have to be
   full-bleed; the ROWS inside them carry the reading width. */
/* `body.` prefix is deliberate: et-divi-customizer-global.css loads AFTER this
   file, so an equal-specificity !important rule there would win on order. */
body.woocommerce-page #main-content,
body.woocommerce-page #content-area {
	display: block !important;
	align-items: normal !important;
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.woocommerce-page #main-content .et_pb_section,
.woocommerce-page #main-content .et_builder_inner_content {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.woocommerce-page #main-content .et_pb_row {
	max-width: 1440px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* The archive keeps WooCommerce's native loop, which renders inside .container -
   that stays capped so the product grid holds the site's reading width. */
.woocommerce-page #main-content .container,
.woocommerce-page #left-area {
	width: 100% !important;
	max-width: 1440px !important;
	float: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Keep a gutter so content never runs flush to the viewport edge. */
.woocommerce-page #main-content .container {
	box-sizing: border-box;
	padding-left: 40px;
	padding-right: 40px;
}

@media (max-width: 767px) {
	.woocommerce-page #main-content .container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* The Theme Builder footer is a sibling of #main-content - keep it edge to edge
   on WooCommerce screens no matter what the content wrappers are doing. */
.woocommerce .et-l--footer,
.woocommerce-page .et-l--footer,
.woocommerce .et-l--footer > .et_pb_section,
.woocommerce-page .et-l--footer > .et_pb_section {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* -----------------------------------------------------------------------------
   2. Page furniture - breadcrumb, title, result count, sorting
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-breadcrumb {
	font-family: "oswald", sans-serif;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--il-grey);
	margin-bottom: 18px;
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--il-grey);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.woocommerce .woocommerce-breadcrumb a:hover {
	color: var(--il-orange);
	border-bottom-color: var(--il-orange);
}

.woocommerce .page-title,
.woocommerce-products-header__title {
	font-family: "archivo-black", "Arial", sans-serif;
	font-size: 44px;
	line-height: 1.1;
	color: var(--il-ink);
	margin-bottom: 6px;
}

.woocommerce .woocommerce-result-count {
	font-size: 14px;
	color: var(--il-grey);
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 0;
}

.woocommerce .woocommerce-ordering {
	margin-bottom: 0;
}

.woocommerce .woocommerce-ordering select {
	font-family: "oswald", sans-serif;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--il-ink);
	background: #fff;
	border: 1px solid var(--il-line);
	border-radius: 999px;
	padding: 10px 18px;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce .woocommerce-ordering select:focus {
	outline: none;
	border-color: var(--il-orange);
	box-shadow: 0 0 0 3px rgba(255, 87, 20, 0.16);
}

.post-type-archive-product .woocommerce-ordering,
.post-type-archive-product .woocommerce-result-count,
.tax-product_cat .woocommerce-ordering,
.tax-product_cat .woocommerce-result-count {
	border-bottom: 1px solid var(--il-line-soft);
	padding-bottom: 18px;
	margin-bottom: 36px;
}

/* -----------------------------------------------------------------------------
   3. Product grid
   Grid layout is scoped to the archives and the related / upsell / cross-sell
   rails so Divi's own Shop module keeps its configured column count.
   -------------------------------------------------------------------------- */

.post-type-archive-product ul.products,
.tax-product_cat ul.products,
.single-product .related ul.products,
.single-product .up-sells ul.products,
.woocommerce-cart .cross-sells ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 34px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

/* WooCommerce clearfixes ul.products with ::before / ::after set to
   `content:" "; display:table`. In a grid container those pseudo-elements
   become GRID ITEMS - ::before takes the first cell, so the products start in
   column 2 and the last one wraps onto the next row. Every grid'd product list
   below needs this reset, not just the archives. */
.post-type-archive-product ul.products::before,
.post-type-archive-product ul.products::after,
.tax-product_cat ul.products::before,
.tax-product_cat ul.products::after,
.single-product .related ul.products::before,
.single-product .related ul.products::after,
.single-product .up-sells ul.products::before,
.single-product .up-sells ul.products::after,
.single-product .il-product-related ul.products::before,
.single-product .il-product-related ul.products::after,
.single-product .il-product-upsells ul.products::before,
.single-product .il-product-upsells ul.products::after,
.woocommerce-cart .cross-sells ul.products::before,
.woocommerce-cart .cross-sells ul.products::after,
.woocommerce-cart .il-cart-crosssells ul.products::before,
.woocommerce-cart .il-cart-crosssells ul.products::after {
	content: none !important;
	display: none !important;
}

.post-type-archive-product ul.products li.product,
.tax-product_cat ul.products li.product,
.single-product .related ul.products li.product,
.single-product .up-sells ul.products li.product,
.woocommerce-cart .cross-sells ul.products li.product {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

/* Card treatment - applies anywhere a product tile is rendered. */
.woocommerce ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--il-line-soft);
	border-radius: var(--il-radius);
	overflow: hidden;
	box-shadow: var(--il-shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--il-shadow-lift);
	border-color: var(--il-line);
}

.woocommerce ul.products li.product img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center;
	margin: 0 !important;
	border-radius: 0;
	box-shadow: none;
	background: var(--il-paper);
	transition: transform 0.5s ease;
}

.woocommerce ul.products li.product:hover img {
	transform: scale(1.03);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
	font-family: "oswald", sans-serif !important;
	font-size: 17px !important;
	font-weight: 500;
	line-height: 1.35;
	color: var(--il-ink);
	padding: 20px 22px 0;
	margin: 0;
}

.woocommerce ul.products li.product .price {
	font-family: "roboto", "Arial", sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--il-ink);
	padding: 8px 22px 0;
	margin: 0 0 auto;
}

.woocommerce ul.products li.product .price del {
	color: var(--il-grey);
	font-weight: 400;
	opacity: 0.7;
	margin-right: 6px;
}

.woocommerce ul.products li.product .price ins {
	color: var(--il-orange);
	text-decoration: none;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	display: block;
	margin: 18px 22px 22px;
	text-align: center;
}

/* Divi ships its own radius for product tiles - match the rest of the panels. */
body .woocommerce ul.products li.product {
	border-radius: var(--il-radius);
}

/* Sale flash as a small brand chip rather than Divi's default circle. */
.woocommerce span.onsale {
	position: absolute;
	top: 14px;
	left: 14px;
	right: auto;
	min-height: 0;
	min-width: 0;
	width: auto;
	height: auto;
	line-height: 1;
	border-radius: 999px;
	padding: 7px 13px;
	background: var(--il-orange);
	color: #fff;
	font-family: "oswald", sans-serif;
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	margin: 0;
	box-shadow: 0 2px 8px rgba(255, 87, 20, 0.35);
}

/* -----------------------------------------------------------------------------
   4. Buttons - one shared treatment across shop, cart and checkout
   -------------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit {
	font-family: "oswald", sans-serif !important;
	font-size: 14px !important;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff !important;
	background: var(--il-green) !important;
	border: 1px solid var(--il-green) !important;
	border-radius: 999px !important;
	padding: 14px 28px !important;
	line-height: 1.2;
	transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease,
		box-shadow 0.22s ease;
}

/* Divi likes to append pseudo-element arrows to buttons - keep ours clean. */
.woocommerce a.button::after,
.woocommerce button.button::after,
.woocommerce input.button::after,
.woocommerce #respond input#submit::after {
	content: none !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover {
	background: var(--il-green-deep) !important;
	border-color: var(--il-green-deep) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(9, 129, 74, 0.26);
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 87, 20, 0.35);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
	background: var(--il-grey) !important;
	border-color: var(--il-grey) !important;
	opacity: 0.55;
	transform: none;
	box-shadow: none;
}

/* Secondary / ghost buttons (update cart, continue shopping, back links). */
.woocommerce .cart .button[name="update_cart"],
.woocommerce .return-to-shop .button,
.woocommerce .wc-backward {
	background: transparent !important;
	color: var(--il-ink) !important;
	border-color: var(--il-line) !important;
}

.woocommerce .cart .button[name="update_cart"]:hover,
.woocommerce .return-to-shop .button:hover,
.woocommerce .wc-backward:hover {
	background: var(--il-ink) !important;
	border-color: var(--il-ink) !important;
	color: #fff !important;
	box-shadow: none;
}

/* -----------------------------------------------------------------------------
   5. Form fields - shared by cart, checkout and account
   -------------------------------------------------------------------------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce table.cart td.actions .coupon .input-text {
	font-family: "roboto", "Arial", sans-serif;
	font-size: 15px;
	color: var(--il-ink);
	background: #fff;
	border: 1px solid var(--il-line);
	border-radius: var(--il-radius-sm);
	padding: 13px 16px;
	height: auto;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce table.cart td.actions .coupon .input-text:focus {
	outline: none;
	border-color: var(--il-orange);
	box-shadow: 0 0 0 3px rgba(255, 87, 20, 0.14);
}

.woocommerce form .form-row label {
	font-family: "oswald", sans-serif;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--il-grey);
	margin-bottom: 7px;
	display: block;
}

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

.woocommerce .quantity .qty {
	font-family: "roboto", "Arial", sans-serif;
	font-size: 15px;
	color: var(--il-ink);
	border: 1px solid var(--il-line);
	border-radius: var(--il-radius-sm);
	padding: 11px 8px;
	width: 76px;
	text-align: center;
	background: #fff;
}

.woocommerce .quantity .qty:focus {
	outline: none;
	border-color: var(--il-orange);
	box-shadow: 0 0 0 3px rgba(255, 87, 20, 0.14);
}

/* -----------------------------------------------------------------------------
   6. Notices
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	font-family: "roboto", "Arial", sans-serif;
	font-size: 15px;
	background: var(--il-paper);
	color: var(--il-ink);
	border: 1px solid var(--il-line-soft);
	border-top: 3px solid var(--il-ink);
	border-radius: var(--il-radius-sm);
	padding: 18px 22px;
	box-shadow: var(--il-shadow);
	list-style: none;
}

.woocommerce .woocommerce-message {
	border-top-color: var(--il-green);
}

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

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

/* -----------------------------------------------------------------------------
   7. Single product
   -------------------------------------------------------------------------- */

/* NOTE: the single product page uses Divi's classic float layout (gallery and
   summary floated side by side inside a .clearfix wrapper) and FlexSlider sizes
   the gallery with inline JS widths. Do NOT convert this to grid/flex or force
   widths on the gallery - it collapses the slider. Presentation only below. */

/* NOTE: do NOT put a max-width on `div.product`. Divi gives the Theme Builder
   footer's inner wrapper a `product` class on single-product pages, so any
   `div.product` width rule also squeezes the footer band. The rows carry the
   reading width instead. */

.single-product div.product .woocommerce-product-gallery__wrapper img {
	border-radius: var(--il-radius);
	background: var(--il-paper);
}

.single-product div.product .flex-control-thumbs {
	margin-top: 14px;
	padding: 0;
}

.single-product div.product .flex-control-thumbs img {
	border-radius: var(--il-radius-sm);
	border: 1px solid var(--il-line-soft);
	opacity: 0.65;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.single-product div.product .flex-control-thumbs img:hover,
.single-product div.product .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--il-ink);
}

.single-product div.product .product_title {
	font-family: "archivo-black", "Arial", sans-serif !important;
	font-size: 36px !important;
	line-height: 1.15;
	color: var(--il-ink);
	margin-bottom: 14px;
}

.single-product div.product .summary > p.price,
.single-product div.product .summary > span.price {
	font-family: "roboto", "Arial", sans-serif;
	font-size: 26px !important;
	font-weight: 700;
	color: var(--il-ink);
	margin-bottom: 22px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--il-line-soft);
}

.single-product div.product .woocommerce-product-details__short-description {
	font-size: 16px;
	line-height: 1.75;
	color: var(--il-grey);
	margin-bottom: 26px;
}

.single-product div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 26px;
}

.single-product div.product form.cart .button {
	flex: 1 1 220px;
}

/* Variable products need the selects stacked above the add-to-cart row. */
.single-product div.product form.cart.variations_form {
	display: block;
}

.single-product div.product table.variations {
	width: 100%;
	margin-bottom: 18px;
	border: 0;
}

.single-product div.product table.variations th,
.single-product div.product table.variations td {
	border: 0;
	padding: 0 0 14px;
	display: block;
	width: 100%;
}

.single-product div.product table.variations th label {
	font-family: "oswald", sans-serif;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--il-grey);
	margin-bottom: 7px;
}

.single-product div.product table.variations select {
	width: 100%;
	font-family: "roboto", "Arial", sans-serif;
	font-size: 15px;
	border: 1px solid var(--il-line);
	border-radius: var(--il-radius-sm);
	padding: 13px 16px;
	background: #fff;
}

.single-product div.product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.single-product div.product .woocommerce-variation-add-to-cart .button {
	flex: 1 1 220px;
}

.single-product div.product .product_meta {
	font-size: 13px;
	color: var(--il-grey);
	padding-top: 20px;
	border-top: 1px solid var(--il-line-soft);
}

.single-product div.product .product_meta a {
	color: var(--il-grey);
}

.single-product div.product .product_meta a:hover {
	color: var(--il-orange);
}

.single-product .woocommerce-tabs {
	clear: both;
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid var(--il-line-soft);
}

.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 !important;
	margin: 0 0 28px !important;
	border: 0 !important;
}

.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs::after {
	display: none !important;
}

.single-product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: 1px solid var(--il-line) !important;
	border-radius: 999px !important;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

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

.single-product .woocommerce-tabs ul.tabs li a {
	font-family: "oswald", sans-serif;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--il-grey) !important;
	padding: 11px 22px !important;
	display: block;
}

.single-product .woocommerce-tabs ul.tabs li.active {
	background: var(--il-ink) !important;
	border-color: var(--il-ink) !important;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
	color: #fff !important;
}

.single-product .woocommerce-tabs .panel {
	font-size: 16px;
	line-height: 1.75;
	color: var(--il-grey);
}

.single-product .related > h2,
.single-product .up-sells > h2,
.woocommerce-cart .cross-sells > h2 {
	font-family: "archivo-black", "Arial", sans-serif !important;
	font-size: 26px !important;
	color: var(--il-ink);
	margin: 64px 0 28px;
}

/* -----------------------------------------------------------------------------
   8. Cart
   -------------------------------------------------------------------------- */

/* NOTE: the cart is assembled from Divi Woo modules (et_pb_wc_cart_products,
   et_pb_wc_cart_totals, et_pb_wc_cross_sells) placed in builder rows and
   columns. The column layout belongs to the Theme Builder - style only. */

.woocommerce-cart table.shop_table {
	border: 1px solid var(--il-line-soft);
	border-radius: var(--il-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--il-shadow);
	margin-bottom: 24px;
}

.woocommerce-cart table.shop_table thead th {
	font-family: "oswald", sans-serif;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--il-grey);
	background: var(--il-paper);
	border: 0;
	border-bottom: 1px solid var(--il-line-soft);
	padding: 16px 18px;
}

.woocommerce-cart table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--il-line-soft);
	padding: 20px 18px;
	vertical-align: middle;
}

.woocommerce-cart table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}

.woocommerce-cart table.shop_table td.product-thumbnail img {
	width: 78px;
	height: 78px;
	object-fit: cover;
	border-radius: var(--il-radius-sm);
	background: var(--il-paper);
}

.woocommerce-cart table.shop_table td.product-name a {
	font-family: "oswald", sans-serif;
	font-size: 16px;
	color: var(--il-ink);
	text-decoration: none;
}

.woocommerce-cart table.shop_table td.product-name a:hover {
	color: var(--il-orange);
}

.woocommerce-cart table.shop_table td.product-price,
.woocommerce-cart table.shop_table td.product-subtotal {
	font-weight: 700;
	color: var(--il-ink);
}

.woocommerce-cart table.shop_table td.actions {
	background: var(--il-paper);
	border-top: 1px solid var(--il-line-soft);
	padding: 18px;
}

.woocommerce-cart table.shop_table td.actions .coupon {
	display: flex;
	gap: 10px;
	align-items: center;
}

.woocommerce-cart table.shop_table td.actions .coupon .input-text {
	width: auto;
	min-width: 200px;
	flex: 0 1 260px;
}

/* Remove-item control as a quiet round button. */
.woocommerce-cart table.shop_table a.remove {
	width: 28px;
	height: 28px;
	line-height: 26px;
	font-size: 18px;
	color: var(--il-grey) !important;
	background: transparent;
	border: 1px solid var(--il-line);
	border-radius: 50%;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.woocommerce-cart table.shop_table a.remove:hover {
	background: var(--il-orange);
	border-color: var(--il-orange);
	color: #fff !important;
}

/* Totals panel */
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart_totals {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.woocommerce-cart .cart_totals {
	background: #fff;
	border: 1px solid var(--il-line-soft);
	border-radius: var(--il-radius);
	box-shadow: var(--il-shadow);
	padding: 28px;
}

.woocommerce-cart .cart_totals h2 {
	font-family: "archivo-black", "Arial", sans-serif !important;
	font-size: 20px !important;
	color: var(--il-ink);
	margin-bottom: 18px;
}

.woocommerce-cart .cart_totals table.shop_table {
	border: 0;
	box-shadow: none;
	margin: 0 0 20px;
	background: transparent;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--il-line-soft);
	padding: 14px 0;
	font-size: 15px;
}

.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
	border-bottom: 0;
	padding-top: 18px;
	font-size: 19px;
	font-weight: 700;
	color: var(--il-ink);
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 15px !important;
	padding: 17px 28px !important;
	background: var(--il-orange) !important;
	border-color: var(--il-orange) !important;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
	background: var(--il-ink) !important;
	border-color: var(--il-ink) !important;
}

/* -----------------------------------------------------------------------------
   9. Checkout
   -------------------------------------------------------------------------- */

/* NOTE: checkout is split across Divi modules (et_pb_wc_checkout_billing,
   _additional_info, _order_details, _payment_info) arranged in builder rows.
   Leave the arrangement to the Theme Builder - style only. */

.woocommerce-checkout form.checkout #order_review_heading {
	font-family: "archivo-black", "Arial", sans-serif !important;
	font-size: 20px !important;
	color: var(--il-ink);
	margin: 0 0 16px;
}

.woocommerce-checkout form.checkout #order_review {
	background: #fff;
	border: 1px solid var(--il-line-soft);
	border-radius: var(--il-radius);
	box-shadow: var(--il-shadow);
	padding: 26px;
}

.woocommerce-checkout h3 {
	font-family: "archivo-black", "Arial", sans-serif !important;
	font-size: 20px !important;
	color: var(--il-ink);
	margin-bottom: 18px;
}

.woocommerce-checkout #order_review table.shop_table {
	border: 0;
	background: transparent;
	margin-bottom: 18px;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--il-line-soft);
	padding: 13px 0;
	font-size: 15px;
	background: transparent;
}

.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: 19px;
	font-weight: 700;
	color: var(--il-ink);
	padding-top: 16px;
}

.woocommerce-checkout #payment {
	background: var(--il-paper) !important;
	border: 1px solid var(--il-line-soft);
	border-radius: var(--il-radius-sm);
	padding: 6px;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--il-line-soft);
	padding: 14px 16px;
}

.woocommerce-checkout #payment ul.payment_methods li {
	font-size: 15px;
}

.woocommerce-checkout #payment div.payment_box {
	background: #fff !important;
	border: 1px solid var(--il-line-soft);
	border-radius: var(--il-radius-sm);
	font-size: 14px;
	color: var(--il-grey);
}

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

.woocommerce-checkout #payment .place-order {
	padding: 16px;
}

.woocommerce-checkout #payment #place_order {
	display: block;
	width: 100%;
	float: none;
	font-size: 15px !important;
	padding: 17px 28px !important;
	background: var(--il-orange) !important;
	border-color: var(--il-orange) !important;
}

.woocommerce-checkout #payment #place_order:hover {
	background: var(--il-ink) !important;
	border-color: var(--il-ink) !important;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	font-size: 14px;
	color: var(--il-grey);
	padding: 0 16px;
}

/* -----------------------------------------------------------------------------
   10. Account pages - light touch, same vocabulary
   -------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--il-line-soft);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	font-family: "oswald", sans-serif;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--il-grey);
	display: block;
	padding: 13px 2px;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--il-ink);
}

/* -----------------------------------------------------------------------------
   11. Specificity layer
   Divi's customizer stylesheet (et-divi-customizer-global.css) sets button and
   notice colours with !important on class-only selectors, which outranks the
   rules above. #page-container adds an ID so these win without another
   !important arms race.
   -------------------------------------------------------------------------- */

#page-container .woocommerce .woocommerce-message,
#page-container .woocommerce .woocommerce-info,
#page-container .woocommerce .woocommerce-error {
	background: var(--il-paper) !important;
	color: var(--il-ink) !important;
	border: 1px solid var(--il-line-soft) !important;
	border-top: 3px solid var(--il-ink) !important;
	border-radius: var(--il-radius-sm) !important;
	padding: 18px 22px !important;
}

#page-container .woocommerce .woocommerce-message {
	border-top-color: var(--il-green) !important;
}

#page-container .woocommerce .woocommerce-error {
	border-top-color: var(--il-orange) !important;
}

#page-container .woocommerce .woocommerce-message a,
#page-container .woocommerce .woocommerce-info a,
#page-container .woocommerce .woocommerce-error a {
	color: var(--il-ink) !important;
}

/* Primary buttons */
#page-container .woocommerce a.button,
#page-container .woocommerce button.button,
#page-container .woocommerce input.button,
#page-container .woocommerce a.button.alt,
#page-container .woocommerce button.button.alt,
#page-container .woocommerce input.button.alt {
	background: var(--il-green) !important;
	border-color: var(--il-green) !important;
	color: #fff !important;
	border-radius: 999px !important;
}

#page-container .woocommerce a.button:hover,
#page-container .woocommerce button.button:hover,
#page-container .woocommerce input.button:hover,
#page-container .woocommerce a.button.alt:hover,
#page-container .woocommerce button.button.alt:hover,
#page-container .woocommerce input.button.alt:hover {
	background: var(--il-green-deep) !important;
	border-color: var(--il-green-deep) !important;
	color: #fff !important;
}

/* Ghost buttons */
#page-container .woocommerce .cart .button[name="update_cart"],
#page-container .woocommerce .return-to-shop .button,
#page-container .woocommerce .wc-backward {
	background: transparent !important;
	color: var(--il-ink) !important;
	border-color: var(--il-line) !important;
}

#page-container .woocommerce .cart .button[name="update_cart"]:hover,
#page-container .woocommerce .return-to-shop .button:hover,
#page-container .woocommerce .wc-backward:hover {
	background: var(--il-ink) !important;
	border-color: var(--il-ink) !important;
	color: #fff !important;
}

/* The two conversion CTAs stay orange in both states. */
#page-container .woocommerce-cart .wc-proceed-to-checkout .checkout-button,
#page-container .woocommerce-checkout #payment #place_order {
	background: var(--il-orange) !important;
	border-color: var(--il-orange) !important;
	color: #fff !important;
}

#page-container .woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
#page-container .woocommerce-checkout #payment #place_order:hover {
	background: var(--il-ink) !important;
	border-color: var(--il-ink) !important;
}

/* -----------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.woocommerce-cart table.shop_table td,
	.woocommerce-cart .cart_totals {
		padding: 16px;
	}
}

@media (max-width: 980px) {
	.post-type-archive-product ul.products,
	.tax-product_cat ul.products,
	.single-product .related ul.products,
	.single-product .up-sells ul.products,
	.woocommerce-cart .cross-sells ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.woocommerce .page-title,
	.woocommerce-products-header__title {
		font-size: 34px;
	}
}

@media (max-width: 600px) {
	.post-type-archive-product ul.products,
	.tax-product_cat ul.products,
	.single-product .related ul.products,
	.single-product .up-sells ul.products,
	.woocommerce-cart .cross-sells ul.products {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-cart table.shop_table td.actions .coupon {
		flex-wrap: wrap;
	}

	.woocommerce-cart table.shop_table td.actions .coupon .input-text,
	.woocommerce-cart table.shop_table td.actions .coupon .button {
		width: 100%;
		flex: 1 1 100%;
	}

	.single-product div.product .product_title {
		font-size: 28px !important;
	}
}

/* -----------------------------------------------------------------------------
   13. Single product - Theme Builder template ("IL All Products")
   Structure comes from the builder layout; this is the warm skin over it.
   -------------------------------------------------------------------------- */

.single-product .il-product-hero .et_pb_column {
	margin-bottom: 0 !important;
}

/* Give the summary column room to breathe next to the gallery. */
.single-product .il-product-hero .et_pb_column:last-child {
	padding-left: 18px;
}

.single-product .il-product-gallery .woocommerce-product-gallery__wrapper img,
.single-product .il-product-gallery img {
	border-radius: var(--il-radius);
	background: var(--il-paper-warm);
}

.single-product .et_pb_wc_title h1,
.single-product .product_title {
	font-family: "archivo-black", "Arial", sans-serif !important;
	font-size: 34px !important;
	line-height: 1.15 !important;
	color: var(--il-ink) !important;
	margin-bottom: 10px !important;
}

.single-product .et_pb_wc_price .price {
	font-family: "roboto", "Arial", sans-serif !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	color: var(--il-ink) !important;
}

.single-product .et_pb_wc_description {
	font-size: 16px;
	line-height: 1.8;
	color: var(--il-grey);
	padding-top: 18px;
	margin-top: 18px;
	border-top: 1px solid var(--il-line-soft);
}

.single-product .et_pb_wc_add_to_cart {
	margin-top: 26px;
}

.single-product .et_pb_wc_add_to_cart form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.single-product .et_pb_wc_add_to_cart .single_add_to_cart_button {
	flex: 1 1 220px;
	padding: 16px 30px !important;
	font-size: 15px !important;
}

.single-product .et_pb_wc_meta {
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--il-line-soft);
	font-size: 13px;
	color: var(--il-grey);
}

/* Tabs on the white band */
.single-product .il-product-tabs .woocommerce-tabs {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Related / upsell rails on the warm band */
.single-product .il-product-related h2,
.single-product .il-product-upsells h2 {
	font-family: "archivo-black", "Arial", sans-serif !important;
	font-size: 26px !important;
	color: var(--il-ink);
	margin: 0 0 28px !important;
}

.single-product .il-product-related ul.products,
.single-product .il-product-upsells ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
}

.single-product .il-product-related ul.products li.product,
.single-product .il-product-upsells ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

@media (max-width: 980px) {
	.single-product .il-product-hero .et_pb_column:last-child {
		padding-left: 0;
	}

	.single-product .il-product-related ul.products,
	.single-product .il-product-upsells ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.single-product .et_pb_wc_title h1,
	.single-product .product_title {
		font-size: 27px !important;
	}
}

@media (max-width: 600px) {
	.single-product .il-product-related ul.products,
	.single-product .il-product-upsells ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -----------------------------------------------------------------------------
   14. Shop archive - warm band
   The archive keeps WooCommerce's native loop (so sorting, pagination and the
   result count keep working); the warmth is applied around it.
   -------------------------------------------------------------------------- */

.post-type-archive-product #main-content,
.tax-product_cat #main-content {
	background: var(--il-paper);
}

.post-type-archive-product #main-content .container,
.tax-product_cat #main-content .container {
	padding-top: 46px;
	padding-bottom: 90px;
}

.post-type-archive-product .woocommerce-products-header,
.tax-product_cat .woocommerce-products-header {
	margin-bottom: 6px;
}

.post-type-archive-product .term-description,
.tax-product_cat .term-description {
	font-size: 17px;
	line-height: 1.75;
	color: var(--il-grey);
	max-width: 62ch;
	margin-bottom: 8px;
}

/* Cards sit on the warm ground, so lift them with white rather than shadow. */
.post-type-archive-product ul.products li.product,
.tax-product_cat ul.products li.product {
	background: #fff;
}

/* -----------------------------------------------------------------------------
   15. Cart + checkout - Divi module layout ("il-cart-*", "il-checkout-*")
   -------------------------------------------------------------------------- */

.woocommerce-cart .il-cart-summary,
.woocommerce-checkout .il-checkout-order,
.woocommerce-checkout .il-checkout-payment {
	background: #fff;
	border: 1px solid var(--il-line-soft);
	border-radius: var(--il-radius);
	box-shadow: var(--il-shadow);
	padding: 28px;
}

.woocommerce-checkout .il-checkout-order {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: 0;
	padding-bottom: 8px;
}

.woocommerce-checkout .il-checkout-payment {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	padding-top: 8px;
	margin-top: 0 !important;
}

/* The summary column tracks the page while the customer works down the form. */
@media (min-width: 981px) {
	.woocommerce-cart .il-cart-layout > .et_pb_column:last-child,
	.woocommerce-checkout .il-checkout-layout > .et_pb_column:last-child {
		position: sticky;
		top: 40px;
	}
}

.woocommerce-cart .il-cart-summary .cart_totals,
.woocommerce-checkout .il-checkout-order #order_review {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0 !important;
}

.woocommerce-cart .il-cart-items table.shop_table {
	margin-bottom: 0;
}

.woocommerce-checkout .il-checkout-billing,
.woocommerce-checkout .il-checkout-shipping,
.woocommerce-checkout .il-checkout-additional {
	background: #fff;
	border: 1px solid var(--il-line-soft);
	border-radius: var(--il-radius);
	padding: 28px 30px;
	margin-bottom: 22px !important;
}

.woocommerce-checkout .il-checkout-billing h3,
.woocommerce-checkout .il-checkout-shipping h3,
.woocommerce-checkout .il-checkout-additional h3,
.woocommerce-checkout .il-checkout-order h3,
.woocommerce-cart .il-cart-summary h2 {
	font-family: "archivo-black", "Arial", sans-serif !important;
	font-size: 19px !important;
	color: var(--il-ink) !important;
	margin: 0 0 20px !important;
}

/* Two form fields per row reads calmer than Woo's default full-width stack. */
@media (min-width: 768px) {
	.woocommerce-checkout .il-checkout-billing .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .il-checkout-shipping .woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 18px;
	}

	.woocommerce-checkout .il-checkout-billing .form-row,
	.woocommerce-checkout .il-checkout-shipping .form-row {
		width: auto !important;
		float: none !important;
		margin-left: 0;
		margin-right: 0;
	}

	.woocommerce-checkout .il-checkout-billing .form-row-wide,
	.woocommerce-checkout .il-checkout-shipping .form-row-wide,
	.woocommerce-checkout .il-checkout-billing #billing_address_1_field,
	.woocommerce-checkout .il-checkout-billing #billing_address_2_field,
	.woocommerce-checkout .il-checkout-billing #billing_company_field {
		grid-column: 1 / -1;
	}
}

.woocommerce-cart .il-cart-crosssells h2 {
	font-family: "archivo-black", "Arial", sans-serif !important;
	font-size: 26px !important;
	color: var(--il-ink);
	margin: 0 0 28px !important;
}

.woocommerce-cart .il-cart-crosssells ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
}

.woocommerce-cart .il-cart-crosssells ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

@media (max-width: 980px) {
	.woocommerce-cart .il-cart-crosssells ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.woocommerce-cart .il-cart-summary,
	.woocommerce-checkout .il-checkout-order,
	.woocommerce-checkout .il-checkout-payment {
		padding: 22px;
	}
}

@media (max-width: 600px) {
	.woocommerce-cart .il-cart-crosssells ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -----------------------------------------------------------------------------
   16. Product hero balance
   Several products (the books especially) have tall or square images. Left at
   full column width the gallery ran ~850px while the summary beside it ended at
   ~330px, leaving a large empty band. Cap the gallery and centre the two
   columns against each other.
   -------------------------------------------------------------------------- */

@media (min-width: 981px) {
	.single-product .il-product-hero {
		display: flex;
		align-items: center;
	}

	/* Divi sizes its columns with percentage widths and a margin gutter - keep
	   those authoritative rather than letting flex resize them. */
	.single-product .il-product-hero > .et_pb_column {
		float: none !important;
		flex: 0 0 auto;
	}

	.single-product .il-product-gallery {
		max-width: 620px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}