/*
Theme Name: deWA Koffie
Theme URI: https://example.com/dewakoffie
Author: wp-themes
Author URI: https://example.com
Description: Clean, modular WordPress theme built section-by-section (header, hero, grids, testimonial, footer) with Tailwind for easy reuse and reskinning. Branded for deWA Koffie (Burgundy Roast color scheme).
Version: 0.3.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: slate-sky
*/

/*
 * Styling is handled by Tailwind (CDN, prototype phase).
 * This file exists for the theme header above and any base CSS that
 * can't live in utility classes. Keep it minimal.
 *
 * Enqueued site-wide via wp_enqueue_style, so these rules apply on
 * WooCommerce pages too.
 */

/* ------------------------------------------------------------------ *
 * WooCommerce overrides
 *
 * WooCommerce ships opinionated image rules — `.woocommerce-page img
 * { height: auto; max-width: 100% }` — whose specificity beats plain
 * Tailwind utilities. Instead of fighting per element, we cap sizes
 * with `max-height`, a property WooCommerce never sets, so these win
 * cleanly with no !important.
 * ------------------------------------------------------------------ */

/* Header logo: constrain height regardless of the image size. Covers both
   the uploaded custom logo (.custom-logo) and the theme's bundled fallback
   mark (.site-logo). */
.custom-logo,
.site-logo {
	max-height: 3rem; /* 48px */
	width: auto;
}

/* Footer logo: same idea, slightly smaller (matches the h-10 design size). */
.footer-logo {
	max-height: 4rem; /* 64px — footer brand sits centred, a touch larger */
	width: auto;
}

/* Footer certificate/specialty badges. max-height caps them on WooCommerce
   pages, where WC's `.woocommerce-page img { height:auto }` would otherwise
   beat the Tailwind h-* utility and balloon them (same fix as the logos). */
.footer-cert {
	max-height: 3rem; /* 48px */
	width: auto;
}
/* The Specialty Coffee Association mark ships as a white logo; darken it so it
   reads on the light footer. */
.footer-cert--dark {
	filter: brightness(0);
	opacity: 0.5;
}

/* Single-product gallery image: cap height and centre it, matching the
   blog featured image treatment. The :not(.zoomImg) guard keeps these rules
   off the hover-zoom clone (see below), which sizes itself. */
.woocommerce div.product .woocommerce-product-gallery__image img:not(.zoomImg) {
	max-height: 400px;
	width: auto;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 40px; /* breathing room below the image */
	border-radius: 1rem; /* rounded-2xl */
	object-fit: contain;
}

/* Hover-zoom (wc-product-gallery-zoom): jQuery.zoom appends a magnified
   `.zoomImg` clone, absolutely positioned over the main image and sized with
   inline `max-width/height:none`. Clip it to the image box so it can't spill
   over the page, and strip the contain/padding/rounding our img rule would
   otherwise leak onto it (it needs to cover, not contain). */
.woocommerce div.product .woocommerce-product-gallery__image {
	position: relative;
	overflow: hidden;
	border-radius: 1rem;
}

.woocommerce div.product .woocommerce-product-gallery__image .zoomImg {
	padding: 0;
	border-radius: 0;
	object-fit: cover;
}

/* Tailwind's Preflight zeroes default margins, which bunches the single-
   product content together. Restore comfortable spacing: a gap under the
   gallery and even vertical rhythm between the summary items (title, price,
   short description, add-to-cart, meta). */
.woocommerce div.product .woocommerce-product-gallery {
	margin-bottom: 2rem;
}

.woocommerce div.product .summary > * + * {
	margin-top: 1rem;
}

/* Gallery thumbnails: space below the main image and gaps between thumbs.
   Padding on the floated <li> keeps WooCommerce's column widths intact. */
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs {
	margin-top: 1rem;
}

.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li {
	box-sizing: border-box;
	padding: 0.25rem;
}

/* Product tabs rendered as an accordion (markup: woocommerce/single-product/
   tabs/tabs.php) so the labels never wrap on mobile. Colours use the theme
   palette: surface #E0D6C8, ink #23241F. */
.woocommerce div.product .wc-tabs-accordion {
	margin-top: 2rem;
	border-top: 1px solid #E0D6C8;
}

.woocommerce div.product .wc-accordion-item {
	border-bottom: 1px solid #E0D6C8;
}

.woocommerce div.product .wc-accordion-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 1rem 0.25rem;
	cursor: pointer;
	font-weight: 600;
	color: #23241F;
	list-style: none; /* hide the default disclosure triangle (Firefox) */
}

/* Hide the default disclosure triangle (WebKit/Blink). */
.woocommerce div.product .wc-accordion-title::-webkit-details-marker {
	display: none;
}

/* Chevron that rotates when the item is open. */
.woocommerce div.product .wc-accordion-title::after {
	content: "";
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.woocommerce div.product .wc-accordion-item[open] .wc-accordion-title::after {
	transform: rotate(-135deg);
}

.woocommerce div.product .wc-accordion-item > .woocommerce-Tabs-panel {
	padding: 0 0.25rem 1.5rem;
}

/* The accordion <summary> already shows "Reviews"; hide WooCommerce's in-panel
   reviews title (no filter exists for it) to avoid the duplicate. */
.woocommerce div.product #reviews .woocommerce-Reviews-title {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Shop header — page title, result count & sorting dropdown.
 *
 * Styles WooCommerce's default archive header (the "Shop" title, the
 * "Showing all N results" count and the "Default sorting" <select>) to
 * match the theme: charcoal title, muted count, mocha-bordered select.
 * ------------------------------------------------------------------ */
