/*
 * Header and footer.
 *
 * The rules here are deliberately plain: hairlines instead of boxes, no
 * shadows, no rounded cards, one accent colour. Everything that reads as
 * "template" — pill buttons, icon circles, drop shadows, gradients on
 * furniture — is left out on purpose.
 */

/* ------------------------------------------------------------------ head */

.coccone-head__announce {
	margin: 0;
	padding: 0.7rem 1rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
	text-align: center;
	font-size: 0.625rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.coccone-head__bar {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding: 1.6rem var(--wp--preset--spacing--40) 1.4rem;
	background: var(--wp--preset--color--base);
}

/* Two equal flanks keep the logo optically centred whatever the nav length. */
.coccone-head__side {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	min-width: 0;
}

.coccone-head__side--end {
	justify-content: flex-end;
}

.coccone-head__nav ul {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.coccone-head__nav a,
.coccone-head__cats a,
.coccone-drawer a,
.coccone-foot__col a,
.coccone-foot__social a {
	text-decoration: none;
}

.coccone-head__nav a {
	display: inline-block;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	color: var(--wp--preset--color--contrast);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.coccone-head__nav a:hover,
.coccone-head__nav a:focus-visible {
	color: var(--wp--preset--color--accent-deep);
	border-bottom-color: var(--wp--preset--color--accent);
}

.coccone-head__logo {
	flex: 0 1 auto;
	min-width: 0;
	display: block;
	line-height: 0;
}

.coccone-head__logo img {
	display: block;
	width: auto;
	/* The supplied artwork is 388x66, so 44px is a shade under 1.5x density.
	   Anything taller starts to show the upscale on the wordmark's thin strokes. */
	height: 44px;
	max-width: 100%;
	object-fit: contain;
}

.coccone-head__tools {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

/*
 * The tools are two links and a button. Without the reset the button arrives
 * wearing the browser's grey box, and the row reads as two icons and a widget.
 */
.coccone-head__tool {
	position: relative;
	display: inline-flex;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	cursor: pointer;
	transition: color 0.2s ease;
}

.coccone-head__tool:hover {
	color: var(--wp--preset--color--accent-deep);
}

/* ---------------------------------------------------------------------------
   Sign in / Sign up, in place of the account glyph
   ---------------------------------------------------------------------------
   Words rather than an icon, because signed out the account is not one place.
   They are set like the category row above them — small caps, quiet — so the bar
   still reads as one set of controls and not as two buttons dropped into it.

   Sign up carries the rule under it: of the two it is the one a first-time
   visitor is being invited to take, and an underline is enough to say so without
   putting a filled button in a header that has none.
   --------------------------------------------------------------------------- */

.coccone-head__auth {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	white-space: nowrap;
}

.coccone-head__auth a {
	color: var(--wp--preset--color--contrast);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.2s ease;
}

.coccone-head__auth a:hover {
	color: var(--wp--preset--color--accent-deep);
}

/*
 * `a.` and not just the modifier: the reset above is `.coccone-head__auth a`,
 * a class and a type — (0,1,1) — and a lone modifier class is (0,1,0), so the
 * underline was being reset away by the rule three lines above it.
 */
.coccone-head__auth a.coccone-head__auth--up {
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-thickness: 1px;
}

.coccone-head__count.is-empty {
	display: none;
}

.coccone-head__count {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	font-size: 0.5625rem;
	font-style: normal;
	line-height: 15px;
	text-align: center;
}

.coccone-head__burger {
	display: none;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

/* ------------------------------------------------------------ categories */

/*
 * One centred rule of links under the brand. It is the shop's whole structure
 * in a single line, which is the point: seven families and the pages that are
 * not the shop, with a hairline between the two kinds.
 */
.coccone-head__cats {
	padding: 0 var(--wp--preset--spacing--40) 1rem;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.coccone-head__cats ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.55rem 1.7rem;
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.coccone-head__cats a {
	display: inline-block;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.625rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.coccone-head__cats a:hover,
.coccone-head__cats a:focus-visible {
	color: var(--wp--preset--color--contrast);
	border-bottom-color: var(--wp--preset--color--accent);
}

/* Separates the seven families from the pages that are not the shop. */
.coccone-head__cats-rule {
	width: 1px;
	height: 11px;
	background: var(--wp--preset--color--line);
}

/* ---------------------------------------------------------------- search */

.coccone-search {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base-alt);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

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

.coccone-search__form {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	max-width: 520px;
	margin: 0 auto;
}

.coccone-search__form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.7rem 0.9rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
}

.coccone-search__form input[type="search"]:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
}

.coccone-search__form button {
	padding: 0.7rem 1.4rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
	border: 0;
	border-radius: 2px;
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
}

.coccone-search__form button:hover {
	background: var(--wp--preset--color--accent-deep);
}

/* ------------------------------------------------------------- language */

.coccone-lang ul {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.625rem;
	letter-spacing: 0.14em;
}

.coccone-lang li + li {
	padding-left: 0.5rem;
	border-left: 1px solid var(--wp--preset--color--line);
}

.coccone-lang a {
	color: var(--wp--preset--color--contrast-soft);
	text-decoration: none;
}

.coccone-lang a:hover {
	color: var(--wp--preset--color--accent-deep);
}

.coccone-lang [aria-current] {
	color: var(--wp--preset--color--contrast);
}

/* ---------------------------------------------------------------- panels */

/*
 * The menu and the bag are the same object entering from opposite sides.
 *
 * The speed lives in a custom property because the script reads it: the panel is
 * `hidden` when closed, which keeps it out of the tab order, and something has
 * to know how long to wait before hiding it again. Two numbers that must agree,
 * kept as one.
 */
:root {
	--coccone-panel-speed: 320ms;
	--coccone-panel-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/*
 * The panels sit above the page's furniture but below the photo lightbox.
 *
 * WooCommerce gives the gallery's magnifier `z-index: 99`, which was above the
 * scrim at 90 — so the button went on floating over the dimmed page while a
 * panel was open. PhotoSwipe, the lightbox itself, starts at 1500 and is left
 * on top on purpose: if it is open it is the thing being looked at.
 */
.coccone-scrim {
	position: fixed;
	inset: 0;
	z-index: 800;
	background: rgba(26, 14, 9, 0.42);
	opacity: 0;
	transition: opacity var(--coccone-panel-speed) var(--coccone-panel-ease);
}

.coccone-scrim.is-open {
	opacity: 1;
}

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

.coccone-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 810;
	display: flex;
	flex-direction: column;
	width: min(92vw, 400px);
	background: var(--wp--preset--color--base);
	transition: transform var(--coccone-panel-speed) var(--coccone-panel-ease);
	/* The panel scrolls inside itself; the page behind it does not. */
	overscroll-behavior: contain;
}

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

.coccone-panel--left {
	left: 0;
	border-right: 1px solid var(--wp--preset--color--line);
	transform: translateX(-100%);
}

.coccone-panel--right {
	right: 0;
	border-left: 1px solid var(--wp--preset--color--line);
	transform: translateX(100%);
}

.coccone-panel.is-open {
	transform: translateX(0);
}

/* Whatever is behind a panel stays put. */
.coccone-locked,
.coccone-locked body {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.coccone-panel,
	.coccone-scrim {
		transition: none;
	}
}

/*
 * The close sits on the left of both panels.
 *
 * It was on the outer edge of each — right on the bag, right on the menu — which
 * put the bag's close under the thumb but the menu's across the screen from it,
 * and made the two panels feel like different things. One position, and on a
 * phone it is the corner the hand is already near.
 *
 * Ordered rather than moved in the markup: the title should still come first for
 * anything reading the page rather than looking at it.
 */
.coccone-panel__head {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.9rem;
	padding: 1.15rem var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.coccone-panel__close {
	order: -1;
}

.coccone-panel__title {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.coccone-panel__close {
	display: inline-flex;
	padding: 0.35rem;
	margin: -0.35rem;
	background: none;
	border: 0;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.coccone-panel__close:hover {
	color: var(--wp--preset--color--accent-deep);
}

/*
 * Opening a panel moves focus to this button, so its ring is on screen every
 * time — the browser's default square is the first thing the eye lands on.
 * Keyboard users still need it, so it is styled rather than removed.
 */
.coccone-panel__close:focus {
	outline: none;
}

.coccone-panel__close:focus-visible {
	outline: 1px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.coccone-panel__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--40);
}

.coccone-panel__foot {
	flex: 0 0 auto;
	padding: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base-alt);
}

.coccone-panel__label {
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--accent);
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.coccone-panel__label + .coccone-drawer__nav {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* --------------------------------------------------------- menu contents */

.coccone-drawer__nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.coccone-drawer__nav li + li {
	border-top: 1px solid var(--wp--preset--color--line);
}

.coccone-drawer__nav a {
	display: block;
	padding: 0.85rem 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	text-decoration: none;
}

.coccone-drawer__nav a:hover {
	color: var(--wp--preset--color--accent-deep);
}

/* The pages are the second tier, so they are quieter than the categories. */
.coccone-drawer__nav--pages a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-soft);
}

/* The switcher sits inside the panel but must not inherit its serif scale. */
.coccone-panel .coccone-lang ul {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
}

.coccone-panel .coccone-lang a,
.coccone-panel .coccone-lang span {
	display: inline;
	padding: 0;
	font-family: var(--wp--preset--font-family--body);
}

/* ---------------------------------------------------------- bag contents */

.coccone-cart .woocommerce-mini-cart {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * A mini-cart row is three siblings in this order: the remove link, one link
 * holding the thumbnail and the name, then the quantity. The image is *inside*
 * the name link, so a grid laid over the row puts the picture wherever that link
 * happens to fall — which is how it ended up on the right.
 *
 * So the two fixed things are positioned and the copy is indented past them.
 */
.coccone-cart ul.woocommerce-mini-cart li.woocommerce-mini-cart-item,
.coccone-cart .woocommerce-mini-cart-item {
	position: relative;
	min-height: 76px;
	padding: 0 2.25rem 0 5.25rem;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--line);
	list-style: none;
}

.coccone-cart .woocommerce-mini-cart-item:last-child {
	margin-bottom: 0;
	border-bottom: 0;
}

/*
 * WooCommerce floats this image right at 32px from `.woocommerce ul.cart_list
 * li img` — two classes and three elements, which outranks a two-class
 * selector. That float is why the thumbnail first appeared on the wrong side of
 * the row. The chain below is deeper than Woo's, so it wins without !important.
 */
.coccone-cart ul.woocommerce-mini-cart li.woocommerce-mini-cart-item img {
	position: absolute;
	left: 0;
	top: 0;
	float: none;
	width: 68px;
	height: auto;
	margin: 0;
	background: var(--wp--preset--color--base-alt);
}

.coccone-cart .woocommerce-mini-cart-item a:not(.remove) {
	display: block;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	line-height: 1.35;
	text-decoration: none;
}

.coccone-cart .woocommerce-mini-cart-item a:not(.remove):hover {
	color: var(--wp--preset--color--accent-deep);
}

.coccone-cart .woocommerce-mini-cart-item .quantity {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--contrast-soft);
}

.coccone-cart .woocommerce-mini-cart-item .variation {
	margin: 0.15rem 0 0;
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-soft);
}

.coccone-cart .woocommerce-mini-cart-item .variation dt,
.coccone-cart .woocommerce-mini-cart-item .variation dd,
.coccone-cart .woocommerce-mini-cart-item .variation p {
	display: inline;
	margin: 0;
	font-weight: 400;
}

.coccone-cart .woocommerce-mini-cart-item a.remove {
	position: absolute;
	right: 0;
	top: 0;
	width: 1.5rem;
	height: 1.5rem;
	display: grid;
	place-items: center;
	background: none;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.8125rem;
	line-height: 1;
	text-decoration: none;
}

.coccone-cart .woocommerce-mini-cart-item a.remove:hover {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/*
 * Woo prints its own subtotal and buttons inside the mini cart. Ours live in the
 * panel's footer, where they stay in view while the list scrolls.
 */
.coccone-cart .woocommerce-mini-cart__total,
.coccone-cart .woocommerce-mini-cart__buttons {
	display: none;
}

.coccone-cart .woocommerce-mini-cart__empty-message {
	margin: 0;
	padding: var(--wp--preset--spacing--50) 0;
	color: var(--wp--preset--color--contrast-soft);
	text-align: center;
}

.coccone-cart__foot {
	display: grid;
	gap: 0.6rem;
}

.coccone-cart__note {
	margin: 0 0 0.2rem;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.75rem;
	text-align: center;
}

.coccone-cart__checkout,
.coccone-cart__view {
	display: block;
	padding: 0.95rem 1rem;
	border-radius: 2px;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	transition: background 0.25s ease, color 0.25s ease;
}

.coccone-cart__checkout {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--contrast);
}

.coccone-cart__checkout:hover {
	background: var(--wp--preset--color--accent-deep);
	border-color: var(--wp--preset--color--accent-deep);
}

.coccone-cart__view {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
}

.coccone-cart__view:hover {
	border-color: var(--wp--preset--color--contrast);
}

.coccone-cart__keep {
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
}

.coccone-cart__keep:hover {
	color: var(--wp--preset--color--contrast);
}

/* ------------------------------------------------------------------ foot */

/* ---------------------------------------------------------------------------
   The newsletter, above the footer
   ---------------------------------------------------------------------------
   It was the fourth column of the footer grid — the tallest of the four, and
   the only one that was a form rather than a list of links, which is what made
   that row uneven. The home page carried a second one of its own directly above
   it on a light ground: two invitations to the same list, stacked.

   One band now. Its ground runs from the deep brown into the ink the footer
   sits on, so the two read as one dark ending to the page rather than as two
   stacked footers.
   --------------------------------------------------------------------------- */

.coccone-signup {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
	background: linear-gradient(
		180deg,
		var(--wp--preset--color--accent-deep) 0%,
		var(--wp--preset--color--contrast) 100%
	);
	text-align: center;
}

.coccone-signup__inner {
	max-width: 44rem;
	margin: 0 auto;
}

.coccone-signup h2 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.6rem, 2.8vw, 2.4rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--base-alt);
}

.coccone-signup p {
	margin: 0 auto var(--wp--preset--spacing--40);
	max-width: 44ch;
	color: rgba(247, 242, 236, 0.75);
}

/*
 * Centred here, where the footer column had it starting at the column's left
 * edge. Same markup, different ground.
 */
.coccone-signup .coccone-darkform .coccone-field {
	max-width: 440px;
	margin: 0 auto;
}

/*
 * The two meet. WordPress's block layout puts 24px between siblings, and that
 * strip of page showing between the end of the gradient and the start of the
 * footer is the one thing that would give away that they are two elements.
 */
.coccone-signup + .coccone-foot {
	margin-top: 0;
}

.coccone-foot {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
}

.coccone-foot__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: var(--wp--preset--spacing--60);
	align-items: start;
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
}

