/*
 * Botanéa — commerce stylesheet.
 *
 * Loaded only on WooCommerce screens (shop, product, cart, checkout, account) by
 * inc/assets.php. Keeping it out of the homepage and content pages is worth roughly
 * 30KB of unused CSS on those templates.
 *
 * The theme dequeues woocommerce-general/layout/smallscreen off commerce pages entirely
 * and restyles from scratch here, so a handful of WooCommerce's own class names are
 * targeted directly where its markup is not overridden.
 */

/* ================================================================ WooCommerce reset
 *
 * woocommerce-layout.css and woocommerce-smallscreen.css are dequeued in
 * inc/performance.php, so their float grid is gone. What remains is woocommerce.css,
 * kept for its component styling — but it also opinionates loop items at a specificity
 * of (0,3,3):
 *
 *   .woocommerce ul.products li.product a img { height:auto; margin:0 0 1em }
 *   .woocommerce ul.products li.product h3    { font-size:1em; padding:.5em 0 }
 *
 * Those beat the card's own single-class selectors, collapsing the 4:5 media box and
 * shrinking the title. Undoing it once here, at matching specificity, is cleaner than
 * scattering !important through the card rules — and it is scoped to ul.products, so the
 * homepage grid (.product-grid, never .woocommerce) is untouched either way.
 */

.woocommerce ul.products,
.woocommerce-page ul.products {
	margin: 0;
	padding: 0;
}

/*
 * woocommerce.css clearfixes the list with `ul.products::before/::after`. That is
 * harmless around a float layout, but a pseudo-element on a grid container becomes a
 * grid ITEM — so the ::before silently claimed cell one and pushed the entire catalogue
 * forward by a slot, leaving a hole above the first product. Removing the boxes rather
 * than hiding them keeps them out of the grid's item count entirely.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

/* Fill the media box rather than shrinking to intrinsic height. */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.woocommerce ul.products li.product h3,
.woocommerce-page ul.products li.product h3 {
	padding: 0;
	margin: 0;
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.25;
}

/* ---------------------------------------------------------------- Buttons
 *
 * woocommerce.css styles its own buttons at (0,3,1):
 *
 *   .woocommerce button.button.alt { background-color: #7f54b3 }
 *
 * That is WooCommerce purple on the single product's add-to-cart, "Proceed to checkout",
 * "Place order", "Update bag" and every account action — none of which this theme's
 * single-class .btn rules could reach. Matching Woo's own selector shape is what makes
 * these win; the review submit also needs the #respond input#submit form, which carries
 * an ID and therefore outranks any class selector.
 */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75rem 1.75rem;
	background: transparent;
	border: 1px solid var(--forest);
	border-radius: 999px;
	color: var(--forest);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	text-shadow: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--forest);
	color: var(--cream);
}

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

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

/* Disabled states.
 *
 * Woo escalates hard here: its own selectors run up to
 * `.woocommerce button.button.alt:disabled[disabled]:hover`, which is (0,6,1). Anything
 * shorter loses, and the button reverts to WooCommerce purple — which is not an edge
 * case, it is the *initial* state of every variable product's add-to-cart before a size
 * is chosen. These deliberately mirror Woo's selector shape so they win on source order.
 */
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce button.button.disabled:hover,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled:hover,
.woocommerce button.button:disabled[disabled],
.woocommerce button.button:disabled[disabled]:hover,
.woocommerce input.button:disabled,
.woocommerce input.button:disabled[disabled] {
	background: transparent;
	border-color: rgba(var(--forest-rgb), 0.35);
	color: rgba(var(--ink-rgb), 0.45);
	cursor: not-allowed;
}