/* Centered, all-caps title with the burgundy accent rule used on the home
 * "BEST SELLER" heading (home/products.php) — keeps the shop on-brand.
 * Scoped to the product archives; the actual markup is a bare
 * <h1 class="page-title"> (no .woocommerce-products-header wrapper). */
.post-type-archive-product .page-title,
.tax-product_cat .page-title,
.tax-product_tag .page-title,
.woocommerce-products-header__title.page-title {
	text-align: center;
	font-size: 1.875rem;
	line-height: 1.2;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #23241F; /* ink */
	margin: 0 0 2rem;
}
@media (min-width: 640px) {
	.post-type-archive-product .page-title,
	.tax-product_cat .page-title,
	.tax-product_tag .page-title,
	.woocommerce-products-header__title.page-title { font-size: 2.25rem; }
}
.post-type-archive-product .page-title::after,
.tax-product_cat .page-title::after,
.tax-product_tag .page-title::after,
.woocommerce-products-header__title.page-title::after {
	content: "";
	display: block;
	width: 4rem;
	height: 0.25rem;
	margin: 1rem auto 0;
	border-radius: 9999px;
	background-color: #84161B; /* accent */
}

/* Toolbar (result count + sorting). Mobile-first: stacked with breathing
 * room and a full-width dropdown; side-by-side on >=640px. */
/* The `.woocommerce`/`.woocommerce-page` prefix is required to beat WC's own
 * `.woocommerce .woocommerce-result-count { float:left }` etc. (matches their
 * specificity, then wins on source order since style.css loads last). */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
	float: none;
	display: block;
	margin: 0 0 0.75rem;
	color: #7B7B7B; /* muted */
	font-size: 0.875rem;
	text-align: center;
}
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
	float: none;
	margin: 0 0 2rem;
	text-align: center;
}
@media (min-width: 640px) {
	.woocommerce .woocommerce-result-count,
	.woocommerce-page .woocommerce-result-count {
		float: left;
		margin-bottom: 1.5rem;
		line-height: 2.5rem; /* vertically centre against the select */
		text-align: left;
	}
	.woocommerce .woocommerce-ordering,
	.woocommerce-page .woocommerce-ordering {
		float: right;
		margin-bottom: 1.5rem;
		text-align: right;
	}
}

/* The sorting <select> — clean bordered control with a custom caret. */
.woocommerce-ordering select.orderby,
.woocommerce-ordering select {
	width: auto;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	border: 1px solid #E0D6C8; /* surface */
	border-radius: 0.5rem;
	background-color: #fff;
	color: #23241F; /* ink */
	font-size: 0.875rem;
	font-weight: 500;
	padding: 0.5rem 2.25rem 0.5rem 0.875rem;
	/* caret */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237B7B7B' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.625rem center;
	background-size: 1rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.woocommerce-ordering select.orderby:hover,
.woocommerce-ordering select:hover {
	border-color: #C8893E; /* caramel */
}
.woocommerce-ordering select.orderby:focus,
.woocommerce-ordering select:focus {
	outline: none;
	border-color: #84161B; /* accent */
	box-shadow: 0 0 0 3px rgba(132, 22, 27, 0.15);
}

/* Thin divider between the toolbar and the product grid (archive pages only,
 * so single-product related/upsell grids are left untouched). */
/* `body` prefix raises specificity above the base `.woocommerce ul.products
 * { padding: 0 }` rule below, so padding-top (space under the line) sticks. */
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products,
body.tax-product_tag ul.products {
	border-top: 1px solid #E0D6C8; /* surface */
	margin-top: 1rem;
	padding-top: 2rem;
}

/* ------------------------------------------------------------------ *
 * Product loop cards — shop archive, related products, [products].
 *
 * Clean white card grid: rounded image, title, price, accent button.
 * Replaces WooCommerce's float layout with a responsive grid so the cards
 * never collapse sideways. (The front-page strip uses its own markup in
 * home/products.php and is unaffected by these rules.)
 * ------------------------------------------------------------------ */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}
