/* ==========================================================================
   WooCommerce: shop layout, product cards, single product, cart, checkout
   ========================================================================== */

/* --------------------------------------------------------------------
   Shop layout
   -------------------------------------------------------------------- */
.lcbm-shop-layout { padding-block: var(--lcbm-space-md) var(--lcbm-space-xl); }
.lcbm-shop-layout .page-title { text-align: center; margin-bottom: var(--lcbm-space-md); }
.woocommerce-products-header__description { max-width: 720px; margin: 0 auto var(--lcbm-space-md); text-align: center; color: var(--lcbm-color-text-muted); }

.lcbm-shop-columns { width: 100%; }

.lcbm-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--lcbm-space-sm);
	padding-bottom: var(--lcbm-space-sm);
	border-bottom: 1px solid var(--lcbm-color-border);
}
.lcbm-shop-toolbar-count { color: var(--lcbm-color-text-muted); font-size: 0.9rem; }
.lcbm-shop-toolbar-controls { display: flex; align-items: center; gap: 0.75rem; }
.lcbm-shop-toolbar-controls select { padding: 0.5rem 0.9rem; }

.lcbm-view-toggle { display: inline-flex; border: 1px solid var(--lcbm-color-border); border-radius: var(--lcbm-radius-sm); overflow: hidden; }
.lcbm-view-toggle button { background: var(--lcbm-color-bg); border: none; padding: 0.5rem 0.75rem; }
.lcbm-view-toggle button.active { background: var(--lcbm-color-primary); color: #fff; }

.lcbm-coupon-banner {
	background: var(--lcbm-color-highlight);
	color: var(--lcbm-color-text);
	text-align: center;
	padding: 0.6rem 1rem;
	border-radius: var(--lcbm-radius-sm);
	font-size: 0.9rem;
	margin-bottom: var(--lcbm-space-sm);
}

/* --------------------------------------------------------------------
   Product grid / card
   -------------------------------------------------------------------- */
ul.products.lcbm-product-grid,
ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--lcbm-space-sm);
}
@media (min-width: 640px) { ul.products.lcbm-product-grid, ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { ul.products.lcbm-product-grid, ul.products { grid-template-columns: repeat(4, 1fr); } }

.lcbm-shop-main.is-list-view ul.products { grid-template-columns: 1fr; }
.lcbm-shop-main.is-list-view .lcbm-product-card { display: grid; grid-template-columns: 200px 1fr; gap: var(--lcbm-space-sm); }
.lcbm-shop-main.is-list-view .lcbm-product-card-media { aspect-ratio: 1/1; }

/* --------------------------------------------------------------------
   WooCommerce block grids (e.g. "Handpicked Products" / "Products" blocks
   dropped into a page with the block editor, as on the Shop page here) —
   these render as .wc-block-grid, a completely separate element from the
   ul.products this theme's own templates output, so none of the rules
   above touch them. WooCommerce Blocks lays these out with
   flex-wrap + a percentage flex-basis per item and flex-shrink:0, which
   is prone to wrapping one column early (4 columns become 3 per row)
   whenever the per-item width plus its gap doesn't divide the container
   width evenly — happens at some viewport widths and not others. Forcing
   real CSS Grid, matching the column count the block was actually set to,
   sidesteps that math entirely. !important is needed to beat the block
   library's own inline-loaded stylesheet.
   -------------------------------------------------------------------- */
.wc-block-grid[class*="has-"][class*="-columns"] .wc-block-grid__products {
	display: grid !important;
	gap: var(--lcbm-space-sm) !important;
}
.wc-block-grid[class*="has-"][class*="-columns"] .wc-block-grid__product {
	/* WooCommerce's own block CSS carries a separate, non-!important
	   `max-width: 25%` on this element (sized for its OLD flex-wrap
	   layout, where 25% of the whole row was correct for a 4-column
	   flex item). `!important` on `width` only wins the cascade for the
	   `width` property itself — it does nothing to a `max-width` rule,
	   which still clamps the final size afterwards. Left in place, that
	   caps every card at 25% of its own ~173px CSS Grid column
	   (~43px) — the "everything is a sliver, Add to Cart renders as a
	   vertical pill" bug. `max-width: 100% !important` neutralizes it.
	   WC also spaces items with transparent left/right borders instead
	   of a gap — zeroed out so it doesn't double up with the `gap` on
	   the grid container above. */
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	flex-basis: auto !important;
	margin: 0 !important;
	border: none !important;
}
.wc-block-grid.has-2-columns .wc-block-grid__products { grid-template-columns: repeat(2, 1fr) !important; }
.wc-block-grid.has-3-columns .wc-block-grid__products { grid-template-columns: repeat(2, 1fr) !important; }
.wc-block-grid.has-4-columns .wc-block-grid__products,
.wc-block-grid.has-5-columns .wc-block-grid__products,
.wc-block-grid.has-6-columns .wc-block-grid__products { grid-template-columns: repeat(2, 1fr) !important; }

@media (min-width: 640px) {
	.wc-block-grid.has-3-columns .wc-block-grid__products { grid-template-columns: repeat(3, 1fr) !important; }
	.wc-block-grid.has-4-columns .wc-block-grid__products,
	.wc-block-grid.has-5-columns .wc-block-grid__products,
	.wc-block-grid.has-6-columns .wc-block-grid__products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 1024px) {
	.wc-block-grid.has-4-columns .wc-block-grid__products { grid-template-columns: repeat(4, 1fr) !important; }
	.wc-block-grid.has-5-columns .wc-block-grid__products { grid-template-columns: repeat(5, 1fr) !important; }
	.wc-block-grid.has-6-columns .wc-block-grid__products { grid-template-columns: repeat(6, 1fr) !important; }
}
/* Requested 6-per-row specifically for the "4 columns" block once there's
   enough width for it (now that .entry-content's reading-width cap no
   longer shrinks this page's content area — see homepage.css). */
@media (min-width: 1200px) {
	.wc-block-grid.has-4-columns .wc-block-grid__products { grid-template-columns: repeat(6, 1fr) !important; }
}

/* Card styling for the WC block grid — it ships almost unstyled (10px
   title text, a stretched 64x64 thumbnail, a near-black Add to Cart
   button that only picked up this theme's violet by accident via
   inherited `color`, not an intentional background). Restyled to match
   .lcbm-product-card's look: white card, square cover-fit image, real
   type scale, violet primary button. */
.wc-block-grid__product {
	/* display:flex + flex-direction:column are set !important on the
	   higher-specificity .wc-block-grid[class*="has-"]... rule above (the
	   grid-fix rule) — that's what actually wins the cascade; kept out of
	   this rule to avoid a dead duplicate declaration. Flex-column here is
	   what lets .wc-block-grid__product-add-to-cart's auto top margin
	   below pin the button to the bottom of every card evenly. */
	background: var(--lcbm-color-bg);
	border-radius: var(--lcbm-radius-md);
	box-shadow: var(--lcbm-shadow-sm);
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.wc-block-grid__product:hover { box-shadow: var(--lcbm-shadow-md); transform: translateY(-3px); }

.wc-block-grid__product-link {
	/* Positioned so .wc-block-grid__product-onsale (a DOM sibling of
	   .wc-block-grid__product-image, both children of this link, not
	   nested inside the image) has the right anchor for its absolute
	   top/left placement — it ends up sitting over the image's top-left
	   corner because the image is this link's first in-flow child. */
	position: relative;
	display: block;
	text-decoration: none !important;
	color: var(--lcbm-color-text);
}
.wc-block-grid__product-image {
	aspect-ratio: 1 / 1;
	background: var(--lcbm-color-bg-light);
	overflow: hidden;
}
.wc-block-grid__product-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}
.wc-block-grid__product-onsale {
	position: absolute !important;
	top: 0.6rem;
	left: 0.6rem;
	margin: 0 !important;
	padding: 0.3rem 0.75rem !important;
	border-radius: var(--lcbm-radius-pill);
	background: var(--lcbm-color-secondary);
	border: none !important;
	font-size: 0.7rem !important;
	font-weight: 700;
	color: #fff !important;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.wc-block-grid__product-onsale span { color: inherit; }

.wc-block-grid__product-title {
	font-family: var(--lcbm-font-heading) !important;
	font-size: 0.9rem !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	color: var(--lcbm-color-text) !important;
	padding: 0.85rem 0.85rem 0.35rem !important;
	text-align: left;
}
.wc-block-grid__product-price {
	padding: 0 0.85rem !important;
	margin: 0 0 0.6rem !important;
	font-family: var(--lcbm-font-heading);
	font-weight: 700;
	font-size: 0.95rem;
	text-align: left;
}
.wc-block-grid__product-price del { color: var(--lcbm-color-text-muted); font-weight: 400; margin-right: 0.4rem; }
.wc-block-grid__product-price ins { text-decoration: none; color: var(--lcbm-color-secondary); }

.wc-block-grid__product-add-to-cart {
	margin: auto 0.85rem 0.85rem !important;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: var(--lcbm-color-primary) !important;
	color: #fff !important;
	font-weight: 600 !important;
	font-size: 0.85rem !important;
	border: none !important;
	transition: background-color 0.2s ease;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover { background: var(--lcbm-color-secondary) !important; }

.lcbm-product-card {
	position: relative;
	background: var(--lcbm-color-bg);
	border-radius: var(--lcbm-radius-md);
	overflow: hidden;
	box-shadow: var(--lcbm-shadow-sm);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.lcbm-product-card:hover { box-shadow: var(--lcbm-shadow-md); transform: translateY(-3px); }

.lcbm-product-card-media { position: relative; display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--lcbm-color-bg-light); }
.lcbm-product-card-media-link { display: block; width: 100%; height: 100%; }
.lcbm-product-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; }
.lcbm-product-hover-image { opacity: 0; }
.lcbm-product-card:hover .lcbm-product-hover-image { opacity: 1; }

.lcbm-product-card-badges { position: absolute; top: 0.6rem; left: 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; z-index: 2; }

.lcbm-product-card-quick-actions {
	position: absolute; top: 0.6rem; right: 0.6rem;
	display: flex; flex-direction: column; gap: 0.4rem;
	opacity: 0; transform: translateX(6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 2;
}
.lcbm-product-card:hover .lcbm-product-card-quick-actions,
.lcbm-product-card:focus-within .lcbm-product-card-quick-actions { opacity: 1; transform: translateX(0); }

.lcbm-quick-view-btn, .lcbm-wishlist-btn {
	width: 38px; height: 38px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--lcbm-color-bg);
	border: none;
	box-shadow: var(--lcbm-shadow-sm);
	color: var(--lcbm-color-text);
}
.lcbm-wishlist-btn[aria-pressed="true"] { color: var(--lcbm-color-secondary); }
.lcbm-wishlist-btn[aria-pressed="true"] svg path { fill: currentColor; }

.lcbm-product-card-body { padding: var(--lcbm-space-sm); display: flex; flex-direction: column; gap: 0.35rem; }
.lcbm-product-card-category { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lcbm-color-text-muted); }
.lcbm-product-card-title { font-size: 0.85rem; font-weight: 500; margin: 0; }
.lcbm-product-card-title a { color: var(--lcbm-color-text); }
.lcbm-product-card-rating .star-rating { color: var(--lcbm-color-star); font-size: 0.85rem; }
.lcbm-product-card-price { font-weight: 700; font-family: var(--lcbm-font-heading); }
.lcbm-product-card-price ins { text-decoration: none; color: var(--lcbm-color-secondary); }
.lcbm-product-card-price del { color: var(--lcbm-color-text-muted); font-weight: 400; margin-right: 0.4rem; }

.lcbm-product-card-add-to-cart a.button,
.lcbm-product-card-add-to-cart a.added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.65rem 1rem;
	border-radius: var(--lcbm-radius-pill);
	background: var(--lcbm-color-primary);
	color: #fff;
	font-weight: 600;
	font-size: 0.9rem;
	transition: background-color 0.2s ease;
}
.lcbm-product-card-add-to-cart a.button:hover { background: var(--lcbm-color-accent); }
.lcbm-product-card-add-to-cart a.button.loading { opacity: 0.6; }