.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled:hover,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce button.button.alt:disabled[disabled]:hover,
.woocommerce input.button.alt:disabled,
.woocommerce input.button.alt:disabled[disabled],
.woocommerce input.button.alt:disabled[disabled]:hover {
	background: var(--forest);
	border-color: var(--forest);
	color: var(--cream);
	opacity: 0.4;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------- Star rating
 *
 * Woo's star rating is an icon font, not the theme's .stars component, and it defaults to
 * a lilac grey. Recoloured to clay so single-product and review ratings match the cards.
 */
.woocommerce .star-rating::before { color: rgba(var(--ink-rgb), 0.2); }
.woocommerce .star-rating span::before { color: var(--clay); }

/* Only the summary rating is un-floated; the review list still floats its stars right,
   which is what that layout expects. */
.woocommerce .woocommerce-product-rating .star-rating { float: none; }

/* The two primary CTAs keep their larger size — Woo's own .button rule sets 48px at a
   specificity the theme's .btn classes cannot reach. */
.woocommerce div.product form.cart button.single_add_to_cart_button {
	flex: 1 1 12rem;
	min-height: 54px;
	font-size: 1rem;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button.button {
	width: 100%;
	min-height: 54px;
	font-size: 1rem;
}

/* ---------------------------------------------------------------- Variations
 *
 * Woo renders an empty .woocommerce-variation div up front and fills it once a variation
 * is chosen. Empty, it still occupies its padding and left a dead band between the size
 * selector and the add-to-cart row. :empty collapses it until it actually has content.
 */
.woocommerce div.product form.cart .woocommerce-variation.single_variation:empty {
	display: none;
}

.woocommerce-variation-price { margin-bottom: 1rem; }

/* Woo lays the variation selectors out as a table and sets `line-height: 2em` on the
   cells, which opened a ~50px band between the size selector and the add-to-cart row.
   The table is flattened to blocks and the inherited line-height restored. */
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	line-height: inherit;
	text-align: left;
}

.woocommerce div.product form.cart .variations { margin-bottom: 1.5rem; }

.woocommerce div.product form.cart .single_variation_wrap,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	margin: 0;
	padding: 0;
}
.woocommerce div.product form.cart .variations th.label { margin-bottom: 0.5rem; }
.woocommerce div.product form.cart .variations tr + tr { margin-top: 1rem; }

.woocommerce div.product form.cart .variations select {
	min-width: 0;
	margin-right: 0;
}

/* ================================================================ Shop head */

.shop-head {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
	padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2rem);
	align-items: start;
}

/* The description column is capped for readability; the signals panel takes the width
   that cap would otherwise leave empty beside the heading. */
@media (min-width: 900px) {
	.shop-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.shop-head__intro { max-width: 62ch; }

.shop-head__title {
	margin: 0 0 1rem;
	font-size: clamp(2.25rem, 5vw, 3.5rem);
}

.shop-head__description { color: rgba(var(--ink-rgb), 0.82); }
.shop-head__description p:last-child { margin-bottom: 0; }

/* -------- Trust signals ------------------------------------------------- */

.trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.trust-badge {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: rgba(var(--ink-rgb), 0.75);
}

.trust-badge .icon {
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
	color: var(--sage);
}

.trust-badge__title { font-weight: 500; color: var(--forest); }
.trust-badge__text { font-size: 0.8125rem; }

.trust-badges--default {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.trust-badges--default .trust-badge {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.375rem;
}

.trust-badges--compact {
	gap: 0.5rem 1.25rem;
	padding: 1rem 0;
	border-top: 1px solid rgba(var(--forest-rgb), 0.14);
	border-bottom: 1px solid rgba(var(--forest-rgb), 0.14);
}

/* The panel beside the shop heading: icon in a ruled column, title and one line of
   explanation stacked beside it. */
.trust-badges--panel {
	display: grid;
	gap: 0;
	margin: 0;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: var(--sand);
	border-radius: 4px;
}

.trust-badges--panel .trust-badge {
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr);
	align-items: start;
	gap: 0.25rem 0.75rem;
	padding: 0.875rem 0;
	border-bottom: 1px solid rgba(var(--forest-rgb), 0.12);
}

.trust-badges--panel .trust-badge:first-child { padding-top: 0; }

.trust-badges--panel .trust-badge:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.trust-badges--panel .icon {
	grid-row: span 2;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
}

.trust-badges--panel .trust-badge__title {
	font-size: 0.875rem;
	line-height: 1.3;
}

.trust-badges--panel .trust-badge__text {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgba(var(--ink-rgb), 0.72);
}

/* ================================================================ Filters & toolbar */

/* Category chips and the sort control share one band: chips take the space they need,
   sort is pinned right. They stack on narrow screens rather than crushing the chips. */
.shop-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	padding-bottom: 1.125rem;
	border-bottom: 1px solid rgba(var(--forest-rgb), 0.14);
}

