/*
 * Site-wide layer — carries the catalogue's design system onto every other
 * page (shop, product, cart, checkout, account, blog) so the storefront reads
 * as one thing rather than a dark homepage bolted onto a light demo theme.
 *
 * Same rules as the front page: the renders are the only saturated element,
 * data is monospace with tabular figures, and amber is reserved for the action
 * that takes money. Selectors target the parent theme's Bootstrap grid and
 * stock WooCommerce classes, so no template overrides are needed.
 */

/*
 * Remap the parent theme's own tokens.
 *
 * the9-store colours most of its chrome through these variables, so pointing
 * them at the catalogue palette converts the bulk of the theme in one step
 * rather than fighting it selector by selector. Quaternary is the text colour
 * the theme paints ON secondary, so it has to become dark once secondary is
 * amber, not stay white.
 */
:root {
	--primary-color: #8a97a8;
	--secondary-color: #6ee7ff;
	--tertiary-color: #eef0f6;
	--quaternary-color: #04121a;
	--bg-color: #07070a;

	--nav-color: #eef0f6;
	--nav-h-color: #6ee7ff;
	--nav-bg: #101018;
	--nav-h-bg: #16161f;

	/*
	 * the9-store routes every heading through --heading-font (Oswald) and body
	 * copy through --body-font (Poppins). Remapping the colour tokens alone left
	 * headings in Oswald while everything else moved to Sora.
	 */
	--body-font: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--heading-font: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--nav-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body,
body.woocommerce-page,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
	background: var(--df-ink);
	color: var(--df-text);
	font-family: var(--df-sans);
}

body a { color: var(--df-text); }
body a:hover { color: var(--df-signal); }

/*
 * Catch-all for text-like inputs.
 *
 * Every other input rule here is an attribute selector (input[type="text"]),
 * which does NOT match an <input> written without a type attribute. The Stripe
 * gateway probes exactly such a bare input to derive the appearance it sends to
 * Stripe Elements, read white, and rendered the card fields on a white ground
 * inside its iframe. A type-less selector fixes the probe and any stray field.
 */
body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="range"]):not([type="image"]),
body textarea,
body select {
	color: var(--df-text);
	background: var(--df-panel-2);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

/*
 * Global border-box. style.css only applies this under .df-home, so on every
 * OTHER page .df-wrap (width:100% + 22px side padding) computed content-box
 * and overflowed the viewport by 44px at any width below ~1384px — the site's
 * horizontal scroll on tablet/mobile. This also makes all pages agree with the
 * front page on effective wrap width.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body h1, body h2, body h3, body h4, body h5, body h6 {
	color: #fff;
	letter-spacing: -.015em;
	text-wrap: balance;
}

body ::selection {
	background: var(--df-signal);
	color: var(--df-signal-ink);
}

body :focus-visible {
	outline: 2px solid var(--df-signal);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- chrome */

.site-header,
.site-footer {
	background: var(--df-ink);
	border-color: var(--df-rule);
	color: var(--df-text);
}

.site-header {
	border-bottom: 1px solid var(--df-rule);
}

.site-footer {
	border-top: 1px solid var(--df-rule);
	color: var(--df-dim);
}

.site-title a,
.site-description {
	color: #fff;
}

.site-header .header-img,
.site-header .site-header-text-wrap {
	background: transparent;
}

/*
 * Masthead.
 *
 * The reference sets its navigation as small monospace uppercase with wide
 * tracking, the brand as a heavy compact wordmark, and keeps the whole bar flat
 * on the ground with a single hairline beneath. Applied here so the chrome
 * matches the catalogue rather than looking like a different site's header.
 */
.site-title,
.site-title a,
#masthead .site-title a {
	font-family: var(--df-sans);
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}

.main-navigation a,
.site-header .menu a,
.site-header nav a,
#masthead .menu > li > a {
	font-family: var(--df-mono);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--df-text);
	text-decoration: none;
}

#masthead ul.header-icon li span,
#masthead ul.header-icon li span.label {
	font-family: var(--df-mono);
	letter-spacing: .1em;
}

/* Header search reads as an instrument field, matching the catalogue toolbar. */
.site-header .search-form input[type="search"],
#masthead .search-form input[type="search"] {
	font-family: var(--df-mono);
	font-size: .82rem;
	letter-spacing: .02em;
}

.main-navigation a:hover,
.site-header .menu a:hover {
	color: var(--df-signal);
}

.main-navigation .sub-menu,
.site-header .sub-menu {
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
}

/* Header search + account/cart affordances */
.search-form input[type="search"],
.site-header input[type="search"] {
	color: var(--df-text);
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

.search-form input[type="search"]::placeholder { color: #67738a; }

/* ---------------------------------------------------------------- forms */

body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="url"],
body input[type="password"],
body input[type="search"],
body input[type="number"],
body select,
body textarea,
body .woocommerce-Input,
body .select2-container .select2-selection {
	color: var(--df-text);
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

body input:focus,
body select:focus,
body textarea:focus {
	border-color: var(--df-rule-lit);
	outline: none;
}

body label,
body .woocommerce-form-row label {
	color: var(--df-dim);
}

/* ---------------------------------------------------------------- buttons */

body .button,
body button,
body input[type="submit"],
body .wp-block-button__link,
body .woocommerce-button,
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce #respond input#submit,
body .add_to_cart_button,
body .single_add_to_cart_button {
	display: inline-block;
	padding: 13px 24px;
	font-family: var(--df-mono);
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	color: var(--df-signal-ink);
	background: var(--df-signal);
	border: 0;
	border-radius: 0;
	/* Notched corners, matching the reference direction's primary actions. */
	clip-path: polygon(var(--df-notch) 0, 100% 0, 100% calc(100% - var(--df-notch)), calc(100% - var(--df-notch)) 100%, 0 100%, 0 var(--df-notch));
	cursor: pointer;
	transition: filter .15s ease;
}

/* Small buttons that sit inside tiles and table rows stay proportionate. */
body ul.products li.product .button,
body .woocommerce-orders-table .button,
body .woocommerce-table--order-downloads .button,
body .shop_table .button,
body .added_to_cart {
	padding: 9px 16px;
	font-size: .84rem;
}

/* Full-width actions on narrow forms */
body .woocommerce-form-login .button,
body .woocommerce-form-register .button,
body .wc-block-cart__submit-button,
body .wc-block-components-checkout-place-order-button {
	padding: 14px 24px;
	font-size: .95rem;
}

/*
 * The cart and checkout CTAs are `a.wc-block-components-button`, not `.button`,
 * so they never matched the family above and kept Sora and square corners while
 * every other primary action was mono and notched. Same treatment here.
 */
body .wc-block-cart__submit-button,
body .wc-block-components-checkout-place-order-button {
	font-family: var(--df-mono);
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	clip-path: polygon(var(--df-notch) 0, 100% 0, 100% calc(100% - var(--df-notch)), calc(100% - var(--df-notch)) 100%, 0 100%, 0 var(--df-notch));
}

body .button:hover,
body button:hover,
body input[type="submit"]:hover,
body .wp-block-button__link:hover,
body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .add_to_cart_button:hover,
body .single_add_to_cart_button:hover {
	color: var(--df-signal-ink);
	filter: brightness(1.08);
}

/* Secondary/ghost actions shouldn't compete with the buy button. */
body .woocommerce a.button.wc-backward,
body .woocommerce a.button.wc-forward.checkout-button ~ a,
body .woocommerce-message a.button,
body .added_to_cart {
	color: var(--df-text);
	background: transparent;
	border: 1px solid var(--df-rule-lit);
}

body .added_to_cart:hover {
	color: var(--df-signal);
	background: transparent;
}

/* ---------------------------------------------------------------- products */

/*
 * Product tiles.
 *
 * the9-store positions the price / add-to-cart bar absolutely against the
 * bottom of the tile, so the tile has to reserve room for it. An earlier
 * version of this rule set padding-bottom to 14px, which was enough on the
 * 264px shop grid but not on the wider 399px related-products grid — there the
 * bar rode up over the product title. The reserve is now tied to the bar.
 */
/*
 * Product tiles.
 *
 * the9-store positions the price / add-to-cart bar absolutely against the
 * bottom of the tile, which only works if the tile reserves exactly the right
 * amount of room. That reserve has to change with tile width — the shop grid
 * is 264px wide, the related-products grid 399px — and any fixed value is
 * wrong for one of them, which is how the bar ended up sitting on top of the
 * product title. Returning the bar to normal flow removes the problem class
 * entirely: the tile grows to fit its own content at any width.
 */
.woocommerce ul.products li.product,
.wc-block-grid__product {
	display: flex;
	flex-direction: column;
	/*
	 * No bottom reserve: the price/button bar is back in normal flow (see
	 * ul.button-group below), so the tile sizes to its own content. The old
	 * 74px reserve is what left dead space beneath every card.
	 */
	padding: 0;
	overflow: hidden;
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
	transition: border-color .16s ease, transform .16s ease;
}

.woocommerce div.product .product_wrap {
	overflow: visible;
	background: transparent;
	border: 0;
}

.woocommerce ul.products li.product ul.button-group {
	position: static;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 14px 14px;
	margin: auto 0 0;
	list-style: none;
}

.woocommerce ul.products li.product ul.button-group li {
	width: auto;
	padding: 0;
	margin: 0;
	list-style: none;
	background: transparent;
	border: 0;
}

.woocommerce ul.products li.product ul.button-group li.price-button {
	margin-right: auto;
}

/* Let the wrapper fill the tile so the price row can sit at the bottom. */
.woocommerce ul.products li.product .product_wrap {
	display: flex;
	flex: 1;
	flex-direction: column;
}

/* The theme's own price colour is near-black inside this bar. */
.woocommerce ul.products li.product ul.button-group .price,
.woocommerce ul.products li.product ul.button-group .amount,
.woocommerce ul.products li.product li.price-button .price,
.woocommerce ul.products li.product li.price-button .amount,
.woocommerce ul.products li.product li.price-button bdi {
	font-family: var(--df-mono);
	font-size: .95rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--df-text);
}

.woocommerce ul.products li.product li.price-button del,
.woocommerce ul.products li.product li.price-button del .amount {
	color: var(--df-dim);
}

.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
	transform: translateY(-3px);
	border-color: var(--df-rule-lit);
}

.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img {
	margin: 0 0 12px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--df-panel-2);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
	padding: 0 14px;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.34;
	color: #fff;
}

.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
	display: block;
	padding: 6px 14px 10px;
	font-family: var(--df-mono);
	font-size: .95rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--df-text);
}

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

.woocommerce ul.products li.product .button,
.wc-block-grid__product-add-to-cart .wp-block-button__link {
	margin: 0 14px;
}

.woocommerce span.onsale {
	padding: 4px 10px;
	font-family: var(--df-mono);
	font-size: .7rem;
	letter-spacing: .05em;
	color: var(--df-signal-ink);
	background: var(--df-signal);
	border-radius: var(--df-radius);
}

/* Category tiles on the shop archive */
.woocommerce ul.products li.product-category a img { margin-bottom: 0; }

.woocommerce-loop-category__title {
	padding: 12px 14px;
	font-size: .95rem;
	color: #fff;
}

/* ------------------------------------------------------- single product */

.woocommerce div.product .product_title {
	margin-bottom: 10px;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	color: #fff;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--df-mono);
	font-size: 1.5rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--df-text);
}

.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-Tabs-panel {
	color: var(--df-dim);
	line-height: 1.65;
}

/* The spec block cars.php writes into the description reads as data. */
.woocommerce div.product .woocommerce-Tabs-panel p,
.woocommerce div.product .woocommerce-product-details__short-description p {
	font-family: var(--df-mono);
	font-size: .86rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.9;
}

.woocommerce div.product .quantity input.qty {
	padding: 10px;
	color: var(--df-text);
	text-align: center;
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

.woocommerce div.product .product_meta {
	padding-top: 14px;
	margin-top: 18px;
	font-family: var(--df-mono);
	font-size: .78rem;
	color: var(--df-dim);
	border-top: 1px solid var(--df-rule);
}

.woocommerce div.product .product_meta .sku {
	color: var(--df-text);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--df-rule);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--df-mono);
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--df-dim);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--df-text);
	box-shadow: inset 0 -2px 0 var(--df-signal);
}

.woocommerce div.product .woocommerce-product-gallery {
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
	overflow: hidden;
}

.related.products > h2,
.upsells.products > h2 {
	padding-top: 20px;
	margin-top: 34px;
	font-size: 1.15rem;
	border-top: 1px solid var(--df-rule);
}

/* ---------------------------------------------------------------- tables */

.woocommerce table.shop_table,
.woocommerce table.shop_attributes {
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
	border-collapse: separate;
	overflow: hidden;
}

.woocommerce table.shop_table th {
	font-family: var(--df-mono);
	font-size: .74rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--df-dim);
	background: var(--df-panel-2);
	border-bottom: 1px solid var(--df-rule);
}

.woocommerce table.shop_table td,
.woocommerce table.shop_attributes td,
.woocommerce table.shop_attributes th {
	color: var(--df-text);
	border-top: 1px solid var(--df-rule);
}

.woocommerce table.shop_table .amount,
.woocommerce .cart_totals .amount,
.woocommerce-Price-amount {
	font-family: var(--df-mono);
	font-variant-numeric: tabular-nums;
}

.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-billing-fields h3 {
	font-size: 1.1rem;
}

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
	padding: 18px;
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

/* Wide tables scroll inside their own container, never the page body. */
.woocommerce-cart-form,
.woocommerce-checkout-review-order {
	overflow-x: auto;
}

/* -------------------------------------------------------------- notices */

/*
 * Store notices ("added to your cart", stock warnings, errors).
 *
 * the9-store's stylesheet declares these with !important, so they stayed a
 * near-white #f7f6f7 under light text and were effectively unreadable. Matched
 * in kind, and the three kinds are given distinct edges so a failure no longer
 * looks like a confirmation.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
ul.woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	color: var(--df-text) !important;
	background: var(--df-panel) !important;
	border-top: 3px solid var(--df-signal) !important;
	border-right: 0 !important;
	border-bottom: 0 !important;
	border-left: 0 !important;
	border-radius: var(--df-radius) !important;
}

/* Success notices share the signal accent from the base rule above — a green
 * that exists nowhere else in the palette read as a foreign element. */

