/*
Theme Name: All The Things Design
Theme URI: https://allthethingsdesign.com
Author: NorthMac Services
Author URI: https://northmacservices.com
Description: Custom block theme for All The Things Design — a faithful WooCommerce port of the Shopify Dawn storefront. Assistant typeface, clean white canvas, understated product-first layout.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: all-the-things
Tags: full-site-editing, block-theme, woocommerce, e-commerce
*/

/* Dawn-style touches that go beyond theme.json */
.atd-announcement {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}

.atd-header {
	border-bottom: 1px solid rgba(18, 18, 18, 0.08);
}

.atd-hero h1 {
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* Dawn buttons: squared, generous padding */
.wp-block-button .wp-block-button__link,
.wc-block-components-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.single_add_to_cart_button {
	border-radius: 0 !important;
	padding: 0.9rem 1.9rem;
	letter-spacing: 0.06em;
	font-weight: 400;
}

/* Product cards: Dawn shows light typography, price under title */
.wc-block-grid__product-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 0.9375rem;
	font-weight: 400;
	color: inherit;
}

.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
	font-size: 0.9375rem;
	color: #121212;
}

/* Dawn underlined link hover */
.atd-header a:hover,
.atd-footer a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Hero heading: constrained box that wraps like Dawn's two-line banner */
.atd-hero h1 {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.3;
}

/* Header search (details/summary dropdown) */
.atd-search {
	position: relative;
}

.atd-search summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	padding: 0.4rem;
}

.atd-search summary::-webkit-details-marker {
	display: none;
}

.atd-search[open] .atd-search__form {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	display: flex;
	background: #fff;
	border: 1px solid rgba(18, 18, 18, 0.2);
	padding: 0.4rem;
	z-index: 60;
	min-width: 280px;
}

.atd-search__form input[type="search"] {
	border: none;
	outline: none;
	flex: 1;
	font-size: 0.9375rem;
	padding: 0.4rem 0.6rem;
	font-family: inherit;
}

.atd-search__form button {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.4rem;
	color: #121212;
}

/* Sold-out badge (Dawn style: white pill, thin border, bottom-left) */
.wc-block-components-product-image,
.wp-block-woocommerce-product-image {
	position: relative;
}

.atd-badge--soldout {
	position: absolute;
	bottom: 10px;
	left: 10px;
	background: #ffffff;
	color: #121212;
	border: 1px solid rgba(18, 18, 18, 0.1);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	pointer-events: none;
}

/* Hover-swap secondary image (Dawn show_secondary_image) */
.atd-hover-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.wp-block-woocommerce-product-image a:hover .atd-hover-image,
.wc-block-components-product-image a:hover .atd-hover-image {
	opacity: 1;
}

/* Extra product options (ported Shopify personalization fields) */
.atd-extra-options {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 1rem 0;
}

.atd-extra-option label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #121212;
	margin-bottom: 0.4rem;
	letter-spacing: 0.02em;
}

/* Dawn touches shared by variation + extra-option fields */
form.cart label .required,
.atd-extra-option label .required {
	color: #c0202c;
	border: none;
	text-decoration: none;
}

.atd-sel-val {
	font-weight: 400;
	color: rgba(18, 18, 18, 0.8);
	margin-left: 0.5rem;
}

.atd-extra-option select,
.atd-extra-option input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.9rem;
	border: 1px solid rgba(18, 18, 18, 0.55);
	border-radius: 0;
	font-family: inherit;
	font-size: 0.9375rem;
	background: #fff;
}

/* Product gallery: never depend on JS-measured heights or the opacity reveal */
.woocommerce-product-gallery {
	opacity: 1 !important;
}

.woocommerce-product-gallery .flex-viewport {
	height: auto !important;
}

.woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
}

/* Dawn-style quantity stepper + variation selects */
form.cart .quantity input.qty {
	border: 1px solid rgba(18, 18, 18, 0.55);
	border-radius: 0;
	padding: 0.7rem 0.4rem;
	width: 4.2rem;
	font-family: inherit;
}

