/*
Theme Name: 3D Craze
Theme URI: https://3dcraze.com
Author: 3D Craze
Description: Custom block theme for the 3D Craze store. No parent theme, no page builder, no jQuery.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 3dcraze
*/

/* Metric-matched fallback so the Inter swap does not shift layout.
   Values target Arial; re-measure if the font file is ever re-subset. */
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial");
	ascent-override: 90.49%;
	descent-override: 22.56%;
	line-gap-override: 0%;
	size-adjust: 107.06%;
}

/* Focus must never rely on brand cyan: #18ABD3 is only 2.69:1 on white. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-deep);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

.skip-link:focus {
	left: 0;
}

/* ---------------------------------------------------------------
   Layout roles

   Every page-level wrapper picks one of these instead of carrying its own
   spacing. Named for the job the wrapper does, not the values it happens to
   use, so changing the page rhythm is one edit here rather than a hunt through
   every template.
   --------------------------------------------------------------- */

/* `main` on prose surfaces: pages, posts, search, 404. */
.tdc-main {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--60);
}

/* `main` on catalogue surfaces, where a breadcrumb already sits above the title
   and supplies part of the visual gap. */
.tdc-main--catalogue {
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--60);
}

/* A band within a page: hero, trust row, product grid, categories, FAQ. */
.tdc-section {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

/* The first band under a page title, which needs less air above it. */
.tdc-section--lead {
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--50);
}

/* Standing alone on the page — the 404 and other single-message screens. */
.tdc-main--centered {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--70);
}

/* The three fixed chrome bands own their own rhythm; they are never reused with
   different spacing, so the values belong with the component. */
.tdc-header {
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
}

.tdc-footer {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--40);
}

.tdc-hero {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

/* Inline call to action closing a guide. */
.tdc-cta {
	margin-top: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--lg);
}

/* Result count and sorting row above a product grid. */
.tdc-toolbar {
	margin-top: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--preset--color--surface);
}

img {
	max-width: 100%;
	height: auto;
}

/* Screen-reader-only text. WooCommerce and core both assume this class exists. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	width: auto;
	display: block;
	top: 5px;
	left: 5px;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	z-index: 100000;
}

/* ---------------------------------------------------------------
   Logo lockup
   Two-tone by necessity, not decoration. The cube may be brand cyan
   because WCAG exempts logotypes from contrast. The wordmark takes
   currentColor so it can be brand-deep #0E7490 on light chrome
   (5.36:1) where #18ABD3 would be 2.69:1 and fail AA, and plain
   brand cyan on ink where it reaches 6.18:1. One SVG, two groups —
   never two elements, or the proportions drift.
   --------------------------------------------------------------- */
.tdc-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: var(--wp--preset--color--brand-deep);
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: -0.01em;
	line-height: 1;
}

.tdc-logo:hover,
.tdc-logo:focus-visible {
	text-decoration: none;
	color: var(--wp--custom--brand--deep-hover);
}

.tdc-logo__lockup {
	display: block;
	flex: 0 0 auto;
}

/* The lockup is ~3.67:1 with the TM, so at desktop size it eats half a phone's
   width and forces the header to wrap into three rows. Scale by height only; the
   width follows the viewBox, so the artwork never distorts. */
@media (max-width: 781px) {
	.tdc-logo__lockup {
		height: 40px;
		width: auto;
	}
}

@media (max-width: 400px) {
	.tdc-logo__lockup {
		height: 34px;
	}
}

.tdc-logo__cube {
	fill: var(--wp--preset--color--brand);
}

.tdc-logo__word {
	fill: currentColor;
}

/* ---------------------------------------------------------------
   Header end cluster: navigation + account + cart
   --------------------------------------------------------------- */
.tdc-header__end {
	--tdc-end-gap: clamp(0.75rem, 2vw, 1.5rem);
	gap: var(--tdc-end-gap);
	flex: 1 1 auto;
}

/* The account/cart pair is a different kind of control to the nav links, so it
   gets pushed to the far edge and fenced off with a rule. Everything from the
   account icon onward rides along, which keeps the cart in the corner.
   Class is `wp-block-woocommerce-customer-account`; the block does not carry a
   `wc-block-` alias the way mini-cart does. */