/* WooCommerce's float-layout clearfix pseudo-elements become stray grid cells
 * under display:grid (an empty box before the first product). Remove them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none !important;
	display: none !important;
}
@media (min-width: 768px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.woocommerce ul.products.columns-1,
	.woocommerce-page ul.products.columns-1 { grid-template-columns: minmax(0, 1fr); }
	.woocommerce ul.products.columns-2,
	.woocommerce-page ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.woocommerce ul.products.columns-3,
	.woocommerce-page ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.woocommerce ul.products.columns-5,
	.woocommerce-page ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	text-align: center;
	background: #fff;
	border: 1px solid rgba(35, 36, 31, 0.06);
	border-radius: 1rem;
	padding: 1rem;
	box-shadow: 0 1px 2px rgba(35, 36, 31, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(35, 36, 31, 0.12);
}

.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0.75rem;
	margin: 0 0 0.75rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem;
	font-weight: 600;
	color: #23241F;
	padding: 0;
	margin: 0 0 0.25rem;
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
	color: #23241F;
	font-weight: 700;
	margin: 0 0 0.75rem;
}
.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del {
	color: #7B7B7B;
	font-weight: 400;
}

.woocommerce ul.products li.product a.button,
.woocommerce-page ul.products li.product a.button {
	margin-top: auto;
	display: inline-block;
	background: #84161B;
	color: #fff;
	border-radius: 0.5rem;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce-page ul.products li.product a.button:hover {
	opacity: 0.9;
}

/* The loop button no longer carries WooCommerce's `button` class — the theme
 * swaps it out (slate_sky_loop_add_to_cart_args) so archives match the home
 * cards — so the `a.button` rule above no longer reaches it, including its
 * `margin-top: auto`. Re-apply just that on the class the button now has, so the
 * CTA still pins to the card bottom and buttons line up across a row even when
 * titles wrap to different heights. The button's own utility classes keep its
 * look, so only the alignment is set here. */
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce-page ul.products li.product a.add_to_cart_button {
	margin-top: auto;
}

/* ------------------------------------------------------------------ *
 * Single product page — themed title, price, buttons and section heads.
 * ------------------------------------------------------------------ */
.woocommerce div.product .product_title {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.15;
	color: #23241F;
	margin: 0 0 0.5rem;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: #84161B;
	font-weight: 700;
	font-size: 1.5rem;
}
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
	background: #84161B;
	color: #fff;
	border-radius: 0.5rem;
	font-weight: 600;
	padding: 0.75rem 1.5rem;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
	opacity: 0.9;
}
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
	font-size: 1.5rem;
	font-weight: 600;
	color: #23241F;
	margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------------ *
 * WooCommerce's injected "View cart" link.
 *
 * After an AJAX add-to-cart, wc-add-to-cart.js appends an <a.added_to_cart>
 * beside the button. The bottom cart dock (footer/cart-bar.php) covers that
 * job now — a persistent bar with a View cart CTA, plus the toast — so the
 * injected link is redundant and stacks awkwardly under every button.
 *
 * Hidden in CSS rather than unhooked in PHP because the link has no
 * server-side filter: it's appended client-side from the AJAX response.
 * Stripping it in our own added_to_cart handler would race WooCommerce's and
 * let it flash visibly first; display:none can't.
 *
 * The second selector is needed on archives: WooCommerce core ships
 * `.woocommerce a.added_to_cart { display:inline-block }` (specificity 0,2,1),
 * which out-specifies the bare rule (0,2,0) under the shop's `.woocommerce`
 * wrapper and forces the link back into view. Scoping our own rule the same way
 * (0,3,1) wins it back. (The home page has no `.woocommerce` ancestor, so the
 * bare rule already suffices there.)
 * ------------------------------------------------------------------ */
.added_to_cart.wc-forward,
.woocommerce a.added_to_cart.wc-forward {
	display: none;
}

/* ------------------------------------------------------------------ *
 * "Added" confirmation checkmark on the loop add-to-cart button.
 *
 * WooCommerce's own checkmark rides on its `.button` class, which we drop from
 * the loop buttons (functions.php: slate_sky_loop_add_to_cart_args) so the shop
 * archive matches the home page's hand-rolled buttons. This repaints the mark on
 * the class both share instead — `.add_to_cart_button` plus the `.added` state
 * wc-add-to-cart.js sets after a successful add — so it shows identically on the
 * shop AND home cards without reintroducing `.button` (and its View-cart-arrow
 * and hover styling). Self-drawn glyph, so it needs no WooCommerce icon font.
 * ------------------------------------------------------------------ */
