/*
 * DL Studio — a gallery, not a storefront.
 *
 * Warm paper, plenty of air, photographs given room, and the shop machinery (basket, buttons,
 * prices) kept quiet so the work leads. WooCommerce's own markup is styled here; the plugin
 * itself is untouched.
 */

:root {
	--dl-paper: var(--wp--preset--color--paper, #faf8f4);
	--dl-card: var(--wp--preset--color--card, #fff);
	--dl-ink: var(--wp--preset--color--ink, #1d1a17);
	--dl-muted: var(--wp--preset--color--muted, #6d645a);
	--dl-line: var(--wp--preset--color--line, #e3ddd3);
	--dl-brass: var(--wp--preset--color--brass, #8a6a3b);
	--dl-display: var(--wp--preset--font-family--display, Georgia, serif);
	--dl-text: var(--wp--preset--font-family--text, system-ui, sans-serif);
}

body {
	background: var(--dl-paper);
}

/* ------------------------------------------------------------------ header */

.dl-header {
	gap: 20px 40px;
	align-items: center;
	max-width: 1240px;
	margin: 0 auto;
	padding: 28px 24px 22px;
}

.dl-logo img {
	display: block;
	width: 190px;
	height: auto;
	color: var(--dl-ink);          /* the logo is a monochrome SVG: it takes this colour */
}

.dl-nav {
	gap: 34px;
	font-family: var(--dl-text);
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.dl-nav .wp-block-navigation-item__content {
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	color: var(--dl-ink);
	text-decoration: none;
}

.dl-nav .wp-block-navigation-item__content:hover,
.dl-nav .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--dl-brass);
	color: var(--dl-brass);
}

@media (max-width: 599px) {
	.dl-nav .wp-block-navigation__responsive-container-open {
		display: flex;
	}

	.dl-header {
		justify-content: center;
		padding: 20px 16px 16px;
	}

	.dl-logo img {
		width: 150px;
	}
}

.dl-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 72px 28px;
	background: var(--dl-paper);
}

.dl-nav .is-menu-open .wp-block-navigation-item__content {
	font-size: 1.1rem;
	letter-spacing: 0.18em;
}

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

/* Top and bottom only: the left and right padding is the theme's global padding, and zeroing
   it here would leave wide blocks flush against the edge of a phone screen. */
.dl-main {
	padding-top: 10px;
	padding-bottom: 80px;
}

.dl-page-title {
	margin: 0 0 1.2rem;
	font-size: var(--wp--preset--font-size--title);
}

.dl-meta {
	color: var(--dl-muted);
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dl-hero {
	padding: 56px 0 40px;
}

.dl-hero-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 400;
	letter-spacing: 0.02em;
}

.dl-hero-sub {
	margin: 0.8rem auto 0;
	max-width: 34rem;
	color: var(--dl-muted);
	font-size: 1.1rem;
}

.dl-section-title {
	margin: 3rem 0 2rem;
	font-size: 1.6rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.dl-section-title::after {
	content: "";
	display: block;
	width: 48px;
	height: 1px;
	margin: 1rem auto 0;
	background: var(--dl-brass);
}

.dl-more {
	margin-top: 2.5rem;
	font-size: 0.85rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------- the pieces */

/* Product grid: photograph, name, price. No badges, no clutter. */
.woocommerce ul.products,
.wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 44px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	text-align: center;
}

.woocommerce ul.products li.product a img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 0 1rem;
	background: var(--dl-card);
	box-shadow: 0 10px 26px rgba(29, 26, 23, 0.08);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	color: var(--dl-ink);
	font-family: var(--dl-display);
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1.3;
}

.woocommerce ul.products li.product .price {
	display: block;
	margin-top: 0.35rem;
	color: var(--dl-muted);
	font-family: var(--dl-text);
	font-size: 0.95rem;
}

/* The basket button stays out of the grid; a piece is bought from its own page. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	display: none;
}

.woocommerce ul.products li.product .dl-sold,
.dl-sold {
	display: inline-block;
	margin-top: 0.4rem;
	color: var(--dl-brass);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* One piece. The layout is the template's two columns; these are the finishing touches. */
.woocommerce div.product .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.woocommerce div.product .product_title {
	margin: 0 0 0.6rem;
	font-size: 2.3rem;
	font-weight: 400;
}

.woocommerce div.product p.price {
	margin: 0 0 1.4rem;
	color: var(--dl-ink);
	font-family: var(--dl-text);
	font-size: 1.15rem;
	font-weight: 600;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--dl-ink);
}

.woocommerce div.product .stock.out-of-stock {
	color: var(--dl-brass);
	font-size: 0.85rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.woocommerce div.product form.cart {
	margin: 1.6rem 0 0;
}

.woocommerce div.product form.cart .quantity {
	display: none;          /* one of a kind: the quantity is always one */
}

.woocommerce .product_meta {
	margin-top: 1.6rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--dl-line);
	color: var(--dl-muted);
	font-size: 0.85rem;
}

/* Buttons, messages and the basket, in the same quiet key. */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	padding: 0.9em 2em;
	border-radius: 0;
	background: var(--dl-ink);
	color: var(--dl-paper);
	font-family: var(--dl-text);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--dl-brass);
	color: #fff;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--dl-brass);
	background: var(--dl-card);
}

.woocommerce-breadcrumb {
	margin-bottom: 2rem;
	color: var(--dl-muted);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	color: var(--dl-muted);
	font-size: 0.85rem;
}

/* ------------------------------------------------ the pieces, in block markup
 *
 * WooCommerce renders the gallery and the single-piece page as blocks, not as the classic
 * markup above; the front page's [products] shortcode is the one place still using the old
 * markup. Both are styled to land in the same place.
 */

/* Three across. WooCommerce sizes its own columns from a container query that does not fire
   inside this layout, and falls back to two; say it plainly instead. */
.dl-grid ul.wc-block-product-template {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dl-grid ul.wc-block-product-template > li {
	margin: 0;
	text-align: center;
}

/* A wall of pieces reads better squared off; the piece's own page shows the whole photograph. */
.dl-grid .wc-block-components-product-image {
	margin: 0 0 1rem;
}

.dl-grid .wc-block-components-product-image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--dl-card);
	box-shadow: 0 10px 26px rgba(29, 26, 23, 0.08);
}