form.cart table.variations select,
form.cart .variations select {
	border: 1px solid rgba(18, 18, 18, 0.55);
	border-radius: 0;
	padding: 0.7rem 0.9rem;
	font-family: inherit;
	font-size: 0.9375rem;
	width: 100%;
	background: #fff;
}

/* Variations: break out of the table layout — stack each label above its
   select, matching the ported personalization fields (Dawn's form style). */
form.cart table.variations,
form.cart table.variations tbody,
form.cart table.variations tr,
form.cart table.variations th,
form.cart table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: none;
	text-align: left;
}

form.cart table.variations {
	margin: 0.5rem 0 0;
}

form.cart table.variations tr {
	margin-bottom: 0.9rem;
}

form.cart table.variations label {
	display: block;
	font-size: 0.8125rem;
	color: #121212;
	letter-spacing: 0.02em;
	font-weight: 600 !important;
	margin: 0 0 0.4rem;
}

form.cart table.variations tr {
	margin-bottom: 1rem;
}

form.cart table.variations tr:last-child {
	margin-bottom: 0;
}

/* Quantity stepper (Dawn): label above, bordered − [n] + box */
.atd-qty {
	margin: 1rem 0 0.25rem;
}

.atd-qty__label {
	display: block;
	font-size: 0.8125rem;
	color: rgba(18, 18, 18, 0.75);
	margin-bottom: 0.4rem;
}

.atd-qty__box {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid rgba(18, 18, 18, 0.55);
	background: #fff;
}

.atd-qty__btn {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.1rem;
	font-family: inherit;
	color: #121212;
	width: 42px;
}

.atd-qty__box .quantity,
.atd-qty__box input.qty {
	margin: 0;
}

.atd-qty__box input.qty {
	border: none !important;
	width: 3rem;
	text-align: center;
	padding: 0.7rem 0;
	-moz-appearance: textfield;
	appearance: textfield;
}

.atd-qty__box input.qty::-webkit-outer-spin-button,
.atd-qty__box input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Dawn shows no in-form price or Clear link — the page price updates instead */
form.cart .reset_variations,
form.cart .woocommerce-variation-price {
	display: none !important;
}

/* Variation add-to-cart area: stacked, tight */
form.cart .woocommerce-variation-add-to-cart {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
}

form.cart .single_add_to_cart_button {
	align-self: stretch;
}

form.cart .single_add_to_cart_button {
	width: 100%;
	margin-top: 0.6rem;
	background: #ffffff;
	color: #121212;
	border: 1px solid #121212;
	transition: box-shadow 0.1s ease;
}

form.cart .single_add_to_cart_button:hover {
	box-shadow: inset 0 0 0 1px #121212;
	background: #ffffff;
	color: #121212;
}

/* Product card typography (Dawn: light 13px titles, muted price) */
.wp-block-woocommerce-product-template .wp-block-post-title,
.wp-block-woocommerce-product-template .wp-block-post-title a {
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.02em;
}

.wp-block-woocommerce-product-template .wc-block-components-product-price {
	font-size: 0.8125rem;
	color: #121212;
}

/* Footer newsletter: input with inline arrow button (Dawn style) */
.atd-newsletter {
	max-width: 360px;
	margin-left: 0;
}

.atd-newsletter .frm-fluent-form {
	border: 1px solid rgba(18, 18, 18, 0.55);
	background: #fff;
}

.atd-newsletter .frm-fluent-form fieldset {
	display: flex;
	align-items: stretch;
}

.atd-newsletter .frm-fluent-form fieldset > p {
	display: none;
}

.atd-newsletter .frm-fluent-form .ff-el-group {
	margin-bottom: 0;
	flex: 1;
}

.atd-newsletter .frm-fluent-form .ff_submit_btn_wrapper {
	flex: 0 0 auto;
}