/* --------------------------------------------------------------------
   Quick view modal
   -------------------------------------------------------------------- */
.lcbm-quick-view-modal { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; padding: var(--lcbm-space-sm); visibility: hidden; }
.lcbm-quick-view-modal[aria-hidden="false"] { visibility: visible; }
.lcbm-quick-view-modal-overlay { position: absolute; inset: 0; background: rgba(34,34,34,0.55); opacity: 0; transition: opacity 0.2s ease; }
.lcbm-quick-view-modal[aria-hidden="false"] .lcbm-quick-view-modal-overlay { opacity: 1; }
.lcbm-quick-view-modal-panel {
	position: relative;
	background: var(--lcbm-color-bg);
	border-radius: var(--lcbm-radius-lg);
	max-width: 900px;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
	padding: var(--lcbm-space-md);
	transform: scale(0.96);
	opacity: 0;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.lcbm-quick-view-modal[aria-hidden="false"] .lcbm-quick-view-modal-panel { transform: scale(1); opacity: 1; }
.lcbm-quick-view-modal-close { position: absolute; top: 1rem; right: 1rem; font-size: 1.75rem; background: none; border: none; line-height: 1; }
.lcbm-quick-view-product { display: grid; grid-template-columns: 1fr; gap: var(--lcbm-space-md); }
@media (min-width: 768px) { .lcbm-quick-view-product { grid-template-columns: 1fr 1fr; } }
.lcbm-quick-view-gallery img { border-radius: var(--lcbm-radius-md); }
.lcbm-quick-view-full-link { display: inline-block; margin-top: 1rem; font-weight: 700; color: var(--lcbm-color-primary); text-decoration: underline; }

/* --------------------------------------------------------------------
   Single product page
   -------------------------------------------------------------------- */
.woocommerce div.product {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lcbm-space-md);
	padding-block: var(--lcbm-space-sm) var(--lcbm-space-lg);
}
@media (min-width: 1024px) { .woocommerce div.product { grid-template-columns: 420px 1fr; } }