.shop-toolbar { flex: 0 0 auto; }

/* The chips live inside the header's intro column, which balances a short description
   against the taller signals panel beside it instead of leaving a dead block of
   whitespace under the heading. */
.shop-filters { margin-top: clamp(1.5rem, 3vw, 2rem); }

.shop-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 40px;
	padding: 0.5rem 1rem;
	background: transparent;
	border: 1px solid rgba(var(--forest-rgb), 0.25);
	border-radius: 999px;
	font-size: 0.875rem;
	color: var(--forest);
	text-decoration: none;
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.chip:hover {
	border-color: var(--forest);
	background: rgba(var(--forest-rgb), 0.06);
	color: var(--forest);
}

.chip.is-active {
	background: var(--forest);
	border-color: var(--forest);
	color: var(--cream);
}

.chip__count {
	font-size: 0.75rem;
	opacity: 0.65;
	font-variant-numeric: tabular-nums;
}

.woocommerce-result-count {
	margin: 1rem 0 1.75rem;
	font-size: 0.8125rem;
	color: rgba(var(--ink-rgb), 0.65);
}

.woocommerce-ordering select {
	min-height: 44px;
	padding: 0.5rem 2rem 0.5rem 0.875rem;
	background: var(--white);
	border: 1px solid rgba(var(--forest-rgb), 0.22);
	border-radius: 4px;
	font-size: 0.875rem;
	color: var(--forest);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C4A32' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.625rem center;
	background-size: 1rem;
}

/* ================================================================ Single product */

.single-product-layout {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem);
	align-items: start;
}

@media (min-width: 900px) {
	.single-product-layout { grid-template-columns: 1.05fr 0.95fr; }

	.single-product-layout__summary {
		position: sticky;
		top: 96px;
	}
}

/* -------- Gallery ------------------------------------------------------- */

.woocommerce-product-gallery {
	position: relative;
	margin: 0;
}

.woocommerce-product-gallery__wrapper { margin: 0; }

.woocommerce-product-gallery__image {
	border-radius: 3px;
	overflow: hidden;
	background: var(--sand);
}

/* The single image size is hard-cropped 1000×1250, so this ratio always matches and the
   gallery reserves its height before the first image decodes. */
.woocommerce-product-gallery__image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs li { margin: 0; }

.woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 3px;
	opacity: 0.62;
	cursor: pointer;
	transition: opacity 0.16s ease;
}

.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs .flex-active { opacity: 1; }

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 5;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.92);
	border: 0;
	border-radius: 50%;
	font-size: 0;
	color: var(--forest);
}

.woocommerce-product-gallery__trigger::after {
	content: "⤢";
	font-size: 1rem;
	line-height: 40px;
}

.single-product-layout .onsale {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 5;
}

/* -------- Summary ------------------------------------------------------- */

.product_title {
	margin: 0.5rem 0 0.75rem;
	font-size: clamp(2rem, 4.5vw, 3rem);
	line-height: 1.08;
}

/* Woo sets `.woocommerce .woocommerce-product-rating { display:block }` at (0,2,0), which
   dropped the review-count link onto its own line under the stars. Matched here so the
   rating reads as one row. */
.woocommerce .woocommerce-product-rating,
.woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
	line-height: 1.4;
	font-size: 0.8125rem;
}

.woocommerce-product-rating .woocommerce-review-link {
	color: rgba(var(--ink-rgb), 0.65);
	text-decoration: underline;
}