.woocommerce-error,
ul.woocommerce-error,
.woocommerce .woocommerce-error {
	border-top-color: #ff4d63 !important;
}

.woocommerce-message li,
.woocommerce-info li,
.woocommerce-error li {
	color: var(--df-text);
}

.woocommerce-message::before,
.woocommerce-info::before { color: var(--df-signal); }

/* ------------------------------------------------- account / pagination */

/* ---------------------------------------------------------- Select2 -----
 *
 * WooCommerce renders country/state pickers with Select2, which appends its
 * dropdown to the end of <body> with its own light theme — so the closed
 * control looked pale and the open panel was white. Styled end to end here,
 * which also covers the checkout address fields.
 */
/*
 * The parent styles these through `.woocommerce form .form-row
 * .select2-container .select2-selection--single` — four classes deep — which
 * outranks the plain Select2 selector, so a two-class rule here was ignored
 * and the control kept its #ccc border and square corners. Its specificity is
 * mirrored below rather than reached for with !important.
 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.woocommerce-page .select2-container .select2-selection--single,
.woocommerce form .form-row .select2-container .select2-selection--single,
.woocommerce form .form-row .select2-container .select2-selection--multiple,
.woocommerce-page form .form-row .select2-container .select2-selection--single,
.woocommerce-checkout form .form-row .select2-container .select2-selection--single,
.woocommerce .select2-container .select2-selection {
	height: auto;
	min-height: 44px;
	padding: 10px 12px;
	color: var(--df-text);
	background: var(--df-panel-2);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
	outline: none;
}

.woocommerce form .form-row .select2-container .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
	border-color: var(--df-signal);
	box-shadow: 0 0 0 3px rgba(110, 231, 255, .18);
}

/* Keep the label text and caret aligned inside the taller control. */
.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 22px;
	color: var(--df-text);
}

.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 10px;
	height: 22px;
	transform: translateY(-50%);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.6;
	color: var(--df-text);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #67738a;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--df-dim) transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--df-rule-lit);
}

/* The floating panel */
.select2-dropdown,
.select2-container--default .select2-dropdown {
	color: var(--df-text);
	background: var(--df-panel);
	border: 1px solid var(--df-rule-lit);
	border-radius: var(--df-radius);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
	overflow: hidden;
}

.select2-container--default .select2-results > .select2-results__options {
	background: var(--df-panel);
}

.select2-container--default .select2-results__option {
	color: var(--df-text);
	background: transparent;
}

.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	color: var(--df-signal-ink);
	background: var(--df-signal);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	color: var(--df-text);
	background: var(--df-panel-2);
}

/*
 * Type-to-filter box.
 *
 * This inherits the global field focus ring, which is far too loud inside a
 * small popup — it read as a thick amber box with a gap around it. Here the
 * field is compact and focus is a quiet border shift instead.
 */
.select2-container--default .select2-search--dropdown {
	padding: 6px;
	background: var(--df-panel);
	border-bottom: 1px solid var(--df-rule);
	line-height: 0;
}

/*
 * The field picks up min-height and margin from the site-wide input rules,
 * which inflated this wrapper to 90px around a 36px control — that was the
 * gap under the search box. Both are reset here.
 */
.select2-container--default .select2-search--dropdown .select2-search__field {
	box-sizing: border-box;
	height: 36px;
	min-height: 0;
	padding: 7px 10px;
	margin: 0;
	font-family: var(--df-sans);
	font-size: .88rem;
	line-height: 1.3;
	color: var(--df-text);
	background: var(--df-panel-2);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
	outline: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--df-rule-lit);
	box-shadow: none;
}

/* Sit the panel just under the control instead of floating away from it. */
.select2-container--open .select2-dropdown--below { margin-top: 4px; }
.select2-container--open .select2-dropdown--above { margin-bottom: 4px; }

/*
 * Kept short on purpose. Select2 flips the panel above the control when the
 * space below it is smaller than the panel — a taller list means it flips far
 * more often, which is why the country picker kept opening upwards.
 */
.select2-container--default .select2-results > .select2-results__options {
	max-height: 190px;
	padding: 4px;
}

.select2-container--default .select2-results__option {
	padding: 9px 12px;
	font-size: .9rem;
	line-height: 1.35;
	border-radius: var(--df-radius);
}

.select2-container--default .select2-results__message {
	color: var(--df-dim);
}

/* ------------------------------------------------------- account nav ---- */

/*
 * Upstream renders these as underlined links with a » marker, which read as a
 * cramped list of raw hyperlinks rather than navigation.
 */
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	text-decoration: none;
}

/* The » marker is an ::after in the parent stylesheet, not a ::before. */
.woocommerce-account .woocommerce-MyAccount-navigation li::before,
.woocommerce-account .woocommerce-MyAccount-navigation li::after,
.woocommerce-account .woocommerce-MyAccount-navigation li a::before,
.woocommerce-account .woocommerce-MyAccount-navigation li a::after {
	content: none !important;
	display: none !important;
	background: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	padding: 7px;
	margin: 0;
	list-style: none;
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

/* One rule per row is what made this look like a stack of boxes. */
.woocommerce-account .woocommerce-MyAccount-navigation li {
	padding: 0;
	margin: 0;
	list-style: none;
	border: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 11px 14px;
	font-size: .92rem;
	line-height: 1.3;
	color: var(--df-dim);
	border: 0;
	border-radius: var(--df-radius);
	transition: color .15s ease, background-color .15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--df-text);
	background: var(--df-panel-2);
}

/* Current section: fill only. No accent edge — it read as a stray bar. */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a {
	color: #fff;
	background: var(--df-panel-2);
	box-shadow: none;
}

/* Log out sits apart from the sections above it. */
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	padding-top: 7px;
	margin-top: 7px;
	border-top: 1px solid var(--df-rule);
}

/*
 * The stray "Edit" is the theme's inline edit-post link, rendered only for
 * logged-in editors. It sits in the flow beside the account navigation and
 * overlaps it. The admin bar already carries "Edit Page", so nothing is lost
 * by removing the duplicate from the storefront layout.
 */
.woocommerce-account .edit-link,
.woocommerce-account .post-edit-link,
.woocommerce-cart .edit-link,
.woocommerce-cart .post-edit-link,
.woocommerce-checkout .edit-link,
.woocommerce-checkout .post-edit-link {
	display: none !important;
}

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	font-family: var(--df-mono);
	font-size: .84rem;
	color: var(--df-dim);
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	color: var(--df-signal-ink);
	background: var(--df-signal);
	border-color: var(--df-signal);
}

/*
 * Keep button labels legible in every state.
 *
 * the9-store paints :hover/:focus text with var(--secondary-color). That token
 * is now the amber accent, and these buttons already sit on amber, so hovering
 * turned every label amber-on-amber. Each parent selector is mirrored exactly
 * so load order settles it without !important.
 */
/*
 * The parent's hover rules do TWO things: repaint the label with the accent
 * token AND drop the background (`background: none`, or swap it for
 * --quaternary-color). Setting only the colour left dark labels on the bare
 * page ground — invisible again — so background and colour are set together.
 */
button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.button-btn:hover,
.button-btn:focus,
.shop_table .actions .button:hover,
.shop_table .actions .button:focus,
.wc-proceed-to-checkout .checkout-button.theme-btn:hover,
.wc-proceed-to-checkout .checkout-button.theme-btn:focus,
.place_order_btn.theme-btn:hover,
.place_order_btn.theme-btn:focus,
.site-main .wp-block-button__link:hover,
.site-main .wp-block-button__link:focus,
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus,
.wc-block-components-button:hover,
.wc-block-components-button:focus,
.wp-element-button:hover,
.wp-element-button:focus,
.the9-store-compare-table .button:hover,
.the9-store-compare-table .button:focus,
.components-button.wc-block-components-button,
.theme-btn,
.btn.bg-btn {
	color: var(--df-signal-ink);
	background: var(--df-signal);
	border-color: var(--df-signal);
}

/* Ghost buttons opt back out — they must keep a light label. */
.df-more:hover,
.df-more:focus,
.box-icon-cart .dropdown-box .woocommerce-mini-cart__buttons a:not(.checkout) {
	color: var(--df-text);
	background: transparent;
	border-color: var(--df-rule-lit);
}

.box-icon-cart .dropdown-box .woocommerce-mini-cart__buttons a:not(.checkout):hover {
	color: var(--df-signal-ink);
	background: var(--df-signal);
	border-color: var(--df-signal);
}

/*
 * Token-remap fallout.
 *
 * --tertiary-color was #000 and is now a light text colour, so every place the
 * theme used it as a BACKGROUND turned into a light block with light text on
 * it. Same story for --nav-color. Each of these is repainted explicitly.
 */
#masthead .search-form .search-submit,
.widget_layered_nav_filters span,
.woocommerce li.product .button-group a:hover,
.woocommerce li.product .button-group a:focus,
.single-product-extra-container li a:hover,
.single-product-extra-container li a:focus {
	color: var(--df-signal-ink);
	background: var(--df-signal);
}

/*
 * Nav links fill with the accent on hover — but the mini-cart's items live in
 * this same `#navbar ul > li > a` structure, so they must be excluded. Without
 * the :not() the cart rows filled amber under amber text and vanished.
 */
#navbar ul > li:not(.woocommerce-mini-cart-item) > a:hover,
#navbar ul > li:not(.woocommerce-mini-cart-item) > a:focus {
	color: var(--df-signal-ink);
	background: var(--df-signal);
}

/* Cart rows are list entries, not buttons: tint the label, leave the ground. */
#navbar ul li.woocommerce-mini-cart-item a:hover,
#navbar ul li.woocommerce-mini-cart-item a:focus,
#navbar ul > li.woocommerce-mini-cart-item > a:hover,
#navbar ul > li.woocommerce-mini-cart-item > a:focus {
	color: var(--df-signal);
	background: transparent;
}

/*
 * Mini-cart rows: force every surface transparent.
 *
 * A pale block kept appearing behind the item image and title on hover. It is
 * not on the <li>, its children, or their pseudo-elements when inspected —
 * which means it comes from a transient state (the AJAX refresh overlay, or a
 * rule that only resolves mid-interaction) that a static audit cannot catch.
 * Rather than keep guessing at the source, the rows are pinned transparent.
 *
 * Deliberately scoped to the item rows only, so the Checkout button below them
 * keeps its amber fill.
 */
.box-icon-cart .dropdown-box li.woocommerce-mini-cart-item,
.box-icon-cart .dropdown-box li.woocommerce-mini-cart-item *,
.box-icon-cart .dropdown-box li.woocommerce-mini-cart-item::before,
.box-icon-cart .dropdown-box li.woocommerce-mini-cart-item::after,
.box-icon-cart .dropdown-box li.woocommerce-mini-cart-item *::before,
.box-icon-cart .dropdown-box li.woocommerce-mini-cart-item *::after,
.box-icon-cart .dropdown-box li.woocommerce-mini-cart-item:hover,
.box-icon-cart .dropdown-box li.woocommerce-mini-cart-item:hover *,
#navbar li.woocommerce-mini-cart-item,
#navbar li.woocommerce-mini-cart-item *,
#navbar li.woocommerce-mini-cart-item:hover,
#navbar li.woocommerce-mini-cart-item:hover * {
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}

/* Images are exempt — the rule above must not blank their rendering. */
.box-icon-cart .dropdown-box li.woocommerce-mini-cart-item img,
#navbar li.woocommerce-mini-cart-item img {
	background-color: var(--df-panel-2) !important;
	border-radius: var(--df-radius);
}

.box-icon-cart .dropdown-box li.woocommerce-mini-cart-item a,
#navbar li.woocommerce-mini-cart-item a {
	color: var(--df-text) !important;
}

.box-icon-cart .dropdown-box li.woocommerce-mini-cart-item a:hover,
#navbar li.woocommerce-mini-cart-item a:hover {
	color: var(--df-signal) !important;
}

.box-icon-cart .dropdown-box li.woocommerce-mini-cart-item a.remove,
#navbar li.woocommerce-mini-cart-item a.remove {
	color: var(--df-dim) !important;
}

.box-icon-cart .dropdown-box li.woocommerce-mini-cart-item a.remove:hover,
#navbar li.woocommerce-mini-cart-item a.remove:hover {
	color: #ff4d63 !important;
}

/* The × sits on a pale chip upstream; it belongs on the panel. */
#navbar ul li.woocommerce-mini-cart-item a.remove,
#navbar ul li.woocommerce-mini-cart-item a.remove_from_cart_button,
.box-icon-cart .dropdown-box a.remove {
	color: var(--df-dim);
	background: transparent;
	border: 0;
	box-shadow: none;
}

#navbar ul li.woocommerce-mini-cart-item a.remove:hover,
#navbar ul li.woocommerce-mini-cart-item a.remove_from_cart_button:hover,
.box-icon-cart .dropdown-box a.remove:hover {
	color: #ff4d63;
	background: transparent;
}

/*
 * Add to cart carries five classes upstream (btn theme-btn button alt) and its
 * hover clears the background, so it needs a selector that outranks all of it.
 */
.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button:focus,
button.single_add_to_cart_button.theme-btn:hover,
button.single_add_to_cart_button.theme-btn:focus,
button.single_add_to_cart_button.alt:hover,
button.single_add_to_cart_button.alt:focus {
	color: var(--df-signal-ink);
	background: var(--df-signal);
	border-color: var(--df-signal);
}

/* Shop density switcher (VIEW: 12 / 24 / ALL) — #555 on the ground is 2.57:1. */
.the9-store-grid-list a,
a.view-firstactive,
a.view-second,
a.view-all,
.woocommerce .the9-store-grid-list a {
	color: var(--df-dim);
}

.the9-store-grid-list a:hover,
.the9-store-grid-list a:focus,
.the9-store-grid-list a.active,
a.view-firstactive:hover,
a.view-second:hover,
a.view-all:hover,
.woocommerce .the9-store-grid-list a:hover,
.woocommerce .the9-store-grid-list a.active {
	color: var(--df-signal);
}

/* Category line on product cards is #515151 upstream — 2.2:1 on the panel. */
ul.products li.product .cat-name .posted_in,
ul.products li.product .cat-name a,
.cat-name .posted_in {
	color: var(--df-dim);
}