/* Not position:sticky: WooCommerce keeps the gallery, summary, tabs,
   upsells and related products all inside the same <div class="product">
   grid container (tabs etc. use grid-column:1/-1 to span full width below
   the 2-column row) — a sticky gallery visually overlaps that full-width
   content once its own height exceeds the 2-column row's height. */
/* div.images IS .woocommerce-product-gallery (same element) — the main
   image wrapper and the thumbnail nav (JS-injected by FlexSlider) are
   siblings inside it. row-reverse puts the thumb column (2nd in the DOM)
   on the left and the main image (1st in the DOM) on the right. */
.woocommerce div.product div.images {
	/* The GeneratePress Premium plugin's own WooCommerce module CSS also
	   targets this exact element (.woocommerce div.product div.images)
	   with `width: 50%` for its own classic float-based gallery layout —
	   same selector specificity, loaded after this file, so it wins the
	   cascade and crushes the gallery to half width, which then makes
	   FlexSlider (WooCommerce's own gallery slider JS) measure and lock in
	   a too-small size for every slide. `width: auto !important` is needed
	   to reliably beat a plugin stylesheet whose load order relative to
	   this one isn't something the theme controls. */
	width: auto !important;
	align-self: start;
	max-width: 500px;
	display: flex;
	flex-direction: row-reverse;
	gap: 0.6rem;
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper { border-radius: var(--lcbm-radius-lg); overflow: hidden; flex: 1; min-width: 0; }
.woocommerce div.product div.images img { border-radius: var(--lcbm-radius-lg); max-height: 420px; object-fit: contain; }
.flex-control-thumbs {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	flex-shrink: 0;
	gap: 0.5rem;
	margin-top: 0;
	width: 64px;
	max-height: 420px;
	overflow-y: auto;
}
.flex-control-thumbs li { width: 100%; }
.flex-control-thumbs img { border-radius: var(--lcbm-radius-sm); border: 2px solid transparent; cursor: pointer; }
.flex-control-thumbs img.flex-active { border-color: var(--lcbm-color-primary); }

@media (max-width: 480px) {
	/* Too narrow for a side column — fall back to thumbnails below the image. */
	.woocommerce div.product div.images { flex-direction: column; max-width: 100%; }
	.flex-control-thumbs { flex-direction: row; width: 100%; max-height: none; flex-wrap: wrap; }
	.flex-control-thumbs li { width: 56px; }
}

.woocommerce div.product .product_title { margin-bottom: 0.5rem; font-size: clamp(1.35rem, 1.8vw, 1.75rem); line-height: 1.25; }
.woocommerce div.product p.price { font-size: 1.25rem; font-family: var(--lcbm-font-heading); font-weight: 700; color: var(--lcbm-color-text); margin-bottom: 0.5rem; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--lcbm-color-secondary); }
.woocommerce div.product .woocommerce-product-rating { margin-bottom: var(--lcbm-space-sm); }
.woocommerce div.product .star-rating { color: var(--lcbm-color-star); }