.coccone-foot__logo {
	width: 150px;
	height: auto;
}

.coccone-foot__tagline {
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 26ch;
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	color: var(--wp--preset--color--accent);
}

.coccone-foot__col h2 {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.coccone-foot__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.coccone-foot__col li + li {
	margin-top: 0.6rem;
}

.coccone-foot__col a {
	color: rgba(247, 242, 236, 0.75);
	font-size: 0.875rem;
	transition: color 0.2s ease;
}

.coccone-foot__col a:hover {
	color: var(--wp--preset--color--base);
}


/*
 * The four networks, under the tagline, as their own marks.
 *
 * They used to be names at the foot of the newsletter column — four of them in
 * a column that fitted three, so they broke three and one. As marks they take
 * one row at any width, and they fill the space the brand column had going
 * spare under the logo.
 */
.coccone-foot__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: var(--wp--preset--spacing--30) 0 0 !important;
	padding: 0;
	list-style: none;
}

.coccone-foot__social li,
.coccone-foot__social li + li {
	margin: 0 !important;
}

.coccone-foot__social a {
	display: grid;
	place-items: center;
	width: 2.375rem;
	height: 2.375rem;
	color: rgba(247, 242, 236, 0.75);
	border: 1px solid rgba(247, 242, 236, 0.22);
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.coccone-foot__social a:hover {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}


.coccone-foot__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	max-width: var(--wp--style--global--wide-size);
	margin: var(--wp--preset--spacing--50) auto 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid rgba(193, 142, 98, 0.25);
	font-size: 0.75rem;
	color: rgba(247, 242, 236, 0.55);
}