#content .the9-store-single-post .content-wrap a.checkout-button:hover,
#content .the9-store-single-post .content-wrap a.checkout-button:focus,
#colophon .yikes-easy-mc-form .yikes-easy-mc-submit-button:after {
	color: var(--df-signal-ink);
}

/* Mobile menu toggle sits on the ground, not on the accent. */
button.the9-store-rd-navbar-toggle:hover,
button.the9-store-rd-navbar-toggle:focus {
	color: var(--df-signal);
	background: transparent;
}

/* Error notices should read as an error, not as the accent. */
.woocommerce-error::before {
	color: #ff4d63;
}

/*
 * Block cart TABLE headers only.
 *
 * An earlier version of this rule also listed .wc-block-components-totals-wrapper
 * — which wraps the entire totals sidebar, not just its header — so the coupon
 * accordion and the Estimated Total row were all rendered as monospace-uppercase
 * table headers. The mono-uppercase treatment now applies strictly to <th> cells.
 *
 * woocommerce-core.css sets `background: #ededed !important` and
 * `color: var(--secondary-color) !important` on these cells; an upstream
 * !important can only be answered in kind.
 */
/*
 * Header cells used to be painted individually (--df-panel-2 on each th) while
 * the table itself had no surface, so PRODUCT and TOTAL floated as two
 * disconnected chips. The cells go transparent — the table is the panel now —
 * and a single hairline under the row ties them together. The backgrounds stay
 * !important because woocommerce-core.css declares #ededed !important here.
 */
.wc-block-cart-items__header,
.wc-block-cart-items__header th,
th.wc-block-cart-items__header-image,
th.wc-block-cart-items__header-product,
th.wc-block-cart-items__header-total,
#page table.wc-block-cart-items th {
	font-family: var(--df-mono);
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--df-dim) !important;
	background: transparent !important;
	/*
	 * wc-blocks-style-cart prints after this sheet and declares
	 * `table.wc-block-cart-items th { border: 0 }`, which outguns every
	 * selector in this list — so the hairline has to be !important.
	 */
	border: 0 !important;
	border-bottom: 1px solid var(--df-rule-lit) !important;
}

/*
 * Sidebar heading ("Cart totals") — a real heading, not a table header strip.
 * The same #ededed !important applies here, so the background answer stays.
 */
h2.wc-block-cart__totals-title,
.wc-block-cart__totals-title,
.wp-block-woocommerce-cart-order-summary-heading-block,
.wp-block-woocommerce-cart-totals-block .wc-block-cart__totals-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title,
.wc-block-cart__sidebar .wc-block-components-title {
	/*
	 * woocommerce-core.css groups this heading in with the cart table's <th>
	 * cells and declares font-size / text-transform / colour / background with
	 * !important, so the typography has to answer in kind or the heading keeps
	 * rendering as a 14px uppercase table header.
	 */
	padding: 18px 20px;
	margin: 0;
	font-family: var(--df-sans) !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	letter-spacing: -.01em !important;
	text-transform: none !important;
	text-align: left;
	color: #fff !important;
	background: transparent !important;
	border-bottom: 1px solid var(--df-rule);
}

/* ------------------------------------------------------ account pages */

/*
 * Covers every My Account endpoint — dashboard, orders, downloads, addresses,
 * payment methods, account details, and the login/register/lost-password
 * forms. Class names taken from WooCommerce's own myaccount templates.
 */

.woocommerce-MyAccount-content {
	padding: 22px 24px;
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
	color: var(--df-text);
}

.woocommerce-MyAccount-content p,
.woocommerce-MyAccount-content li {
	color: var(--df-dim);
	line-height: 1.65;
}

.woocommerce-MyAccount-content strong,
.woocommerce-MyAccount-content a {
	color: var(--df-text);
}

.woocommerce-MyAccount-content a:hover {
	color: var(--df-signal);
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-MyAccount-content legend {
	font-size: 1.05rem;
	color: #fff;
}

/* Orders, downloads and payment-method tables */
.woocommerce-orders-table,
.account-orders-table,
.account-payment-methods-table,
.woocommerce-table--order-downloads,
.woocommerce-table--order-details,
.shop_table_responsive {
	width: 100%;
	background: var(--df-panel-2);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
	border-collapse: separate;
	overflow: hidden;
}

.woocommerce-orders-table__header,
.account-orders-table th,
.account-payment-methods-table th,
.woocommerce-table--order-downloads th {
	font-family: var(--df-mono);
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--df-dim);
	border-bottom: 1px solid var(--df-rule);
}

.woocommerce-orders-table__cell,
.account-orders-table td,
.account-payment-methods-table td,
.woocommerce-table--order-downloads td {
	color: var(--df-text);
	border-top: 1px solid var(--df-rule);
}

.woocommerce-orders-table__cell-order-number a,
.woocommerce-orders-table__cell-order-total .amount {
	font-family: var(--df-mono);
	font-variant-numeric: tabular-nums;
}

/* Order status reads as a chip rather than bare text. */
.woocommerce-orders-table__cell-order-status {
	font-family: var(--df-mono);
	font-size: .76rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--df-signal);
}

/* Addresses: two-column set */
.woocommerce-Addresses.col2-set .col-1,
.woocommerce-Addresses.col2-set .col-2,
.addresses .col-1,
.addresses .col-2 {
	padding: 18px 20px;
	background: var(--df-panel-2);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin: 0;
	font-size: 1rem;
}

.woocommerce-Address-title .edit {
	font-family: var(--df-mono);
	font-size: .74rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--df-signal);
}

.woocommerce-Address address {
	font-style: normal;
	line-height: 1.7;
	color: var(--df-dim);
}

/* Payment methods */
.woocommerce-PaymentMethod,
.woocommerce-PaymentMethod label {
	color: var(--df-text);
}

.payment_methods li,
.wc_payment_methods li {
	list-style: none;
	background: transparent;
}

/*
 * Gateway description box — Stripe's "Test mode: use the test VISA card…"
 * notice lives here. The previous rule set colour and border but no padding,
 * so the copy sat flush against the box edge.
 */
.payment_box,
.wc_payment_method .payment_box,
.woocommerce .payment_box,
.woocommerce-page .payment_box,
li.wc_payment_method > .payment_box {
	padding: 16px 18px;
	margin: 12px 0 0;
	color: var(--df-dim);
	background: var(--df-panel-2);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

.woocommerce .payment_box p,
.woocommerce-page .payment_box p {
	margin: 0 0 10px;
	line-height: 1.6;
}

.woocommerce .payment_box p:last-child,
.woocommerce-page .payment_box p:last-child {
	margin-bottom: 0;
}

.woocommerce .payment_box strong,
.woocommerce .payment_box a {
	color: var(--df-text);
}

/* Method rows: radio sits beside its label, not above it. */
.woocommerce ul.payment_methods li.wc_payment_method,
.woocommerce-page ul.payment_methods li.wc_payment_method {
	padding: 12px 0;
	margin: 0;
	list-style: none;
	border: 0;
}

.woocommerce ul.payment_methods li.wc_payment_method > label,
.woocommerce-page ul.payment_methods li.wc_payment_method > label {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	margin: 0;
	font-size: .95rem;
	color: var(--df-text);
}

.woocommerce ul.payment_methods li.wc_payment_method > input[type="radio"] {
	margin: 0 8px 0 0;
	vertical-align: middle;
}

/* Submit actions are buttons, not lozenges. */
.woocommerce #place_order,
.woocommerce .woocommerce-Button,
.woocommerce button.button.alt,
.woocommerce-page #place_order,
.woocommerce-page .woocommerce-Button {
	border-radius: var(--df-radius);
	letter-spacing: .02em;
}

/* Account forms — details, login, register, password reset */
.woocommerce-EditAccountForm,
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
	color: var(--df-text);
}

.woocommerce-form-login,
.woocommerce-form-register {
	padding: 22px 24px;
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

.woocommerce-form__label,
.woocommerce-form__label-for-checkbox span {
	color: var(--df-dim);
}

.woocommerce-LostPassword a,
.woocommerce-privacy-policy-text a {
	color: var(--df-signal);
}

.woocommerce-EditAccountForm fieldset,
.woocommerce-MyAccount-content fieldset,
fieldset {
	padding: 16px 18px;
	margin-top: 20px;
	color: var(--df-text);
	background: var(--df-panel-2);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

.woocommerce-EditAccountForm fieldset legend {
	padding: 0 8px;
	font-family: var(--df-mono);
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--df-dim);
}

/* ------------------------------------------------ block cart / checkout */

/*
 * The cart and checkout pages are WooCommerce blocks, which ship their own
 * light palette in wc-blocks.css. That file loads before this one now, so
 * these plain overrides hold.
 */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-components-sidebar,
.wc-block-cart__sidebar {
	color: var(--df-text);
}

.wc-block-components-product-name,
.wc-block-cart-item__wrap a {
	color: var(--df-text);
	text-decoration: none;
}

.wc-block-components-product-name:hover {
	color: var(--df-signal);
}

.wc-block-cart-items__row,
.wc-block-cart-items th,
.wc-block-cart-items td {
	border-color: var(--df-rule);
}

.wc-block-components-totals-item,
.wc-block-components-totals-wrapper {
	color: var(--df-text);
	border-color: var(--df-rule);
}

.wc-block-components-totals-item__label {
	font-family: var(--df-sans);
	font-size: .92rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--df-dim);
}

/* The bottom line — the one number the page exists to show. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
	font-size: 1.3rem;
	font-weight: 600;
	color: #fff;
}

.wc-block-components-totals-item__value,
.wc-block-components-formatted-money-amount,
.wc-block-components-product-price {
	font-family: var(--df-mono);
	font-variant-numeric: tabular-nums;
	color: var(--df-text);
}

.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-components-panel,
.wc-block-checkout__sidebar {
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

/*
 * Block form fields. wc-blocks styles these with its own high-specificity
 * selectors, so these are scoped through the block wrapper to outrank them.
 */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__select,
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="text"],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="email"],
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="tel"],
.wp-block-woocommerce-checkout .wc-block-components-select select,
.wp-block-woocommerce-checkout .wc-block-components-combobox input,
.wp-block-woocommerce-cart .wc-block-components-text-input input {
	color: var(--df-text);
	background: var(--df-panel-2);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

/* The floating label sits on the field, so it needs the field's ground. */
.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-cart .wc-block-components-text-input label {
	color: var(--df-dim);
}

/* ---- totals sidebar internals ------------------------------------------ */

/*
 * Rows get consistent side padding so labels align with the heading above
 * them instead of hugging the panel edge.
 */
.wc-block-components-totals-wrapper {
	padding: 14px 20px;
}

.wc-block-components-totals-item {
	font-size: .92rem;
}

/*
 * Coupon accordion: a quiet disclosure row, not a boxed strip.
 * ONLY the panel toggle — __button (without "panel") is the Apply CTA and
 * was wrongly grouped here, which dressed a primary action as quiet text.
 */
.wc-block-components-panel__button {
	width: 100%;
	padding: 4px 0;
	font-family: var(--df-sans);
	font-size: .92rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--df-text);
	background: transparent;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}

.wc-block-components-panel__button:hover,
.wc-block-components-panel__button:focus {
	color: var(--df-signal);
	background: transparent;
	filter: none;
}

.wc-block-components-panel__button svg {
	fill: currentColor;
}

/* Open coupon form: input and Apply sit on one row at matched heights. */
.wc-block-components-totals-coupon,
.wc-block-components-totals-coupon__form {
	background: transparent;
	border: 0;
}

/*
 * One row: input stretching, Apply beside it. wc-blocks' render-time
 * stylesheet stacks them full-width and collapses the button to its
 * line-height, so every contested property answers with !important —
 * verified via getMatchedStylesForNode.
 */
.wc-block-components-totals-coupon__form {
	display: flex !important;
	flex-flow: row nowrap !important;
	gap: 8px;
	align-items: stretch;
	margin: 10px 0 0;
}

.wc-block-components-totals-coupon__form .wc-block-components-text-input {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
}

.wc-block-components-totals-coupon__form .wc-block-components-text-input input {
	height: 50px !important;
	min-height: 0;
	margin: 0 !important;
}

.wc-block-components-totals-coupon__form .wc-block-components-button {
	flex: 0 0 auto !important;
	width: auto !important;
	height: 50px !important;
	min-height: 0 !important;
	padding: 0 22px !important;
	margin: 0 !important;
	font-family: var(--df-mono);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--df-signal-ink) !important;
	white-space: nowrap;
}

/*
 * Blocks communicates the disabled state by fading only the inner label to
 * 50%, which on the cyan fill read as a broken button. State is drawn on the
 * button itself instead: dark ghost until a code is typed, full cyan after.
 */
.wc-block-components-totals-coupon__form .wc-block-components-button .wc-block-components-button__text {
	opacity: 1 !important;
}

.wc-block-components-totals-coupon__form .wc-block-components-button:disabled {
	color: var(--df-dim) !important;
	background: var(--df-panel-2) !important;
	border: 1px solid var(--df-rule-lit) !important;
	clip-path: none;
	cursor: not-allowed;
}

.wc-block-components-text-input label,
.wc-block-components-checkbox__label {
	color: var(--df-dim);
}

.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	color: var(--df-signal-ink);
	background: var(--df-signal);
	border: 0;
	border-radius: var(--df-radius);
	font-weight: 600;
}

.wc-block-components-button:hover {
	color: var(--df-signal-ink);
	filter: brightness(1.08);
}

.wc-block-components-quantity-selector input,
.wc-block-components-quantity-selector button {
	color: var(--df-text);
	background: var(--df-panel-2);
	border-color: var(--df-rule);
}

.wc-block-components-notice-banner {
	color: var(--df-text);
	background: var(--df-panel);
	border-color: var(--df-rule-lit);
}

/* --------------------------------------- remaining parent-theme conflicts */

/*
 * Last sweep of upstream rules that hardcode a light surface or near-black
 * text. Selectors mirror the9-store's so load order decides them. Several are
 * only reachable with items in the cart or while logged in, which is why they
 * were found by diffing stylesheets rather than by fetching pages.
 */

mark {
	color: var(--df-signal-ink);
	background: var(--df-signal);
}