.woocommerce div.product .stock { font-weight: 600; color: var(--lcbm-color-success); }
.woocommerce div.product .stock.out-of-stock { color: var(--lcbm-color-danger); }

.woocommerce div.product form.cart {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-block: var(--lcbm-space-sm);
}
.woocommerce div.product form.cart .quantity { display: flex; align-items: center; border: 1px solid var(--lcbm-color-border); border-radius: var(--lcbm-radius-pill); overflow: hidden; }
.lcbm-qty-btn { width: 40px; height: 44px; border: none; background: var(--lcbm-color-bg-light); font-size: 1.1rem; }
.woocommerce div.product form.cart .qty { border: none; width: 50px; text-align: center; -moz-appearance: textfield; }
.woocommerce div.product form.cart button.single_add_to_cart_button {
	background: var(--lcbm-color-primary);
	color: #fff;
	border: none;
	padding: 0.9rem 2.5rem;
	border-radius: var(--lcbm-radius-pill);
	font-weight: 700;
	box-shadow: var(--lcbm-shadow-sm);
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover { background: var(--lcbm-color-accent); }

.woocommerce-product-details__short-description { color: var(--lcbm-color-text-muted); margin-bottom: var(--lcbm-space-sm); }

.woocommerce-tabs { margin-top: var(--lcbm-space-lg); grid-column: 1 / -1; }
.woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; border-bottom: 1px solid var(--lcbm-color-border); margin-bottom: var(--lcbm-space-md); }
.woocommerce-tabs ul.tabs li { }
.woocommerce-tabs ul.tabs li a { display: inline-block; padding: 0.75rem 1.25rem; font-weight: 600; border-radius: var(--lcbm-radius-sm) var(--lcbm-radius-sm) 0 0; }
.woocommerce-tabs ul.tabs li.active a { background: var(--lcbm-color-bg-light); color: var(--lcbm-color-primary); }
.lcbm-product-tab-content { max-width: 760px; }
.lcbm-product-faqs { display: flex; flex-direction: column; gap: var(--lcbm-space-sm); }
.lcbm-faq-item { border-bottom: 1px solid var(--lcbm-color-border); padding-bottom: var(--lcbm-space-sm); }
.lcbm-faq-question { font-size: 1rem; margin-bottom: 0.35rem; }
.lcbm-faq-answer { color: var(--lcbm-color-text-muted); }
.lcbm-faq-answer p:last-child { margin-bottom: 0; }

