/*
Theme Name: EliteTableTop
Theme URI: https://elitetabletop.com
Description: Child theme for Kadence. Copper / bone / charcoal design system built for a
             boutique board game, miniatures and hobby paint shop.
Author: EliteTableTop
Template: kadence
Version: 1.2.8
License: GNU General Public License v3.0 (or later)
Text Domain: elitetabletop-child
*/

/* ==========================================================================
   CONTENTS
   01  Design tokens
   02  Kadence palette mapping
   03  Typography
   04  Header + navigation
   05  Buttons + links
   06  Page hero / title area
   07  Shop archive: grid + product cards      <- signature notch lives here
   08  Single product page                     <- notifier form lives here
   09  Cart / checkout / account
   10  Footer
   11  Reusable blocks (use these in Kadence Blocks)
   12  Focus, motion, responsive
   ========================================================================== */


/* ==========================================================================
   01  DESIGN TOKENS
   Change a value here and it propagates everywhere.
   ========================================================================== */

:root {
	/* --- Charcoal: structure, weight, the "vault" --- */
	--et-ink:            #14161A;  /* header, footer, hero */
	--et-charcoal:       #23272C;  /* raised dark surface */
	--et-graphite:       #2A2F35;  /* body copy */
	--et-ash:            #545B63;  /* secondary copy */
	--et-mute:           #7C848C;  /* captions, meta */

	/* --- Bone: paper, breathing room --- */
	--et-bone:           #E7E5E0;  /* page background */
	--et-bone-deep:      #D9D6D0;  /* recessed panels, table stripes */
	--et-parchment:      #F8F7F4;  /* card + content surface */

	/* --- Copper: the accent. Used sparingly, always means "act" --- */
	--et-copper:         #9E5F3D;
	--et-copper-deep:    #7A462A;  /* hover / pressed */
	--et-copper-lit:     #C79275;  /* copper on dark backgrounds */
	--et-copper-line:    rgba(158, 95, 61, .38);
	--et-copper-ghost:   rgba(158, 95, 61, .08);

	/* --- Wine: the mark. Logo, d20 edges, card edges. --- */
	--et-wine:           #BC4E58;

	/* --- Verdigris: oxidised copper. ONLY for availability state. --- */
	--et-verdigris:      #4F7A6A;

	/* --- Lines --- */
	--et-line:           rgba(20, 22, 26, .14);
	--et-line-soft:      rgba(20, 22, 26, .08);
	--et-line-dark:      rgba(237, 231, 218, .16);

	/* --- Type --- */
	--et-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--et-body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* --- Geometry --- */
	--et-notch:   16px;  /* corner cut on product cards */
	--et-radius:  0;     /* deliberately square. Nothing here is a rounded SaaS card. */
}


/* ==========================================================================
   02  KADENCE PALETTE MAPPING
   Kadence draws everything from --global-paletteN. Remapping them here means
   headings, links, borders and blocks inherit the brand automatically.
   Set the same hexes in Customizer > Colors so the block editor matches.
   ========================================================================== */

:root {
	--global-palette1: var(--et-copper);
	--global-palette2: var(--et-copper-deep);
	--global-palette3: var(--et-ink);
	--global-palette4: var(--et-graphite);
	--global-palette5: var(--et-ash);
	--global-palette6: var(--et-mute);
	--global-palette7: var(--et-bone-deep);
	--global-palette8: var(--et-bone);
	--global-palette9: var(--et-parchment);
	/* Must track --et-parchment. Kadence uses it for rgba overlays. */
	--global-palette9rgb: 248, 247, 244;

	--global-palette-highlight:      var(--et-copper);
	--global-palette-highlight-alt:  var(--et-copper-deep);
	--global-palette-highlight-alt2: var(--et-parchment);

	--global-palette-btn:            var(--et-parchment);
	--global-palette-btn-hover:      var(--et-parchment);
	--global-palette-btn-bg:         var(--et-copper);
	--global-palette-btn-bg-hover:   var(--et-copper-deep);

	--global-content-width: 1240px;
	--global-content-narrow-width: 760px;

	/* Font families, mapped so Kadence blocks and widgets inherit the pairing */
	--global-body-font-family:    var(--et-body);
	--global-heading-font-family: var(--et-display);
	--global-h1-font-family:      var(--et-display);
	--global-h2-font-family:      var(--et-display);
	--global-h3-font-family:      var(--et-display);
	--global-h4-font-family:      var(--et-display);
	--global-h5-font-family:      var(--et-body);
	--global-button-font-family:  var(--et-body);
}

body {
	background-color: var(--et-bone);
	color: var(--et-graphite);
}


/* ==========================================================================
   03  TYPOGRAPHY
   Fraunces for anything that carries the brand. Archivo for everything
   you actually have to read. Labels are Archivo, tracked out, uppercase.
   ========================================================================== */

body,
button, input, select, textarea {
	font-family: var(--et-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.entry-title,
.woocommerce-loop-product__title,
.wc-block-grid__product-title,
.widget-title,
.wp-block-heading {
	font-family: var(--et-display);
	color: var(--et-ink);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.15;
}

h1, .entry-title { font-size: clamp(2.1rem, 1.2rem + 3vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 1rem + 2.2vw, 2.4rem); }
h3 { font-size: clamp(1.3rem, .95rem + 1.2vw, 1.65rem); }
h4 { font-size: 1.2rem; }

p { max-width: 68ch; }

/* Small tracked-out label. Reused for eyebrows, meta rows, table headers. */
.et-eyebrow,
.woocommerce-breadcrumb,
.et-card-eyebrow,
.et-chip,
.woocommerce-result-count {
	font-family: var(--et-body);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	line-height: 1.4;
}

.et-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	color: var(--et-copper-deep);
	margin-bottom: .9rem;
}
/* Small copper diamond, matching the trust strip's marker. For a rule instead,
   swap to: width: 26px; height: 1px; transform: none; */
.et-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	background: var(--et-copper);
	transform: rotate(45deg);
	flex: none;
}