.atd-newsletter .frm-fluent-form .ff-el-input--label {
	display: none;
}

.atd-newsletter .frm-fluent-form input[type="email"] {
	border: none !important;
	box-shadow: none !important;
	background: transparent;
	padding: 0.8rem 0.9rem;
	font-family: inherit;
	width: 100%;
}

.atd-newsletter .frm-fluent-form .ff-btn-submit {
	background: transparent !important;
	color: #121212 !important;
	border: none;
	padding: 0 1rem;
	font-size: 1.2rem;
	cursor: pointer;
}

/* Payment icons row */
.atd-payment-icons {
	gap: 0.4rem;
	margin-bottom: 0.8rem;
}

.atd-payicon {
	display: inline-block;
}

/* Vendor line spacing */
.atd-vendor {
	margin-bottom: 0;
}

/* Collection cards: uniform square boxes, logos letterboxed not cropped */
.woocommerce ul.products li.product-category img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	margin-bottom: 0.75rem;
}

.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
	font-size: 0.9375rem;
	font-weight: 400;
}

/* Hide the (count) after category names — Dawn shows just the name + arrow */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title mark {
	display: none;
}

.woocommerce ul.products li.product-category .woocommerce-loop-category__title::after {
	content: " →";
}

/* ---- Dawn-style facet filter bar ---- */
.atd-facets {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin: 0.5rem 0 0.75rem;
	font-size: 0.875rem;
	color: rgba(18, 18, 18, 0.75);
}

.atd-facets__left,
.atd-facets__right {
	display: flex;
	align-items: center;
	gap: 1.1rem;
}

/* Pin the sort/count group hard to the right edge, regardless of any
   stray <p> wpautop injects as an extra flex child. */
.atd-facets__right {
	margin-left: auto;
}

/* wpautop sometimes adds an empty <p> as a direct child of the form — zero it out. */
.atd-facets > p:empty {
	display: none;
}

.atd-facets__label,
.atd-facets label {
	color: rgba(18, 18, 18, 0.75);
	margin: 0 !important;
}

.atd-facet {
	position: relative;
}

.atd-facet summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	color: rgba(18, 18, 18, 0.75);
	padding: 0.3rem 0;
}

.atd-facet summary::-webkit-details-marker {
	display: none;
}

.atd-facet summary:hover {
	color: #121212;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.atd-facet[open] summary svg {
	transform: rotate(180deg);
}

.atd-facet__panel {
	position: absolute;
	left: 0;
	top: calc(100% + 12px);
	z-index: 50;
	background: #fff;
	border: 1px solid rgba(18, 18, 18, 0.2);
	min-width: 300px;
	padding: 0;
}

.atd-facet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.9rem 1.1rem;
	border-bottom: 1px solid rgba(18, 18, 18, 0.12);
	font-size: 0.8125rem;
}

.atd-facet__reset {
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.8125rem;
	color: rgba(18, 18, 18, 0.75);
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 0;
}

.atd-facet__reset:hover {
	color: #121212;
}

.atd-facet__panel label {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.55rem 1.1rem;
	cursor: pointer;
	font-size: 0.875rem;
	color: #121212;
}

.atd-facet__panel label:first-of-type {
	padding-top: 1rem;
}

.atd-facet__panel p {
	margin: 0;
}

.atd-facet__panel label:last-of-type {
	padding-bottom: 1rem;
}

.atd-facet__panel label:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.atd-facet__panel input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	accent-color: #121212;
}

.atd-facet__price-inputs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 1.1rem 1.2rem;
}

.atd-facet__price-inputs input[type="number"] {
	width: 7rem;
	padding: 0.6rem 0.7rem;
	border: 1px solid rgba(18, 18, 18, 0.55);
	border-radius: 0;
	font-family: inherit;
	font-size: 0.875rem;
}

.atd-facet__currency {
	color: rgba(18, 18, 18, 0.6);
}