.summary .price {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-size: 1.625rem;
	font-weight: 500;
	color: var(--forest);
}

.summary .price del {
	font-size: 1.125rem;
	font-weight: 400;
	color: rgba(var(--ink-rgb), 0.5);
}

.summary .price ins { text-decoration: none; }

.woocommerce-product-details__short-description {
	max-width: 54ch;
	margin-bottom: 1.75rem;
	font-size: 1.0625rem;
	color: rgba(var(--ink-rgb), 0.84);
}

.stock.out-of-stock {
	margin-bottom: 1rem;
	font-size: 0.875rem;
	color: #a4392b;
}

/* -------- Add to cart --------------------------------------------------- */

.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
}

.single_add_to_cart_button {
	flex: 1 1 12rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 0.875rem 1.75rem;
	background: var(--forest);
	color: var(--cream);
	border: 1px solid var(--forest);
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 500;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.single_add_to_cart_button:hover,
.single_add_to_cart_button:focus-visible {
	background: var(--sage);
	border-color: var(--sage);
	color: var(--cream);
}

.single_add_to_cart_button.disabled,
.single_add_to_cart_button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.qty-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(var(--forest-rgb), 0.25);
	border-radius: 999px;
	overflow: hidden;
	background: var(--white);
}

.qty-stepper__btn {
	width: 44px;
	height: 52px;
	background: none;
	border: 0;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--forest);
}

.qty-stepper__btn:hover { background: var(--sand); }

.qty-stepper__value {
	min-width: 2rem;
	text-align: center;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

.qty-stepper .qty {
	width: 2.75rem;
	height: 52px;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

.qty-stepper .qty::-webkit-outer-spin-button,
.qty-stepper .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* -------- Variations ---------------------------------------------------- */

.variations {
	width: 100%;
	margin: 0 0 1.25rem;
	border-collapse: collapse;
}

.variations th,
.variations td {
	display: block;
	padding: 0;
	text-align: left;
}

.variations th.label {
	margin-bottom: 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sage);
}

.variations td.value { margin-bottom: 1rem; }

.variations select {
	width: 100%;
	min-height: 48px;
	padding: 0.625rem 2rem 0.625rem 0.875rem;
	background: var(--white);
	border: 1px solid rgba(var(--forest-rgb), 0.25);
	border-radius: 4px;
	font-size: 0.9375rem;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C4A32' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1rem;
}

.reset_variations {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
}

.woocommerce-variation-price { margin-bottom: 1rem; }

/* -------- Promises ------------------------------------------------------ */

.product-promises {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.625rem;
}

.product-promises li {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 0.8125rem;
	color: rgba(var(--ink-rgb), 0.75);
}

.product-promises .icon {
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.125rem;
	color: var(--sage);
}

/* -------- Tabs ---------------------------------------------------------- */

.product-tabs {
	padding: clamp(2rem, 4vw, 3.5rem) 0;
	border-top: 1px solid rgba(var(--forest-rgb), 0.14);
}

.product-tabs__heading {
	margin-bottom: 1.5rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
}

.product-tabs__list { border-top: 1px solid rgba(var(--forest-rgb), 0.15); }

.tab__title {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
}

.tab__subtitle {
	margin: 1.5rem 0 0.5rem;
	font-size: 1rem;
}

.tab__lede { font-size: 1rem; }

.tab__note {
	margin-top: 1.25rem;
	font-size: 0.8125rem;
	color: rgba(var(--ink-rgb), 0.65);
}

.inci {
	font-size: 0.8125rem;
	line-height: 1.7;
	color: rgba(var(--ink-rgb), 0.7);
	word-break: break-word;
}

/* -------- Reviews ------------------------------------------------------- */

#reviews .commentlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

#reviews .review {
	padding: 1.5rem 0;
	border-bottom: 1px solid rgba(var(--forest-rgb), 0.14);
}

#reviews .review img.avatar {
	float: left;
	width: 44px;
	height: 44px;
	margin-right: 0.875rem;
	border-radius: 50%;
}