.coccone-foot__base p {
	margin: 0;
}

.coccone-foot__base .coccone-lang a {
	color: rgba(247, 242, 236, 0.55);
}

.coccone-foot__base .coccone-lang a:hover,
.coccone-foot__base .coccone-lang [aria-current] {
	color: var(--wp--preset--color--base);
}

.coccone-foot__base .coccone-lang li + li {
	border-left-color: rgba(193, 142, 98, 0.3);
}

/* The waitlist form is dark-on-dark here too. */
.coccone-foot .wpcf7 {
	margin: 0;
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 900px) {
	/*
	 * The bar is a three-column grid, not a flex row.
	 *
	 * Flex kept producing a bar that measured correctly and looked wrong: the
	 * controls carried negative margins so their tap targets could be 44px, and
	 * those margins fought the row's own gap. The burger ended up outside its
	 * flank, the account and bag icons overlapped by a pixel, and the group
	 * finished 37px short of the right edge while the bar itself stood 85px tall.
	 *
	 * Three columns state the answer instead of arriving at it: the flanks take
	 * exactly half of what is left over each, so the logo is centred on the bar
	 * rather than centred on whatever the icons did not use.
	 */
	.coccone-head__bar {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 0.5rem;
		min-height: 3.5rem;
		padding: 0.25rem var(--wp--preset--spacing--30);
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	/*
	 * The header follows the page down. On a phone the bag is otherwise a scroll
	 * back to the top away, and the whole point of the panel is that it is one
	 * tap from wherever you are.
	 */
	.coccone-head {
		position: sticky;
		top: 0;
		z-index: 80;
		background: var(--wp--preset--color--base);
	}

	.coccone-head__announce {
		padding: 0.5rem 1rem;
		font-size: 0.5625rem;
		letter-spacing: 0.18em;
	}

	.coccone-head__nav,
	.coccone-head__cats {
		display: none;
	}

	/* The switcher moves into the menu panel's footer on a phone. */
	.coccone-head__side .coccone-lang,
	.coccone-head__tools .coccone-lang {
		display: none;
	}

	/*
	 * No min-width: 0 here.
	 *
	 * With it, a flank could be squeezed narrower than the icons it holds — and
	 * it was: the right flank shrank to its 1fr share and the tools overflowed
	 * leftwards, putting the bag icon nine pixels into the wordmark.
	 */
	.coccone-head__side {
		display: flex;
		align-items: center;
		gap: 0;
	}

	/*
	 * Account leaves the bar on a phone. Three icons and a burger either squeeze
	 * the logo off centre or overlap it at 390px, and of the three the account is
	 * the one nobody taps mid-shop — it is already in the menu panel, under More.
	 */
	.coccone-head__tools .coccone-head__tool:not(.coccone-head__tool--bag):not(.coccone-head__search-toggle) {
		display: none;
	}

	/*
	 * The signed-out pair goes with it. Two words plus a burger, a search, a bag
	 * and the wordmark do not fit in 390px in any language — "Se connecter" and
	 * "Iniciar sesion" are twice the width of the glyph they replace. Both are in
	 * the menu panel, under More.
	 */
	.coccone-head__auth {
		display: none;
	}

	.coccone-head__side--end {
		justify-content: flex-end;
	}

	.coccone-head__logo {
		justify-self: center;
		text-align: center;
	}

	.coccone-head__logo img {
		height: 24px;
		margin: 0 auto;
	}

	/*
	 * Every control is the same 44px square — the smallest comfortable tap
	 * target — with the glyph centred in it. Before this the burger was 29px
	 * tall and the icons 38px, in a row that was supposed to look like one set.
	 */
	.coccone-head__burger,
	.coccone-head__tool {
		display: grid;
		place-items: center;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		margin: 0;
	}

	.coccone-head__tools {
		display: flex;
		align-items: center;
		gap: 0;
	}

	/*
	 * The outermost box is pulled out by the distance between its edge and the
	 * glyph inside it, so the glyph — not the invisible tap target — lines up
	 * with the padding the rest of the page uses.
	 */
	.coccone-head__burger {
		margin-left: -0.8125rem;
	}

	/*
	 * The bag by name, not `:last-child`.
	 *
	 * It used to be the last of the tools. It is not any more — the signed-out
	 * pair sits after it — and that pair is `display: none` at this width, so
	 * `:last-child` was pulling a box nobody can see and leaving the bag's glyph
	 * 13px short of the margin every other row on the page lines up with.
	 */
	.coccone-head__tools > .coccone-head__tool--bag {
		margin-right: -0.8125rem;
	}

	/* 18px reads thin at arm's length on a phone. */
	.coccone-head__burger svg,
	.coccone-head__tool svg {
		width: 20px;
		height: 20px;
	}

	.coccone-head__count {
		top: 4px;
		right: 4px;
	}

	.coccone-foot__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--50);
	}

	.coccone-foot__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.coccone-foot__grid {
		grid-template-columns: 1fr;
	}

	.coccone-head__logo img {
		height: 21px;
	}

	/* A panel on a small screen leaves a sliver of the page behind it, which is
	   what says it is a panel and not a new page. */
	.coccone-panel {
		width: min(88vw, 360px);
	}

	.coccone-panel__body,
	.coccone-panel__foot,
	.coccone-panel__head {
		padding-left: var(--wp--preset--spacing--30);
		padding-right: var(--wp--preset--spacing--30);
	}
}