.add_to_cart_button.added::after {
	content: "\2713";
	margin-left: 0.4em;
	font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * Bottom cart dock (footer/cart-bar.php).
 *
 * Visibility is handled here rather than with Tailwind's `hidden` so both
 * pieces can animate:
 *
 * - The bar is *replaced* wholesale by the add-to-cart fragment, so a CSS
 *   transition has nothing to transition from. A keyframe animation instead
 *   plays on insert, which means every add re-triggers the slide for free —
 *   no JS involved.
 * - The toast is a persistent element that JS toggles, so it can use a plain
 *   transition (assets/js/cart-toast.js mounts it a frame early so the
 *   pre-transition state gets painted).
 * ------------------------------------------------------------------ */
@keyframes slate-sky-dock-in {
	from { opacity: 0; transform: translateY(120%); }
	to   { opacity: 1; transform: translateY(0); }
}

.slate-sky-cart-bar {
	display: none;
}
.slate-sky-cart-bar.is-visible {
	display: flex;
	animation: slate-sky-dock-in 0.3s ease-out;
}

.slate-sky-toast {
	display: none;
	opacity: 0;
	transform: translateY(120%);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.slate-sky-toast.is-mounted {
	display: flex;
}
.slate-sky-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* The dock is fixed, so reserve room or it sits on top of the footer.
   Toggled on <body> by cart-toast.js in step with the bar. */
body.has-cart-bar {
	padding-bottom: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.slate-sky-cart-bar.is-visible { animation: none; }
	.slate-sky-toast { transition: none; }
}

/* ------------------------------------------------------------------ *
 * Parchment panel (home/wholesale.php).
 *
 * Pure-CSS aged-paper look: warm tan base, soft mottled radial gradients
 * so it isn't flat, an inner vignette, a faint paper-edge border, and a
 * drop shadow so the panel lifts off the page like a mounted poster.
 * ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ *
 * Cart / Checkout (WooCommerce Blocks).
 *
 * Centre the page title to match the centred divider/content, and give the
 * "Proceed to Checkout" / "Place order" buttons the accent fill with white
 * text (the block default rendered dark-on-dark here).
 * ------------------------------------------------------------------ */
.woocommerce-cart .hentry > header,
.woocommerce-checkout .hentry > header {
	text-align: center;
}

.wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button,
.wp-block-woocommerce-checkout-actions-block .wc-block-components-button,
.wc-block-components-button.contained,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order {
	background-color: #84161B !important;
	background-image: none !important; /* kill the block's dark gradient */
	color: #fff !important;
	border-radius: 0.5rem;
}
.wc-block-components-button .wc-block-components-button__text,
.wc-block-cart__submit-button .wc-block-components-button__text {
	color: #fff !important;
}

/* Product-grid buttons (e.g. the empty-cart "New in store" block): the
   "Read more" / add-to-cart links render dark-on-dark by default. */
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wp-block-button__link.add_to_cart_button {
	background-color: #84161B !important;
	background-image: none !important;
	color: #fff !important;
	border-radius: 0.5rem;
}
.wc-block-grid__product .wp-block-button__link:hover,
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wp-block-button__link.add_to_cart_button:hover {
	opacity: 0.9;
}
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-container .wc-block-components-button:hover,
.wp-block-woocommerce-checkout-actions-block .wc-block-components-button:hover,
.wc-block-components-button.contained:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #place_order:hover {
	opacity: 0.9;
}

.parchment {
	background-color: #e7d9bb;
	background-image:
		radial-gradient( ellipse at 50% 0%, rgba( 255, 252, 240, 0.55 ), transparent 60% ),
		radial-gradient( ellipse at 85% 90%, rgba( 150, 118, 70, 0.18 ), transparent 55% ),
		radial-gradient( ellipse at 12% 82%, rgba( 150, 118, 70, 0.15 ), transparent 55% );
	box-shadow:
		inset 0 0 70px rgba( 120, 90, 50, 0.28 ),
		0 22px 45px rgba( 35, 36, 31, 0.20 );
	border: 1px solid #cbb487;
}

/* ------------------------------------------------------------------ *
 * Single product add-to-cart row.
 *
 * Lay the quantity field and the Add-to-cart button on one line at the
 * same height so they read as a matched pair, and theme the quantity box
 * with the surface border / ink text.
 *
 * :not(.variations_form) matters — WooCommerce gives the variable product
 * form BOTH classes, and its children are the attributes table, the reset
 * alert and the price/button block. Flexing those turns a stacked form into
 * a sideways row. The variations form gets its own rules below; only the
 * inner .woocommerce-variation-add-to-cart row wants this treatment.
 * ------------------------------------------------------------------ */
.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.woocommerce div.product form.cart div.quantity {
	margin: 0;
	float: none;
}
.woocommerce div.product form.cart .quantity .qty {
	box-sizing: border-box;
	height: 3rem;
	width: 5rem;
	padding: 0 0.5rem;
	text-align: center;
	color: #23241F;
	background: #fff;
	border: 1px solid #E0D6C8;
	border-radius: 0.5rem;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	height: 3rem;
	padding: 0 1.75rem;
}

/* ------------------------------------------------------------------ *
 * Variable product: attribute picker (e.g. Size — 250g / 500g / 1kg).
 *
 * WooCommerce renders a <table class="variations"> of label/select rows,
 * then a .single_variation_wrap holding the resolved price and the
 * add-to-cart row. None of it was styled — the selects fell back to raw
 * browser chrome inside the theme's parchment palette.
 * ------------------------------------------------------------------ */
.woocommerce div.product form.cart table.variations {
	width: 100%;
	margin: 0 0 1.25rem;
	border: 0;
	border-collapse: collapse;
}
.woocommerce div.product form.cart table.variations tr {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0;
	border: 0;
}
.woocommerce div.product form.cart table.variations th.label,
.woocommerce div.product form.cart table.variations td.value {
	padding: 0;
	border: 0;
	text-align: left;
}
.woocommerce div.product form.cart table.variations th.label {
	flex: 0 0 6rem;
	font-weight: 600;
	color: #23241F;
}
.woocommerce div.product form.cart table.variations td.value {
	flex: 1 1 12rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}
.woocommerce div.product form.cart table.variations select {
	box-sizing: border-box;
	min-width: 10rem;
	height: 3rem; /* match .qty and the add-to-cart button */
	padding: 0 2rem 0 0.75rem;
	color: #23241F;
	background-color: #fff;
	border: 1px solid #E0D6C8;
	border-radius: 0.5rem;
	font-size: 0.9375rem;
	/* Custom caret: appearance:none drops the native one. */
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237B7B7B' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.625rem center;
	background-size: 1rem;
}
.woocommerce div.product form.cart table.variations select:focus {
	outline: 2px solid #84161B;
	outline-offset: 1px;
}
.woocommerce div.product form.cart .reset_variations {
	font-size: 0.8125rem;
	color: #7B7B7B;
	text-decoration: underline;
}
.woocommerce div.product form.cart .reset_variations:hover {
	color: #84161B;
}
.woocommerce div.product form.cart .woocommerce-variation-price {
	margin-bottom: 0.75rem;
}
.woocommerce div.product form.cart .woocommerce-variation-availability p {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	color: #7B7B7B;
}

/* ------------------------------------------------------------------ *
 * Gallery block: force every image to a uniform 16:9 crop.
 * Covers cropped and uncropped galleries, plus the legacy gallery
 * shortcode markup. Applies in page/post content only.
 * ------------------------------------------------------------------ */
.wp-block-gallery.is-cropped .wp-block-image img,
.wp-block-gallery .wp-block-image img,
.wp-block-gallery figure.wp-block-image img,
.blocks-gallery-item img,
.gallery .gallery-item img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

/* ------------------------------------------------------------------ *
 * Video / embed blocks: add vertical spacing so they don't sit flush
 * against the gallery, and frame them to match (16:9, rounded crop).
 * ------------------------------------------------------------------ */
.wp-block-video,
.wp-block-embed {
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
}
.wp-block-video video,
.wp-block-embed iframe,
.wp-block-embed__wrapper iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0.75rem;
}