/* Lead paragraph */
.et-lead {
	font-size: 1.18rem;
	line-height: 1.6;
	color: var(--et-ash);
	max-width: 62ch;
}


/* ==========================================================================
   04  HEADER + NAVIGATION
   Charcoal header. It reads as a shopfront, not a blog banner.
   ========================================================================== */

#main-header,
#masthead .site-header-row,
.site-header-row-container-inner {
	background-color: var(--et-ink);
}

#main-header {
	border-bottom: 1px solid var(--et-copper-line);
}

.site-branding .site-title { font-family: var(--et-display); color: var(--et-parchment); }
.site-branding .site-description { color: var(--et-mute); }

/* Nav links */
.header-navigation .header-menu-container > ul > li > a,
#main-header .header-navigation ul li a {
	font-family: var(--et-body);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--et-bone);
	position: relative;
}

/* Copper rule wipes in under the active/hovered item. */
.header-navigation .header-menu-container > ul > li > a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: .55em;
	height: 1px;
	background: var(--et-copper-lit);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .22s ease;
}
.header-navigation .header-menu-container > ul > li > a:hover::after,
.header-navigation .header-menu-container > ul > li.current-menu-item > a::after {
	transform: scaleX(1);
}
.header-navigation .header-menu-container > ul > li > a:hover,
.header-navigation .header-menu-container > ul > li.current-menu-item > a {
	color: var(--et-copper-lit);
}

/* Dropdowns */
.header-navigation .header-menu-container ul ul.sub-menu {
	background: var(--et-charcoal);
	border: 1px solid var(--et-line-dark);
	border-top: 2px solid var(--et-copper);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.header-navigation ul ul.sub-menu li a { color: var(--et-bone); }
.header-navigation ul ul.sub-menu li a:hover { background: rgba(158, 95, 61, .16); color: var(--et-copper-lit); }

/* Header icons: cart, search, account */
#main-header .header-cart-wrap .header-cart-inner-wrap .header-cart-button,
#main-header .search-toggle-open,
#main-header .header-account-button { color: var(--et-bone); }
#main-header .header-cart-wrap .header-cart-inner-wrap .header-cart-button:hover,
#main-header .search-toggle-open:hover { color: var(--et-copper-lit); }

#main-header .header-cart-wrap .header-cart-total {
	background: var(--et-copper);
	color: var(--et-parchment);
	font-family: var(--et-body);
	font-weight: 700;
	border-radius: 0;
}

/* Mobile drawer */
#mobile-drawer .drawer-inner { background: var(--et-ink); }
#mobile-drawer .drawer-inner,
#mobile-drawer .drawer-inner .drawer-header .drawer-toggle { color: var(--et-bone); }
.mobile-navigation ul li a {
	color: var(--et-bone);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .9rem;
	font-weight: 600;
	border-bottom: 1px solid var(--et-line-dark);
}

/* --- Announcement / trust strip (output by functions.php) --- */
.et-topbar {
	background: var(--et-charcoal);
	color: var(--et-bone);
	border-bottom: 1px solid var(--et-line-dark);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
}
.et-topbar__inner {
	max-width: var(--global-content-width);
	margin: 0 auto;
	padding: .7rem 1.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem 2.2rem;
}
.et-topbar__item { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; }
.et-topbar__item::before {
	content: "";
	width: 5px; height: 5px;
	background: var(--et-copper);
	transform: rotate(45deg);
	flex: none;
}


/* ==========================================================================
   05  BUTTONS + LINKS
   Square, tracked, decisive. No pill shapes, no gradients.
   ========================================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-block-button__link,
.kb-button,
.button {
	font-family: var(--et-body);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-radius: var(--et-radius) !important;
	padding: .95em 1.8em;
	border: 1px solid transparent;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
	background-color: var(--et-copper);
	color: var(--et-parchment);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
	background-color: var(--et-copper-deep);
	color: var(--et-parchment);
}
.woocommerce a.button:active,
.woocommerce button.button:active { transform: translateY(1px); }

/* Outline variant — use the "Outline" button style in Kadence blocks */
.et-btn-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--et-ink) !important;
	border: 1px solid var(--et-ink) !important;
}
.et-btn-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--et-ink) !important;
	color: var(--et-bone) !important;
}

/* The outline above is ink-on-transparent, which disappears entirely on a dark
   band. Inside .et-dark, flip it to copper. */
.et-dark .et-btn-outline,
.et-dark .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--et-copper-lit) !important;
	border-color: var(--et-copper-lit) !important;
}
.et-dark .et-btn-outline:hover,
.et-dark .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--et-copper-lit) !important;
	color: var(--et-ink) !important;
}

/* Body links: copper, underlined on hover only */
.entry-content a:not(.button):not(.wp-block-button__link):not(.kb-button) {
	color: var(--et-copper-deep);
	text-decoration-color: var(--et-copper-line);
	text-underline-offset: .18em;
}
.entry-content a:not(.button):hover { color: var(--et-copper); }