/* ---------------------------------------------------------------------------
   Currency
   ---------------------------------------------------------------------------
   A disclosure, next to the language switcher in all three places it appears:
   the header bar, the menu panel's footer and the dark footer.

   Built on `<details>`/`<summary>` rather than a button and a script, so it
   opens, closes, and answers the keyboard on its own. chrome.js adds only the
   two things a native disclosure has no opinion about — Escape, and a click
   somewhere else.
   --------------------------------------------------------------------------- */

.coccone-currency {
	position: relative;
}

.coccone-currency__wrap > summary {
	display: flex;
	align-items: center;
	gap: 0.2rem;
	list-style: none;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	cursor: pointer;
	user-select: none;
}

/* Safari draws its own triangle unless both of these are said. */
.coccone-currency__wrap > summary::-webkit-details-marker,
.coccone-currency__wrap > summary::marker {
	display: none;
	content: '';
}

.coccone-currency__wrap > summary:hover,
.coccone-currency__wrap[open] > summary {
	color: var(--wp--preset--color--contrast);
}

.coccone-currency__wrap > summary .coccone-icon {
	width: 12px;
	height: 12px;
	transition: transform 0.15s ease;
}

.coccone-currency__wrap[open] > summary .coccone-icon {
	transform: rotate(180deg);
}