blockquote,
pre {
	color: var(--df-text);
	background: var(--df-panel-2);
	border-color: var(--df-rule);
}

pre {
	font-family: var(--df-mono);
}

optgroup {
	color: var(--df-text);
	background: var(--df-panel);
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.owlGallery,
table.variations {
	background: var(--df-panel);
}

/* Gallery zoom control — a white puck with black bars for the magnifier. */
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	color: var(--df-text);
	background: var(--df-panel-2);
	border: 1px solid var(--df-rule-lit);
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after,
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before {
	background: var(--df-text);
}

/* Cart totals */
.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table.shop_table,
.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table.shop_table td,
.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table.shop_table th {
	color: var(--df-text);
	background: var(--df-panel);
	border-color: var(--df-rule);
}

/* Checkout order review */
.content-area table.woocommerce-checkout-review-order-table th.product-name,
.content-area table.woocommerce-checkout-review-order-table th.product-total,
.content-area table.woocommerce-checkout-review-order-table th {
	color: var(--df-dim);
	background: var(--df-panel-2);
	border-color: var(--df-rule);
}

.content-area table.woocommerce-checkout-review-order-table td.product-name,
.content-area table.woocommerce-checkout-review-order-table td.product-total,
.content-area table.woocommerce-checkout-review-order-table td {
	color: var(--df-text);
	background: var(--df-panel);
	border-color: var(--df-rule);
}

/* Block-cart quantity stepper */
table.wc-block-cart-items input.wc-block-components-quantity-selector__input,
table.wc-block-cart-items .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	color: var(--df-text);
	background: var(--df-panel-2);
}

/* Notices rendered inside the content wrapper */
.content-wrap .woocommerce-message,
.content-wrap .woocommerce-info,
.content-wrap .woocommerce-error {
	color: var(--df-text);
	background: var(--df-panel);
	border-color: var(--df-rule-lit);
}

.content-wrap .woocommerce-info:before {
	color: var(--df-signal);
}

.content-wrap .woocommerce-error:before {
	color: #ff4d63;
}

/* Star ratings: unfilled stars stay quiet, filled ones carry the accent. */
p.stars a::before,
p.stars a:hover ~ a::before,
p.stars.selected a.active ~ a::before {
	color: var(--df-rule-lit);
}

.woocommerce-password-strength.good {
	color: var(--df-signal);
}

.responsive-submenu-toggle {
	color: var(--df-text);
}

.woocommerce li.product .removewhlist {
	color: var(--df-text);
	background: var(--df-panel-2);
}

/* Breadcrumbs, widgets, blog cards */
.woocommerce .woocommerce-breadcrumb {
	font-family: var(--df-mono);
	font-size: .76rem;
	color: var(--df-dim);
}

.widget,
.entry-content,
.hentry {
	color: var(--df-text);
}

.widget-title,
.widgettitle {
	font-family: var(--df-mono);
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--df-dim);
}

/* ------------------------------------------------ parent-theme overrides */

/*
 * These parent rules hardcode white and out-specify a plain class selector,
 * so each is matched at identical specificity and wins on load order. Keep
 * the selectors byte-identical to the9-store's — if the parent changes one,
 * this stops applying and the page goes light, which is easy to spot.
 */

header.site-header {
	padding-top: 26px;
	padding-bottom: 26px;
	background: var(--df-ink);
	border-bottom: 1px solid var(--df-rule);
}

/* Same element, but the parent also paints it by id — which outranks the above. */
#masthead {
	background: var(--df-ink);
}

/* Off-canvas mobile nav panel */
#navbar .nav-wrap {
	background: var(--df-panel);
	border-right: 1px solid var(--df-rule);
}

/*
 * Page-title bar.
 *
 * The parent prints this strip over its own stock demo photograph. functions.php
 * unhooks it on the front page and search, where the templates render their own
 * hero; everywhere else it stays, because it carries the only <h1> on the page.
 * Here the photograph is replaced with the catalogue's ground.
 *
 * The image is applied inline on the element, so overriding it needs !important.
 */
#static_header_banner {
	background-image: none !important;
	background-color: var(--df-ink);
	border-bottom: 1px solid var(--df-rule);
}

/*
 * The parent sizes this strip for a photographic hero — 450px of empty ground
 * once the image is gone. Collapse it to a title bar.
 */
#static_header_banner,
#static_header_banner .content-text {
	height: auto;
	min-height: 0;
}

#static_header_banner .site-header-text-wrap {
	padding: 30px 0 26px;
}

#static_header_banner h1,
.site-header-text-wrap h1 {
	margin: 0;
	font-size: clamp(1.5rem, 3.2vw, 2.1rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: #fff;
}

#static_header_banner .content-text h1 {
	padding-bottom: 0;
}

#masthead .header-icon > li > a {
	color: var(--df-text);
	background-color: var(--df-panel);
}

#masthead .header-icon > li > a:hover {
	color: var(--df-signal);
	background-color: var(--df-panel-2);
}

#masthead .header-icon > li:hover > a,
#masthead .header-icon > li:focus > a {
	color: var(--df-signal-ink);
	background: var(--df-signal);
}

#masthead ul.header-icon li span.label {
	color: var(--df-dim);
}

#masthead ul.header-icon li span {
	color: var(--df-text);
}

/* ---- Account dropdown ------------------------------------------------- */

/*
 * The parent gives these list items a #e8e8e8 rule and never sets a panel
 * background, so the menu rendered as bright white dividers on bare ground.
 */
#masthead .header-icon li ul {
	overflow: hidden;
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}

#masthead .header-icon li li {
	border-bottom: 1px solid var(--df-rule);
}

#masthead .header-icon li li:last-child {
	border-bottom: 0;
}

#masthead .header-icon li li > a {
	color: var(--df-text);
}

#masthead .header-icon li li > a:hover,
#masthead .header-icon li li > a:focus {
	color: var(--df-signal);
}

/* ---- Mini-cart flyout ------------------------------------------------- */

.box-icon-cart .dropdown-box {
	color: var(--df-text);
	background-color: var(--df-panel);
	border: 1px solid var(--df-rule);
	/* Parent hardcodes 8px here; the template is squared throughout. */
	border-radius: var(--df-radius);
}

/* The little pointer triangle is drawn with border colours. */
.box-icon-cart .dropdown-box:before {
	border-bottom-color: var(--df-panel);
}

/* Item titles are hardcoded to #000 upstream — invisible on a dark panel. */
#navbar ul li.woocommerce-mini-cart-item a {
	color: var(--df-text);
}

#navbar ul li.woocommerce-mini-cart-item a:hover,
#navbar ul li.woocommerce-mini-cart-item a:focus {
	color: var(--df-signal);
}

#navbar ul li.woocommerce-mini-cart-item a.remove {
	color: var(--df-dim);
}

#navbar ul li.woocommerce-mini-cart-item a.remove:hover {
	color: #ff4d63;
}

#navbar ul li.woocommerce-mini-cart-item .quantity {
	font-family: var(--df-mono);
	font-variant-numeric: tabular-nums;
	color: var(--df-dim);
}

.box-icon-cart .dropdown-box .total strong {
	color: var(--df-dim);
}

.box-icon-cart .dropdown-box .total span.amount {
	font-family: var(--df-mono);
	font-variant-numeric: tabular-nums;
	color: var(--df-text);
}

/*
 * View cart / Checkout.
 *
 * Upstream paints these with color: var(--secondary-color) and no background.
 * Once secondary became amber and the generic .button rule supplied an amber
 * background, the labels were amber on amber — invisible. View cart is the
 * quiet option; checkout carries the accent.
 */
.box-icon-cart .dropdown-box .woocommerce-mini-cart__buttons a {
	color: var(--df-text);
	background: transparent;
	border: 1px solid var(--df-rule-lit);
	border-radius: var(--df-radius);
}

.box-icon-cart .dropdown-box .woocommerce-mini-cart__buttons a:hover,
.box-icon-cart .dropdown-box .woocommerce-mini-cart__buttons a:focus {
	color: var(--df-signal-ink);
	background: var(--df-signal);
	border-color: var(--df-signal);
}

.box-icon-cart .dropdown-box .woocommerce-mini-cart__buttons a.checkout {
	color: var(--df-signal-ink);
	background: var(--df-signal);
	border-color: var(--df-signal);
}

.box-icon-cart .dropdown-box .woocommerce-mini-cart__buttons a.checkout:hover {
	filter: brightness(1.08);
}

/* The quantity field itself is targeted with a four-class selector upstream. */
.single.single-product .quantity .input-text.qty.text,
.single.single-product .quantity .input-text.qty,
.woocommerce .quantity input.qty {
	color: var(--df-text);
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
}

/* Quantity steppers on the product page */
button.plus,
button.minus {
	color: var(--df-text);
	background: var(--df-panel-2);
	border: 1px solid var(--df-rule);
}

button.plus:hover,
button.minus:hover {
	color: var(--df-signal-ink);
	background: var(--df-signal);
}

/* Checkout fields carry ID specificity in the parent */
#customer_details .form-row input,
#customer_details .form-row textarea,
#customer_details .form-row select {
	color: var(--df-text);
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

#customer_details .form-row input:focus,
#customer_details .form-row textarea:focus {
	border-color: var(--df-rule-lit);
	outline: none;
}

/* Back-to-top control */
a.ui-to-top {
	color: var(--df-dim);
}

a.ui-to-top:hover,
a.ui-to-top:focus {
	color: var(--df-signal);
}

/* Footer social chips invert to white on hover in the parent */
#colophon ul.social-links li a:hover,
#colophon ul.social-links li a:focus {
	color: var(--df-signal-ink);
	background: var(--df-signal);
}

.error-404 input.search-submit:hover {
	background: var(--df-signal);
	color: var(--df-signal-ink);
}

/*
 * Keep visually-hidden text actually hidden — and, crucially, small.
 *
 * the9-store's woocommerce.css sets `width: 100%` on every label inside
 * .woocommerce-MyAccount-content, screen-reader labels included. The clip still
 * hid them, but the BOX stayed 1440px wide and absolutely positioned, which
 * pushed the document to 1937px and made Addresses scroll sideways. Clipped
 * text has no business having width, so it is pinned back to 1px.
 *
 * :not(:focus) so the skip link can still reveal itself for keyboard users.
 */
.screen-reader-text:not(:focus),
.woocommerce-MyAccount-content label.screen-reader-text:not(:focus),
.woocommerce label.screen-reader-text:not(:focus) {
	position: absolute;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Skip-link, shown only on keyboard focus */
.screen-reader-text:focus {
	color: var(--df-text);
	background-color: var(--df-panel);
	border: 1px solid var(--df-rule-lit);
}

/*
 * Neutralise AOS scroll animations.
 *
 * the9-store tags product tiles with data-aos="fade-up", which starts them at
 * opacity:0 / translateY(100px) and relies on the AOS observer to reveal them.
 * On single-product pages the observer never fires for the Related Products
 * grid, so those tiles stayed invisible permanently — the section rendered as
 * a heading above empty space. Content correctness beats a fade-in, so the
 * hidden start state is dropped everywhere.
 */
[data-aos] {
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
	transition: none !important;
}

/* =========================================================================
 * Uniform WooCommerce pass
 *
 * Everything below applies one set of treatments across every WooCommerce
 * surface, so a table on the Orders screen looks like a table on Checkout and
 * an input in Addresses looks like an input in the review form:
 *
 *   panel    → --df-panel on --df-rule, --df-radius
 *   inset    → --df-panel-2 (inputs, table heads, nested boxes)
 *   heading  → white, tight tracking
 *   label    → --df-dim
 *   data     → monospace, tabular figures
 *   action   → amber, dark ink
 *
 * Ordered from generic to specific so later blocks refine earlier ones.
 * ====================================================================== */

/* ---- every form control ------------------------------------------------ */

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="url"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce input[type="date"],
.woocommerce select,
.woocommerce textarea,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="password"],
.woocommerce-page input[type="number"],
.woocommerce-page select,
.woocommerce-page textarea,
.woocommerce .input-text,
.woocommerce-page .input-text {
	width: 100%;
	padding: 11px 13px;
	font-family: var(--df-sans);
	font-size: .93rem;
	color: var(--df-text);
	background: var(--df-panel-2);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
	box-shadow: none;
	transition: border-color .15s ease;
}

/*
 * Focus state.
 *
 * A border-colour shift alone is too quiet to show which field has the caret,
 * so focus gets the accent plus a soft ring. Applied site-wide, not just to
 * WooCommerce, so search boxes and comment forms behave the same way.
 */
.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus,
.woocommerce-page input:focus,
.woocommerce-page select:focus,
.woocommerce-page textarea:focus,
body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="tel"]:focus,
body input[type="url"]:focus,
body input[type="password"]:focus,
body input[type="search"]:focus,
body input[type="number"]:focus,
body select:focus,
body textarea:focus,
body .woocommerce-Input:focus,
.wc-block-components-text-input input:focus,
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	color: var(--df-text);
	background: var(--df-panel-2);
	border-color: var(--df-signal);
	box-shadow: 0 0 0 3px rgba(110, 231, 255, .18);
	outline: none;
}

/* Chrome keeps a white autofill wash unless it is painted over. */
body input:-webkit-autofill,
body input:-webkit-autofill:hover,
body input:-webkit-autofill:focus,
body textarea:-webkit-autofill,
body select:-webkit-autofill {
	-webkit-text-fill-color: var(--df-text);
	caret-color: var(--df-text);
	box-shadow: 0 0 0 1000px var(--df-panel-2) inset;
	transition: background-color 9999s ease-out;
}

/* A field the user has focused inside its wrapper should read as active. */
.wc-block-components-text-input.is-active label,
.woocommerce .form-row:focus-within label,
.woocommerce-page .form-row:focus-within label {
	color: var(--df-signal);
}

.woocommerce input::placeholder,
.woocommerce textarea::placeholder,
.woocommerce-page input::placeholder {
	color: #67738a;
}

.woocommerce input[disabled],
.woocommerce input:read-only,
.woocommerce-page input[disabled] {
	color: var(--df-dim);
	background: var(--df-ink);
}

/*
 * Checkboxes and radios.
 *
 * accent-color only tints the check itself — the box stays the browser's
 * white, which is why "Remember me" rendered as a bright square on the dark
 * login panel. These are drawn from scratch instead.
 */