/* ==========================================================================
   06  PAGE HERO / TITLE AREA
   Dark hero with a hairline weave — reads like card stock under raking light.

   NOTE: Kadence only adds `.entry-hero` on singular pages; archives get a
   different class set from get_archive_hero_classes(). `.entry-hero-container-inner`
   is present in BOTH templates, so every rule here keys off that. Do not
   "simplify" these selectors to .entry-hero — archive titles go ink-on-ink.
   ========================================================================== */

.entry-hero-container-inner,
.page-hero-section {
	background-color: var(--et-ink);
	background-image:
		repeating-linear-gradient(90deg, var(--et-copper-ghost) 0 1px, transparent 1px 7px),
		repeating-linear-gradient(0deg,  rgba(255,255,255,.02) 0 1px, transparent 1px 7px);
	border-bottom: 1px solid var(--et-copper-line);
}

.entry-hero-container-inner,
.entry-hero-container-inner p,
.entry-hero-container-inner .entry-header {
	color: var(--et-bone);
}

.entry-hero-container-inner .entry-title,
.entry-hero-container-inner h1,
.entry-hero-container-inner h2,
.entry-hero-container-inner .page-title,
.entry-hero-container-inner .archive-title,
.page-hero-section .entry-title {
	color: var(--et-parchment);
}

.entry-hero-container-inner .kadence-breadcrumbs,
.entry-hero-container-inner .woocommerce-breadcrumb,
.entry-hero-container-inner .entry-taxonomies,
.entry-hero-container-inner .archive-description,
.entry-hero-container-inner .taxonomy-description,
.entry-hero-container-inner .entry-meta { color: var(--et-mute); }

.entry-hero-container-inner a { color: var(--et-copper-lit); }
.entry-hero-container-inner a:hover { color: var(--et-parchment); }

/* Kadence's overlay div sits above the background — keep it out of the way. */
.entry-hero-container-inner .hero-section-overlay { background: transparent; }

/* Standalone breadcrumb bar on light pages */
.woocommerce-breadcrumb {
	color: var(--et-mute);
	margin-bottom: 1.5rem;
}
.woocommerce-breadcrumb a { color: var(--et-ash); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--et-copper-deep); }


/* ==========================================================================
   07  SHOP ARCHIVE — PRODUCT CARDS
   Signature: the notched corner. A cut-corner card references a punched
   token sprue / die-cut box tuck, and immediately separates the shop from
   every rounded-rectangle Woo grid on the internet.
   ========================================================================== */

.woocommerce ul.products {
	gap: 2rem 1.75rem;
}

.woocommerce ul.products li.product,
.wc-block-grid__products .wc-block-grid__product {
	position: relative;
	background: var(--et-parchment);
	border: 1px solid var(--et-line);
	border-radius: 0;
	overflow: visible;
	padding: 0;
	transition: border-color .2s ease, transform .2s ease, filter .2s ease;

	/* the cut corner */
	clip-path: polygon(
		0 0,
		calc(100% - var(--et-notch)) 0,
		100% var(--et-notch),
		100% 100%,
		0 100%
	);
}

/* Copper hairline along the diagonal cut. */
.woocommerce ul.products li.product::after,
.wc-block-grid__products .wc-block-grid__product::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: calc(var(--et-notch) * 1.42);
	height: 1px;
	background: var(--et-line);
	transform-origin: 100% 0;
	transform: rotate(-45deg);
	pointer-events: none;
	z-index: 3;
}

.woocommerce ul.products li.product:hover,
.wc-block-grid__products .wc-block-grid__product:hover {
	border-color: var(--et-copper);
	transform: translateY(-3px);
	/* drop-shadow, not box-shadow — box-shadow gets cut off by clip-path */
	filter: drop-shadow(0 10px 18px rgba(20, 22, 26, .16));
}
.woocommerce ul.products li.product:hover::after { background: var(--et-copper); }

/* Image */
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img {
	margin: 0;
	border-radius: 0;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--et-bone-deep);
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.035); }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: block; overflow: hidden; }

/* Card body */
.woocommerce ul.products li.product .product-details {
	background: transparent;
	padding: 1.15rem 1.25rem 1.35rem;
	border-top: 1px solid var(--et-line-soft);
	display: flex;
	flex-direction: column;
	gap: .5rem;
	text-align: left;
}

/* Eyebrow = primary product category (added by functions.php) */
.et-card-eyebrow {
	color: var(--et-copper-deep);
	display: block;
	margin: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
	font-family: var(--et-display);
	font-size: 1.06rem !important;
	font-weight: 600;
	line-height: 1.28;
	color: var(--et-ink);
	padding: 0 !important;
	margin: 0;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--et-copper-deep); }

/* Reserve three lines for every title so prices and chips sit on the same
   baseline across a row, regardless of how long the product name is.
   Matches the 1.28 line-height set above. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	min-height: calc(1.06rem * 1.28 * 3);
}

/* Price */
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
	font-family: var(--et-body);
	font-size: 1.15rem !important;
	font-weight: 700;
	color: var(--et-ink) !important;
	font-variant-numeric: tabular-nums;
	margin: 0;
}
.woocommerce ul.products li.product .price del {
	color: var(--et-mute) !important;
	font-weight: 400;
	font-size: .85em;
	opacity: 1;
	margin-right: .4em;
}
.woocommerce ul.products li.product .price ins {
	background: none;
	color: var(--et-copper-deep) !important;
	text-decoration: none;
}

/* --- Availability chip (added by functions.php). Stock level carries real
       information here: one copy left on a finished campaign, or an arrival
       window on something not yet shipped. --- */