#reviews .meta {
	margin-bottom: 0.5rem;
	font-size: 0.8125rem;
	color: rgba(var(--ink-rgb), 0.65);
}

#reviews .woocommerce-review__author {
	font-weight: 500;
	color: var(--forest);
	font-style: normal;
}

/* WooCommerce's own verified-owner label, restyled rather than duplicated. */
.woocommerce-review__verified {
	display: inline-flex;
	align-items: center;
	margin-left: 0.375rem;
	font-size: 0.75rem;
	font-style: normal;
	color: var(--sage);
}

#review_form .comment-form-rating p.stars a {
	font-size: 1.25rem;
	text-decoration: none;
}

#review_form textarea,
#review_form input[type="text"],
#review_form input[type="email"] {
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 1rem;
	background: var(--white);
	border: 1px solid rgba(var(--forest-rgb), 0.22);
	border-radius: 4px;
}

#review_form textarea { min-height: 8rem; }

#review_form .submit {
	min-height: 48px;
	padding: 0.75rem 1.75rem;
	background: var(--forest);
	color: var(--cream);
	border: 0;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 500;
	cursor: pointer;
}

/* -------- Sticky add to cart -------------------------------------------- */

.sticky-atc {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 80;
	padding: 0.75rem 0;
	background: rgba(255, 255, 255, 0.97);
	border-top: 1px solid rgba(var(--forest-rgb), 0.14);
	backdrop-filter: blur(8px);
	/* Off-screen from first paint and revealed with a transform, so showing it costs a
	   composited animation and never a layout shift. */
	transform: translateY(100%);
	transition: transform 0.24s cubic-bezier(0.2, 0, 0.2, 1);
	visibility: hidden;
}

.sticky-atc.is-visible {
	transform: translateY(0);
	visibility: visible;
}

.sticky-atc__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.sticky-atc__product {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.sticky-atc__image {
	width: 44px;
	height: 55px;
	object-fit: cover;
	border-radius: 3px;
}

.sticky-atc__text { min-width: 0; }

.sticky-atc__title {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--forest);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sticky-atc__price {
	margin: 0;
	font-size: 0.875rem;
	color: rgba(var(--ink-rgb), 0.7);
}

.sticky-atc__price del { font-size: 0.8125rem; opacity: 0.6; }
.sticky-atc__price ins { text-decoration: none; }

.sticky-atc__cta { flex: 0 0 auto; min-height: 44px; padding: 0.625rem 1.5rem; }

@media (max-width: 520px) {
	.sticky-atc__image { display: none; }
}

/* ================================================================ Cart drawer */

.cart-drawer__scrim {
	position: fixed;
	inset: 0;
	z-index: 140;
	background: rgba(var(--ink-rgb), 0.45);
	opacity: 0;
	transition: opacity 0.24s ease;
}

.cart-drawer__scrim.is-open { opacity: 1; }

.cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 150;
	display: flex;
	flex-direction: column;
	width: min(92vw, 420px);
	background: var(--cream);
	box-shadow: -12px 0 40px rgba(var(--ink-rgb), 0.18);
	transform: translateX(100%);
	transition: transform 0.26s cubic-bezier(0.2, 0, 0.2, 1);
}

.cart-drawer.is-open { transform: translateX(0); }

.cart-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem clamp(1rem, 4vw, 1.5rem);
	border-bottom: 1px solid rgba(var(--forest-rgb), 0.14);
}

.cart-drawer__title { margin: 0; font-size: 1.375rem; }

.cart-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: clamp(1rem, 4vw, 1.5rem);
	overscroll-behavior: contain;
}

.cart-drawer__loading {
	padding: 2rem 0;
	text-align: center;
	color: rgba(var(--ink-rgb), 0.6);
}

.cart-drawer__empty {
	padding: 3rem 0;
	text-align: center;
}

.cart-drawer__empty-icon {
	width: 2.5rem;
	height: 2.5rem;
	margin: 0 auto 1rem;
	color: var(--sage);
}