/* ------------------------------------------------------------------ *
 * Page logo mark (title-area logo on cart / checkout / content pages).
 * WooCommerce's global ".woocommerce-page img" rule outranks Tailwind's
 * h-20/h-24 utility, so the logo balloons to full size on cart/checkout.
 * Pin it to the same size as elsewhere with !important to win.
 * ------------------------------------------------------------------ */
.page-logo-mark {
	height: 5rem !important;
	width: auto !important;
	max-width: 100%;
	object-fit: contain;
}
@media ( min-width: 768px ) {
	.page-logo-mark {
		height: 6rem !important;
	}
}

/* ------------------------------------------------------------------ *
 * Empty-cart "New in store" product grid.
 * Keep WooCommerce's native column layout; only make every card the same
 * height (match the tallest in the row), pin prices to the bottom so they
 * line up, square the thumbnails, and add neat spacing/padding.
 * ------------------------------------------------------------------ */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
	align-items: stretch; /* equal-height cards per row */
	margin-top: 1.5rem;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 0.75rem;
	text-align: center;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0.5rem;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
	margin: 0.6rem 0;
}
/* Pin price to the bottom so every card's price aligns on one line. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
	margin-top: auto;
}

/* ------------------------------------------------------------------ *
 * Content-gallery lightbox (assets/js/lightbox.js).
 * Self-contained replacement for WP core's "click to expand" lightbox.
 * ------------------------------------------------------------------ */
/* Show a zoom cursor on clickable content-gallery images. */
.wp-block-gallery figure.wp-block-image img,
figure.wp-block-image img {
	cursor: zoom-in;
}

.ss-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: rgba(20, 16, 12, 0.92);
}
.ss-lightbox.is-open {
	display: flex;
}

.ss-lightbox__stage {
	max-width: 92vw;
	max-height: 88vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ss-lightbox__stage img {
	max-width: 92vw;
	max-height: 88vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 0.5rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	cursor: zoom-in;
	transition: transform 0.2s ease;
}
.ss-lightbox__stage img.is-zoomed {
	transform: scale(1.8);
	cursor: zoom-out;
}

.ss-lightbox__close,
.ss-lightbox__nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	border-radius: 9999px;
	transition: background 0.15s ease;
}
.ss-lightbox__close:hover,
.ss-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.28);
}
.ss-lightbox__close {
	top: 1rem;
	right: 1rem;
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.75rem;
	line-height: 1;
}
.ss-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	font-size: 2rem;
	line-height: 1;
}
.ss-lightbox__prev {
	left: 1rem;
}
.ss-lightbox__next {
	right: 1rem;
}

/* ------------------------------------------------------------------ *
 * Member area — WooCommerce My Account, login & registration.
 * Themed to match deWA Koffie (burgundy accent #84161B, surface #E0D6C8).
 * ------------------------------------------------------------------ */

/* Page title (My account / etc.) centred to match shop/cart. */
.woocommerce-account .woocommerce > h2,
.woocommerce-account .entry-title {
	text-align: center;
}

/* Logged-out: centre the login/register columns and cap the width.
   WooCommerce floats .col-1 / .col-2 with fixed percentage widths; we override
   with flex + !important so they sit as a clean, equal side-by-side (stacked on
   mobile) that WC's float rules can't break. */
.woocommerce-account:not(.logged-in) .woocommerce {
	max-width: 60rem;
	margin-left: auto;
	margin-right: auto;
}
.woocommerce-account:not(.logged-in) #customer_login.col2-set {
	display: flex !important;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: flex-start;
}
.woocommerce-account:not(.logged-in) #customer_login.col2-set > .col-1,
.woocommerce-account:not(.logged-in) #customer_login.col2-set > .col-2 {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
@media ( min-width: 768px ) {
	.woocommerce-account:not(.logged-in) #customer_login.col2-set > .col-1,
	.woocommerce-account:not(.logged-in) #customer_login.col2-set > .col-2 {
		width: calc(50% - 1.75rem) !important;
	}
}
.woocommerce-account #customer_login h2 {
	font-size: 1.25rem;
	font-weight: 700;
	color: #23241F;
	margin: 0 0 0.75rem;
}

