/*
Theme Name: CocCone
Theme URI: https://coccone.com
Author: CocCone
Author URI: https://coccone.com
Description: Thème de blocs sur mesure pour la boutique CocCone. Pas de constructeur de page, pas de dépendance commerciale — WordPress et WooCommerce standards.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
Version: 1.2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coccone
Tags: block-theme, full-site-editing, e-commerce, custom-colors, custom-menu, editor-style, translation-ready
*/

/* Almost everything lives in theme.json. This file only carries what
   theme.json cannot express. Keep it small. */

/* The logo is white ink on transparency, so it needs a dark ground.
   Header and footer supply it; nothing to do here except keep it crisp. */
.wp-block-site-logo img {
	height: auto;
}

/* Header icons (account, cart) inherit the dark header's text colour. */
.wp-block-woocommerce-mini-cart .wc-block-mini-cart__button,
.wp-block-woocommerce-customer-account a {
	color: inherit;
}

.wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

/* Product prices and titles read better with a touch more air in grids. */
.wc-block-product-template .wc-block-product {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

/* Keep long shop tables scrollable rather than breaking the layout. */
.woocommerce table.shop_table,
.wc-block-cart-items {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}

/* Header, main and footer are siblings in the root layout, so the global block
   gap draws a pale stripe between them. Every section in this theme carries its
   own padding, so the gap between the three is not wanted. Note the template
   part renders inside an extra wrapper — styling the inner <footer> alone does
   nothing. */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part {
	margin-block: 0;
}

/* Focus visibility — the default outline disappears on dark surfaces. */
:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

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

/* ---------------------------------------------------------------------------
   Holding page (WooCommerce coming-soon mode). Scoped to .coccone-soon so none
   of it leaks into the shop.
   --------------------------------------------------------------------------- */

.coccone-soon .coccone-count {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(0.5rem, 2vw, 1rem);
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
	list-style: none;
}

.coccone-soon .coccone-count li {
	background: rgba(243, 236, 229, 0.05);
	border: 1px solid rgba(193, 142, 98, 0.22);
	border-radius: 10px;
	padding: clamp(0.7rem, 2.2vw, 1.1rem) 0.25rem;
	text-align: center;
}

.coccone-soon .coccone-count b {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: clamp(1.4rem, 5.5vw, 2.25rem);
	line-height: 1.1;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.coccone-soon .coccone-count small {
	display: block;
	margin-top: 0.35rem;
	font-size: clamp(0.55rem, 1.9vw, 0.7rem);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.coccone-soon .coccone-imminent[hidden] {
	display: none;
}

.coccone-soon .coccone-imminent {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.1rem, 3.5vw, 1.5rem);
	color: var(--wp--preset--color--accent);
	text-align: center;
	margin: 0 0 var(--wp--preset--spacing--50);
}

/* Waitlist form (Contact Form 7) on the dark ground. */
.coccone-darkform .wpcf7 {
	margin: 0;
}

.coccone-darkform .coccone-field {
	display: flex;
	gap: 0.5rem;
	max-width: 440px;
	margin: 0 auto;
}

/* Contact Form 7 runs wpautop over the form, so the field and the button end
   up inside one <p>. Make that paragraph the flex row instead of fighting it. */
.coccone-darkform .coccone-field > p {
	display: flex;
	gap: 0.5rem;
	width: 100%;
	margin: 0;
}

.coccone-darkform .wpcf7-form-control-wrap {
	display: block;
	flex: 1;
	min-width: 0;
}

.coccone-darkform input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	background: rgba(243, 236, 229, 0.07);
	border: 1px solid rgba(193, 142, 98, 0.3);
	border-radius: 2px;
	padding: 0.85rem 1rem;
	color: #f3ece5;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
}

.coccone-darkform input[type="email"]::placeholder {
	color: rgba(243, 236, 229, 0.45);
}

.coccone-darkform input[type="email"]:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px rgba(193, 142, 98, 0.18);
}