.et-chip {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	align-self: flex-start;
	padding: .3rem .6rem;
	border: 1px solid currentColor;
	line-height: 1;
	font-size: .66rem;
}
.et-chip::before {
	content: "";
	width: 5px; height: 5px;
	background: currentColor;
	transform: rotate(45deg);
}
.et-chip--stock  { color: var(--et-verdigris); }
.et-chip--low    { color: var(--et-copper-deep); }
.et-chip--out    { color: var(--et-mute); }
.et-chip--soon   { color: var(--et-wine); }

/* Sold-out cards recede rather than disappear — they still prove inventory
   moves. Coming-soon products are exempt: they never sold out, they haven't
   arrived. */
.woocommerce ul.products li.product.outofstock a img { filter: grayscale(1); opacity: .55; }
.woocommerce ul.products li.product.outofstock .price { color: var(--et-mute) !important; }

.woocommerce ul.products li.product.product_cat-coming-soon a img { filter: none; opacity: 1; }

/* Chip travels to the card foot with the button rather than staying up with
   the price. The adjacent-sibling rule is the fallback: when no chip is
   rendered, the action wrap follows .price directly and takes the spring
   itself, so buttons stay aligned with or without a chip. */
.woocommerce ul.products li.product .product-details .et-chip { margin-top: auto; }
.woocommerce ul.products li.product .product-details .product-action-wrap { margin-top: 0; }
.woocommerce ul.products li.product .product-details .price + .product-action-wrap { margin-top: auto; }

/* Woo "Sale!" flash, repurposed as a corner stamp */
.woocommerce span.onsale,
.wc-block-grid__product-onsale {
	background: var(--et-ink) !important;
	color: var(--et-copper-lit) !important;
	border: 1px solid var(--et-copper) !important;
	border-radius: 0 !important;
	font-family: var(--et-body);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	padding: .4rem .7rem;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	top: .85rem;
	left: .85rem;
	right: auto;
	margin: 0;
	z-index: 4;
}

/* Add-to-cart in the grid: quiet outline until you hover the card.
   display:block, not flex — Kadence's "Text with arrow" style renders the
   link inline, so the border wraps fragmented line boxes without this. Flex
   causes the label to shrink past its minimum and wrap per character. */
.woocommerce ul.products li.product .product-action-wrap .button {
	display: block;
	background: transparent;
	color: var(--et-ink);
	border: 1px solid var(--et-line);
	width: 100%;
	text-align: center;
	margin-top: .35rem;
	padding-left: 1.1rem;
	padding-right: 1.1rem;
}
.woocommerce ul.products li.product:hover .product-action-wrap .button {
	background: var(--et-copper);
	border-color: var(--et-copper);
	color: var(--et-parchment);
}

/* Sorting + result count bar */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	border: 1px solid var(--et-line);
	border-radius: 0;
	background: var(--et-parchment);
	font-family: var(--et-body);
	font-size: .82rem;
	letter-spacing: .06em;
	padding: .6rem 2.2rem .6rem .8rem;
}
.woocommerce .woocommerce-result-count { color: var(--et-mute); }

/* Sidebar filters / widgets */
.widget-area .widget-title,
.wp-block-heading.wc-block-product-categories__title {
	font-size: .78rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	font-family: var(--et-body);
	font-weight: 700;
	color: var(--et-ink);
	padding-bottom: .7rem;
	border-bottom: 2px solid var(--et-copper);
	margin-bottom: 1rem;
}
.widget-area ul li { border-bottom: 1px solid var(--et-line-soft); padding: .5rem 0; }
.widget-area ul li a { color: var(--et-graphite); text-decoration: none; }
.widget-area ul li a:hover { color: var(--et-copper-deep); }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul { border: 0; gap: .4rem; display: flex; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border: 1px solid var(--et-line);
	background: var(--et-parchment);
	font-weight: 600;
	padding: .6rem .95rem;
	color: var(--et-graphite);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--et-ink);
	border-color: var(--et-ink);
	color: var(--et-parchment);
}


/* --------------------------------------------------------------------------
   7b  PRODUCT COLLECTION BLOCK (WooCommerce 9+)
   The modern block renders <li class="wc-block-product"> inside
   <ul class="wc-block-product-template"> — NOT the classic
   `.woocommerce ul.products li.product` markup. Different selectors entirely.

   Caveat you can't fix with CSS: the block does not fire the classic loop
   hooks, so the category eyebrow and stock chip from functions.php will not
   appear here. For a grid that matches the shop page exactly, use a Shortcode
   block containing [products limit="4" columns="4"] instead of this block.
   -------------------------------------------------------------------------- */

ul.wc-block-product-template {
	gap: 2rem 1.75rem;
	list-style: none;
	padding: 0;
}

li.wc-block-product {
	position: relative;
	background: var(--et-parchment);
	border: 1px solid var(--et-line);
	border-radius: 0;
	padding: 0 0 1.35rem;
	text-align: left;
	transition: border-color .2s ease, transform .2s ease, filter .2s ease;
	clip-path: polygon(
		0 0,
		calc(100% - var(--et-notch)) 0,
		100% var(--et-notch),
		100% 100%,
		0 100%
	);
}

li.wc-block-product::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: calc(var(--et-notch) * 1.42);
	height: 1px;
	background: var(--et-line);
	transform-origin: 100% 0;
	transform: rotate(-45deg);
	pointer-events: none;
	z-index: 3;
}

li.wc-block-product:hover {
	border-color: var(--et-copper);
	transform: translateY(-3px);
	filter: drop-shadow(0 10px 18px rgba(20, 22, 26, .16));
}
li.wc-block-product:hover::after { background: var(--et-copper); }