.atd-facets__remove-all {
	font-size: 0.875rem;
	color: rgba(18, 18, 18, 0.75);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.atd-facets__right select {
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: 0.875rem;
	color: #121212;
	cursor: pointer;
	padding: 0.3rem 0.2rem;
}

.atd-facets__right select:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.atd-facets__count {
	color: rgba(18, 18, 18, 0.75);
	min-width: 80px;
	text-align: right;
}

/* ---- Dawn-style pagination ---- */
.atd-pagination {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	gap: 0.4rem;
	font-size: 1.05rem;
	align-items: center;
}

.atd-pagination .wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.atd-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	color: rgba(18, 18, 18, 0.75);
	text-decoration: none;
}

.atd-pagination a.page-numbers:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
	color: #121212;
}

/* Current page: Dawn marks it with a thin underline bar and full-strength text */
.atd-pagination .page-numbers.current {
	color: #121212;
	position: relative;
}

.atd-pagination .page-numbers.current::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 6px;
	height: 1px;
	background: #121212;
}

.atd-pagination .page-numbers.dots {
	min-width: 24px;
}

/* Chevron prev/next — Woo's product-collection strips the block's arrow
   attribute, so hide the text label and draw chevrons in CSS. The label
   stays in the DOM for screen readers. */
.atd-pagination .wp-block-query-pagination-previous,
.atd-pagination .wp-block-query-pagination-next {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	color: #121212;
	text-decoration: none;
	font-size: 0;
}

.atd-pagination .wp-block-query-pagination-previous::before {
	content: "‹";
	font-size: 1.5rem;
	line-height: 1;
}

.atd-pagination .wp-block-query-pagination-next::after {
	content: "›";
	font-size: 1.5rem;
	line-height: 1;
}

.atd-pagination .wp-block-query-pagination-previous:hover,
.atd-pagination .wp-block-query-pagination-next:hover {
	text-decoration: none;
	opacity: 0.6;
}

/* Dawn sections own their spacing — remove WP's default gap between
   top-level template blocks (header → hero, etc.). Inline margins survive. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ---- Mobile parity pass (Dawn breakpoint: 749px) ---- */
@media (max-width: 749px) {
	/* Header: hamburger left, logo centered, icons right (Dawn mobile layout) */
	.atd-header > .wp-block-group {
		position: relative;
		flex-wrap: nowrap;
	}

	.atd-header .wp-block-site-logo {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
	}

	.atd-header .wp-block-site-logo img {
		max-width: 100px;
		height: auto;
	}

	.atd-header {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	/* Hero: Dawn "medium" mobile height, tighter heading */
	.atd-hero {
		min-height: 340px !important;
	}

	.atd-hero h1 {
		font-size: 1.6rem;
		max-width: 92%;
	}

	/* Product grids: Dawn shows 2 columns on mobile */
	.wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 1rem 0.75rem !important;
	}

	/* Facet bar: stacked rows, count right-aligned */
	.atd-facets {
		gap: 0.6rem;
	}

	.atd-facets__left,
	.atd-facets__right {
		width: 100%;
		justify-content: flex-start;
		gap: 0.9rem;
	}

	.atd-facets__count {
		margin-left: auto;
	}

	/* Facet panels: don't overflow the viewport */
	.atd-facet__panel {
		min-width: 260px;
		max-width: calc(100vw - 2.5rem);
	}

	.atd-facet:nth-of-type(2) .atd-facet__panel {
		left: auto;
		right: -60px;
	}

	/* Search dropdown: keep on screen */
	.atd-search[open] .atd-search__form {
		min-width: 240px;
		max-width: calc(100vw - 2rem);
	}

	/* Product page: stacked columns get breathing room */
	.wp-block-columns {
		gap: 1.5rem;
	}

	/* Footer: newsletter full width, payment icons wrap */
	.atd-newsletter {
		max-width: 100%;
	}

	/* Touch targets */
	.atd-facet summary,
	.atd-search summary {
		min-height: 44px;
	}

	form.cart .single_add_to_cart_button {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
}