/*
Theme Name: Atelier 63111161
Theme URI: https://example.invalid/atelier
Author: Atelier
Description: A block theme for small independent clothing labels. Includes product, category and page templates for WooCommerce, a size-guide table style and hover treatments for product cards.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atelier-63111161
Tags: e-commerce, block-patterns, style-variations, full-site-editing
*/

/*
 * Almost everything lives in theme.json. Only the things it cannot express are
 * here: interaction states, pseudo-elements and behaviour inside media queries.
 *
 * No literal colour values in this file — use the CSS custom properties so that
 * the active style variation stays in control of the palette.
 */

/* Product cards lift slightly on hover; the image nudges in with them. */
.wp-block-woocommerce-product-template li,
.wc-block-product-template__responsive-wrapper,
li.product {
	transition: transform .22s ease, box-shadow .22s ease;
}
.wp-block-woocommerce-product-template li:hover,
.wc-block-product-template__responsive-wrapper:hover,
li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent);
}
.wc-block-product-image img,
li.product img {
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.wc-block-product-image:hover img,
li.product:hover img {
	transform: scale(1.035);
}
.wc-block-product-image,
li.product a > img {
	overflow: hidden;
	display: block;
}

/* The add-to-cart control appears on hover, so the image leads on the grid.
   Kept visible on touch, narrow viewports and keyboard focus. */
.product-action {
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .2s ease, transform .2s ease;
}
li:hover .product-action,
.wc-block-product-template__responsive-wrapper:hover .product-action,
.product-action:focus-within {
	opacity: 1;
	transform: none;
}
@media (hover: none), (max-width: 781px) {
	.product-action { opacity: 1; transform: none; }
}

/* Section headings are small caps rather than display sizes, so the imagery leads. */
.block-label {
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: .82rem;
	font-weight: 600;
	opacity: .75;
}
.masthead-tag {
	text-transform: uppercase;
	letter-spacing: .2em;
	font-size: .68rem;
	font-weight: 600;
	opacity: .8;
	margin-bottom: .5rem;
}

/* Buttons on cover blocks are reversed out. A cover's effective background is a
   photograph behind a translucent overlay, so no contrast ratio can be computed
   against the palette; white is the safe choice. */
.wp-block-cover .wp-block-button__link {
	color: #fff;
	border-color: #fff;
	background: transparent;
	background-image: none;
	box-shadow: none;
}
.wp-block-cover .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--contrast);
	border-color: #fff;
}

/* Keyboard focus must stay visible — the accessibility statement commits to it. */
:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Current price carries the weight; the struck-through price recedes. */
del, .woocommerce del { opacity: .5; font-weight: 400; }
ins, .woocommerce ins { text-decoration: none; font-weight: 600; }

/* Size-guide and measurement tables. */
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th {
	background: var(--wp--preset--color--surface);
	font-weight: 600;
	text-align: left;
}
.wp-block-table th, .wp-block-table td {
	border: 1px solid var(--wp--preset--color--border);
	padding: .6em .8em;
}
.wp-block-table tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--wp--preset--color--surface) 50%, transparent);
}