li.wc-block-product .wc-block-components-product-image {
	margin: 0 0 1.15rem;
	overflow: hidden;
	border-bottom: 1px solid var(--et-line-soft);
}
li.wc-block-product .wc-block-components-product-image img {
	width: 100%;
	display: block;
	margin: 0;
	border-radius: 0;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--et-bone-deep);
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
li.wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.035); }

li.wc-block-product .wp-block-post-title,
li.wc-block-product .wc-block-components-product-name {
	font-family: var(--et-display);
	font-size: 1.06rem;
	font-weight: 600;
	line-height: 1.28;
	color: var(--et-ink);
	margin: 0 1.25rem .5rem;
	text-align: left;
}
li.wc-block-product:hover .wp-block-post-title a { color: var(--et-copper-deep); }

li.wc-block-product .wc-block-components-product-price {
	font-family: var(--et-body);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--et-ink);
	font-variant-numeric: tabular-nums;
	margin: 0 1.25rem .75rem;
	display: block;
	text-align: left;
}

li.wc-block-product .wc-block-components-product-button { margin: 0 1.25rem; }
li.wc-block-product .wc-block-components-product-button .wp-block-button__link {
	background: transparent;
	color: var(--et-ink);
	border: 1px solid var(--et-line);
	width: 100%;
	text-align: center;
	border-radius: 0;
}
li.wc-block-product:hover .wc-block-components-product-button .wp-block-button__link {
	background: var(--et-copper);
	border-color: var(--et-copper);
	color: var(--et-parchment);
}

@media (prefers-reduced-motion: reduce) {
	li.wc-block-product:hover { transform: none; }
	li.wc-block-product:hover .wc-block-components-product-image img { transform: none; }
}


/* ==========================================================================
   08  SINGLE PRODUCT
   Provenance, contents and availability get the real estate; everything else
   gets out of the way.
   ========================================================================== */

.single-product div.product .product_title {
	font-size: clamp(1.8rem, 1.1rem + 2.2vw, 2.7rem);
	margin-bottom: .5rem;
}

.single-product div.product .price {
	font-family: var(--et-body);
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--et-ink);
	font-variant-numeric: tabular-nums;
}
.single-product div.product .price del { color: var(--et-mute); font-weight: 400; font-size: .6em; }
.single-product div.product .price ins { background: none; color: var(--et-copper-deep); text-decoration: none; }

.single-product div.product .woocommerce-product-gallery img { border: 1px solid var(--et-line); background: var(--et-parchment); }

.single-product .woocommerce-product-details__short-description {
	border-left: 2px solid var(--et-copper);
	padding-left: 1.1rem;
	color: var(--et-ash);
	font-size: 1.05rem;
	margin: 1.25rem 0;
}

/* Add to cart row.
   Kadence pins .single_add_to_cart_button to height:40px with line-height:40px.
   Any vertical padding on top of that overflows a fixed box and clips the
   label, so height must go back to auto and line-height must be reset. */
.single-product div.product form.cart { margin: 1.75rem 0; }
.single-product div.product form.cart .button {
	padding: 1.05em 2.4em;
	font-size: .88rem;
	height: auto;
	line-height: 1.2;
}
.woocommerce .quantity .qty {
	border: 1px solid var(--et-line);
	border-radius: 0;
	background: var(--et-parchment);
	height: 100%;
	padding: .9em .5em;
	font-weight: 600;
}

/* --- Assurance plate (output by functions.php). The trust argument. --- */
.et-plate {
	border: 1px solid var(--et-line);
	background: var(--et-parchment);
	padding: 1.1rem 1.25rem;
	margin: 1.5rem 0;
	position: relative;
	clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.et-plate__title {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--et-copper-deep);
	margin: 0 0 .8rem;
}
.et-plate__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.et-plate__list li {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	font-size: .93rem;
	color: var(--et-graphite);
	line-height: 1.5;
}
.et-plate__list li::before {
	content: "";
	flex: none;
	width: 6px; height: 6px;
	margin-top: .55em;
	background: var(--et-copper);
	transform: rotate(45deg);
}

/* Product meta (SKU, category) as a catalogue record */
.single-product .product_meta {
	border-top: 1px solid var(--et-line);
	padding-top: 1.1rem;
	margin-top: 1.5rem;
	font-size: .8rem;
	letter-spacing: .04em;
	color: var(--et-mute);
}
.single-product .product_meta > span { display: block; margin-bottom: .35rem; }
.single-product .product_meta a { color: var(--et-ash); }

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin-bottom: 0; border-bottom: 1px solid var(--et-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0 1.5rem 0 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--et-body);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--et-mute);
	padding: .9rem 0;
	display: block;
	border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--et-ink);
	border-bottom-color: var(--et-copper);
}
.woocommerce div.product .woocommerce-tabs .panel { padding-top: 1.75rem; }

/* Attribute table — faction, publisher, game size, assembly */
.woocommerce table.shop_attributes { border: 1px solid var(--et-line); }
.woocommerce table.shop_attributes th {
	background: var(--et-bone-deep);
	font-family: var(--et-body);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--et-ink);
	border: 0;
	border-bottom: 1px solid var(--et-line);
	padding: .8rem 1rem;
	width: 34%;
}
.woocommerce table.shop_attributes td {
	border: 0;
	border-bottom: 1px solid var(--et-line-soft);
	padding: .8rem 1rem;
	font-style: normal;
	color: var(--et-graphite);
}
.woocommerce table.shop_attributes tr:last-child th,
.woocommerce table.shop_attributes tr:last-child td { border-bottom: 0; }

/* Related / upsells heading */
.related.products > h2,
.upsells.products > h2,
.cross-sells > h2 {
	font-size: .82rem;
	font-family: var(--et-body);
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--et-ash);
	padding-bottom: .8rem;
	border-bottom: 1px solid var(--et-line);
	margin-bottom: 2rem;
}