.cart-drawer__empty-title {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.375rem;
	color: var(--forest);
}

.cart-drawer__empty .btn { margin-top: 1rem; }

/* -------- Free shipping meter ------------------------------------------- */

.shipping-meter { margin-bottom: 1.5rem; }

.shipping-meter__label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	color: rgba(var(--ink-rgb), 0.75);
}

.shipping-meter__label .icon { width: 1rem; height: 1rem; color: var(--sage); }

.shipping-meter.is-qualified .shipping-meter__label { color: var(--sage); font-weight: 500; }

.shipping-meter__track {
	height: 5px;
	background: rgba(var(--forest-rgb), 0.14);
	border-radius: 3px;
	overflow: hidden;
}

.shipping-meter__fill {
	display: block;
	height: 100%;
	background: var(--sage);
	border-radius: 3px;
	transition: width 0.35s cubic-bezier(0.2, 0, 0.2, 1);
}

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

.cart-lines {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cart-line {
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: 0.875rem;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(var(--forest-rgb), 0.12);
}

.cart-line:first-child { padding-top: 0; }

.cart-line__media {
	aspect-ratio: 4 / 5;
	border-radius: 3px;
	overflow: hidden;
	background: var(--sand);
}

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

.cart-line__title {
	margin: 0 0 0.25rem;
	font-size: 1rem;
	line-height: 1.3;
}

.cart-line__title a { text-decoration: none; }

.cart-line__meta,
.cart-line__unit {
	margin: 0 0 0.375rem;
	font-size: 0.8125rem;
	color: rgba(var(--ink-rgb), 0.62);
}

.cart-line__price {
	margin: 0 0 0.625rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--forest);
}

.cart-line__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.cart-line__controls .qty-stepper__btn { height: 40px; width: 38px; }
.cart-line__controls .qty-stepper .qty { height: 40px; }

/* Woo styles a.remove as a 1.5em red "×" with `color: red !important`, which turned the
   theme's quiet text link into oversized red shouting. The !important has to be answered
   in kind — there is no selector that outranks it. */
.cart-line__remove,
.woocommerce a.remove.cart-line__remove {
	display: inline;
	width: auto;
	height: auto;
	padding: 0;
	background: none !important;
	border: 0;
	border-radius: 0;
	font-size: 0.8125rem !important;
	font-weight: 400;
	line-height: inherit;
	color: rgba(var(--ink-rgb), 0.6) !important;
	text-decoration: underline;
	text-align: left;
}

.cart-line__remove:hover,
.woocommerce a.remove.cart-line__remove:hover {
	color: #a4392b !important;
	background: none !important;
}

.cart-line.is-updating { opacity: 0.5; pointer-events: none; }

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

.cart-drawer__foot {
	padding-top: 1.25rem;
	border-top: 1px solid rgba(var(--forest-rgb), 0.14);
}

.cart-drawer__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 0.375rem;
	font-size: 1rem;
}

.cart-drawer__subtotal strong {
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--forest);
}

.cart-drawer__note {
	margin-bottom: 1rem;
	font-size: 0.75rem;
	color: rgba(var(--ink-rgb), 0.6);
}

.cart-drawer__foot .btn + .btn { margin-top: 0.5rem; }

.cart-drawer__promises {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.75rem;
	color: rgba(var(--ink-rgb), 0.6);
}

.cart-drawer__promises li {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.cart-drawer__promises .icon { width: 0.875rem; height: 0.875rem; }

/* ================================================================ Cart page */

.cart-page {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 5rem);
	align-items: start;
}

@media (min-width: 900px) {
	.cart-page { grid-template-columns: 1.5fr 0.9fr; }
	.cart-page__aside { position: sticky; top: 96px; }
}

.cart-page__heading { margin: 0 0 1.5rem; font-size: clamp(1.75rem, 4vw, 2.5rem); }

.cart-line--page { grid-template-columns: 96px 1fr auto; }

@media (max-width: 640px) {
	.cart-line--page { grid-template-columns: 80px 1fr; }
	.cart-line__total { grid-column: 2; text-align: right; }
}