body input[type="checkbox"],
body input[type="radio"],
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"],
.woocommerce-page input[type="checkbox"],
.woocommerce-page input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	display: inline-grid;
	place-content: center;
	width: 17px;
	height: 17px;
	min-height: 0;
	padding: 0;
	margin: 0 8px 0 0;
	vertical-align: -3px;
	background: var(--df-panel-2);
	border: 1px solid var(--df-rule-lit);
	border-radius: var(--df-radius);
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease;
}

body input[type="radio"],
.woocommerce input[type="radio"] {
	border-radius: 50%;
}

body input[type="checkbox"]:hover,
body input[type="radio"]:hover {
	border-color: var(--df-signal);
}

body input[type="checkbox"]:focus-visible,
body input[type="radio"]:focus-visible {
	outline: 2px solid var(--df-signal);
	outline-offset: 2px;
}

body input[type="checkbox"]:checked,
.woocommerce input[type="checkbox"]:checked {
	background: var(--df-signal);
	border-color: var(--df-signal);
}

body input[type="checkbox"]:checked::after {
	content: "";
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--df-signal-ink);
	border-bottom: 2px solid var(--df-signal-ink);
	transform: rotate(-45deg) translate(1px, -2px);
}

body input[type="radio"]:checked,
.woocommerce input[type="radio"]:checked {
	border-color: var(--df-signal);
}

body input[type="radio"]:checked::after {
	content: "";
	width: 9px;
	height: 9px;
	background: var(--df-signal);
	border-radius: 50%;
}

/* Labels and required markers */
.woocommerce label,
.woocommerce-page label,
.woocommerce .form-row label,
.woocommerce-page .form-row label {
	display: inline-block;
	margin-bottom: 6px;
	font-size: .86rem;
	color: var(--df-dim);
}

.woocommerce .required,
.woocommerce-page .required,
.woocommerce abbr.required {
	color: #ff4d63;
	border: 0;
	text-decoration: none;
}

.woocommerce .form-row,
.woocommerce-page .form-row {
	margin-bottom: 16px;
}

/* Password reveal + strength meter */
.woocommerce .password-input,
.woocommerce-page .password-input {
	display: block;
	position: relative;
}

.woocommerce .show-password-input,
.woocommerce-page .show-password-input {
	color: var(--df-dim);
}

.woocommerce .show-password-input.display-password,
.woocommerce-page .show-password-input.display-password {
	color: var(--df-signal);
}

.woocommerce-password-strength {
	padding: 8px 10px;
	font-family: var(--df-mono);
	font-size: .74rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	border-radius: var(--df-radius);
	background: var(--df-panel-2);
	border: 1px solid var(--df-rule);
}

.woocommerce-password-strength.short,
.woocommerce-password-strength.bad { color: #ff4d63; }
.woocommerce-password-strength.good { color: var(--df-signal); }
.woocommerce-password-strength.strong { color: #4ade80; }
.woocommerce-password-hint { color: var(--df-dim); }

/* ---- every table ------------------------------------------------------- */

.woocommerce table.shop_table,
.woocommerce table.shop_attributes,
.woocommerce table.woocommerce-orders-table,
.woocommerce table.woocommerce-table--order-details,
.woocommerce table.woocommerce-table--order-downloads,
.woocommerce table.woocommerce-MyAccount-orders,
.woocommerce-page table.shop_table {
	width: 100%;
	margin: 0 0 20px;
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table thead th,
.woocommerce table.woocommerce-orders-table thead th,
.woocommerce table.woocommerce-table--order-details thead th,
.woocommerce table.woocommerce-table--order-downloads thead th,
.woocommerce-page table.shop_table thead th {
	padding: 13px 15px;
	font-family: var(--df-mono);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--df-dim);
	background: var(--df-panel-2);
	border-bottom: 1px solid var(--df-rule);
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_attributes td,
.woocommerce table.shop_attributes th,
.woocommerce table.woocommerce-orders-table td,
.woocommerce table.woocommerce-table--order-details td,
.woocommerce table.woocommerce-table--order-downloads td,
.woocommerce-page table.shop_table td {
	padding: 13px 15px;
	color: var(--df-text);
	background: transparent;
	border-top: 1px solid var(--df-rule);
	border-bottom: 0;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
	padding: 13px 15px;
	color: var(--df-text);
	background: var(--df-panel-2);
	border-top: 1px solid var(--df-rule);
}

.woocommerce table.shop_table tfoot th {
	font-family: var(--df-mono);
	font-size: .78rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--df-dim);
}

/* Numbers line up wherever they appear */
.woocommerce .amount,
.woocommerce-page .amount,
.woocommerce td.product-total,
.woocommerce td.order-total,
.woocommerce .woocommerce-Price-amount {
	font-family: var(--df-mono);
	font-variant-numeric: tabular-nums;
}

/*
 * Order status.
 *
 * WooCommerce prints the status as bare text inside the <td> with no inner
 * element, so pill styling applied to the cell turned the whole cell into an
 * oval. The cell gets plain accented text; only <mark class="order-status">,
 * which is a real inline element on the order detail screen, gets a chip.
 */
.woocommerce table td.woocommerce-orders-table__cell-order-status,
.woocommerce .woocommerce-orders-table__cell-order-status {
	font-family: var(--df-mono);
	font-size: .76rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--df-signal);
	background: transparent;
	border-radius: 0;
}

.woocommerce mark.order-status {
	display: inline-block;
	padding: 3px 10px;
	font-family: var(--df-mono);
	font-size: .72rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--df-signal);
	background: rgba(110, 231, 255, .12);
	border: 1px solid rgba(110, 231, 255, .34);
	border-radius: var(--df-radius);
}

/*
 * No vertical rules between cells. The parent draws them light, which turned
 * every table into a grid of bright columns.
 */
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce table.woocommerce-orders-table td,
.woocommerce table.woocommerce-orders-table th,
.woocommerce table.woocommerce-table--order-details td,
.woocommerce table.woocommerce-table--order-details th,
.woocommerce table.woocommerce-table--order-downloads td,
.woocommerce table.woocommerce-table--order-downloads th,
.woocommerce table.shop_attributes td,
.woocommerce table.shop_attributes th,
.woocommerce-page table.shop_table td,
.woocommerce-page table.shop_table th {
	border-left: 0 !important;
	border-right: 0 !important;
}

/* First row needs no top rule — the header already provides the edge. */
.woocommerce table.shop_table tbody tr:first-child > td,
.woocommerce table.woocommerce-orders-table tbody tr:first-child > td {
	border-top: 0;
}

/* ---- panels and headings ---------------------------------------------- */

.woocommerce .woocommerce-order,
.woocommerce .woocommerce-order-details,
.woocommerce .woocommerce-customer-details,
.woocommerce .woocommerce-column,
.woocommerce ul.order_details,
.woocommerce .woocommerce-thankyou-order-details {
	padding: 20px 22px;
	margin-bottom: 20px;
	color: var(--df-text);
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

.woocommerce ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	list-style: none;
}

.woocommerce ul.order_details li {
	font-family: var(--df-mono);
	font-size: .74rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--df-dim);
	border: 0;
}

.woocommerce ul.order_details li strong {
	display: block;
	margin-top: 5px;
	font-family: var(--df-sans);
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--df-text);
}

.woocommerce h2,
.woocommerce h3,
.woocommerce-page h2,
.woocommerce-page h3,
.woocommerce .woocommerce-order-details__title,
.woocommerce .woocommerce-column__title,
.woocommerce-customer-details h2 {
	color: #fff;
	letter-spacing: -.015em;
}