.related.products, .upsells.products, .lcbm-recently-viewed { margin-top: var(--lcbm-space-xl); grid-column: 1 / -1; }
.related.products h2, .upsells.products h2 { text-align: center; margin-bottom: var(--lcbm-space-md); }

/* Sticky add-to-cart (mobile-first, hidden on desktop when the form is already in view) */
.lcbm-sticky-atc {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 800;
	display: none;
	align-items: center;
	gap: 0.75rem;
	background: var(--lcbm-color-bg);
	box-shadow: 0 -6px 20px rgba(34,34,34,0.1);
	padding: 0.65rem var(--lcbm-space-sm);
}
.lcbm-sticky-atc.is-visible { display: flex; }
.lcbm-sticky-atc-image img { width: 48px; height: 48px; border-radius: var(--lcbm-radius-sm); object-fit: cover; }
.lcbm-sticky-atc-info { flex: 1; display: flex; flex-direction: column; }
.lcbm-sticky-atc-title { font-weight: 600; font-size: 0.85rem; }
.lcbm-sticky-atc-price { font-size: 0.85rem; color: var(--lcbm-color-text-muted); }
.lcbm-sticky-atc-btn { padding: 0.6rem 1.4rem; }

/* --------------------------------------------------------------------
   Reviews (single product)
   -------------------------------------------------------------------- */
