/*
Theme Name: Kettle & Kiln
Theme URI: https://github.com/Eilikooy/wordpress-test-customer
Author: Eiliko
Description: Block theme for Kettle & Kiln, a fictional ceramics shop used as a WooCommerce demo. Cool porcelain palette, one cobalt accent, a kiln-arch motif. All store content is AI-generated and the theme says so on every page.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.0.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kettle-kiln
Tags: block-theme, e-commerce, full-site-editing
*/

/*
 * Only what theme.json cannot express lives here. Colours, type and spacing
 * are tokens in theme.json; this file uses them, it does not redefine them.
 */

:root {
	--kk-arch: 999px 999px 6px 6px;
	--kk-tile-radius: 6px;
}

/* Keyboard focus is always visible, in the accent colour. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--cobalt);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------- notice */

.kk-demo-notice {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}
.kk-demo-notice a {
	color: inherit;
}

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

.kk-brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--wp--preset--color--cobalt);
}
.kk-brand svg {
	width: 2rem;
	height: 2rem;
	flex: none;
}
.kk-brand .wp-block-site-title {
	margin: 0;
}

.kk-header {
	border-bottom: 1px solid var(--wp--preset--color--kaolin);
}

/* Header utilities (search, account, cart) are icons of one weight, not buttons. */
.kk-header .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--slate);
	padding: 0.35rem;
	border-radius: 999px;
}
.kk-header .wp-block-search__button:hover {
	background: var(--wp--preset--color--kaolin);
}
.kk-header .wp-block-search.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper,
.kk-header .wp-block-search__inside-wrapper {
	border: 0;
}
.kk-header .wp-block-search__input {
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--celadon);
}

/* ---------------------------------------------------------------- the arch */

/* The one distinctive shape: a kiln arch. Used on the hero and the logo only. */
.kk-arch img,
.kk-arch.wp-block-image img {
	border-radius: var(--kk-arch);
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
}

/* ---------------------------------------------------------------- collections */

.kk-collection {
	text-decoration: none;
}
.kk-collection .wp-block-image img {
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--kk-tile-radius);
}
.kk-collection a {
	text-decoration: none;
	color: var(--wp--preset--color--slate);
}
.kk-collection a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------- glazes */

.kk-swatch {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	box-shadow: inset -6px -8px 14px rgb(27 37 48 / 0.18), inset 6px 6px 12px rgb(255 255 255 / 0.25);
}
.kk-swatch--cobalt { background: #2a48a8; }
.kk-swatch--celadon { background: #9ec3b0; }
.kk-swatch--ash {
	background-color: #d8d4ca;
	background-image: radial-gradient(#5b4a3c 1px, transparent 1.5px), radial-gradient(#5b4a3c 0.8px, transparent 1.2px);
	background-size: 11px 13px, 7px 9px;
	background-position: 0 0, 4px 5px;
}
.kk-swatch--tenmoku { background: radial-gradient(circle at 35% 30%, #9c5230, #4b2c1e 60%); }

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

/* Product images sit flat on kaolin: no card, no border, no shadow. */
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img,
.woocommerce-product-gallery img,
.wc-block-product-gallery-large-image img,
.wp-block-post-featured-image img {
	border-radius: var(--kk-tile-radius);
	background: var(--wp--preset--color--kaolin);
}

.wc-block-components-product-sale-badge,
.wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge {
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--cobalt);
	color: var(--wp--preset--color--white);
	font-weight: 560;
	letter-spacing: 0;
	text-transform: none;
	padding: 0.2rem 0.7rem;
}

.wc-block-components-product-price ins,
.wp-block-woocommerce-product-price ins {
	text-decoration: none;
}
.wp-block-woocommerce-product-price del {
	color: var(--wp--preset--color--slate-soft);
}

/* Quantity + add to cart on the product page. */
.wp-block-add-to-cart-form .quantity .qty,
.wc-block-components-quantity-selector {
	border-radius: 999px;
}
.wp-block-add-to-cart-form .quantity .qty {
	border: 1px solid var(--wp--preset--color--celadon);
	padding: 0.7rem 0.5rem;
	min-height: 3rem;
	font: inherit;
}
.wp-block-add-to-cart-form form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}
.wp-block-add-to-cart-form table.variations select {
	border: 1px solid var(--wp--preset--color--celadon);
	border-radius: 999px;
	padding: 0.6rem 2.5rem 0.6rem 1rem;
	height: auto;
	min-width: 12rem;
	font: inherit;
	line-height: 1.4;
	background-color: var(--wp--preset--color--white);
}

/* The gallery fills its column instead of WooCommerce's 512px cap and 48% float. */
.woocommerce .wp-block-woocommerce-product-image-gallery.wp-block-woocommerce-product-image-gallery {
	max-width: none;
}
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
}
.wp-block-woocommerce-product-image-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.75rem;
	margin-top: 0.75rem !important;
}
.wp-block-woocommerce-product-image-gallery .flex-control-thumbs li {
	width: auto !important;
}
.wp-block-add-to-cart-form table.variations th {
	text-align: left;
	padding-right: 1rem;
	font-weight: 560;
}

.woocommerce-ordering select {
	border: 1px solid var(--wp--preset--color--celadon);
	border-radius: 999px;
	padding: 0.45rem 2rem 0.45rem 0.9rem;
	font: inherit;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--slate);
}