.tdc-header .wp-block-woocommerce-customer-account {
	margin-left: auto;
	padding-left: var(--tdc-end-gap);
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}

/* Account and cart read as one control, so the row gap is cancelled between
   them — otherwise they sit ~47px apart, wider than the icons themselves. */
.tdc-header .wp-block-woocommerce-mini-cart {
	margin-left: calc(0.25rem - var(--tdc-end-gap));
}

/* Woo ships both icons at 25px, which reads undersized against the lockup and
   the nav text. One token so the pair can never drift apart. */
.tdc-header {
	--tdc-header-icon: 30px;
}

.tdc-header .wc-block-customer-account__account-icon,
.tdc-header .wc-block-mini-cart__icon {
	width: var(--tdc-header-icon);
	height: var(--tdc-header-icon);
}

.tdc-header .wp-block-navigation {
	--wp--style--block-gap: clamp(1rem, 2.2vw, 1.75rem);
}

.tdc-cart {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
	/* Interactive control: needs 3:1 non-text contrast, so never brand cyan. */
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.tdc-cart:hover,
.tdc-cart:focus-visible {
	color: var(--wp--preset--color--brand-deep);
	text-decoration: none;
}

.tdc-cart svg {
	flex: 0 0 auto;
}

.tdc-cart__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.3rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--brand-deep);
	color: var(--wp--preset--color--base);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

.tdc-cart__count[hidden] {
	display: none;
}

@media (max-width: 480px) {
	.tdc-cart__label {
		border: 0;
		clip-path: inset(50%);
		height: 1px;
		width: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
	}
}

/* ---------------------------------------------------------------
   Checkout header
   --------------------------------------------------------------- */
.tdc-secure {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.875rem;
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
/* The tagline sits below the logo/nav row rather than inside the logo's flex
   item, so that row can centre the links on the logo itself. Nesting it made
   the row centre on logo+tagline, dropping the links ~15px below the logo.
   No max-width: as a direct child of a constrained group it gets
   `margin-inline: auto`, which centres any element narrow enough to show it. */
.tdc-footer .tdc-footer__tagline {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.875rem;
}

/* Plain links rather than a nav block: policy URLs are stable, and this avoids
   depending on a wp_navigation post ID that differs between environments. */
.tdc-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	font-size: 0.875rem;
}

.tdc-footer__nav a {
	color: var(--tdc-on-dark-muted, var(--wp--preset--color--ink-muted));
	text-decoration: none;
}

.tdc-footer__nav a:hover,
.tdc-footer__nav a:focus-visible {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   Dark header / footer
   On ink #10202B the raw brand cyan finally becomes legal as text:
   #18ABD3 on #10202B is 6.18:1. That is the whole point of this
   treatment — it is the only place the true brand colour can be
   used for the wordmark.
   Muted text is rgba white rather than ink-muted, which collapses
   to 2.39:1 on ink and would be unreadable.
   --------------------------------------------------------------- */
.tdc-header--dark,
.tdc-footer--dark {
	--tdc-on-dark-muted: rgba(255, 255, 255, 0.88);
}

.tdc-header--dark {
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.tdc-footer--dark {
	border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.tdc-header--dark .tdc-logo,
.tdc-footer--dark .tdc-logo {
	color: var(--wp--preset--color--brand);
}

.tdc-header--dark .tdc-logo:hover,
.tdc-header--dark .tdc-logo:focus-visible,
.tdc-footer--dark .tdc-logo:hover,
.tdc-footer--dark .tdc-logo:focus-visible {
	color: var(--wp--custom--brand--on-dark);
}

.tdc-header--dark .wp-block-navigation a,
.tdc-footer--dark .wp-block-navigation a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.tdc-header--dark .wp-block-navigation a:hover,
.tdc-footer--dark .wp-block-navigation a:hover {
	color: var(--wp--preset--color--brand);
}

.tdc-header--dark .tdc-cart {
	color: var(--wp--preset--color--base);
}

/* Woo's mini-cart and account blocks live in the nav menu and inherit page
   colours, so they need the same dark treatment as the rest of the header. */
.tdc-header--dark .wc-block-mini-cart__button,
.tdc-header--dark .wc-block-customer-account__link {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.tdc-header--dark .wc-block-mini-cart__button:hover,
.tdc-header--dark .wc-block-customer-account__link:hover {
	color: var(--wp--preset--color--brand);
}

.tdc-header--dark .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink);
}

.tdc-header--dark .tdc-cart:hover,
.tdc-header--dark .tdc-cart:focus-visible {
	color: var(--wp--preset--color--brand);
}

/* Cyan pill on ink reads better than brand-deep, and the ink label
   on cyan is 6.18:1. */
.tdc-header--dark .tdc-cart__count {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink);
}

.tdc-header--dark .tdc-secure {
	color: var(--tdc-on-dark-muted);
}

.tdc-footer--dark .tdc-footer__tagline,
.tdc-footer--dark .tdc-footer__legal {
	color: var(--tdc-on-dark-muted);
}

/* The global focus ring is brand-deep, tuned for white. On ink it
   drops to 3.10:1, so switch to brand cyan at 6.18:1. */
.tdc-header--dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.tdc-footer--dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--brand);
}