#reviews .comment-form-rating select { padding: 0.5rem; }
#reviews .commentlist { display: flex; flex-direction: column; gap: var(--lcbm-space-sm); }

/* --------------------------------------------------------------------
   Cart page
   -------------------------------------------------------------------- */
.woocommerce-cart table.cart, .woocommerce-checkout table.cart { width: 100%; border-collapse: collapse; }
.woocommerce-cart table.cart img { border-radius: var(--lcbm-radius-sm); width: 72px; }
.woocommerce-cart table.cart td { padding: 1rem 0.5rem; border-bottom: 1px solid var(--lcbm-color-border); }
.woocommerce-cart .cart-collaterals .cart_totals { background: var(--lcbm-color-bg-light); border-radius: var(--lcbm-radius-md); padding: var(--lcbm-space-md); }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block; text-align: center;
	background: var(--lcbm-color-primary); color: #fff;
	padding: 1rem; border-radius: var(--lcbm-radius-pill); font-weight: 700;
}

/* --------------------------------------------------------------------
   Checkout
   -------------------------------------------------------------------- */
.woocommerce-checkout #payment { background: var(--lcbm-color-bg-light); border-radius: var(--lcbm-radius-md); padding: var(--lcbm-space-md); }
.lcbm-checkout-item { display: flex; align-items: center; gap: 0.5rem; }
.lcbm-checkout-item-thumb { width: 32px; height: 32px; object-fit: cover; border-radius: var(--lcbm-radius-sm); flex-shrink: 0; }
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout-review-order-table { background: var(--lcbm-color-bg-light); border-radius: var(--lcbm-radius-md); padding: var(--lcbm-space-md); }
/* Compact order-summary rows: smaller text, tighter cell padding. */
.woocommerce-checkout-review-order-table { font-size: 0.85rem; }
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th { padding: 0.5rem 0; }
.woocommerce-checkout-review-order-table .product-name { line-height: 1.3; }
#place_order {
	background: var(--lcbm-color-primary); color: #fff; border: none;
	padding: 1rem 2rem; border-radius: var(--lcbm-radius-pill); font-weight: 700; width: 100%;
}

/* Promo code: show the coupon form inline instead of behind a
   click-to-reveal link, styled as a single input + button bar. */