.cart-line__total {
	font-size: 1rem;
	font-weight: 500;
	color: var(--forest);
	white-space: nowrap;
}

.cart-page__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	padding-top: 1.5rem;
}

.coupon { flex: 1 1 18rem; }

.coupon__row { display: flex; gap: 0.5rem; }

.cart-collaterals {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--white);
	border: 1px solid rgba(var(--forest-rgb), 0.12);
	border-radius: 4px;
}

.cart_totals h2 { font-size: 1.375rem; }

.cart_totals table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.25rem;
}

.cart_totals th,
.cart_totals td {
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(var(--forest-rgb), 0.1);
	text-align: left;
	font-size: 0.9375rem;
}

.cart_totals td { text-align: right; }
.cart_totals .order-total td { font-size: 1.25rem; font-weight: 500; color: var(--forest); }

.wc-proceed-to-checkout .checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	background: var(--forest);
	color: var(--cream);
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
}

.wc-proceed-to-checkout .checkout-button:hover { background: var(--sage); color: var(--cream); }

.cart-empty-state {
	max-width: 44ch;
	margin: 0 auto;
	padding: clamp(3rem, 8vw, 5rem) 0;
	text-align: center;
}

.cart-empty-state .btn { margin-top: 1rem; }

/* ================================================================ Checkout */

.checkout-layout {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 5rem);
	align-items: start;
}

@media (min-width: 950px) {
	.checkout-layout { grid-template-columns: 1.4fr 0.85fr; }
	.checkout-layout__aside { position: sticky; top: 96px; }
}

.checkout-step { margin-bottom: 2.5rem; }

.checkout-step__title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	font-size: 1.5rem;
}

.checkout-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--forest);
	color: var(--cream);
	border-radius: 50%;
	font-family: "Inter", sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: grid;
	gap: 0 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-row {
	grid-column: 1 / -1;
	margin-bottom: 1.125rem;
}

.form-row-first,
.form-row-last { grid-column: span 1; }

@media (max-width: 640px) {
	.form-row-first,
	.form-row-last { grid-column: 1 / -1; }
}

.form-row label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--forest);
}

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

.form-row .input-text,
.form-row select,
.select2-container .select2-selection--single {
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 1rem;
	background: var(--white);
	border: 1px solid rgba(var(--forest-rgb), 0.22);
	border-radius: 4px;
	font-size: 1rem;
}

.form-row textarea.input-text { min-height: 6rem; }

.woocommerce-invalid .input-text,
.woocommerce-invalid select { border-color: #a4392b; }

.checkout-payment { margin-top: 1rem; }

.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(var(--forest-rgb), 0.1);
	text-align: left;
	font-size: 0.9375rem;
}

.woocommerce-checkout-review-order-table td { text-align: right; }
.woocommerce-checkout-review-order-table .order-total { font-size: 1.125rem; font-weight: 500; }

.wc_payment_methods {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.wc_payment_method {
	padding: 1rem;
	border: 1px solid rgba(var(--forest-rgb), 0.18);
	border-radius: 4px;
	margin-bottom: 0.625rem;
}

.wc_payment_method label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	cursor: pointer;
}

.payment_box {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(var(--forest-rgb), 0.12);
	font-size: 0.875rem;
	color: rgba(var(--ink-rgb), 0.75);
}

#place_order {
	width: 100%;
	min-height: 56px;
	background: var(--forest);
	color: var(--cream);
	border: 0;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
}

#place_order:hover { background: var(--sage); }

.checkout-summary {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--white);
	border: 1px solid rgba(var(--forest-rgb), 0.12);
	border-radius: 4px;
}

.checkout-summary__title { margin: 0 0 1rem; font-size: 1.25rem; }

.checkout-summary__nudge {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	padding: 0.625rem 0.75rem;
	background: var(--sand);
	border-radius: 4px;
	font-size: 0.8125rem;
}

.checkout-summary__nudge .icon { width: 1rem; height: 1rem; color: var(--sage); }