/* ------------------------------------------------------------- the list */

.coccone-currency__list {
	position: absolute;
	z-index: 60;
	top: calc(100% + 0.55rem);
	left: 0;
	min-width: 6.5rem;
	margin: 0;
	padding: 0.35rem 0;
	list-style: none;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	box-shadow: 0 8px 24px rgba(42, 23, 16, 0.08);
	font-size: 0.625rem;
	letter-spacing: 0.14em;
}

.coccone-currency__list a,
.coccone-currency__list span {
	display: block;
	padding: 0.45rem 0.85rem;
	color: var(--wp--preset--color--contrast-soft);
	text-decoration: none;
	white-space: nowrap;
}

.coccone-currency__list a:hover {
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--accent-deep);
}

.coccone-currency__list [aria-current] {
	color: var(--wp--preset--color--contrast);
}

/* --------------------------------------------- the two dark placements */

/*
 * Both of these sit at the bottom of what contains them, so the list opens
 * upward. Below the footer there is nothing to open into.
 */
.coccone-currency--panel .coccone-currency__list,
.coccone-currency--foot .coccone-currency__list {
	top: auto;
	bottom: calc(100% + 0.55rem);
}

.coccone-currency--foot .coccone-currency__wrap > summary {
	color: rgba(247, 242, 236, 0.55);
}