.woocommerce-checkout .woocommerce-form-coupon-toggle { display: none; }
.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: flex-start;
	background: none;
	border: none;
	padding: 0;
	margin-bottom: var(--lcbm-space-md);
}
.woocommerce-checkout .checkout_coupon .form-row { flex: 1 1 220px; margin: 0; }
.woocommerce-checkout .checkout_coupon .form-row-last { flex: 0 0 auto; }
.woocommerce-checkout .checkout_coupon input.input-text {
	width: 100%;
	box-sizing: border-box;
	padding: 0.85rem 1rem;
	border: 1px solid var(--lcbm-color-border);
	border-radius: var(--lcbm-radius-md);
}
.woocommerce-checkout .checkout_coupon button[name="apply_coupon"] {
	background: var(--lcbm-color-text);
	color: #fff;
	border: none;
	padding: 0.85rem 1.75rem;
	border-radius: var(--lcbm-radius-md);
	font-weight: 600;
	white-space: nowrap;
}
.woocommerce-checkout .checkout_coupon button[name="apply_coupon"]:hover { background: var(--lcbm-color-primary); }
.woocommerce-checkout .checkout_coupon .clear { display: none; }

/* Compact billing-form styling: modest heading, tight row spacing, and
   slim inputs with a soft border and rounded corners. */
.woocommerce-checkout #customer_details h3 {
	font-size: 1.3rem;
	font-weight: 600;
	margin-bottom: var(--lcbm-space-sm);
}
.woocommerce-checkout .woocommerce-billing-fields > h3 + p,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper { margin-top: 0; }
.woocommerce-checkout #customer_details .form-row {
	margin-bottom: 0.65rem;
}
.woocommerce-checkout #customer_details label {
	display: block;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--lcbm-color-text-muted);
	margin-bottom: 0.25rem;
}
.woocommerce-checkout #customer_details label .required {
	color: var(--lcbm-color-primary);
	text-decoration: none;
}
.woocommerce-checkout #customer_details input.input-text,
.woocommerce-checkout #customer_details select,
.woocommerce-checkout #customer_details .select2-selection {
	width: 100%;
	box-sizing: border-box;
	padding: 0.55rem 0.85rem;
	border: 1px solid var(--lcbm-color-border);
	border-radius: var(--lcbm-radius-sm);
	background: var(--lcbm-color-bg);
	font-size: 0.95rem;
}
.woocommerce-checkout #customer_details input.input-text:focus,
.woocommerce-checkout #customer_details select:focus {
	border-color: var(--lcbm-color-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(31, 78, 61, 0.15);
}
.woocommerce-checkout #customer_details .select2-selection { display: flex; align-items: center; }
.woocommerce-checkout #customer_details .select2-selection__rendered { padding: 0 !important; line-height: normal !important; }
.woocommerce-checkout #customer_details .select2-selection__arrow { height: 100% !important; }
.lcbm-optional-reveal-hidden { display: none !important; }
.lcbm-optional-reveal-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	background: none;
	border: none;
	padding: 0;
	margin-bottom: var(--lcbm-space-md);
	color: var(--lcbm-color-secondary);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}
.lcbm-optional-reveal-toggle:hover { text-decoration: underline; }

/* Billing/shipping fields (#customer_details) and the order summary
   (#order_review_heading + #order_review) are separate sibling elements
   in WooCommerce's own checkout markup, not wrapped in a shared
   container — floats let the two sit side by side while any other
   sibling content (payment-request buttons, notices, coupon box from
   the payment gateway plugin) still renders full-width above them in
   normal document flow, since it isn't floated. */
/* Checkout previously had its container cap removed entirely so the
   two-column layout would fill the full viewport width on wide screens —
   that stretched the (now more compact) billing inputs into oversized
   pills on large monitors, so it keeps the site's normal container width
   instead like every other page. */
/* The Checkout page renders through the same content-page.php template as
   regular text pages, so it inherits .entry-content's 720px reading-width
   cap (homepage.css) — that's exactly what was squeezing the billing form
   down to ~165px regardless of the container fix above. */