/* The mobile overlay inherits page colours and would otherwise render
   white-on-white once the header stops being white. */
.tdc-header--dark .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.tdc-header--dark .wp-block-navigation__responsive-container-open,
.tdc-header--dark .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--base);
}

/* ---------------------------------------------------------------
   Header product search
   Sized for a catalogue in the tens or hundreds, where browsing the
   nav alone stops being a realistic way to find a part.
   --------------------------------------------------------------- */

.tdc-header .tdc-search {
	flex: 1 1 16rem;
	max-width: 26rem;
	margin: 0;
}

/* Woo renders a visible "Search" label; the field's placeholder already
   says it, so hide it from sight but keep it for assistive tech. */
.tdc-header .wc-block-product-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.tdc-header .wc-block-product-search__fields {
	display: flex;
	align-items: stretch;
}

.tdc-header .wc-block-product-search__field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5rem 0.75rem;
	font-size: 0.95rem;
	color: var(--wp--preset--color--base);
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-right: 0;
	border-radius: var(--wp--custom--radius--sm) 0 0 var(--wp--custom--radius--sm);
}

.tdc-header .wc-block-product-search__field::placeholder {
	color: var(--tdc-on-dark-muted);
	opacity: 1;
}

/* brand cyan is 6.18:1 on ink, and ink on cyan keeps the button legible. */
.tdc-header .wc-block-product-search__button {
	display: flex;
	align-items: center;
	padding: 0 0.7rem;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	background: var(--wp--preset--color--brand);
	border: 0;
	border-radius: 0 var(--wp--custom--radius--sm) var(--wp--custom--radius--sm) 0;
}

.tdc-header .wc-block-product-search__button:hover {
	background: var(--wp--custom--brand--on-dark-hover);
}

@media (max-width: 599px) {
	.tdc-header .tdc-search {
		order: 3;
		flex-basis: 100%;
		max-width: none;
		margin-top: 0.75rem;
	}
}

/* ---------------------------------------------------------------
   Catalogue filters
   --------------------------------------------------------------- */

.tdc-filters {
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Ensure product filter controls have a clear, accessible focus state */
.tdc-filters :where(button, a, input, select, summary):focus-visible {
    outline: 3px solid var(--wp--preset--color--brand-deep);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Trust row
   --------------------------------------------------------------- */
.tdc-trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30, 1.5rem);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.tdc-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.5;
}

.tdc-trust__item strong {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* Meaningful icon, so it owes 3:1 — brand-deep is 5.36:1, raw cyan would be 2.69:1. */
.tdc-trust__icon {
	flex: 0 0 auto;
	color: var(--wp--preset--color--brand-deep);
	margin-top: 0.1rem;
}

/* ---------------------------------------------------------------
   Category tiles
   --------------------------------------------------------------- */
.tdc-tiles {
	display: grid;
	gap: var(--wp--preset--spacing--20, 1rem);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	margin-top: var(--wp--preset--spacing--30, 1.5rem);
}

.tdc-tile {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: var(--wp--preset--spacing--30, 1.5rem);
	background: var(--wp--preset--color--surface);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--lg);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	transition: border-color var(--wp--custom--motion--fast), transform var(--wp--custom--motion--fast);
}