.coccone-currency--foot .coccone-currency__wrap > summary:hover,
.coccone-currency--foot .coccone-currency__wrap[open] > summary {
	color: var(--wp--preset--color--base);
}

.coccone-currency--panel .coccone-currency__wrap > summary {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	font-family: var(--wp--preset--font-family--body);
}

/*
 * The footer's list keeps the light ground of the other two rather than going
 * dark. It is a menu, and a menu that matches the page it opened from is easier
 * to read than one that matches the band behind it.
 */
.coccone-currency--foot .coccone-currency__list {
	right: 0;
	left: auto;
}

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

@media (max-width: 900px) {
	/* Like the language switcher, it moves into the menu panel on a phone. */
	.coccone-currency--head {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Cookie consent
   ---------------------------------------------------------------------------
   A bar along the bottom rather than a sheet over the page. This is a shop: the
   first thing a visitor meets should be the bags, not a wall.

   `hidden` in the markup and shown by consent.js, so the same cached HTML serves
   someone who has answered and someone who has not.

   The preferences panel below it is the other half: three groups, a switch each,
   and the cookies each one sets printed under it.
   --------------------------------------------------------------------------- */

.coccone-consent {
	position: fixed;
	z-index: 90;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 -8px 28px rgba(42, 23, 16, 0.07);
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

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

.coccone-consent.is-open {
	opacity: 1;
	transform: none;
}

.coccone-consent__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
}

.coccone-consent__text {
	flex: 1 1 auto;
	min-width: 0;
}

.coccone-consent__title {
	margin: 0 0 0.3rem;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.coccone-consent__body {
	margin: 0;
	max-width: 62ch;
	color: var(--wp--preset--color--contrast);
	font-size: 0.875rem;
	line-height: 1.6;
}

.coccone-consent__body a {
	color: var(--wp--preset--color--accent-deep);
	text-underline-offset: 0.25em;
}

/* ------------------------------------------------------------- the buttons */

/*
 * Three buttons of the same size, the same shape and the same weight of type:
 * refuse, choose, accept.
 *
 * Only the ground differs, and only so the page has somewhere to rest — refusing
 * has to be as easy as accepting, and a grey "essential only" beside a black
 * "accept" is the pattern regulators in France and Germany have specifically
 * ruled against. Same target, same reading effort, one click each.
 *
 * The middle one is what makes the banner granular rather than a formality. It
 * is the same size as the other two on purpose: a preferences panel reached
 * through a link in the small print is a panel the regulator counts as absent.
 */
/*
 * A grid rather than a flex row, so every column takes the width of the widest
 * label. "Essentiels uniquement" is nine characters longer than "Accepter" and
 * as a flex row it came out 221px against 176px — not unfair, since the bigger
 * target was the refusing one, but visibly uneven. Equal columns hold in all
 * four languages without a width per language.
 */
.coccone-consent__actions {
	flex: 0 0 auto;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 0.6rem;
}

.coccone-consent__btn {
	min-width: 9.5rem;
	min-height: 3rem;
	padding: 0 1.1rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.coccone-consent__btn:hover {
	background: var(--wp--preset--color--base-alt);
}

.coccone-consent__btn--yes {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base-alt);
}

.coccone-consent__btn--yes:hover {
	background: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--base-alt);
}

.coccone-consent__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* --------------------------------------------------------- changing your mind */

/*
 * A button that has to look like the footer links beside it, because that is
 * where it sits. It is a button and not a link because it goes nowhere — it
 * opens the panel, with whatever was chosen last time already showing.
 */
.coccone-consent__reopen {
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.coccone-consent__reopen:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* ---------------------------------------------------------------------------
   The preferences panel
   ---------------------------------------------------------------------------
   A real modal, unlike the bar: this is a decision being made rather than a
   notice being read, so the page behind it waits. consent.js traps the focus
   inside it and hands it back on close.
   --------------------------------------------------------------------------- */

.coccone-prefs {
	position: fixed;
	z-index: 95;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--30);
	opacity: 0;
	transition: opacity 0.25s ease;
}

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

.coccone-prefs.is-open {
	opacity: 1;
}

/* The page underneath must not scroll away behind an open dialog. */
.coccone-prefs-open,
.coccone-prefs-open body {
	overflow: hidden;
}

.coccone-prefs__scrim {
	position: absolute;
	inset: 0;
	background: rgba(42, 23, 16, 0.45);
}

.coccone-prefs__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 40rem;
	max-height: 86vh;
	padding: var(--wp--preset--spacing--40);
	overflow-y: auto;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	box-shadow: 0 18px 48px rgba(42, 23, 16, 0.22);
}

.coccone-prefs__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.coccone-prefs__close:hover {
	color: var(--wp--preset--color--contrast);
}

.coccone-prefs__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.coccone-prefs__title {
	margin: 0 2.5rem 0.5rem 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.2;
}

.coccone-prefs__intro {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.875rem;
	line-height: 1.6;
}

.coccone-prefs__intro a {
	color: var(--wp--preset--color--accent-deep);
	text-underline-offset: 0.25em;
}

/* ------------------------------------------------------------- the groups */

.coccone-prefs__list {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
	list-style: none;
}

.coccone-prefs__row {
	padding: var(--wp--preset--spacing--30) 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.coccone-prefs__row:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.coccone-prefs__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
}

.coccone-prefs__name {
	color: var(--wp--preset--color--contrast);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.coccone-prefs__locked {
	flex: 0 0 auto;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.6875rem;
	font-style: italic;
}

.coccone-prefs__desc {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--contrast);
	font-size: 0.8125rem;
	line-height: 1.6;
}

/*
 * The cookie names, in the panel rather than only in the policy.
 *
 * Someone deciding whether to allow "marketing" is entitled to know that the
 * word means five named cookies and which ones, at the moment they decide it,
 * without leaving the page for a policy in another tab.
 */
.coccone-prefs__cookies {
	margin: 0.4rem 0 0;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.75rem;
	line-height: 1.5;
}

.coccone-prefs__cookies-label {
	margin-right: 0.35rem;
	font-weight: 700;
}

.coccone-prefs__cookies code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.6875rem;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- the switch */

.coccone-switch {
	position: relative;
	flex: 0 0 auto;
	display: inline-block;
	width: 2.75rem;
	height: 1.5rem;
}

/*
 * The input is invisible but still the thing being clicked and focused: it
 * covers the whole switch. Hiding it with `display: none` would take it out of
 * the tab order, which is the one thing a switch must never lose.
 */
.coccone-switch__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

.coccone-switch__track {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--line);
	border-radius: 0.75rem;
	transition: background 0.2s ease;
}