/*
 * Product tabs: plain underlined labels rather than WooCommerce's boxed tabs.
 * The doubled class outranks WooCommerce's .woocommerce div.product .woocommerce-tabs rules.
 */
.woocommerce .wp-block-woocommerce-product-details.wp-block-woocommerce-product-details .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--30);
	display: flex;
	gap: 1.75rem;
	border-bottom: 1px solid var(--wp--preset--color--kaolin);
}
.woocommerce .wp-block-woocommerce-product-details.wp-block-woocommerce-product-details .woocommerce-tabs ul.tabs::before,
.woocommerce .wp-block-woocommerce-product-details.wp-block-woocommerce-product-details .woocommerce-tabs ul.tabs li::before,
.woocommerce .wp-block-woocommerce-product-details.wp-block-woocommerce-product-details .woocommerce-tabs ul.tabs li::after {
	display: none;
}
.woocommerce .wp-block-woocommerce-product-details.wp-block-woocommerce-product-details .woocommerce-tabs ul.tabs li {
	list-style: none;
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0 0 -1px;
	padding: 0 0 0.7rem;
	opacity: 1;
}
.woocommerce .wp-block-woocommerce-product-details.wp-block-woocommerce-product-details .woocommerce-tabs ul.tabs li.active {
	border-bottom: 2px solid var(--wp--preset--color--cobalt);
}
.woocommerce .wp-block-woocommerce-product-details.wp-block-woocommerce-product-details .woocommerce-tabs ul.tabs li a {
	padding: 0;
	text-decoration: none;
	color: var(--wp--preset--color--slate-soft);
	font-weight: 560;
}
.woocommerce .wp-block-woocommerce-product-details.wp-block-woocommerce-product-details .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--slate);
}
/* The tab already names the panel; its repeated heading is noise. */
.woocommerce-Tabs-panel > h2:first-child {
	display: none;
}
.woocommerce-Tabs-panel {
	max-width: 44rem;
}

/*
 * WooCommerce sets prices in tabular figures, where this face's comma is as
 * wide as a digit and "6,90" reads as "6 , 90". Proportional figures fix it.
 */
.woocommerce-Price-amount,
.wc-block-formatted-money-amount,
.wc-block-components-formatted-money-amount {
	font-variant-numeric: normal !important;
}

/* Cart, checkout and account are tools, not landing pages: smaller titles. */
.woocommerce-page:not(.woocommerce-shop) main > .wp-block-post-title {
	font-size: var(--wp--preset--font-size--x-large);
}

/* WooCommerce labels its tables in capitals; sentence case like the rest. */
.wc-block-cart-items__header,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title,
table.wc-block-cart-items th {
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* Store notices use the palette instead of WooCommerce's defaults. */
.wc-block-components-notice-banner {
	border-radius: var(--kk-tile-radius);
}

/* Form fields in cart, checkout and account. */
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-blocks-components-select .wc-blocks-components-select__select {
	border-radius: 6px !important;
}

/* ---------------------------------------------------------------- footer */

.kk-footer a,
.kk-footer .wp-block-site-title a {
	color: inherit;
	text-decoration: none;
}
.kk-footer .kk-brand {
	color: inherit;
}
.kk-footer a:hover {
	text-decoration: underline;
}
.kk-footer .wp-block-navigation {
	--navigation-layout-direction: column;
}
.kk-ai-note {
	border-left: 3px solid var(--wp--preset--color--celadon);
	padding-left: 1rem;
	max-width: 36rem;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}