.tdc-tile:hover,
.tdc-tile:focus-visible {
	border-color: var(--wp--preset--color--brand-deep);
	text-decoration: none;
	transform: translateY(-2px);
}

.tdc-tile__name {
	font-weight: 700;
	font-size: 1.125rem;
}

.tdc-tile__desc {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.9375rem;
}

.tdc-tile__go {
	margin-top: 0.35rem;
	color: var(--wp--preset--color--brand-deep);
}

/* ---------------------------------------------------------------
   Category chips — shop and category archive switcher
   --------------------------------------------------------------- */
.tdc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--30, 1.5rem);
}

.tdc-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--wp--custom--line--default);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color var(--wp--custom--motion--fast), background-color var(--wp--custom--motion--fast);
}

.tdc-chip:hover,
.tdc-chip:focus-visible {
	border-color: var(--wp--preset--color--brand-deep);
	background: var(--wp--preset--color--brand-wash);
	text-decoration: none;
}

.tdc-chip.is-current {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.tdc-chip__count {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink-muted);
}

.tdc-chip.is-current .tdc-chip__count {
	color: rgba(255, 255, 255, 0.72);
}

/* Chips can outrun the viewport on phones; scroll them rather than stacking
   one per line and pushing the products off the screen. */
@media (max-width: 599px) {
	.tdc-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 0.25rem;
		-webkit-overflow-scrolling: touch;
	}

	.tdc-chips::-webkit-scrollbar {
		display: none;
	}

	.tdc-chip {
		flex: 0 0 auto;
	}
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */

/* The hero band shares the 1280px shell so its edges line up with the header.
   The copy sits in a plain flow wrapper rather than directly in the constrained
   group: capping widths on a constrained child fights WP's
   `margin: auto !important` and either centres the text or drops it out of the
   column entirely. */
.tdc-hero__inner > h1 {
	max-width: 20ch;
	/* Tighter than the global h1 leading; display sizes need less. */
	line-height: 1.1;
}

.tdc-hero__inner > p {
	max-width: 56ch;
}

@media (prefers-reduced-motion: reduce) {
	.tdc-tile {
		transition: none;
	}
	.tdc-tile:hover,
	.tdc-tile:focus-visible {
		transform: none;
	}
}

/* ---------------------------------------------------------------
   FAQ
   --------------------------------------------------------------- */

/* Cards on the tinted band rather than full-width rules: at the 1280px shell a
   bare row leaves the question stranded on the left with dead space beside it. */
.tdc-faq {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--line--subtle);
	border-radius: var(--wp--custom--radius--lg);
	padding: 0;
	transition: border-color var(--wp--custom--motion--fast);
}

.tdc-faq + .tdc-faq {
	margin-top: 0.75rem;
}

.tdc-faq:first-of-type {
	margin-top: var(--wp--preset--spacing--30, 1.5rem);
}

.tdc-faq:hover {
	border-color: var(--wp--custom--line--strong);
}

.tdc-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	list-style: none;
}

/* The native disclosure triangle cannot be styled, so it is swapped for a
   chevron that flips on open. */
.tdc-faq summary::-webkit-details-marker {
	display: none;
}

.tdc-faq summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.55rem;
	height: 0.55rem;
	margin-right: 0.25rem;
	border-right: 2px solid var(--wp--preset--color--brand-deep);
	border-bottom: 2px solid var(--wp--preset--color--brand-deep);
	transform: rotate(45deg);
	transition: transform var(--wp--custom--motion--fast);
}

.tdc-faq[open] summary::after {
	transform: rotate(-135deg);
}

.tdc-faq summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-deep);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--lg);
}

.tdc-faq p {
	margin: 0;
	padding: 0 1.25rem 1.25rem;
	color: var(--wp--preset--color--ink-muted);
	max-width: 70ch;
}

@media (prefers-reduced-motion: reduce) {
	.tdc-faq,
	.tdc-faq summary::after {
		transition: none;
	}
}

/* WP puts a blockGap margin between top-level template parts, which shows as a
   white sliver above the dark footer whenever a page ends on a tinted band. */