.dl-grid .wp-block-post-title {
	margin: 0;
	font-family: var(--dl-display);
	font-weight: 400;
	line-height: 1.3;
}

.dl-grid .wp-block-post-title a {
	text-decoration: none;
}

.dl-grid .wp-block-woocommerce-product-price {
	margin: 0.35rem 0 0;
	color: var(--dl-muted);
	font-family: var(--dl-text);
}

/* In the gallery a piece is looked at, not bought; the basket lives on its own page.
   The "Sold" mark, however, belongs here. */
.dl-grid .wp-block-woocommerce-product-button .wp-block-button__link,
.dl-grid .wp-block-woocommerce-product-button .added_to_cart {
	display: none;
}

.dl-grid .wp-block-woocommerce-product-button {
	margin: 0;
}

.dl-gallery .dl-section-title {
	margin-top: 2rem;
}

.dl-gallery-intro {
	max-width: 34rem;
	margin: -1rem auto 2.5rem;
	color: var(--dl-muted);
}

/* --- one piece --- */

.dl-piece .wp-block-woocommerce-breadcrumbs {
	margin-bottom: 2.4rem;
	color: var(--dl-muted);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
}

.dl-piece-cols {
	gap: 56px;
	margin-bottom: 3.5rem;
}

.dl-piece .woocommerce-product-gallery__image img {
	background: var(--dl-card);
	box-shadow: 0 14px 34px rgba(29, 26, 23, 0.1);
}

.dl-piece-title {
	margin: 0 0 0.6rem;
	font-size: 2.3rem;
	font-weight: 400;
	line-height: 1.15;
}

.dl-piece-price {
	margin: 0 0 1.4rem;
	color: var(--dl-ink);
	font-family: var(--dl-text);
	font-size: 1.15rem;
	font-weight: 600;
}

.dl-piece-excerpt {
	color: var(--dl-ink);
}

.dl-piece-excerpt p {
	margin: 0;
}

/* One of a kind: the quantity is always one, and "1 in stock" only states the obvious. */
.dl-piece .wc-block-add-to-cart-form .quantity,
.dl-piece .wc-block-add-to-cart-form .stock.in-stock {
	display: none;
}

.dl-piece .wc-block-add-to-cart-form {
	margin-top: 1.8rem;
}

.dl-piece .wc-block-add-to-cart-form .stock.out-of-stock {
	margin: 0;
	color: var(--dl-brass);
	font-size: 0.9rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.dl-piece-meta {
	margin-top: 1.8rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--dl-line);
	color: var(--dl-muted);
	font-size: 0.85rem;
}

.dl-piece-details {
	margin: 0 0 1rem;
}

/* With reviews off there is only ever one tab, so the tab strip says nothing. */
.dl-piece-details ul.wc-tabs,
.dl-piece-details ul.tabs {
	display: none;
}

.dl-piece-details h2,
.dl-piece-details h3 {
	margin: 0 0 0.8rem;
	font-size: 1.1rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.dl-piece .dl-section-title {
	margin-top: 4.5rem;
}

/* -------------------------------------------------------- posts and footer */

.dl-posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 40px;
}

.dl-post-card img {
	margin-bottom: 0.8rem;
}

.dl-footer {
	margin-top: 80px;
	padding: 40px 24px 56px;
	border-top: 1px solid var(--dl-line);
	color: var(--dl-muted);
	font-size: 0.85rem;
}

.dl-footer-line {
	margin: 0 0 0.4rem;
	font-family: var(--dl-display);
	font-size: 1.05rem;
}

.dl-copyright {
	margin: 0;
	letter-spacing: 0.1em;
}

/* ------------------------------------------------------------------ phones */

@media (max-width: 781px) {
	.woocommerce div.product {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.dl-hero {
		padding: 32px 0 24px;
	}

	.woocommerce ul.products,
	.wc-block-grid__products {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 28px 18px;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 1.1rem;
	}

	.dl-piece-cols {
		gap: 28px;
		margin-bottom: 2.5rem;
	}

	.dl-piece-title {
		font-size: 1.9rem;
	}

	.dl-grid ul.wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 18px;
	}

	.dl-grid .wp-block-post-title {
		font-size: 1.1rem;
	}
}