.coccone-switch__track::after {
	content: "";
	position: absolute;
	top: 0.1875rem;
	left: 0.1875rem;
	width: 1.125rem;
	height: 1.125rem;
	background: var(--wp--preset--color--base);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(42, 23, 16, 0.3);
	transition: transform 0.2s ease;
}

.coccone-switch__input:checked ~ .coccone-switch__track {
	background: var(--wp--preset--color--accent-deep);
}

.coccone-switch__input:checked ~ .coccone-switch__track::after {
	transform: translateX(1.25rem);
}

.coccone-switch__input:focus-visible ~ .coccone-switch__track {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------ the actions */

.coccone-prefs__actions {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 0.6rem;
}

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

/*
 * The bar goes to a block at 1000px rather than 780px: three buttons need more
 * room beside a paragraph than two did, and squeezing the text to a column
 * before stacking is the worse of the two ways to lose.
 */
@media (max-width: 1000px) {
	.coccone-consent__inner {
		display: block;
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}

	.coccone-consent__body {
		font-size: 0.8125rem;
	}

	.coccone-consent__actions {
		margin-top: var(--wp--preset--spacing--30);
	}
}

@media (max-width: 620px) {
	/*
	 * Two rows: choosing across the top, refusing and accepting side by side
	 * and half the width each underneath, so neither of the two answers is the
	 * easier one to hit. The DOM order stays refuse / choose / accept — that is
	 * the tab order, and it is placement that moves, not the markup.
	 */
	.coccone-consent__actions,
	.coccone-prefs__actions {
		grid-auto-flow: row;
		grid-template-columns: 1fr 1fr;
	}

	.coccone-consent__actions > :nth-child(1),
	.coccone-prefs__actions > :nth-child(1) {
		grid-column: 1;
		grid-row: 2;
	}

	.coccone-consent__actions > :nth-child(2),
	.coccone-prefs__actions > :nth-child(2) {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.coccone-consent__actions > :nth-child(3),
	.coccone-prefs__actions > :nth-child(3) {
		grid-column: 2;
		grid-row: 2;
	}

	.coccone-consent__btn {
		min-width: 0;
		padding: 0 0.5rem;
		font-size: 0.625rem;
		letter-spacing: 0.12em;
	}

	.coccone-prefs__dialog {
		padding: var(--wp--preset--spacing--30);
		max-height: 92vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.coccone-consent,
	.coccone-prefs,
	.coccone-switch__track,
	.coccone-switch__track::after {
		transition: none;
	}
}