/* Stock notices */
.woocommerce div.product .stock { font-weight: 700; letter-spacing: .05em; }
.woocommerce div.product .stock.in-stock { color: var(--et-verdigris); }
.woocommerce div.product .stock.out-of-stock { color: var(--et-mute); }


/* --- Back In Stock Notifier form. The plugin ships its own Bootstrap build
       (bootstrap.min.css) which paints the panel #337ab7. Match its
       child-combinator specificity and repaint to the palette. --- */
section.cwginstock-subscribe-form .panel-primary > .panel-heading,
section.cwginstock-subscribe-form .cwginstock-panel-primary > .cwginstock-panel-heading {
	background-color: var(--et-ink) !important;
	border-color: var(--et-ink) !important;
	border-radius: 0 !important;
	padding: .85rem 1rem !important;
}
section.cwginstock-subscribe-form .cwginstock-panel-heading h4 {
	color: var(--et-copper-lit) !important;
	font-family: var(--et-body) !important;
	font-size: .78rem !important;
	font-weight: 700 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	margin: 0 !important;
}
section.cwginstock-subscribe-form .cwginstock-panel-primary {
	border: 1px solid var(--et-line) !important;
	border-radius: 0 !important;
}
section.cwginstock-subscribe-form .cwginstock-panel-body {
	background: var(--et-parchment) !important;
}
section.cwginstock-subscribe-form .btn,
section.cwginstock-subscribe-form .btn-primary,
section.cwginstock-subscribe-form input[type="button"],
section.cwginstock-subscribe-form input[type="submit"],
section.cwginstock-subscribe-form button {
	background-color: var(--et-copper) !important;
	background-image: none !important;
	border: 1px solid var(--et-copper) !important;
	color: var(--et-parchment) !important;
	border-radius: 0 !important;
	font-family: var(--et-body) !important;
	font-size: .82rem !important;
	font-weight: 700 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	padding: .95em 1.8em !important;
	text-shadow: none !important;
}
section.cwginstock-subscribe-form .btn:hover,
section.cwginstock-subscribe-form .btn-primary:hover,
section.cwginstock-subscribe-form input[type="submit"]:hover,
section.cwginstock-subscribe-form button:hover {
	background-color: var(--et-copper-deep) !important;
	border-color: var(--et-copper-deep) !important;
}


/* ==========================================================================
   09  CART / CHECKOUT / ACCOUNT
   Fewer surprises, more square edges. Checkout is where trust is cashed in.
   ========================================================================== */

/* Woo always prints this wrapper, empty or not. Collapse it when it has no
   children so cart and checkout don't open with a band of dead space. */
.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce table.shop_table {
	border: 1px solid var(--et-line);
	border-radius: 0;
	background: var(--et-parchment);
}
.woocommerce table.shop_table th {
	font-family: var(--et-body);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--et-ink);
	border-bottom: 1px solid var(--et-line);
	padding: 1rem;
}
.woocommerce table.shop_table td { border-top: 1px solid var(--et-line-soft); padding: 1rem; }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-account h2 {
	font-size: .82rem;
	font-family: var(--et-body);
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--et-ash);
	padding-bottom: .8rem;
	border-bottom: 1px solid var(--et-line);
	margin-bottom: 1.5rem;
}

/* Select2 (country/state). Kadence pins .select2-selection--single to 42px with
   a 40px inner line-height, so vertical padding here overflows and clips the
   text. Style the box; let the inner element carry the text. Deliberately NOT
   grouped with the plain input rule below — they need different treatment. */
.woocommerce form .form-row .select2-container .select2-selection--single {
	height: auto;
	min-height: 48px;
	border: 1px solid var(--et-line);
	border-radius: 0;
	background: var(--et-parchment);
	padding: 0 1rem;
	display: flex;
	align-items: center;
}
.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 1.4;
	padding: 0;
	color: var(--et-graphite);
	font-family: var(--et-body);
	font-size: .95rem;
}
.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__arrow {
	height: 100%;
	top: 0;
	right: .5rem;
}

/* Plain text inputs, textareas and native selects */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], input[type="number"], textarea, select {
	border: 1px solid var(--et-line);
	border-radius: 0;
	background: var(--et-parchment);
	padding: .85rem 1rem;
	font-family: var(--et-body);
	font-size: .95rem;
	color: var(--et-graphite);
	box-shadow: none;
}
input:focus, textarea:focus, select:focus {
	border-color: var(--et-copper);
	outline: none;
	box-shadow: 0 0 0 3px var(--et-copper-ghost);
}
.woocommerce form .form-row label {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--et-ash);
	margin-bottom: .4rem;
}

.woocommerce-checkout #payment,
.woocommerce-checkout-review-order {
	background: var(--et-bone-deep);
	border: 1px solid var(--et-line);
	border-radius: 0;
}
.woocommerce-checkout #payment div.payment_box { background: var(--et-parchment); border-radius: 0; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--et-parchment); }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-top: 0;
	border-left: 3px solid var(--et-copper);
	background: var(--et-parchment);
	border-radius: 0;
	color: var(--et-graphite);
	box-shadow: 0 1px 0 var(--et-line);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--et-copper); }