.wp-site-blocks > .wp-block-template-part:last-child {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------
   Product gallery
   --------------------------------------------------------------- */
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery__image img {
	border-radius: var(--wp--custom--radius--lg);
}

/* WooCommerce sizes thumbnails at 25% each, so a fifth image wraps onto its own
   row at a different apparent size. A uniform grid keeps the row even at any
   count. Contain, not cover — cropping a product thumb hides what sells it. */
.woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce's own `li { width: 25%; float: left }` outranks anything sane the
   theme can write here, and once the list is a grid that 25% resolves against
   the grid cell — shrinking each thumb to a quarter of its track. */
.woocommerce-product-gallery .flex-control-thumbs li {
	width: auto !important;
	float: none !important;
	margin: 0;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	opacity: 0.6;
	cursor: pointer;
	transition: opacity var(--wp--custom--motion--fast);
}

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

@media (prefers-reduced-motion: reduce) {
	.woocommerce-product-gallery .flex-control-thumbs img {
		transition: none;
	}
}

/* ---------------------------------------------------------------
   Long-form prose — policy pages, guides
   --------------------------------------------------------------- */

/* Uniform block gaps leave a heading floating equidistant between the section
   it ends and the one it starts. Weighting the space above binds each heading
   to its own text. */
.tdc-prose > h2 {
	margin-top: 3rem;
	margin-bottom: 0.75rem;
}

.tdc-prose > h3 {
	margin-top: 2rem;
	margin-bottom: 0.5rem;
}

.tdc-prose > h2:first-child,
.tdc-prose > h3:first-child {
	margin-top: 0;
}

.tdc-prose > p,
.tdc-prose > ul,
.tdc-prose > ol {
	margin-top: 0;
	margin-bottom: 1.1rem;
	line-height: 1.65;
}

.tdc-prose > ul,
.tdc-prose > ol {
	padding-left: 1.25rem;
}

.tdc-prose li + li {
	margin-top: 0.4rem;
}

/* A long policy page is easier to scan when the rule below a heading is implied
   by space rather than drawn. */
.tdc-prose > h2 + p {
	margin-top: 0;
}

/* ---------------------------------------------------------------
   Product detail page
   --------------------------------------------------------------- */
.tdc-pdp-assurance {
	list-style: none;
	margin: var(--wp--preset--spacing--30, 1.5rem) 0 0;
	padding: var(--wp--preset--spacing--20, 1rem) 0 0;
	border-top: 1px solid var(--wp--custom--line--subtle);
	display: grid;
	gap: 0.6rem;
}

.tdc-pdp-assurance li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.4;
}

/* Meaningful icons owe 3:1, so brand-deep rather than the 2.69:1 cyan. */
.tdc-pdp-assurance svg {
	flex: 0 0 auto;
	color: var(--wp--preset--color--brand-deep);
}