.checkout-summary__lines {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.checkout-summary__line {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0;
	border-bottom: 1px solid rgba(var(--forest-rgb), 0.08);
	font-size: 0.875rem;
}

.checkout-summary__thumb { position: relative; }

.checkout-summary__thumb img {
	width: 48px;
	height: 60px;
	object-fit: cover;
	border-radius: 3px;
}

.checkout-summary__qty {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 20px;
	height: 20px;
	background: var(--forest);
	color: var(--cream);
	border-radius: 10px;
	font-size: 0.6875rem;
	line-height: 20px;
	text-align: center;
}

.checkout-summary__price { white-space: nowrap; font-weight: 500; }

.checkout-summary__note {
	margin: 1rem 0 0;
	font-size: 0.75rem;
	color: rgba(var(--ink-rgb), 0.62);
}

/* ================================================================ Cart page extras */

/* Cross-sells sit in the narrow aside column, where Woo's `columns-3` grid crushes three
   cards into ~260px and the titles collide. One per row, at a smaller scale. */
.cart-page__aside .cross-sells ul.products,
.cart-page__aside .cross-sells ul.products.columns-3 {
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

.cart-page__aside .cross-sells .product-card {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 0 0.875rem;
	align-items: start;
}

.cart-page__aside .cross-sells .product-card__media { margin-bottom: 0; }
.cart-page__aside .cross-sells .product-card__title { font-size: 1rem; }
.cart-page__aside .cross-sells .product-card__subtitle { display: none; }
.cart-page__aside .cross-sells .product-card__price { margin: 0.25rem 0 0.5rem; font-size: 0.9375rem; }
.cart-page__aside .cross-sells .card__cta { min-height: 38px; font-size: 0.8125rem; }

.cart-page__aside .cross-sells h2 {
	margin-bottom: 1rem;
	font-size: 1.25rem;
}

/* ================================================================ Notices */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 1.5rem 0;
	padding: 0.875rem 1.125rem;
	border-left: 3px solid var(--sage);
	background: rgba(var(--forest-rgb), 0.06);
	border-radius: 0 4px 4px 0;
	font-size: 0.9375rem;
	list-style: none;
}

.woocommerce-error {
	border-left-color: #a4392b;
	background: rgba(164, 57, 43, 0.07);
	color: #8c3527;
}

/* Woo positions a tick/info glyph absolutely at the notice's left edge; with the theme's
   tighter padding it landed on top of the first character of the message. Dropped in
   favour of the coloured rule, which carries the same meaning without the collision. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
}

.woocommerce-message .button,
.woocommerce-info .button {
	float: none;
	flex: 0 0 auto;
	min-height: 40px;
	padding: 0.5rem 1.25rem;
	font-size: 0.875rem;
}

/* ================================================================ Account */

.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 2rem;
	padding: 0 0 1rem;
	border-bottom: 1px solid rgba(var(--forest-rgb), 0.14);
	list-style: none;
}

.woocommerce-MyAccount-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.5rem 1rem;
	border: 1px solid rgba(var(--forest-rgb), 0.2);
	border-radius: 999px;
	font-size: 0.875rem;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation .is-active a {
	background: var(--forest);
	border-color: var(--forest);
	color: var(--cream);
}

.woocommerce-orders-table,
.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-orders-table th,
.woocommerce-orders-table td,
.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
	padding: 0.75rem;
	border-bottom: 1px solid rgba(var(--forest-rgb), 0.1);
	text-align: left;
	font-size: 0.9375rem;
}

/* Tables are the one place WooCommerce markup can exceed the viewport; scroll them
   rather than letting the page scroll horizontally. */
.woocommerce-orders-table,
.woocommerce-table--order-details,
.cart_totals table,
.woocommerce-checkout-review-order-table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}

@media (min-width: 700px) {
	.woocommerce-orders-table,
	.woocommerce-table--order-details,
	.cart_totals table,
	.woocommerce-checkout-review-order-table { display: table; }
}