.woocommerce-error { border-left-color: #9B3A2E; }
.woocommerce-error::before { color: #9B3A2E; }

/* Account nav */
.woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: .8rem 1rem;
	border: 1px solid var(--et-line);
	border-bottom: 0;
	background: var(--et-parchment);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--et-graphite);
	text-decoration: none;
}
.woocommerce-MyAccount-navigation ul li:last-child a { border-bottom: 1px solid var(--et-line); }
.woocommerce-MyAccount-navigation ul li.is-active a { background: var(--et-ink); color: var(--et-parchment); border-color: var(--et-ink); }


/* ==========================================================================
   10  FOOTER
   ========================================================================== */

#colophon,
.site-footer-row-container-inner,
#colophon .site-top-footer-wrap,
#colophon .site-middle-footer-wrap,
#colophon .site-bottom-footer-wrap {
	background-color: var(--et-ink);
	color: var(--et-mute);
}
#colophon { border-top: 2px solid var(--et-copper); }
#colophon a { color: var(--et-bone); text-decoration: none; }
#colophon a:hover { color: var(--et-copper-lit); }
#colophon .widget-title,
#colophon h2, #colophon h3 {
	color: var(--et-parchment);
	font-family: var(--et-body);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	border-bottom: 0;
}
#colophon .widget-area ul li { border-bottom: 1px solid var(--et-line-dark); }
#colophon .site-bottom-footer-wrap { border-top: 1px solid var(--et-line-dark); font-size: .82rem; }

/* A policy-link row is not a stacked link column — drop the dividers and lay it
   out horizontally. Covers both the Navigation footer component and a
   Navigation Menu widget, since either can be used for this. */
#colophon .footer-navigation ul.menu,
#colophon .widget_nav_menu ul.menu,
#colophon .widget_nav_menu ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .4rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
#colophon .footer-navigation ul.menu li,
#colophon .widget_nav_menu ul li {
	border-bottom: 0;
	padding: 0;
	margin: 0;
}
#colophon .footer-navigation ul.menu li a,
#colophon .widget_nav_menu ul li a {
	font-size: .82rem;
	letter-spacing: .04em;
	white-space: nowrap;
}


/* ==========================================================================
   11  REUSABLE BLOCKS
   Add these class names in the block editor (Block > Advanced > Additional
   CSS class) so pages you build later match without new CSS.
   ========================================================================== */

/* Dark section — for hero rows and "why buy here" bands */
.et-dark {
	background-color: var(--et-ink);
	background-image: repeating-linear-gradient(90deg, var(--et-copper-ghost) 0 1px, transparent 1px 7px);
	color: var(--et-bone);
}
.et-dark h1, .et-dark h2, .et-dark h3, .et-dark h4 { color: var(--et-parchment); }
.et-dark p { color: var(--et-bone); opacity: .82; }
.et-dark .et-eyebrow { color: var(--et-copper-lit); }
.et-dark .et-eyebrow::before { background: var(--et-copper-lit); }

/* Bordered panel with the house notch */
.et-panel {
	background: var(--et-parchment);
	border: 1px solid var(--et-line);
	padding: 1.75rem;
	clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

/* Hairline rule with a copper diamond — section divider */
.et-rule {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 2.5rem 0;
}
.et-rule::before, .et-rule::after {
	content: "";
	height: 1px;
	flex: 1;
	background: var(--et-line);
}
.et-rule::after { background: var(--et-line); }

/* Stat / number callout — for "100% vetted catalog", "2 days packed & shipped" */
.et-stat .et-stat__num {
	font-family: var(--et-display);
	font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem);
	font-weight: 700;
	color: var(--et-copper-deep);
	line-height: 1;
	display: block;
}
.et-stat .et-stat__label {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--et-ash);
	margin-top: .5rem;
	display: block;
}
/* Paragraphs inherit a bottom margin from the theme; inside a stat block that
   just piles up dead space under the last row. */
.et-stat p { margin-bottom: 0; }

/* Icon instead of a number, for stats that aren't a quantity. Sized to sit on
   the same baseline as .et-stat__num. */
.et-stat .et-stat__icon {
	display: block;
	width: 2rem;
	height: 2rem;
	color: var(--et-copper-deep);
}
.et-stat .et-stat__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* On a dark band, deep copper goes muddy and ash goes invisible. Lift both,
   and give each stat a hairline so the group reads as a set. */
.et-dark .et-stat {
	border-left: 1px solid var(--et-line-dark);
	padding-left: 1.1rem;
}
.et-dark .et-stat .et-stat__num   { color: var(--et-copper-lit); }
.et-dark .et-stat .et-stat__icon  { color: var(--et-copper-lit); }
.et-dark .et-stat .et-stat__label { color: var(--et-mute); opacity: 1; }