.woocommerce address {
	padding: 14px 16px;
	font-style: normal;
	line-height: 1.7;
	color: var(--df-dim);
	background: var(--df-panel-2);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

/* ---- coupons, quantity, sorting --------------------------------------- */

.woocommerce .coupon,
.woocommerce form.checkout_coupon,
.woocommerce .checkout_coupon {
	padding: 16px 18px;
	color: var(--df-text);
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

.woocommerce .quantity input.qty,
.woocommerce-page .quantity input.qty {
	width: 74px;
	text-align: center;
}

.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-result-count {
	color: var(--df-text);
}

.woocommerce .woocommerce-result-count {
	font-family: var(--df-mono);
	font-size: .78rem;
	color: var(--df-dim);
}

/* ---- product page detail ---------------------------------------------- */

.woocommerce #reviews #comments ol.commentlist li,
.woocommerce #review_form_wrapper {
	padding: 16px 18px;
	color: var(--df-text);
	background: var(--df-panel-2);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

.woocommerce #reviews .comment-text .meta,
.woocommerce #reviews .woocommerce-review__published-date {
	color: var(--df-dim);
}

.woocommerce .stock.in-stock { color: #4ade80; }
.woocommerce .stock.out-of-stock { color: #ff4d63; }

/* ---- block components (cart, checkout, order confirmation) ------------- */

.wc-block-components-panel,
.wc-block-components-sidebar,
.wc-block-order-confirmation-summary,
.wc-block-order-confirmation-totals,
.wc-block-order-confirmation-address {
	color: var(--df-text);
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

/*
 * One surface, not two.
 *
 * The order summary block sets its own --df-ink ground inside the sidebar's
 * --df-panel, so the item list sat as a darker rectangle inside a lighter
 * frame. Both pass contrast individually, which is why a numeric audit never
 * flagged it — it just looked wrong. The inner block inherits the panel now.
 */
/*
 * woocommerce-core.css paints these with `var(--bg-color) !important` through a
 * grouped selector whose matching member is a two-class descendant chain
 * (`.wc-block-checkout .wc-block-…`). A single-class rule loses even with
 * !important, so the ancestor is included here to match its depth.
 */
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block,
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block,
.wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-block,
.wc-block-components-sidebar .wc-block-components-checkout-order-summary__content,
.wc-block-components-sidebar .wc-block-components-order-summary,
.wc-block-components-sidebar .wc-block-components-order-summary__content,
.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-components-checkout-order-summary__content,
.wc-block-components-order-summary,
.wc-block-components-order-summary__content {
	background: transparent !important;
	border: 0;
}

.wc-block-components-title,
.wc-block-components-checkout-step__title {
	color: #fff;
}

.wc-block-components-checkout-step__description,
.wc-block-components-address-card__edit,
.wc-block-components-order-summary-item__description {
	color: var(--df-dim);
}

.wc-block-components-address-card,
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	color: var(--df-text);
	background: var(--df-panel-2);
	border-color: var(--df-rule);
	border-radius: var(--df-radius);
}

/*
 * Selected payment method.
 *
 * wc-blocks draws this highlight ring with `currentColor`, so it inherited the
 * light body text and rendered as a bright white 1.5px outline around the whole
 * payment panel. Selection should read as the accent, not as a stray border.
 */
.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control__option--checked-option-highlighted {
	box-shadow: inset 0 0 0 1.5px var(--df-signal) !important;
	border-color: transparent;
}

/*
 * The ring is an INSET shadow, so it is painted inside the option's padding box
 * and any child with its own opaque background paints straight over it. The
 * method label carried a solid --df-panel-2 fill, which punched a notch out of
 * the ring along the top-left. The option itself supplies the surface, so the
 * label does not need one.
 */
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option label.wc-block-components-radio-control__option {
	background: transparent;
}

/*
 * The generic card icon beside "Credit / Debit Card" is white artwork.
 * Inverting turns its white body dark so it sinks into the panel and its
 * strokes come up light.
 *
 * It must carry NO chip of its own: filter: invert() applies to the element's
 * own background and border too, so the dark chip an earlier version added was
 * flipped to near-white — which is exactly the oversized white block this was
 * meant to remove. Scoped by filename so brand marks are never touched.
 */
#payment-method img[src$="cards.svg"],
.wc-block-components-radio-control__option img[src$="cards.svg"] {
	padding: 0;
	background: transparent;
	border: 0;
	filter: invert(1);
}

/*
 * Order summary line metadata.
 *
 * WooCommerce's cart serialisation keeps the <strong> label tags on some items
 * and strips them on others — the products themselves are identical, and the
 * Store API returns identical markup for both. The result was one line reading
 * bold and the next plain. Since the missing tags cannot be restored in CSS,
 * the styling is made uniform so their presence stops mattering.
 */
.wc-block-components-product-metadata__description strong,
.wc-block-components-product-metadata strong,
.wc-block-components-order-summary-item__description strong {
	font-weight: 400;
	color: inherit;
}

.wc-block-components-order-summary-item {
	border-color: var(--df-rule);
}

.wc-block-components-totals-footer-item,
.wc-block-components-totals-item--total {
	color: var(--df-text);
	border-color: var(--df-rule);
}

.wc-block-components-validation-error {
	color: #ff4d63;
}

/* =========================================================================
 * Footer
 *
 * Replaces the parent's single credit line. Four columns on desktop, stacked
 * on narrow screens, with the catalogue count pulled live from the store.
 * ====================================================================== */

.df-footer {
	padding: 54px 0 0;
	margin-top: 60px;
	color: var(--df-dim);
	background: var(--df-ink);
	border-top: 1px solid var(--df-rule);
}

.df-footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
	gap: 40px;
	padding-bottom: 44px;
}

.df-footer-mark {
	margin: 0 0 12px;
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
}

.df-footer-blurb {
	max-width: 42ch;
	margin: 0 0 18px;
	font-size: .9rem;
	line-height: 1.65;
	color: var(--df-dim);
}

.df-footer-stat {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 9px 14px;
	margin: 0;
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

.df-footer-stat b {
	font-family: var(--df-mono);
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.df-footer-stat span {
	font-family: var(--df-mono);
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--df-dim);
}

.df-footer-col h2 {
	margin: 0 0 14px;
	font-family: var(--df-mono);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--df-dim);
}

.df-footer-col ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.df-footer-col li {
	margin-bottom: 9px;
	list-style: none;
}

.df-footer-col a {
	font-size: .92rem;
	color: var(--df-text);
	text-decoration: none;
	transition: color .15s ease;
}

.df-footer-col a:hover,
.df-footer-col a:focus {
	color: var(--df-signal);
}

.df-footer-help p {
	margin: 0;
	font-size: .88rem;
	line-height: 1.7;
	color: var(--df-dim);
}

.df-footer-help code {
	padding: 2px 6px;
	font-family: var(--df-mono);
	font-size: .82em;
	color: var(--df-text);
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

.df-footer-base {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	align-items: center;
	justify-content: space-between;
	padding: 20px 0 26px;
	border-top: 1px solid var(--df-rule);
}

.df-footer-base p {
	margin: 0;
	font-size: .82rem;
	color: var(--df-dim);
}

.df-footer-note {
	font-family: var(--df-mono);
	font-size: .72rem !important;
	letter-spacing: .04em;

	/* Clear the fixed back-to-top control, which sits over this corner. */
	padding-right: 60px;
}

@media (max-width: 560px) {
	.df-footer-note { padding-right: 0; }
}

/* Back to top */
.df-to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	color: var(--df-text);
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
	transition: color .15s ease, border-color .15s ease;
}

.df-to-top:hover,
.df-to-top:focus {
	color: var(--df-signal);
	border-color: var(--df-rule-lit);
}

.df-to-top svg {
	width: 18px;
	height: 18px;
}

@media (max-width: 900px) {
	.df-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 560px) {
	.df-footer { padding-top: 38px; margin-top: 40px; }
	.df-footer-grid { grid-template-columns: 1fr; gap: 26px; }
	.df-footer-base { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
 * Audit fixes
 *
 * Each of these was found by measuring computed contrast and backgrounds on
 * the live pages rather than by reading stylesheets, which is why they had
 * survived several earlier passes.
 * ====================================================================== */

/* ---- 404 ---------------------------------------------------------------
 * The whole section rendered on a white ground with white text on it — the
 * heading measured 1.00:1, i.e. completely invisible.
 */
.error-404,
section.error-404,
.error-404.not-found,
.not-found .page-content {
	color: var(--df-text) !important;
	background: transparent !important;
}

.error-404 .page-title,
.error-404 h1,
.error-404 h2,
.not-found .page-title {
	color: #fff !important;
}

.error-404 p,
.not-found .page-content p {
	color: var(--df-dim) !important;
}

.error-404 .search-field,
.not-found .search-field {
	color: var(--df-text);
	background: var(--df-panel-2);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

/* ---- stray light edges -------------------------------------------------
 * Borders the parent draws in near-white greys (#eaeaea, #dbdbdb, #f2f2f2).
 * These are invisible to a background-only audit — they only surfaced once
 * the checker was extended to borders, outlines and shadows.
 */
.the9-store-toolbar,
.the9-store-toolbar.clearfix,
.product-details-wrap,
.woocommerce div.product .product-details-wrap,
span.sku_wrapper,
.woocommerce .product_meta span.sku_wrapper {
	border-color: var(--df-rule) !important;
}

/* ---- shop toolbar ------------------------------------------------------
 * "Sort by popularity" and "View:" sat at 2.57:1 in the parent's #555.
 */
.customSelect,
.customSelectInner,
.hasCustomSelect,
li.view-title,
.view-title,
.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-ordering .customSelectInner {
	color: var(--df-dim) !important;
}

.woocommerce .woocommerce-ordering .customSelect {
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

/* ---- account details ---------------------------------------------------
 * The fieldset legend measured 1.62:1 against the panel behind it.
 */
.woocommerce fieldset legend,
.woocommerce-EditAccountForm legend,
.woocommerce-MyAccount-content legend {
	color: var(--df-dim) !important;
	background: transparent !important;
}

/* ---- checkout blocks ---------------------------------------------------
 * wc-blocks ships white inputs, a white quantity badge and a near-black
 * address summary. All three measured as failures.
 */
.wp-block-woocommerce-checkout input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wp-block-woocommerce-cart input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wc-block-components-form input:not([type="checkbox"]):not([type="radio"]),
.wc-block-components-address-form input,
.wc-block-components-combobox-control input {
	color: var(--df-text) !important;
	background: var(--df-panel-2) !important;
	border-color: var(--df-rule) !important;
}

.wc-block-components-address-card,
.wc-block-components-address-card__address-section,
.wc-block-components-address-card p,
.wc-block-components-address-card span {
	color: var(--df-dim) !important;
}

/*
 * Checkout Country / Province pickers.
 *
 * These use `wc-blocks-components-select` — note the plural "blocks" — which
 * is a different component from `wc-block-components-select` that the rest of
 * the block form uses. Styling only the singular form left these two controls
 * on a white ground.
 */
.wc-blocks-components-select,
.wc-blocks-components-select__container,
.wc-blocks-components-select__select,
.wc-block-components-country-input .wc-blocks-components-select__container,
.wc-block-components-state-input .wc-blocks-components-select__container {
	color: var(--df-text) !important;
	background: var(--df-panel-2) !important;
	border-color: var(--df-rule) !important;
	border-radius: var(--df-radius);
}

.wc-blocks-components-select__label,
.wc-blocks-components-select__container label {
	color: var(--df-dim) !important;
}

.wc-blocks-components-select__expand {
	fill: var(--df-dim);
}

.wc-blocks-components-select__container:focus-within {
	border-color: var(--df-signal) !important;
	box-shadow: 0 0 0 3px rgba(110, 231, 255, .18);
}

/*
 * The quantity badge ships with a hard-coded `transform: translate(16px,-11px)`
 * on top of `left:0;right:0`, which parked it 16px past the right edge of the
 * 48px thumbnail — the overflow the page audit kept flagging. It is re-pinned
 * to the thumbnail's own corner instead, and squared off to match the rest.
 */
.wc-block-components-order-summary-item__image {
	position: relative;
}

.wc-block-components-order-summary-item__quantity {
	position: absolute !important;
	top: -6px !important;
	right: -6px !important;
	left: auto !important;
	bottom: auto !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	width: auto !important;
	height: 18px !important;
	padding: 0 4px !important;
	transform: none !important;
	font-family: var(--df-mono);
	font-size: .66rem;
	line-height: 1;
	color: var(--df-text) !important;
	background: var(--df-panel-2) !important;
	border: 1px solid var(--df-rule-lit) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Block checkboxes are their own control, separate from the native ones. */
.wc-block-components-checkbox__input,
.wc-block-components-checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 17px !important;
	height: 17px !important;
	background: var(--df-panel-2) !important;
	border: 1px solid var(--df-rule-lit) !important;
	border-radius: var(--df-radius) !important;
}

.wc-block-components-checkbox__input:checked,
.wc-block-components-checkbox input[type="checkbox"]:checked {
	background: var(--df-signal) !important;
	border-color: var(--df-signal) !important;
}

.wc-block-components-checkbox__mark {
	fill: var(--df-signal-ink);
}

/* ---- containment -------------------------------------------------------
 * Stripe injects fixed-width frames and loaders that pushed past their parent
 * and made the Addresses page scroll sideways. Constraining those elements is
 * the actual fix.
 *
 * Deliberately NOT using `overflow-x: hidden` on html/body: it would mask any
 * future overflow instead of surfacing it, and an overflow container on the
 * root breaks `position: sticky`, which the front page's catalogue toolbar
 * relies on.
 */
.wc-block-components-express-payment,
.wc-block-components-express-payment__event-buttons,
.__PrivateStripeElement,
.__PrivateStripeElementLoader,
.StripeElement {
	max-width: 100%;
}

.woocommerce-MyAccount-content,
.woocommerce-address-fields,
.woocommerce form .form-row {
	min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
	body * { transition: none !important; }
}

/* =========================================================================
 * Own chrome
 *
 * header.php and footer.php now emit this theme's own markup, so this section
 * styles real structure rather than correcting the9-store's. The parent's
 * stylesheets are dequeued entirely in functions.php — that is what allowed the
 * override layer above to stop growing.
 * ====================================================================== */

/*
 * Body element class is df-page-root, NOT df-body — that name belongs to the
 * catalogue card body in style.css, and sharing it gave every page the card's
 * internal padding.
 */
.df-page-root {
	margin: 0;
	padding: 0;
	background: var(--df-ink);
	color: var(--df-text);
	font-family: var(--df-sans);
	-webkit-font-smoothing: antialiased;
}

.df-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.df-main { flex: 1; }

/* ---- masthead ---------------------------------------------------------- */

.df-head {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(7, 7, 10, .88);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--df-rule);
}

.df-head-inner {
	display: flex;
	gap: 26px;
	align-items: center;
	min-height: 70px;
}

.df-brand {
	flex: none;
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}

.df-brand:hover { color: var(--df-signal); }

.df-nav { flex: 1; }

.df-nav-list {
	display: flex;
	gap: 26px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.df-nav-list li { list-style: none; }

.df-nav-list a {
	position: relative;
	display: block;
	padding: 6px 0;
	font-family: var(--df-mono);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--df-dim);
	text-decoration: none;
	transition: color .15s ease;
}

.df-nav-list a:hover,
.df-nav-list .current-menu-item > a {
	color: var(--df-text);
}

/* Current section marked by a rule under the label, not a fill. */
.df-nav-list .current-menu-item > a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: var(--df-signal);
}

.df-head-tools {
	display: flex;
	flex: none;
	gap: 14px;
	align-items: center;
	/*
	 * Below 900px the nav — which is the flex:1 spacer between brand and
	 * tools — is hidden, which left the tools clustered against the brand
	 * with half the band empty. auto margin keeps them pinned right.
	 */
	margin-left: auto;
}

.df-head-search {
	position: relative;
	width: clamp(180px, 22vw, 280px);
}

/*
 * .df-head prefix is load-bearing: on shop/product pages the generic
 * `.woocommerce input[type="search"]` rule is (0,2,1) and was overriding this
 * block — Sora at .93rem with 13px padding under an absolutely-positioned
 * magnifier expecting a 34px inset. The extra class wins the tie by order.
 */
.df-head .df-head-search input {
	width: 100%;
	padding: 9px 12px 9px 34px;
	font-family: var(--df-mono);
	font-size: .78rem;
	color: var(--df-text);
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
	outline: none;
	transition: border-color .15s ease;
}

.df-head .df-head-search input::placeholder { color: #5d6377; }
.df-head .df-head-search input:focus { border-color: var(--df-signal); }

.df-head-search svg {
	position: absolute;
	top: 50%;
	left: 12px;
	width: 14px;
	height: 14px;
	transform: translateY(-50%);
	fill: none;
	stroke: #5d6377;
	stroke-width: 2;
	pointer-events: none;
}

.df-head-link,
.df-head-cart {
	display: flex;
	gap: 8px;
	align-items: center;
	font-family: var(--df-mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--df-dim);
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease;
}

.df-head-link:hover,
.df-head-cart:hover { color: var(--df-signal); }

.df-head-cart-count {
	display: inline-grid;
	place-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	font-size: .68rem;
	font-variant-numeric: tabular-nums;
	color: var(--df-signal-ink);
	background: var(--df-signal);
}

.df-head-toggle {
	display: none;
	width: 38px;
	height: 38px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
	cursor: pointer;
}

.df-head-bars,
.df-head-bars::before,
.df-head-bars::after {
	display: block;
	width: 16px;
	height: 1.5px;
	margin: 0 auto;
	background: var(--df-text);
	transition: transform .18s ease, opacity .18s ease;
}

.df-head-bars::before,
.df-head-bars::after {
	content: "";
	position: relative;
}

.df-head-bars::before { top: -5px; }
.df-head-bars::after { top: 3.5px; }

.df-head-toggle.is-open .df-head-bars { background: transparent; }
.df-head-toggle.is-open .df-head-bars::before { transform: translateY(5px) rotate(45deg); }
.df-head-toggle.is-open .df-head-bars::after { transform: translateY(-3.5px) rotate(-45deg); }

.df-mobile-nav {
	border-top: 1px solid var(--df-rule);
	background: var(--df-panel);
}

.df-mobile-list {
	padding: 10px 0;
	margin: 0;
	list-style: none;
}

.df-mobile-list li { list-style: none; }

.df-mobile-list a {
	display: block;
	padding: 12px 0;
	font-family: var(--df-mono);
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--df-text);
	text-decoration: none;
	border-bottom: 1px solid var(--df-rule);
}

.df-mobile-list li:last-child a { border-bottom: 0; }
.df-mobile-list a:hover { color: var(--df-signal); }

@media (max-width: 900px) {
	.df-nav,
	.df-head-search { display: none; }
	.df-head-toggle { display: block; }
	.df-head-inner { gap: 14px; }
}

/* ---- page shells ------------------------------------------------------- */

.df-page { padding: clamp(44px, 6vw, 78px) 0 90px; }

.df-page-head,
.df-entry-head { margin-bottom: 30px; }

.df-entry-title {
	margin: 0;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: #fff;
}

.df-entry-body { line-height: 1.75; color: var(--df-dim); }
.df-entry-body strong { color: var(--df-text); }
.df-entry-media { margin-bottom: 28px; }
.df-entry-media img { width: 100%; height: auto; }

.df-post-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

.df-post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	transition: border-color .16s ease;
}

.df-post-card:hover { border-color: var(--df-rule-lit); }
.df-post-media img { display: block; width: 100%; height: auto; }
.df-post-body { padding: 18px; }

.df-post-title {
	margin: 0 0 8px;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
}

.df-post-title a { color: #fff; text-decoration: none; }
.df-post-title a:hover { color: var(--df-signal); }
.df-post-excerpt { margin: 0; font-size: .9rem; color: var(--df-dim); }

.df-404-copy {
	max-width: 52ch;
	margin: 0 0 26px;
	font-size: 1.02rem;
	line-height: 1.65;
	color: var(--df-dim);
}

.df-404-actions { margin-top: 26px; }

/* =========================================================================
 * WooCommerce default surfaces
 *
 * Restoring WooCommerce's own stylesheets (see functions.php) brought back its
 * stock light palette, which the parent's replacement had previously masked.
 * These answer the specific defaults that surfaced, scoped through .woocommerce
 * to match their specificity rather than reaching for !important.
 * ====================================================================== */

/* Login / register panels ship a #cfc8d8 hairline. */
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon,
.woocommerce form.lost_reset_password {
	color: var(--df-text);
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	border-radius: var(--df-radius);
}

/* Gallery zoom control is white artwork on a white puck by default. */
.woocommerce div.product .woocommerce-product-gallery a.woocommerce-product-gallery__trigger,
.woocommerce a.woocommerce-product-gallery__trigger {
	color: var(--df-text);
	background: var(--df-panel-2);
	border: 1px solid var(--df-rule-lit);
	border-radius: var(--df-radius);
}

/* WooCommerce's own notice colours, re-pointed at the palette. */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	background: var(--df-panel) !important;
	color: var(--df-text) !important;
}

/* Stock price/rating defaults */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
	color: var(--df-text);
}

.woocommerce .star-rating span::before,
.woocommerce p.stars a::before {
	color: var(--df-signal);
}

/* Tabs on the single product */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: var(--df-panel-2);
	border-color: var(--df-rule);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--df-panel);
	border-bottom-color: var(--df-panel);
}