/* Login / register form cards. */
.woocommerce form.login,
.woocommerce form.register {
	border: 1px solid #E0D6C8;
	border-radius: 1rem;
	padding: 1.75rem;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Form fields. */
.woocommerce form .form-row {
	margin-bottom: 1rem;
}
.woocommerce form .form-row label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #23241F;
}
.woocommerce form .form-row .required {
	color: #84161B;
	text-decoration: none;
	border: 0;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="password"],
.woocommerce-account .woocommerce-Address-fields input.input-text,
.woocommerce-account .woocommerce select,
.woocommerce-account .woocommerce textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.625rem 0.85rem;
	border: 1px solid #E0D6C8;
	border-radius: 0.625rem;
	background: #fff;
	color: #23241F;
	font-size: 0.95rem;
	line-height: 1.4;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce-account .woocommerce input.input-text:focus,
.woocommerce-account .woocommerce select:focus,
.woocommerce-account .woocommerce textarea:focus {
	outline: none;
	border-color: #84161B;
	box-shadow: 0 0 0 3px rgba(132, 22, 27, 0.15);
}

/* Two-up first/last name rows on the register form. */
@media ( min-width: 480px ) {
	.woocommerce form .form-row-first {
		width: 48%;
		float: left;
		margin-right: 4%;
	}
	.woocommerce form .form-row-last {
		width: 48%;
		float: right;
	}
	.woocommerce form .form-row-wide,
	.woocommerce form p.form-row:not(.form-row-first):not(.form-row-last) {
		clear: both;
	}
}

/* Buttons (login, register, save changes, etc.). */
.woocommerce-account .woocommerce .button,
.woocommerce form.login .button,
.woocommerce form.register .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #84161B;
	color: #fff;
	border: 0;
	border-radius: 0.625rem;
	padding: 0.7rem 1.5rem;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.woocommerce-account .woocommerce .button:hover,
.woocommerce form.login .button:hover,
.woocommerce form.register .button:hover {
	opacity: 0.9;
	background: #84161B;
}

/* "Remember me" + lost password row. */
.woocommerce form.login .woocommerce-form-login__rememberme {
	display: inline-block;
	margin: 0.25rem 0 1rem;
	font-size: 0.85rem;
	color: #7B7B7B;
}

/* --- Logged-in dashboard: nav (30%) + content (67%) ----------------
   Float-based so it works regardless of which element wraps the nav/content
   (WooCommerce's own approach). Mobile: both stack full-width. Desktop: nav
   floats left at 30%, content right at 67% (3% gutter). */

/* Mobile: stacked, full width. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
	box-sizing: border-box;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
	margin-bottom: 1.5rem;
}

@media ( min-width: 768px ) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: left;
		width: 30%;
		margin-bottom: 0;
	}
	.woocommerce-account .woocommerce-MyAccount-content {
		float: right;
		width: 67%;
	}
	/* Clear the floats on whatever wraps them (parent and the page article) so
	   the footer can't ride up under the columns. */
	.woocommerce-account .woocommerce::after,
	.woocommerce-account article.page::after,
	.woocommerce-account .hentry::after {
		content: "";
		display: table;
		clear: both;
	}
}

/* Content column is a card so every tab is wrapped consistently (like the
   Orders box), with a maroon top accent and a min-height so short tabs fill
   down to roughly the menu's height. */
.woocommerce-account .woocommerce-MyAccount-content {
	background: #fff;
	border: 1px solid #E0D6C8;
	border-top: 3px solid #84161B;
	border-radius: 0.875rem;
	padding: 1.5rem;
	min-height: 20rem;
}
/* Notices sit flush inside that card instead of being their own boxed panel
   (so the empty Orders state isn't a double border). */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0 0 1rem;
	background: transparent;
}
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid #E0D6C8;
	border-radius: 0.875rem;
	overflow: hidden;
	background: #fff;
}
.woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid #E0D6C8;
}
.woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.75rem 1.1rem;
	color: #23241F;
	font-weight: 500;
	text-decoration: none;
}
.woocommerce-MyAccount-navigation li a:hover {
	background: #F6F6F5;
	color: #84161B;
}
.woocommerce-MyAccount-navigation li.is-active a {
	background: #84161B;
	color: #fff;
}