.tdc-pdp-assurance a {
	color: var(--wp--preset--color--brand-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wp-block-woocommerce-product-meta {
	margin-top: var(--wp--preset--spacing--30, 1.5rem);
	padding-top: var(--wp--preset--spacing--20, 1rem);
	border-top: 1px solid var(--wp--custom--line--subtle);
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink-muted);
}

/* ---------------------------------------------------------------
   Product grid cards
   --------------------------------------------------------------- */
.wp-block-woocommerce-product-template li {
	display: flex;
	flex-direction: column;
}

.wp-block-woocommerce-product-template .wp-block-post-title {
	font-weight: 600;
	line-height: 1.3;
}

.wp-block-woocommerce-product-template .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.wp-block-woocommerce-product-template .wp-block-post-title a:hover {
	color: var(--wp--preset--color--brand-deep);
	text-decoration: underline;
}

/* Push the button to the bottom so cards with different title lengths align.
   WooCommerce centres the add-to-cart button by default, which reads as a
   misalignment next to the left-aligned title and price. */
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-button {
	margin-top: auto;
	text-align: left;
}

.wp-block-woocommerce-product-template .wp-block-woocommerce-product-button .wp-block-button__link {
	margin-inline: 0;
}

.wc-block-components-product-image img {
	border-radius: var(--wp--custom--radius--md);
}

/* ---------------------------------------------------------------
   Mini-cart drawer — third-party fix
   --------------------------------------------------------------- */

/* WooCommerce marks the closed drawer `aria-hidden` but leaves it visible, so
   its four links stay in the tab order on every page: a keyboard user reaches
   "View my cart" and "Go to checkout" from a policy page. `visibility` removes
   it from both the focus order and the a11y tree, and releases the moment the
   block flips aria-hidden to false, so the open animation is unaffected. */
.wc-block-mini-cart__drawer[aria-hidden="true"] {
	visibility: hidden;
}

/* ---------------------------------------------------------------
   Sign-in — social providers only
   --------------------------------------------------------------- */

/* The password form is gone (woocommerce/myaccount/form-login.php), so these
   buttons are the entire front-end sign-in path and are sized as the primary
   action rather than as an alternative offered below one.

   Loginizer prints each provider's brand colours as an inline `style`, which no
   selector here can outrank. That is left alone on purpose — Google's branding
   terms require its own palette — so only geometry, rhythm and hit area are
   restyled. The two `!important`s below are for layout declarations Loginizer
   also sets inline; without them the row stays left-packed and auto-width. */

.tdc-signin {
	max-width: 26rem;
	margin-inline: auto;
	text-align: center;
}

.tdc-signin__lede {
	color: var(--wp--preset--color--ink-muted);
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
}

.tdc-signin__providers #lz-social-login-btns {
	/* `display:flex` is inline, so only `!important` can move it to grid.
	   `justify-self` is inline too and shrink-wraps the row. `max-width:350px`
	   comes from Loginizer's own `.lz-social-login-btns-full` class, which this
	   ID selector outranks without needing `!important`. */
	display: grid !important;
	justify-self: stretch !important;
	justify-content: stretch !important;
	max-width: none;
	/* Loginizer pads the row on the right only, which pushes the buttons 16px
	   off-centre against the centred heading. Its top padding is kept. */
	padding-inline: 0;
	gap: 0.75rem;
	width: 100%;
}

.tdc-signin__providers .loginizer-social-button {
	/* 48px: the smallest comfortable touch target, and these are now the only
	   control on the page that matters. */
	min-height: 3rem;
	width: 100%;
	/* Loginizer caps each button at 400px and adds a 10px bottom margin, which
	   left them 16px short of the row and stacked with the grid gap. */
	max-width: none;
	margin: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding-inline: 1rem;
	border-radius: var(--wp--custom--radius--md);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.tdc-signin__providers .loginizer-social-button:hover {
	filter: brightness(0.97);
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
	transform: translateY(-1px);
}

.tdc-signin__providers .loginizer-social-button:active {
	transform: translateY(0);
	box-shadow: none;
}

/* The logo is decorative next to the provider name, so it must not add height. */
.tdc-signin__providers .loginizer-social-btn-logo {
	display: flex;
	align-items: center;
	line-height: 0;
}

.tdc-signin__providers .loginizer-social-btn-text {
	line-height: 1.2;
}

.tdc-signin__fallback {
	padding: 1rem;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--brand-wash);
}

@media (prefers-reduced-motion: reduce) {
	.tdc-signin__providers .loginizer-social-button {
		transition: none;
	}

	.tdc-signin__providers .loginizer-social-button:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------
   My Account — signed-in navigation
   --------------------------------------------------------------- */

/* The theme carried no rules for this nav, so its rhythm came from whichever
   WooCommerce and block-editor defaults happened to apply, which spread eight
   links down most of the viewport. Setting it explicitly means the result no
   longer depends on which default wins. */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* `woocommerce-blocktheme.css` sets `.woocommerce-account
   .woocommerce-MyAccount-navigation li { padding: 1em 0 }` — 17px top and
   bottom on every item, which was most of the gap. That selector carries the
   extra `.woocommerce-account` class, so this one has to as well to outrank it.
   Also outranks `.tdc-prose li + li`, whose rhythm is meant for prose. */
.woocommerce-account .woocommerce-MyAccount-navigation li,
.woocommerce-account .woocommerce-MyAccount-navigation li + li {
	margin-top: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	/* Padding rather than margin: the whole row stays clickable, and the target
	   is still comfortable without the gaps doing the work. */
	padding: 0.5rem 0;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active > a {
	font-weight: 600;
	color: var(--wp--preset--color--brand-deep);
}