.woocommerce div.product .woocommerce-tabs .panel {
	color: var(--df-dim);
}

/* The parent's loop button group is gone with its templates; neutralise the
 * leftover class so it cannot re-introduce the absolute-positioned bar. */
.woocommerce ul.products li.product ul.button-group {
	position: static;
	max-width: 100%;
}

/* ---- product grid ------------------------------------------------------
 * WooCommerce's stock loop is float-based. With the parent's grid retired,
 * this replaces it with a real CSS grid so the shop, category archives and
 * related-products rails all size from one rule at any column count.
 */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: 18px;
	padding: 0;
	margin: 0 0 34px;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

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

.woocommerce ul.products li.product a img {
	width: 100%;
	margin: 0;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--df-panel-2);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 14px 14px 0;
	margin: 0;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.34;
	color: #fff;
}

.woocommerce ul.products li.product .price {
	display: block;
	padding: 8px 14px 0;
	margin: 0;
	font-family: var(--df-mono);
	font-size: .92rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--df-text);
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin: 14px 14px 16px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: block;
	text-decoration: none;
}

/* Archive toolbar: result count and ordering on one line. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	display: inline-block;
	margin: 0 0 22px;
	vertical-align: middle;
}

.woocommerce .woocommerce-ordering { float: right; }

.woocommerce .woocommerce-ordering select {
	width: auto;
	padding: 9px 12px;
	font-family: var(--df-mono);
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* The parent's shop toolbar markup is unhooked; hide any residue. */
.the9-store-toolbar,
.the9-store-grid-list,
ul.view-mode { display: none !important; }

/* Archive toolbar sits on one baseline; the ordering select is a real control. */
.woocommerce .woocommerce-result-count {
	font-family: var(--df-mono);
	font-size: .76rem;
	letter-spacing: .04em;
	color: var(--df-dim);
}

.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	color: var(--df-text);
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
}

.woocommerce .woocommerce-ordering select:focus {
	border-color: var(--df-signal);
	box-shadow: 0 0 0 3px rgba(110, 231, 255, .18);
	outline: none;
}

/* ---- header mini-cart --------------------------------------------------
 * Hover/focus dropdown around the cart trigger. Kept as WC_Widget_Cart so
 * WooCommerce's own AJAX fragment refresh keeps updating it.
 */
.df-head-cartwrap {
	position: relative;
}

.df-minicart {
	position: absolute;
	top: calc(100% + 14px);
	right: 0;
	z-index: 60;
	width: 330px;
	padding: 18px;
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
	box-shadow: 0 22px 48px rgba(0, 0, 0, .6);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.df-head-cartwrap:hover .df-minicart,
.df-head-cartwrap:focus-within .df-minicart {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Pointer notch tying the panel to the trigger. */
.df-minicart::before {
	content: "";
	position: absolute;
	top: -7px;
	right: 22px;
	width: 12px;
	height: 12px;
	background: var(--df-panel);
	border-top: 1px solid var(--df-rule);
	border-left: 1px solid var(--df-rule);
	transform: rotate(45deg);
}

/* Bridges the gap so the pointer can travel from trigger to panel. */
.df-head-cartwrap::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 0;
	width: 100%;
	height: 16px;
}

.df-minicart .widget_shopping_cart_content { color: var(--df-text); }

.df-minicart ul.cart_list {
	max-height: 280px;
	padding: 0;
	margin: 0 0 14px;
	overflow-y: auto;
	list-style: none;
}

.df-minicart ul.cart_list li {
	position: relative;
	display: flex;
	gap: 12px;
	align-items: center;
	/* !important: core reserves 32px of left padding for the remove control
	 * it absolutely-positions top-left — ours sits on the right instead. */
	padding: 12px 0 !important;
	margin: 0;
	list-style: none;
	border-bottom: 1px solid var(--df-rule);
}

.df-minicart ul.cart_list li:last-child { border-bottom: 0; }

/*
 * The product link wraps both the thumbnail and the title, so it has to be the
 * flex row itself — reordering from the <li> can't separate them. WooCommerce
 * floats the thumbnail right, which is what pushed it after the title; the
 * float is cleared here so DOM order (image, then name) is what renders.
 */
.df-minicart ul.cart_list li a:not(.remove) {
	display: flex;
	flex: 1;
	gap: 12px;
	align-items: center;
	min-width: 0;
	font-size: .88rem;
	line-height: 1.35;
	color: var(--df-text);
	text-decoration: none;
}

.df-minicart ul.cart_list li a:not(.remove):hover { color: var(--df-signal); }

.df-minicart ul.cart_list li img {
	flex: 0 0 auto;
	order: -1;
	float: none;
	width: 48px;
	height: 48px;
	margin: 0;
	object-fit: cover;
	background: var(--df-panel-2);
}

/*
 * WooCommerce pins the remove control to the top-left corner of the row and
 * paints it `var(--wc-red) !important`. Both are undone here — it belongs at
 * the end of the row as a quiet control, red only on hover.
 */
.df-head-cartwrap .df-minicart ul.cart_list li a.remove {
	position: static;
	order: 2;
	flex: 0 0 auto;
	width: auto;
	height: auto;
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1;
	color: var(--df-dim) !important;
	border-radius: 0;
}

.df-head-cartwrap .df-minicart ul.cart_list li a.remove:hover {
	color: var(--df-danger) !important;
	background: transparent;
}

.df-minicart .quantity {
	flex: 0 0 auto;
	font-family: var(--df-mono);
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--df-dim);
}

.df-minicart .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	/* !important pair: core declares `border-top: 3px double` (the doubled
	 * line) and `padding: 4px 0 0` (the missing gap) at higher precedence. */
	padding: 14px 0 !important;
	margin: 0;
	font-family: var(--df-mono);
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--df-dim);
	border-top: 1px solid var(--df-rule) !important;
}

.df-minicart .woocommerce-mini-cart__total strong { font-weight: 500; }
.df-minicart .woocommerce-mini-cart__total .amount { color: var(--df-text); }

.df-minicart .woocommerce-mini-cart__buttons {
	display: flex;
	gap: 8px;
	margin: 2px 0 0;
}

/*
 * `body .woocommerce a.button` is (0,2,2) — `a.button` counts as a type *and* a
 * class — so a two-class selector loses to it no matter how late it appears.
 * The wrapper is included to clear both that and WooCommerce's own
 * `.woocommerce .widget_shopping_cart .buttons a`.
 */
.df-head-cartwrap .df-minicart .woocommerce-mini-cart__buttons a.button {
	flex: 1;
	display: inline-block;
	padding: 11px 12px;
	margin: 0;
	font-family: var(--df-mono);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.25;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--df-text);
	background: transparent;
	border: 1px solid var(--df-rule-lit);
	clip-path: none;
}

.df-head-cartwrap .df-minicart .woocommerce-mini-cart__buttons a.button:hover {
	color: var(--df-signal);
	border-color: var(--df-signal);
	filter: none;
}

.df-head-cartwrap .df-minicart .woocommerce-mini-cart__buttons a.button.checkout {
	color: var(--df-signal-ink);
	background: var(--df-signal);
	border-color: var(--df-signal);
	clip-path: polygon(var(--df-notch) 0, 100% 0, 100% calc(100% - var(--df-notch)), calc(100% - var(--df-notch)) 100%, 0 100%, 0 var(--df-notch));
}

.df-head-cartwrap .df-minicart .woocommerce-mini-cart__buttons a.button.checkout:hover {
	color: var(--df-signal-ink);
	filter: brightness(1.08);
}

.df-minicart .woocommerce-mini-cart__empty-message {
	margin: 0;
	font-size: .86rem;
	color: var(--df-dim);
}

@media (max-width: 900px) {
	.df-minicart { display: none; }
}

/* ---- checkout summary rhythm -------------------------------------------
 * WooCommerce gives each totals row its own asymmetric padding (8px 0 16px,
 * 16px 0, 16px 0 0), so the gaps between rows never matched. One rule, one
 * rhythm, and the empty wrappers it emits are collapsed.
 */
.wc-block-components-totals-wrapper {
	padding: 16px 20px !important;
	margin: 0;
}

.wc-block-components-totals-wrapper:empty {
	display: none !important;
}

/*
 * The subtotal group adds its own bottom padding on top of the 16px each
 * wrapper already carries, so the Subtotal/Total gap came out 48px against 32px
 * everywhere else. The wrappers own the rhythm; the group just contains them.
 */
.wp-block-woocommerce-checkout-order-summary-totals-block,
.wp-block-woocommerce-checkout-order-summary-cart-items-block {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item {
	padding: 0;
}

/*
 * Blocks echoes the product short description into the summary. For this
 * catalogue that is the full spec sheet — six lines per line-item, the first of
 * which just repeats the product title — which is what made the rows read as
 * randomly spaced. The specs stay on the product page; the summary lists what
 * is being bought.
 */
.wc-block-components-order-summary .wc-block-components-product-metadata {
	display: none;
}

/*
 * The title is what's being bought — it shouldn't read dimmer than its price.
 * `checkout.css` sets `.wc-block-checkout__sidebar .wc-block-components-product-name`
 * to `color: inherit`, which resolved to the muted body colour. That sheet is
 * enqueued when the block renders, so it always prints after this one and no
 * dependency ordering can beat it — this out-specifies it instead.
 */
.wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-product-name {
	margin: 0;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--df-text);
}

.wc-block-components-order-summary .wc-block-components-order-summary-item + .wc-block-components-order-summary-item {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--df-rule);
}

/*
 * The row was 79px tall for 40px of text: the image column carries an 8px top
 * margin and 16px of bottom padding, and the thumbnail is inline so it also
 * picks up a baseline gap. Stripping all three collapses the row onto its
 * content, which is what made the spacing look arbitrary between line items.
 */