/* --- Points (My Account → My Points + dashboard badge) ------------ */
.slate-sky-points__balance {
	font-size: 1.05rem;
	color: #23241F;
}
.slate-sky-points__balance span {
	font-size: 2.5rem;
	font-weight: 700;
	color: #84161B;
	display: block;
	line-height: 1.1;
}
.slate-sky-points__note {
	color: #7B7B7B;
	font-size: 0.9rem;
}
.woocommerce-account .woocommerce-MyAccount-content p.slate-sky-points-badge {
	display: inline-block;
	border: 1px solid #E0D6C8;
	background: #fff;
	border-radius: 0.75rem;
	padding: 0.85rem 1.1rem;
	margin: 0.5rem 0 1.25rem;
}
.slate-sky-points-badge a {
	color: #84161B;
	font-weight: 600;
	margin-left: 0.25rem;
}
.slate-sky-points__subhead {
	margin: 1.75rem 0 0.75rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: #23241F;
}
.slate-sky-points__tiers,
.slate-sky-points__vouchers {
	list-style: none;
	margin: 0;
	padding: 0;
}
.slate-sky-points__tier {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.85rem;
	border: 1px solid #E0D6C8;
	background: #fff;
	border-radius: 0.75rem;
	padding: 0.85rem 1.1rem;
	margin-bottom: 0.6rem;
}
.slate-sky-points__tier-label {
	font-weight: 600;
	color: #23241F;
}
.slate-sky-points__tier-cost {
	color: #7B7B7B;
	font-size: 0.9rem;
}
.slate-sky-points__redeem {
	margin: 0 0 0 auto;
}
.slate-sky-points__vouchers li {
	border: 1px solid #E0D6C8;
	background: #fff;
	border-radius: 0.6rem;
	padding: 0.6rem 0.9rem;
	margin-bottom: 0.5rem;
}
.slate-sky-points__vouchers code {
	font-weight: 700;
	color: #84161B;
}

/* Cart/checkout banner projecting points earned from the current cart. */
.slate-sky-points-banner {
	margin-bottom: 1.5rem;
	padding: 0.85rem 1.1rem;
	border: 1px solid #E0D6C8;
	border-radius: 0.75rem;
	background: #FBF6EE;
}
.slate-sky-points-banner__amount {
	margin: 0;
	font-weight: 700;
	color: #84161B;
}
.slate-sky-points-banner__note {
	margin: 0.25rem 0 0;
	font-size: 0.85rem;
	color: #7B7B7B;
}

/* WooCommerce notice boxes (e.g. "No order has been made yet.", empty cart,
   messages). WC floats the action button and adds an absolute icon, which
   overlaps on narrow screens. Lay them out as a clean, wrapping flex row:
   text on the left, button pushed right (drops below on mobile). */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid #E0D6C8;
	border-top: 3px solid #84161B;
	border-radius: 0.75rem;
	background: #fff;
	color: #23241F;
	list-style: none;
}
/* Drop WooCommerce's absolutely-positioned pseudo icon (it overlaps the text
   once we control the padding). */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-noreviews::before {
	display: none;
}
.woocommerce-info .button,
.woocommerce-message .button {
	order: 2; /* place the action after the message text */
	margin-left: auto; /* push it to the right edge on a wide row */
	float: none !important;
}
@media ( max-width: 479px ) {
	.woocommerce-info .button,
	.woocommerce-message .button {
		margin-left: 0;
		width: 100%; /* full-width, tappable button on small phones */
		text-align: center;
	}
}

/* --- My Account content: consistent headings, orders, addresses ---- */

/* Section headings + intro copy inside the content column. */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: #23241F;
	margin: 0 0 0.75rem;
}
.woocommerce-MyAccount-content > p {
	color: #7B7B7B;
	line-height: 1.6;
	margin: 0 0 1rem;
}

/* Orders table — themed to match the rest of the UI. */
.woocommerce-account .woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #E0D6C8;
	border-radius: 0.75rem;
	overflow: hidden;
}
.woocommerce-account .woocommerce-orders-table th {
	background: #F6F6F5;
	text-align: left;
	padding: 0.8rem 1rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #7B7B7B;
	border-bottom: 1px solid #E0D6C8;
}
.woocommerce-account .woocommerce-orders-table td {
	padding: 0.9rem 1rem;
	border-top: 1px solid #E0D6C8;
	color: #23241F;
}
.woocommerce-account .woocommerce-orders-table .button {
	background: #84161B;
	color: #fff;
	border-radius: 0.5rem;
	padding: 0.4rem 0.9rem;
	font-size: 0.8rem;
	font-weight: 600;
}

/* Addresses — stack on mobile, two themed cards on desktop. */
.woocommerce-account .woocommerce-Addresses {
	margin-top: 1rem;
}
.woocommerce-account .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-Addresses .col-2 {
	box-sizing: border-box;
}
/* Desktop keeps WooCommerce's native 47%/47% float side-by-side; only stack
   on mobile (don't flex the col2-set — its clearfix ::before/::after would
   become stray flex items and break the columns). */
@media ( max-width: 767px ) {
	.woocommerce-account .woocommerce-Addresses .col-1,
	.woocommerce-account .woocommerce-Addresses .col-2 {
		float: none;
		width: 100%;
	}
	.woocommerce-account .woocommerce-Addresses .col-1 {
		margin-bottom: 1.5rem;
	}
}
.woocommerce-account .woocommerce-Address {
	border: 1px solid #E0D6C8;
	border-radius: 0.875rem;
	background: #fff;
	padding: 1.25rem;
	height: 100%;
}
/* Plain stacked block: title, then the Edit link beneath it, then the address —
   all flush-left in normal flow (no flex / no margin push). */
.woocommerce-account .woocommerce-Address-title {
	margin: 0 0 0.5rem;
	padding: 0;
	text-indent: 0;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
	margin: 0;
	padding: 0;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
	margin: 0;
	padding: 0;
	text-indent: 0;
}
.woocommerce-account .woocommerce-Address-title .edit {
	display: inline-block;
	margin-top: 0.25rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #84161B;
	float: none !important; /* cancel WooCommerce's default .title .edit float */
}
.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	line-height: 1.6;
	color: #23241F;
	margin: 0;
	padding: 0;
}