.coccone-darkform input[type="submit"] {
	box-sizing: border-box;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	border: 0;
	border-radius: 2px;
	padding: 0.85rem 1.4rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.coccone-darkform input[type="submit"]:hover {
	background: #d8b393;
}

.coccone-darkform .wpcf7-spinner {
	display: block;
	margin: 0.6rem auto 0;
}

.coccone-darkform .wpcf7-response-output {
	margin: 1rem 0 0 !important;
	padding: 0.7rem 1rem !important;
	border-radius: 2px !important;
	border: 1px solid rgba(193, 142, 98, 0.35) !important;
	font-size: 0.9rem;
	color: #f3ece5;
	text-align: center;
}

.coccone-darkform .wpcf7-not-valid-tip {
	color: #f0a99a;
	font-size: 0.8rem;
	margin-top: 0.35rem;
}

@media (max-width: 520px) {
	.coccone-darkform .coccone-field > p {
		flex-direction: column;
	}

	.coccone-darkform input[type="submit"] {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   Forms on a light ground — the contact page, and anywhere else a form lands
   in the body. Hairline borders, no rounded card, no shadow.
   --------------------------------------------------------------------------- */

.coccone-form {
	max-width: 34rem;
	margin-top: var(--wp--preset--spacing--40);
}

.coccone-form .wpcf7-form > p,
.coccone-form .coccone-form__row {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.coccone-form input[type="text"],
.coccone-form input[type="email"],
.coccone-form input[type="tel"],
.coccone-form textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.coccone-form textarea {
	resize: vertical;
	min-height: 9rem;
}

.coccone-form ::placeholder {
	color: var(--wp--preset--color--contrast-soft);
	opacity: 0.75;
}

.coccone-form input:focus,
.coccone-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px rgba(193, 142, 98, 0.15);
}

.coccone-form input[type="submit"] {
	padding: 0.95em 2.4em;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
}

.coccone-form input[type="submit"]:hover {
	background: var(--wp--preset--color--accent-deep);
}

.coccone-form .wpcf7-spinner {
	display: inline-block;
	margin-left: 0.75rem;
	vertical-align: middle;
}

.coccone-form .wpcf7-response-output {
	margin: var(--wp--preset--spacing--30) 0 0 !important;
	padding: 0.8rem 1rem !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 2px !important;
	font-size: 0.9rem;
}

.coccone-form .wpcf7-not-valid-tip {
	margin-top: 0.35rem;
	color: #a4402f;
	font-size: 0.8125rem;
}

/* The footer column is narrow, so the waitlist stacks there. */
.coccone-foot .coccone-darkform .coccone-field > p {
	flex-direction: column;
	align-items: stretch;
}

/*
 * And it sits where the column starts.
 *
 * The 440px measure and the auto margins above are for the coming-soon page,
 * where this form is the only thing on screen and belongs in the middle. In a
 * footer column it was centred against a heading, a sentence and a row of links
 * that all begin at the left edge.
 */
.coccone-foot .coccone-darkform .coccone-field {
	margin-left: 0;
	margin-right: 0;
}

.coccone-foot .coccone-darkform input[type="submit"] {
	width: 100%;
}

/* ---------------------------------------------------------------------------
   Shop grid and the empty state before the first products land.
   --------------------------------------------------------------------------- */

.coccone-shop-empty {
	max-width: 34rem;
	padding: var(--wp--preset--spacing--60) 0;
}

.coccone-shop-empty h2 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-large);
}

.coccone-shop-empty p {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast-soft);
}

/* The waitlist sits on white here, so the dark-ground styling is overridden. */
.coccone-shop-empty .coccone-darkform input[type="email"] {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
}

.coccone-shop-empty .coccone-darkform input[type="email"]::placeholder {
	color: var(--wp--preset--color--contrast-soft);
}

.coccone-shop-empty .coccone-darkform input[type="submit"] {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.coccone-shop-empty .coccone-darkform input[type="submit"]:hover {
	background: var(--wp--preset--color--accent-deep);
}

.coccone-shop-empty .coccone-darkform .wpcf7-response-output {
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--line) !important;
}

/*
 * The grid sits in the shop page's content, which the constrained layout caps
 * at contentSize. At 720px an auto-fill grid can only fit two columns, so the
 * wrapper breaks out to wideSize first.
 */
.coccone-shop {
	max-width: var(--wp--style--global--wide-size) !important;
	width: 100%;
	margin-inline: auto;
}

/* Product grid — no cards, no shadows; the photograph does the work. */
.coccone-shop ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.coccone-shop ul.products::before,
.coccone-shop ul.products::after {
	content: none;
}

@media (max-width: 900px) {
	.coccone-shop ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.coccone-shop ul.products {
		grid-template-columns: 1fr;
	}
}

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

.coccone-shop ul.products li.product a img {
	width: 100%;
	height: auto;
	margin-bottom: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--base-alt);
}

.coccone-shop ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 0.35rem;
	padding: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.35;
}

.coccone-shop ul.products li.product .price {
	display: block;
	margin: 0;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.9375rem;
	font-weight: 400;
}

.coccone-shop ul.products li.product .price del {
	opacity: 0.6;
	margin-right: 0.4rem;
}

.coccone-shop ul.products li.product .price ins {
	text-decoration: none;
	color: var(--wp--preset--color--accent-deep);
}

/* The loop's add-to-cart button is noise in a grid this quiet. */
.coccone-shop ul.products li.product .button,
.coccone-shop ul.products li.product .added_to_cart {
	display: none;
}

.coccone-shop .woocommerce-pagination ul {
	display: flex;
	gap: 0.5rem;
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.coccone-shop .woocommerce-pagination li {
	border: 0;
}

.coccone-shop .woocommerce-pagination a,
.coccone-shop .woocommerce-pagination span {
	display: grid;
	place-items: center;
	min-width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
	font-size: 0.8125rem;
	text-decoration: none;
}

.coccone-shop .woocommerce-pagination .current {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ------------------------------------------------------------- 404, journal */

.coccone-404 {
	max-width: 34rem;
	padding: var(--wp--preset--spacing--60) 0;
}

.coccone-404 h1 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--xx-large);
}

.coccone-404 p {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast-soft);
}

.coccone-404__cta a {
	display: inline-block;
	text-decoration: none;
}

.coccone-archive-title {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--xx-large);
}

.coccone-empty {
	color: var(--wp--preset--color--contrast-soft);
}