.wc-block-components-order-summary .wc-block-components-order-summary-item {
	align-items: flex-start;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__image {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__image img {
	display: block;
	margin: 0;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__description {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 12px 0 16px;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
	padding: 0;
}

/*
 * Unit price and line total are the same figure at quantity 1, so the unit
 * price is demoted to a caption rather than repeating the total at full weight.
 */
.wc-block-components-order-summary .wc-block-components-order-summary-item__individual-prices {
	font-family: var(--df-mono);
	font-size: .78rem;
	color: var(--df-dim);
}

/* ==================================================================== cart
 * Cart page redesign. Everything here is scoped to .wp-block-woocommerce-cart
 * / .wc-block-cart so the checkout page — which shares most of the block
 * component classes — is not dragged along. The responsive size class
 * (is-large etc.) lives on .wc-block-cart, NOT on .wp-block-woocommerce-cart.
 */

/* ---- line items as one panel ---- */

/*
 * wc-blocks-style-cart loads at block render time, AFTER this sheet, and
 * declares `table.wc-block-cart-items { background: none !important }` plus
 * its own td/th borders — so the contested properties in this section carry
 * !important or they simply do not apply. Verified rule-by-rule via CDP
 * getMatchedStylesForNode.
 */
.wp-block-woocommerce-cart table.wc-block-cart-items {
	border-collapse: separate;
	border-spacing: 0;
	margin: 0;
	background: var(--df-panel) !important;
	border: 1px solid var(--df-rule);
}

/*
 * The main column ships with ~61px of its own right padding, which pushed the
 * items panel 61px short of the column edge and made the gutter read as 93px
 * against the sidebar's 32px. The sidebar margin owns the gutter; the column
 * owns nothing.
 */
.wc-block-cart .wc-block-components-main.wc-block-cart__main {
	padding: 0 !important;
}

.wp-block-woocommerce-cart .wc-block-cart-items th {
	padding: 16px 16px 12px 0;
}

/*
 * Core hides the middle "Details" header cell with visibility:hidden, which
 * also erases its border-bottom — the hairline under the header row broke in
 * the middle. The cell stays visible (so its border draws); only its label
 * span is hidden.
 */
table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-product {
	visibility: visible !important;
}

table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-product > span {
	visibility: hidden;
}

.wp-block-woocommerce-cart th.wc-block-cart-items__header-image {
	padding-left: 20px;
}

.wp-block-woocommerce-cart th.wc-block-cart-items__header-total {
	padding-right: 20px;
	text-align: right;
}

.wp-block-woocommerce-cart .wc-block-cart-items td {
	padding: 18px 16px 18px 0;
	background: transparent;
	border: 0 !important;
	border-top: 1px solid var(--df-rule) !important;
	vertical-align: middle;
}

.wp-block-woocommerce-cart .wc-block-cart-items tbody tr:first-child td {
	border-top: 0 !important;
}

/* Cell width = image + both paddings, or the img's max-width:100% cap
 * shrinks the square to whatever the content box happens to be. */
.wp-block-woocommerce-cart td.wc-block-cart-item__image {
	width: 100px;
	padding-left: 20px;
}

.wp-block-woocommerce-cart td.wc-block-cart-item__image a {
	display: block;
	line-height: 0;
}

.wp-block-woocommerce-cart td.wc-block-cart-item__image img {
	display: block;
	/* core sets width:100% of the cell — squares need !important */
	width: 64px !important;
	max-width: none !important;
	height: 64px;
	margin: 0;
	object-fit: cover;
	background: var(--df-panel-2);
	border-radius: 0;
}

.wp-block-woocommerce-cart .wc-block-cart-items .wc-block-components-product-name {
	display: inline-block;
	margin: 0 0 6px;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--df-text);
}

/*
 * The spec sheet (Name/Spawncode/YTD/Polygons…) is the product short
 * description echoed into every row — six lines per item, the first repeating
 * the title. Hidden here exactly as in the checkout summary; specs live on the
 * product page.
 */
.wp-block-woocommerce-cart .wc-block-cart-items .wc-block-components-product-metadata {
	display: none;
}

/*
 * Unit price under the title duplicates the Total column at quantity 1
 * (products are sold individually — there is no quantity stepper). On the
 * wide layout only the Total column shows; when the block stacks and the
 * Total column is dropped, the inline price takes over in mono.
 */
.wc-block-cart.is-large .wc-block-cart-item__prices {
	display: none;
}

.wc-block-cart:not(.is-large) td.wc-block-cart-item__total,
.wc-block-cart:not(.is-large) th.wc-block-cart-items__header-total {
	display: none;
}

.wc-block-cart:not(.is-large) .wc-block-cart-item__prices {
	margin: 0 0 4px;
	font-family: var(--df-mono);
	font-size: .85rem;
	color: var(--df-text);
}

.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price {
	font-size: .95rem;
	color: var(--df-text);
}

.wp-block-woocommerce-cart td.wc-block-cart-item__total {
	padding-right: 20px;
	text-align: right;
	justify-content: flex-end;
	align-items: center;
}

/*
 * Remove control. woocommerce-core renders it as an underlined text link (the
 * underline overshoots into a trailing icon glyph); the generic button rule
 * would otherwise hand it the full notched-cyan treatment. Neither — it is a
 * quiet mono action that only turns red on hover.
 */
.wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
	/*
	 * Core styles this via a four-deep chain (table … __quantity …
	 * __remove-link) that re-imposes the underline and inherited Sora after
	 * this sheet has printed — every contested property answers in kind.
	 */
	padding: 0;
	margin: 0;
	font-family: var(--df-mono) !important;
	font-size: .68rem !important;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase !important;
	text-decoration: none !important;
	color: var(--df-dim) !important;
	background: transparent;
	border: 0;
	clip-path: none;
	cursor: pointer;
}

.wp-block-woocommerce-cart .wc-block-cart-item__remove-link:hover,
.wp-block-woocommerce-cart .wc-block-cart-item__remove-link:focus {
	color: var(--df-danger) !important;
	text-decoration: none !important;
	background: transparent;
	filter: none;
}

.wp-block-woocommerce-cart .wc-block-cart-item__quantity {
	margin-top: 2px;
}

/* ---- totals sidebar ---- */

/*
 * The stock layout implements the column gutter as padding-LEFT on the sidebar
 * itself — but the sidebar is also the panel, so the "gap" was 30px of empty
 * panel on the left while content hit the right border (the flush checkout
 * button). The gutter becomes a real margin and the panel gets no padding of
 * its own: every inner block already carries the shared 20px side inset.
 */
.wc-block-cart.is-large .wc-block-components-sidebar.wc-block-cart__sidebar {
	width: calc(35% - 32px);
	margin-left: 32px;
	padding: 0 0 20px !important;
}

.wc-block-cart:not(.is-large) .wc-block-components-sidebar.wc-block-cart__sidebar {
	width: auto;
	margin: 24px 0 0;
	padding: 0 0 20px !important;
}

.wc-block-cart .wc-block-cart__totals-title {
	padding: 18px 20px 14px !important;
}

.wc-block-cart .ppcp-messages:empty {
	display: none;
}

/* ---- express payments ---- */

.wc-block-cart .wc-block-components-sidebar .wc-block-cart__payment-options,
.wc-block-cart .wc-block-cart__payment-options {
	padding: 16px 20px 0 !important;
}

/*
 * Stripe's express iframes report a width ~8px wider than their list items
 * and poked past the panel border.
 */
.wc-block-cart .wc-block-components-express-payment iframe,
.wc-block-cart .wc-block-components-express-payment .StripeElement {
	width: 100% !important;
	max-width: 100% !important;
}

.wc-block-cart .wc-block-components-express-payment--cart {
	margin: 0;
	min-height: 0;
}

.wc-block-cart .wc-block-components-express-payment__content {
	min-height: 0;
	padding: 0;
}

.wc-block-cart ul.wc-block-components-express-payment__event-buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	margin: 0;
	list-style: none;
	min-height: 0;
}

.wc-block-cart ul.wc-block-components-express-payment__event-buttons > li {
	margin: 0;
	padding: 0;
	width: 100%;
}

/*
 * Below the wide layout Stripe sometimes never mounts its buttons, which left
 * ~250px of reserved dead space and an orphaned "OR". If no iframe ever
 * arrives, the whole express section and its separator collapse.
 */
.wc-block-cart .wc-block-components-express-payment--cart:not(:has(iframe)) {
	display: none;
}

.wc-block-cart .wc-block-cart__payment-options:not(:has(iframe)) .wc-block-components-express-payment-continue-rule {
	display: none;
}

.wc-block-cart .wc-block-components-express-payment-continue-rule {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0;
	margin: 16px 0;
	font-family: var(--df-mono);
	font-size: .7rem;
	letter-spacing: .12em;
	color: var(--df-dim);
}

.wc-block-cart .wc-block-components-express-payment-continue-rule::before,
.wc-block-cart .wc-block-components-express-payment-continue-rule::after {
	border-color: var(--df-rule);
}

/* ---- proceed to checkout ---- */

.wc-block-cart .wc-block-cart__submit {
	padding: 4px 20px 0;
}

/*
 * On narrow layouts core turns the submit wrapper into a full-bleed sticky
 * bar with its own background — which rendered as a detached pure-black band
 * ripping out of the panel. The button stays in the panel flow instead.
 */
.wc-block-cart .wc-block-cart__submit-container,
.wc-block-cart .wc-block-cart__submit-container--sticky {
	position: static !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.wc-block-cart .wc-block-cart__submit-button {
	width: 100%;
	margin: 0;
}

/* ---- empty cart ---- */

/*
 * Stock empty state opens with a giant white circular sad-face — a rounded
 * white blob on a zero-radius theme. Gone; the title and the "new in store"
 * grid carry the state.
 */
.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::before,
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::before,
.wc-block-cart__empty-cart__title::before {
	display: none !important;
	content: none !important;
	background: none !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	margin: 48px 0 10px;
	font-size: 1.6rem;
}

.wp-block-woocommerce-empty-cart-block hr.wp-block-separator {
	display: none;
}

.wp-block-woocommerce-empty-cart-block h2.wp-block-heading:not(.wc-block-cart__empty-cart__title) {
	margin: 40px 0 20px;
	font-size: 1.25rem;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	padding: 0;
	margin: 0 0 40px;
	list-style: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
	display: flex;
	flex-direction: column;
	/*
	 * Core gives each li `flex: 1 0 25%; max-width: 25%` for its own flex
	 * grid; inside this grid layout that resolved 25% against the ~320px
	 * track and collapsed every card to 80px. The track owns the width.
	 */
	flex: none !important;
	width: auto !important;
	max-width: 100% !important;
	padding: 0 0 16px;
	margin: 0;
	text-align: left;
	background: var(--df-panel);
	border: 1px solid var(--df-rule);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link {
	text-decoration: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
	margin: 0;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--df-panel-2);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
	padding: 12px 16px 2px;
	font-family: var(--df-sans);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--df-text);
	text-decoration: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
	padding: 0 16px 12px;
	font-family: var(--df-mono);
	font-size: .85rem;
	color: var(--df-dim);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart {
	padding: 0 16px;
	margin: auto 0 0;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
}

/* ---- narrow layouts ---- */

.wc-block-cart:not(.is-large) thead {
	display: none;
}

.wc-block-cart:not(.is-large) .wc-block-cart-items td {
	padding: 14px 14px 14px 0;
}

.wc-block-cart:not(.is-large) td.wc-block-cart-item__image {
	width: 84px;
	padding-left: 14px;
}

.wc-block-cart:not(.is-large) td.wc-block-cart-item__image img {
	width: 56px !important;
	height: 56px;
}

/*
 * The block flips to is-large from ~700px of container width, which at a
 * 768px viewport meant a 227px sidebar: two-line checkout button, wrapping
 * totals, cramped express buttons. Below 980px the columns stack regardless
 * of the block's own size class.
 */
@media (max-width: 980px) {
	.wc-block-cart.is-large.wc-block-components-sidebar-layout {
		flex-direction: column;
	}

	.wc-block-cart.is-large .wc-block-components-main.wc-block-cart__main {
		width: 100%;
	}

	.wc-block-cart.is-large .wc-block-components-sidebar.wc-block-cart__sidebar {
		width: auto;
		margin: 24px 0 0;
	}
}

@media (max-width: 900px) {
	.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
		grid-template-columns: 1fr;
	}
}

/* ---- inherited-widget repairs (surfaced by the box-sizing sweep) ---- */

/*
 * the9's customselect.js still wraps the shop sort <select> in a .customSelect
 * overlay, but the stylesheet that dressed that overlay is dequeued — users
 * saw a bare content-sized box. The overlay is retired and the native select,
 * which this theme already styles dark, is restored over the inline styles
 * the script writes (each needs !important to beat a style attribute).
 */
.customSelect {
	display: none !important;
}

select.hasCustomSelect {
	position: static !important;
	opacity: 1 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	width: auto !important;
	height: auto !important;
	font-size: .9rem !important;
}

/*
 * Product-page quantity stepper: the icofont glyph sheet is dequeued, so the
 * +/- buttons rendered as empty notched boxes. Real characters replace the
 * dead icon glyphs; and for sold-individually products (the whole catalogue —
 * WooCommerce renders a hidden input, stepping is impossible) the control
 * disappears entirely.
 */
form.cart .quantity .plus i,
form.cart .quantity .minus i {
	display: none;
}

form.cart .quantity .plus::before { content: "+"; }
form.cart .quantity .minus::before { content: "\2212"; }

form.cart .quantity:has(input[type="hidden"]) {
	display: none !important;
}

/* ---- catalogue layout switcher: shop loop views ------------------------
 * Same is-view-* scheme as the front-page grid (see view.js). In list view
 * the product link becomes display:contents so the image can occupy its own
 * grid column while title and price flow beside it.
 */

.woocommerce-page ul.products.is-view-2 { grid-template-columns: repeat(2, 1fr) !important; }
.woocommerce-page ul.products.is-view-3 { grid-template-columns: repeat(3, 1fr) !important; }
.woocommerce-page ul.products.is-view-4 { grid-template-columns: repeat(4, 1fr) !important; }

.woocommerce-page ul.products.is-view-list {
	grid-template-columns: 1fr !important;
	gap: 12px;
}

.woocommerce-page ul.products.is-view-list li.product {
	display: grid !important;
	grid-template-columns: 240px minmax(0, 1fr);
	grid-auto-rows: min-content;
	gap: 2px 22px;
	align-items: start;
	align-content: center;
	padding-right: 20px;
}

/* One toolbar row on shop archives: count, layout switcher, ordering. */
.df-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: 0 0 22px;
}

.df-shop-toolbar .woocommerce-result-count {
	margin: 0;
}

.df-shop-toolbar .df-view {
	margin-left: auto;
}

.df-shop-toolbar .woocommerce-ordering {
	margin: 0;
}

.woocommerce-page ul.products.is-view-list li.product > a.woocommerce-LoopProduct-link {
	display: contents;
}

.woocommerce-page ul.products.is-view-list li.product img {
	grid-row: 1 / span 3;
	grid-column: 1;
	align-self: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.woocommerce-page ul.products.is-view-list li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products.is-view-list li.product .price,
.woocommerce-page ul.products.is-view-list li.product .button {
	grid-column: 2;
}

.woocommerce-page ul.products.is-view-list li.product .button {
	justify-self: start;
	margin-top: 10px;
}

@media (max-width: 900px) {
	.woocommerce-page ul.products.is-view-3,
	.woocommerce-page ul.products.is-view-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 560px) {
	.woocommerce-page ul.products.is-view-2,
	.woocommerce-page ul.products.is-view-3,
	.woocommerce-page ul.products.is-view-4 { grid-template-columns: 1fr !important; }

	.woocommerce-page ul.products.is-view-list li.product {
		grid-template-columns: 1fr;
	}

	.woocommerce-page ul.products.is-view-list li.product img {
		grid-row: auto;
		aspect-ratio: 1 / 1;
	}
}

/* ---- Coupon Affiliates plugin forms -----------------------------------
 * The plugin ships its own light-grey input borders (rgb(218,218,218)) that
 * out-rank the theme's generic input rule on its registration/dashboard
 * forms. Same treatment as every other field on the site.
 */
.wcusage-form input.input-text,
.wcusage-form input,
.wcusage-form select,
.wcusage-form textarea,
#wcusage-register-form input,
form.register input.input-text,
.woocommerce-form-register input.input-text.form-control,
input.input-text.form-control {
	color: var(--df-text) !important;
	background: var(--df-panel-2) !important;
	border: 1px solid var(--df-rule) !important;
	border-radius: var(--df-radius) !important;
}

.wcusage-form input:focus,
input.input-text.form-control:focus {
	border-color: var(--df-signal) !important;
	outline: none;
}

/* Download buttons are buttons, not underlined links. */
.woocommerce-MyAccount-content .woocommerce-table--order-downloads a.button,
.woocommerce-MyAccount-content td[data-title] a.button,
.woocommerce-table--order-downloads .woocommerce-MyAccount-downloads-file,
a.woocommerce-MyAccount-downloads-file {
	text-decoration: none !important;
}

/* ---- notices are not interactive: no focus ring -----------------------
 * WooCommerce script-focuses each notice for screen readers right after the
 * add-to-cart redirect; with no prior input on the fresh page the browser
 * counts that as keyboard focus and painted the global 2px cyan
 * :focus-visible ring around every success/error banner.
 */
.woocommerce-notices-wrapper:focus,
.woocommerce-notices-wrapper :focus,
.woocommerce-message:focus,
.woocommerce-error:focus,
.woocommerce-info:focus,
ul.woocommerce-error:focus,
.wc-block-components-notice-banner:focus,
.woocommerce-notices-wrapper:focus-visible,
.woocommerce-notices-wrapper :focus-visible,
.woocommerce-message:focus-visible,
.woocommerce-error:focus-visible,
.woocommerce-info:focus-visible,
ul.woocommerce-error:focus-visible,
.wc-block-components-notice-banner:focus-visible {
	outline: none !important;
}