/* ==========================================================================
   12  FOCUS, MOTION, RESPONSIVE
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
	outline: 2px solid var(--et-copper);
	outline-offset: 3px;
}

::selection { background: var(--et-copper); color: var(--et-parchment); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.woocommerce ul.products li.product:hover { transform: none; }
	.woocommerce ul.products li.product:hover a img { transform: none; }
}

@media (max-width: 1024px) {
	.et-topbar__inner { gap: .5rem 1.4rem; font-size: .68rem; }
}

@media (max-width: 767px) {
	:root { --et-notch: 12px; }
	body { font-size: 16px; }

	/* --- Kadence hero title bands -----------------------------------------
	   Kadence pins these to min-height:200px. That's a third of a phone
	   screen spent on the word "Cart". Let them size to their content. The
	   repeated selectors match Kadence's two-class specificity. */
	.entry-hero .entry-header,
	.entry-hero.page-hero-section .entry-header,
	.entry-hero.product-hero-section .entry-header,
	.entry-hero.product-archive-hero-section .entry-header,
	.entry-hero-container-inner .entry-header {
		min-height: 0;
		padding-top: 1.4rem;
		padding-bottom: 1.4rem;
	}

	/* --- Dark bands (homepage hero) ---------------------------------------
	   Run edge to edge on phones. Otherwise it's a box inside a box inside
	   the page, and the content gets squeezed into a column. */
	.entry-content .wp-block-group.et-dark,
	.entry-content > .et-dark {
		margin-left: calc(-1 * var(--global-content-boxed-padding, 1.5rem));
		margin-right: calc(-1 * var(--global-content-boxed-padding, 1.5rem));
		padding: 1rem 1.25rem 1.4rem !important;
	}
	/* When a dark band opens the page, cancel the wrapper's top padding too —
	   otherwise a strip of parchment sits above it and reads as a
	   misalignment. */
	.entry-content > .wp-block-group.et-dark:first-child,
	.entry-content > .et-dark:first-child {
		margin-top: calc(-1 * var(--global-content-boxed-padding, 1.5rem));
	}
	
	/* Kadence's content wrapper adds its own top padding on top of the
	   negative margin above, leaving a band of bone between header and hero. */
	.content-area,
	#primary,
	.content-container.site-container { padding-top: 0 !important; }

	/* Vertical rhythm inside dark bands. Core's :where() rule puts 2em on
	   flex columns; stacked on a phone that becomes 32px of dead air between
	   the copy and the stats. The block editor can't set any of this
	   per-device on core blocks, which is why it lives here. */
	.et-dark .wp-block-columns { margin-top: 0 !important; }
	.et-dark .wp-block-columns.is-layout-flex { row-gap: .75rem !important; }
	.et-dark .wp-block-column.is-layout-flow { row-gap: 0 !important; }
	.et-dark .wp-block-column > * + * { margin-block-start: .85rem; }
	.et-dark > .wp-block-columns { gap: 1.35rem; margin-bottom: 0; }

	/* Keep the stat pair side by side instead of letting it stack. */
	.et-dark .wp-block-columns .wp-block-columns {
		flex-wrap: nowrap !important;
		gap: .85rem;
		margin-bottom: .5rem !important;
	}
	.et-dark .wp-block-columns .wp-block-columns .wp-block-column {
		flex-basis: 50% !important;
		min-width: 0;
	}

	/* Grid wrapper around the stats: no gap of its own, no trailing margin. */
	.et-dark .wp-block-grid,
	.et-dark .wp-block-group.is-layout-grid {
		gap: .5rem !important;
		row-gap: .5rem !important;
		margin-bottom: 0 !important;
	}
	.et-dark .wp-block-group.is-layout-grid > * { margin-bottom: 0 !important; }
	.et-dark .et-stat { margin-bottom: 0 !important; }
	.et-dark .et-stat .et-stat__label { margin-bottom: 0 !important; }

	/* Hero type: the desktop scale is too heavy at 390px wide */
	.et-dark h1 { font-size: 1.72rem; line-height: 1.14; margin-top: 0 !important; margin-bottom: 0; }
	.et-dark h2 { font-size: 1.5rem; }
	.et-dark p  { font-size: .96rem; line-height: 1.5; margin-bottom: .75rem; }

	/* Full-width stacked buttons — thumbs, not cursors */
	.et-dark .wp-block-buttons { gap: .6rem; margin-top: .6rem !important; }
	.et-dark .wp-block-button { width: 100%; }
	.et-dark .wp-block-button .wp-block-button__link { width: 100%; padding: .85em 1.4em; }

	/* Stat sizing */
	.et-dark .et-stat { padding-left: .75rem; }
	.et-dark .et-stat .et-stat__num { font-size: 1.5rem; }
	.et-dark .et-stat .et-stat__icon { width: 1.5rem; height: 1.5rem; }
	.et-dark .et-stat .et-stat__label { font-size: .6rem; letter-spacing: .09em; margin-top: .3rem; }

	/* Nothing inside a dark band keeps a trailing margin — every nested
	   column, group and paragraph was adding its own, which is what left a
	   slab of empty dark under the stats. */
	.et-dark > *:last-child,
	.et-dark .wp-block-columns:last-child,
	.et-dark .wp-block-column > *:last-child,
	.et-dark .wp-block-group:last-child { margin-bottom: 0 !important; }

	/* Trust strip: three tracked-caps claims in a bar of their own is a lot of
	   vertical space on a phone before anyone has seen a product. Desktop
	   keeps it. */
	.et-topbar { display: none; }

	/* --- Product cards --- */
	.woocommerce ul.products { gap: 1.25rem 1rem; }
	.woocommerce ul.products li.product .product-details { padding: .9rem 1rem 1.1rem; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .98rem !important; }

	/* Tracking matters as much as size here — .12em of letter-spacing is what
	   pushes "ADD TO CART" past a half-width card before the font size does. */
	.woocommerce ul.products li.product .product-action-wrap .button {
		font-size: .68rem;
		letter-spacing: .08em;
		padding-left: .7rem;
		padding-right: .7rem;
	}

	/* Same reason the button wraps: the chip's .15em tracking breaks
	   "IN STOCK" across two lines in a narrow card. */
	.et-chip {
		font-size: .6rem;
		letter-spacing: .06em;
		padding: .28rem .5rem;
		white-space: nowrap;
	}
	/* "Expected Fall 2026" is far longer than the other chip labels. Let this
	   one wrap and tighten it, rather than letting nowrap push it off-card. */
	.et-chip--soon {
		white-space: normal;
		font-size: .55rem;
		letter-spacing: .04em;
		line-height: 1.3;
	}

	.single-product div.product form.cart .button { width: 100%; }
}