body.woocommerce-checkout .entry-content { max-width: none; }

@media (min-width: 900px) {
	.woocommerce-checkout form.checkout::after { content: ''; display: table; clear: both; }
	.woocommerce-checkout #customer_details {
		float: left;
		width: 58%;
		box-sizing: border-box;
		padding-right: var(--lcbm-space-lg);
	}
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review {
		float: right;
		width: 42%;
		box-sizing: border-box;
	}
	.woocommerce-checkout #order_review_heading { margin-top: 0; }

	/* .woocommerce-additional-fields (the Order Notes box) is its own
	   top-level sibling of #customer_details, not nested inside it — left
	   unstyled it gets squeezed into whatever narrow gap is left between
	   the two floated columns. Float it to match the billing column
	   instead so Order Notes reads as part of the same form. */
	.woocommerce-checkout .woocommerce-additional-fields {
		float: left;
		clear: left;
		width: 58%;
		box-sizing: border-box;
		padding-right: var(--lcbm-space-lg);
	}
	.woocommerce-checkout .woocommerce-additional-fields textarea { width: 100%; box-sizing: border-box; }
}

/* Past a certain point the order-summary column would keep stretching
   wider than a simple product list needs — cap it and let the billing
   form absorb the extra room on very wide screens instead. */
@media (min-width: 1600px) {
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout .woocommerce-additional-fields { width: calc(100% - 520px - var(--lcbm-space-lg)); }
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review { width: 520px; }
}

/* --------------------------------------------------------------------
   My Account
   -------------------------------------------------------------------- */
.woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: 0.3rem; }
.woocommerce-MyAccount-navigation a { display: block; padding: 0.7rem 1rem; border-radius: var(--lcbm-radius-sm); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--lcbm-color-bg-light); color: var(--lcbm-color-primary); font-weight: 700; }

/* Login / Register (WooCommerce's default #customer_login markup on the
   My Account page) has no card styling out of the box — everything below
   just gives it the same input/button/spacing language as the rest of the
   site's forms. */
#customer_login {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lcbm-space-lg);
	max-width: 480px;
}
#customer_login > div {
	flex: 1 1 400px;
	background: var(--lcbm-color-bg-light);
	border-radius: var(--lcbm-radius-md);
	padding: var(--lcbm-space-lg);
}
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row { margin-bottom: var(--lcbm-space-sm); }
.woocommerce-form-login label,
.woocommerce-form-register label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="password"],
.woocommerce-form-register input[type="email"] { width: 100%; }
.woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
	margin: var(--lcbm-space-sm) 0;
}
.woocommerce-form-login__rememberme input[type="checkbox"] { width: auto; }
.woocommerce-form-login .woocommerce-button,
.woocommerce-form-register .woocommerce-button {
	display: inline-block;
	background: var(--lcbm-color-primary);
	color: #fff;
	border: none;
	padding: 0.75rem 1.75rem;
	border-radius: var(--lcbm-radius-sm);
	font-weight: 700;
	transition: background 0.2s ease, transform 0.2s ease;
}
.woocommerce-form-login .woocommerce-button:hover,
.woocommerce-form-register .woocommerce-button:hover { background: var(--lcbm-color-accent); transform: translateY(-2px); }
.woocommerce-LostPassword { display: block; margin-top: var(--lcbm-space-sm); }
@media (max-width: 640px) {
	#customer_login > div { flex-basis: 100%; }
}

/* --------------------------------------------------------------------
   WooCommerce notices
   -------------------------------------------------------------------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
	border-radius: var(--lcbm-radius-sm);
	padding: 1rem 1.25rem;
	margin-bottom: var(--lcbm-space-sm);
	background: var(--lcbm-color-bg-light);
	border-left: 4px solid var(--lcbm-color-primary);
}
.woocommerce-error { border-left-color: var(--lcbm-color-danger); }