/* Labeled address fields, each on its own background row — shared between
   My Account → Addresses (woocommerce/myaccount/my-address.php) and order
   billing/shipping details (woocommerce/order/order-details-customer.php),
   so it reads like a set of fields instead of one unlabeled paragraph. */
.slate-sky-address-fields {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.slate-sky-address-field {
	display: flex;
	gap: 0.5rem;
	background: #F6F6F5;
	border: 1px solid #E0D6C8;
	border-radius: 0.5rem;
	padding: 0.6rem 0.9rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #23241F;
}
.slate-sky-address-field__label {
	flex: 0 0 auto;
	min-width: 5.5rem;
	font-weight: 600;
	color: #7B7B7B;
}
.slate-sky-address-field__value {
	flex: 1 1 auto;
}

/* Single-address shop (see slate_sky_single_address()): the one address card
   should take the full content width instead of sitting in a half-width
   column with empty space beside it. */
.woocommerce-account .woocommerce-Address.slate-sky-Address--full {
	width: 100%;
	float: none;
}

/* Edit-account / address form: cap to a comfortable reading width so the
   fields aren't stretched edge to edge on wide screens. */
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields {
	max-width: 40rem;
}

/* Field helper/description text (e.g. "This will be how your name is displayed").
   Separate it from the input above and give it muted, smaller styling. */
.woocommerce-account .woocommerce-form-row span[id$="_description"],
.woocommerce-account .woocommerce-form-row .description {
	display: block;
	margin-top: 0.4rem;
	color: #7B7B7B;
	font-size: 0.85rem;
	line-height: 1.5;
}
.woocommerce-account .woocommerce-form-row span[id$="_description"] em {
	font-style: italic;
}

/* Order details + billing address — shared markup between the order-received
   ("thank you") page and My Account → View Order, so these aren't scoped to
   either page's wrapper class; themed to match the rest of the UI. */
.woocommerce-order-details__title,
.woocommerce-column__title {
	font-size: 1.125rem;
	font-weight: 700;
	color: #23241F;
	margin: 0 0 0.75rem;
}
table.shop_table.order_details {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #E0D6C8;
	border-radius: 0.875rem;
	overflow: hidden;
	background: #fff;
}
table.shop_table.order_details thead th {
	background: #F6F6F5;
	text-align: left;
	padding: 0.8rem 1rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #7B7B7B;
	border-bottom: 1px solid #E0D6C8;
}
table.shop_table.order_details td,
table.shop_table.order_details tfoot th {
	padding: 0.8rem 1rem;
	border-top: 1px solid #E0D6C8;
	color: #23241F;
	font-size: 0.9rem;
	text-align: left;
}
table.shop_table.order_details tfoot tr:last-child th,
table.shop_table.order_details tfoot tr:last-child td {
	font-weight: 700;
}
.woocommerce-customer-details address {
	border: 1px solid #E0D6C8;
	border-radius: 0.875rem;
	background: #fff;
	padding: 1.25rem;
	font-style: normal;
	line-height: 2.5;
	color: #23241F;
}

/* Checkout payment methods — breathing room between each gateway row, its
   description box, and the place-order section below. */
.woocommerce-checkout-payment ul.wc_payment_methods {
	margin: 0 0 1rem;
}
.woocommerce-checkout-payment ul.wc_payment_methods li.wc_payment_method {
	margin-bottom: 0.75rem;
	padding-bottom: 0.75rem;
}
.woocommerce-checkout-payment ul.wc_payment_methods li.wc_payment_method:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}
.woocommerce-checkout-payment ul.wc_payment_methods .payment_box {
	margin-top: 0.6rem;
	padding: 0.9rem 1rem;
	border-radius: 0.5rem;
}
.woocommerce-checkout-payment .form-row.place-order {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #E0D6C8;
}
.woocommerce-checkout-payment .form-row.place-order #place_order {
	margin-top: 20px;
}

/* Order-received page — order overview line, the BACS instructions
   paragraph right after it, and the "Our bank details" box (heading,
   account-name h3, and the field list), all squeezed together by default.
   Styling the actual visible elements directly (rather than the wrapping
   <section>'s margin) since the WP DevTools show the heading's own margin
   was collapsing straight through the section and cancelling it out. */
.woocommerce-order-overview {
	margin-bottom: 1.5rem;
}
.woocommerce-order-overview + p {
	margin-top: 1.5rem;
}
.woocommerce-bacs-bank-details {
	display: flow-root;
	margin: 1rem 0 1.5rem;
}
.woocommerce-bacs-bank-details .wc-bacs-bank-details-heading {
	margin-top: 0;
	margin-bottom: 0.75rem;
}
.woocommerce-bacs-bank-details .wc-bacs-bank-details-account-name {
	margin-top: 0;
	margin-bottom: 0.5rem;
}
.woocommerce-bacs-bank-details ul.wc-bacs-bank-details {
	margin: 0;
	padding-left: 0;
	list-style: none;
}
.woocommerce-bacs-bank-details ul.wc-bacs-bank-details li {
	margin-bottom: 0.4rem;
}