/*
 * Gourmart box composer.
 *
 * The composer takes its colours and its type from the active Elementor kit (4875), through
 * the kit's own global custom properties. Every token below is
 * `var( --e-global-<something>, <hex> )`: the kit wins, and the hexadecimal fallback is what
 * the composer falls back to if the kit is ever swapped or its variables renamed.
 *
 * That is why no font ships with this plugin any more. It used to carry Fraunces and Karla
 * from the prototype; the site runs TT-Firs-Neue and the kit already loads it.
 *
 * The kit declares its variables on `.elementor-kit-4875` — a class WordPress puts on the
 * <body> element, NOT on `:root`. They are therefore inherited into the composer, which is
 * why reading them works at all; but anything rendered outside that body, or on a site
 * where the kit is gone, sees no value. That is what every fallback in this file is for,
 * and why none of them may be dropped.
 *
 * The tokens are still declared on `.gbc` rather than `:root`, so the composer reads the
 * kit without writing anything back to the page around it.
 *
 * Winning the cascade
 * -------------------
 * composer.css is printed before hello-elementor's reset.css and before the kit's
 * post-4875.css, and no enqueue priority can promise otherwise — Elementor prints its kit
 * stylesheet through its own machinery. So the composer's interactive elements do not rely
 * on order at all; they out-specify what would overrule them:
 *
 *   reset.css   [type=button]                     (0,1,0)  transparent, radius 3px
 *   post-4875   .elementor-kit-4875 button        (0,1,1)  beige text, radius 0, padding 0
 *   post-4875   .elementor-kit-4875 button:hover  (0,2,1)  beige ground, chocolate text
 *
 *   here        .gbc .gbc-btn-pick                (0,2,0)
 *   here        .gbc .gbc-btn-pick:hover          (0,3,0)
 *   here        .gbc .gbc-stepper button          (0,2,1)
 *   here        .gbc .gbc-stepper button:hover    (0,3,1)
 *
 * That is why every interactive rule below is written `.gbc .gbc-…` and why each states
 * its :hover, :focus, :focus-visible and :disabled explicitly: the kit paints :focus as
 * well as :hover, and :hover matches a disabled button too. No !important is used, and
 * none is needed.
 *
 * Kit reference:
 *   --e-global-color-37b9507   #4E2202  theme - chocolate (dark)
 *   --e-global-color-7987919   #F9F6EE  theme - beige (light)
 *   --e-global-color-aea7c95   #EEE8DA  theme - beige (darker)
 *   --e-global-color-4132e64   #FAF0E7  border on content
 *   --e-global-color-f1544e6   #FFFFFF  white text
 *   --e-global-color-c7bfe22   #4D4D4D  paragraph
 *   --e-global-color-5cd84f1   #6FB188  green
 *   --e-global-color-47c8e37   #962121  red
 *   --e-global-color-e084598   #C08A2E  gold
 *   --e-global-typography-a7e1a19       H 3          (TT-Firs-Neue-Medium 600)
 *   --e-global-typography-30cce68       H 2          (TT-Firs-Neue-Medium 700)
 *   --e-global-typography-55f3b4e       Body / Text
 *   --e-global-typography-b6b5011       Button
 *   --e-global-typography-5bd458c       Top Header
 */

.gbc {
	/* Ink, structure and surfaces */
	--gbc-encre: var( --e-global-color-37b9507, #4E2202 );
	--gbc-structure: var( --e-global-color-37b9507, #4E2202 );
	--gbc-papier: var( --e-global-color-7987919, #F9F6EE );
	--gbc-craie: var( --e-global-color-f1544e6, #FFFFFF );
	--gbc-trait: var( --e-global-color-aea7c95, #EEE8DA );
	--gbc-trait-clair: var( --e-global-color-4132e64, #FAF0E7 );
	--gbc-muet: var( --e-global-color-c7bfe22, #4D4D4D );

	/* Accents */
	--gbc-accent: var( --e-global-color-e084598, #C08A2E );
	--gbc-accent-pale: var( --e-global-color-4132e64, #FAF0E7 );
	--gbc-succes: var( --e-global-color-5cd84f1, #6FB188 );
	--gbc-alerte: var( --e-global-color-47c8e37, #962121 );

	/* Text on a chocolate button: the kit's light beige, at rest and on hover alike. */
	--gbc-sur-bouton: var( --e-global-color-7987919, #F9F6EE );

	/* The only thing a hover moves: chocolate dark to brown intermediate. */
	--gbc-structure-survol: var( --e-global-color-81f147d, #4E3321 );

	/*
	 * Text on the chocolate crate. The kit has no "on dark" colour, so these are the beige
	 * at reduced opacity — written out rather than derived, since color-mix() is not
	 * something to depend on here. The crate is a large warm surface, where the beige
	 * reads better than pure white; a button is not.
	 */
	--gbc-sur-fonce: #F9F6EE;
	--gbc-sur-fonce-doux: rgba(249, 246, 238, .78);
	--gbc-sur-fonce-faible: rgba(249, 246, 238, .55);

	/* Type, from the kit's global typography */
	--gbc-font-titre: var( --e-global-typography-a7e1a19-font-family, "TT-Firs-Neue-Medium" ), sans-serif;
	--gbc-titre-poids: var( --e-global-typography-a7e1a19-font-weight, 600 );
	--gbc-titre-interligne: var( --e-global-typography-a7e1a19-line-height, 1.2em );

	--gbc-font-corps: var( --e-global-typography-55f3b4e-font-family, "TT-Firs-Neue-Medium" ), sans-serif;
	--gbc-corps-taille: var( --e-global-typography-55f3b4e-font-size, 16px );
	--gbc-corps-poids: var( --e-global-typography-55f3b4e-font-weight, 500 );
	--gbc-corps-interligne: var( --e-global-typography-55f3b4e-line-height, 1.8rem );

	--gbc-font-bouton: var( --e-global-typography-b6b5011-font-family, "TT-Firs-Neue-Medium" ), sans-serif;
	--gbc-bouton-poids: var( --e-global-typography-b6b5011-font-weight, 500 );
	--gbc-bouton-casse: var( --e-global-typography-b6b5011-text-transform, uppercase );
	--gbc-bouton-interlettre: var( --e-global-typography-b6b5011-letter-spacing, 2px );

	--gbc-font-surtitre: var( --e-global-typography-5bd458c-font-family, "TT-Firs-Neue-Medium" ), sans-serif;
	--gbc-surtitre-casse: var( --e-global-typography-5bd458c-text-transform, uppercase );
	--gbc-surtitre-interlettre: var( --e-global-typography-5bd458c-letter-spacing, 1px );

	--gbc-r-card: 4px;
	--gbc-r-pill: 999px;

	--gbc-shadow-card: 0 1px 2px rgba(78, 34, 2, .06);
	--gbc-shadow-lift: 0 8px 24px rgba(78, 34, 2, .12);
	--gbc-shadow-bar: 0 -6px 28px rgba(78, 34, 2, .18);

	/* The composer sits on the kit's light beige; the cards are white on top of it. */
	background: var( --gbc-papier );
	color: var( --gbc-encre );
	font-family: var( --gbc-font-corps );
	font-size: var( --gbc-corps-taille );
	line-height: var( --gbc-corps-interligne );
	padding: 32px 24px 8px;
	border-radius: var( --gbc-r-card );
}

/*
 * Under 768px the composer runs edge to edge inside the Elementor container: that
 * container keeps its own side padding (20px on the page's mobile settings), the composer
 * adds none of its own. Measured on the preview at 375px before this: 14px here plus the
 * container's own left 158px to each of two columns and 600px-tall cards.
 */
@media (max-width: 767px) {
	.gbc {
		padding: 20px 0 4px;
		/*
		 * Full bleed: the beige frame runs from one edge of the screen to the other
		 * whatever the Elementor container's padding (10px on the page's mobile settings,
		 * so the frame used to sit at x=10, 355px wide). The negative margins pull the box
		 * out of its centred parent by exactly the parent's inset; the scrollbar, when
		 * there is a classic one, is measured by composer.js into --gbc-scrollbar so that
		 * 100vw does not overshoot and scroll the page sideways. 0px until measured.
		 */
		width: calc(100vw - var( --gbc-scrollbar, 0px ));
		max-width: none;
		margin-left: calc(50% - 50vw + var( --gbc-scrollbar, 0px ) / 2);
		margin-right: calc(50% - 50vw + var( --gbc-scrollbar, 0px ) / 2);
		border-radius: 0;
	}
}

.gbc *,
.gbc *::before,
.gbc *::after {
	box-sizing: border-box;
}

.gbc .gbc-card__image,
.gbc .gbc-recap__thumb {
	display: block;
	max-width: 100%;
}

.gbc button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.gbc :where(a, button, input, [tabindex]):focus-visible {
	outline: 2px solid var( --gbc-accent );
	outline-offset: 3px;
	border-radius: 2px;
}

.gbc .gbc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- Filter bar */

.gbc .gbc-filterbar {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var( --gbc-papier );
	border-bottom: 1px solid var( --gbc-trait );
	margin-bottom: 8px;
}

.gbc .gbc-filterbar__in {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-block: 12px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.gbc-filterbar__label {
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --gbc-muet );
	margin-right: 6px;
	white-space: nowrap;
}

.gbc .gbc-chip {
	border: 1px solid var( --gbc-trait );
	background: transparent;
	border-radius: var( --gbc-r-pill );
	padding: 7px 15px;
	font-size: .85rem;
	white-space: nowrap;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.gbc .gbc-chip:hover,
.gbc .gbc-chip:focus,
.gbc .gbc-chip:focus-visible {
	background: transparent;
	background-color: transparent;
	color: var( --gbc-encre );
	border-color: var( --gbc-structure );
}

.gbc .gbc-chip__n {
	color: var( --gbc-muet );
	font-size: .78rem;
	margin-left: 5px;
}

.gbc .gbc-chip[aria-pressed="true"] {
	background: var( --gbc-structure );
	border-color: var( --gbc-structure );
	color: var( --gbc-papier );
}

.gbc .gbc-chip[aria-pressed="true"] .gbc-chip__n {
	color: rgba(249, 246, 238, .6);
}

.gbc .gbc-filterbar__reset {
	margin-left: auto;
	background: none;
	border: 0;
	padding: 7px 2px;
	font-size: .82rem;
	color: var( --gbc-muet );
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.gbc .gbc-filterbar__reset:hover,
.gbc .gbc-filterbar__reset:focus,
.gbc .gbc-filterbar__reset:focus-visible {
	background: none;
	background-color: transparent;
	color: var( --gbc-encre );
}

.gbc [hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------- Jar grid */

.gbc-grid-section {
	padding: 34px 0 20px;
}

.gbc .gbc-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1040px) {
	.gbc .gbc-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.gbc .gbc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}

@media (max-width: 479px) {
	.gbc .gbc-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.gbc .gbc-card {
	position: relative;
	background: var( --gbc-craie );
	color: var( --gbc-encre );
	border: 1px solid var( --gbc-trait );
	border-radius: var( --gbc-r-card );
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var( --gbc-shadow-card );
	transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.gbc .gbc-card:hover {
	box-shadow: var( --gbc-shadow-lift );
	transform: translateY(-2px);
}

.gbc .gbc-card.is-picked {
	border-color: var( --gbc-structure );
	box-shadow: 0 0 0 1px var( --gbc-structure ), var( --gbc-shadow-lift );
}

.gbc .gbc-card.is-muted {
	opacity: .55;
}

.gbc .gbc-card.is-unavailable {
	opacity: .5;
}

.gbc .gbc-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #E8E2D2;
	overflow: hidden;
}

.gbc-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.gbc .gbc-card:hover .gbc-card__image {
	transform: scale(1.045);
}

.gbc .gbc-card__badge {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 40px;
	height: 40px;
	display: none;
	align-items: center;
	justify-content: center;
	background: var( --gbc-structure );
	color: var( --gbc-papier );
	font-family: var( --gbc-font-titre );
	font-weight: 600;
	font-size: 1.1rem;
	border-bottom-left-radius: 4px;
}

.gbc .gbc-card.is-picked .gbc-card__badge {
	display: flex;
}

.gbc .gbc-card__body {
	padding: 14px 15px 15px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 7px;
}

.gbc-card__tag {
	font-family: var( --gbc-font-surtitre );
	font-size: .7rem;
	letter-spacing: var( --gbc-surtitre-interlettre );
	text-transform: var( --gbc-surtitre-casse );
	color: var( --gbc-muet );
	font-weight: 500;
}

.gbc .gbc-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	margin-right: 6px;
	vertical-align: 1px;
	background: var( --gbc-muet );
}

.gbc-dot--repas-avec-viande {
	background: #A8452F;
}

.gbc-dot--repas-avec-poisson {
	background: #3B7C93;
}

.gbc-dot--repas-vegetarien,
.gbc-dot--repas-vegan {
	background: #5C8A3A;
}

/*
 * The kit dresses every h3 in "Secondary - Breathney" — a display script, illegible at
 * card size — through `.elementor-kit-4875 h3` at (0,1,1). The card title is an h3 for
 * the document outline, so `.gbc-card__name` at (0,1,0) lost twice over: on specificity
 * and, since the kit is printed after us, on order too. `.gbc .gbc-card__name` is (0,2,0).
 *
 * Every property that rule sets has to be answered, word-spacing included: Breathney
 * carries a 6px word-spacing in the kit, and leaving it would space out a title now set
 * in a face that never asked for it.
 *
 * Only the size is ours. 2rem is what the kit's "H 3" is worth as a section heading; on a
 * card it would be absurd.
 */
.gbc .gbc-card__name {
	font-family: var( --e-global-typography-a7e1a19-font-family, "TT-Firs-Neue-Medium" ), sans-serif;
	font-size: 1.1rem;
	font-weight: var( --e-global-typography-a7e1a19-font-weight, 600 );
	line-height: var( --e-global-typography-a7e1a19-line-height, 1.2em );
	text-transform: var( --e-global-typography-a7e1a19-text-transform, none );
	font-style: var( --e-global-typography-a7e1a19-font-style, normal );
	text-decoration: var( --e-global-typography-a7e1a19-text-decoration, none );
	word-spacing: normal;
	letter-spacing: normal;
	color: var( --gbc-encre );
	margin: 0;
}

/*
 * Three lines, everywhere. line-clamp is visual only: the whole paragraph stays in the
 * DOM and is read by screen readers, and the full text is one click away on the "Détails"
 * link. max-height is the fallback for a browser without -webkit-line-clamp: three lines
 * at line-height 1.5, cut without the ellipsis.
 */
.gbc .gbc-card__desc {
	font-family: var( --gbc-font-corps );
	font-weight: var( --gbc-corps-poids );
	font-size: .9rem;
	line-height: 1.5;
	color: var( --gbc-muet );
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	max-height: 4.5em;
}

/* margin-top: auto keeps the foot at the bottom of the card now that the copy no longer grows. */
.gbc .gbc-card__foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: auto;
	padding-top: 6px;
}

/*
 * The wrapper the script drops the picker or the stepper into. It takes the free space and
 * centres its contents, so the stepper sits in the middle of the foot instead of hugging
 * the left edge.
 */
.gbc .gbc-card__foot .gbc-card__controls,
.gbc .gbc-card__foot [data-gbc-controls] {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gbc .gbc-card__qty {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
}

.gbc-card__qty-input {
	width: 100%;
	max-width: 90px;
	border: 1px solid var( --gbc-structure );
	border-radius: var( --gbc-r-pill );
	padding: 8px 12px;
	font-size: .9rem;
	text-align: center;
	background: var( --gbc-craie );
	color: var( --gbc-encre );
}

.gbc-card__unavailable {
	flex: 1;
	margin: 0;
	font-size: .82rem;
	color: var( --gbc-muet );
}

/*
 * Solid chocolate carrying the kit's light beige,
 at rest and on hover alike; the only
 * thing a hover moves is the ground,
 chocolate dark to brown intermediate.
 *
 * The selector is `.gbc .gbc-btn-pick` on purpose - see the cascade note at the top of
 * this file. `.gbc-btn-pick` alone is (0,
 1,
 0): the theme's reset declares
 * `[type=button] { background-color: transparent; border-radius: 3px }` at the same
 * (0,
 1,
 0) and loads after us,
 so it won the tie; and the kit declares
 * `.elementor-kit-4875 button { color: beige; border-radius: 0; padding: 0 }` at (0,1,1),
 * which won outright. `.gbc .gbc-btn-pick` is (0,2,0) and clears both, and the hover and
 * focus states at (0,3,0) clear the kit's (0,2,1) - no !important anywhere.
 */
.gbc .gbc-btn-pick {
	flex: 0 1 auto;
	max-width: 100%;
	border: 1px solid var( --gbc-structure );
	background: var( --gbc-structure );
	background-color: var( --gbc-structure );
	color: var( --gbc-sur-bouton );
	border-radius: var( --gbc-r-pill );
	padding: 10px 18px;
	font-family: var( --gbc-font-bouton );
	font-size: .8rem;
	font-weight: var( --gbc-bouton-poids );
	text-transform: var( --gbc-bouton-casse );
	letter-spacing: var( --gbc-bouton-interlettre );
	line-height: 1.2;
	transition: background-color .15s ease, border-color .15s ease;
}

.gbc .gbc-btn-pick:hover:not(:disabled),
.gbc .gbc-btn-pick:focus:not(:disabled),
.gbc .gbc-btn-pick:focus-visible:not(:disabled) {
	background: var( --gbc-structure-survol );
	background-color: var( --gbc-structure-survol );
	border-color: var( --gbc-structure-survol );
	color: var( --gbc-sur-bouton );
}

.gbc .gbc-btn-pick:disabled {
	background: transparent;
	background-color: transparent;
	border-color: var( --gbc-trait );
	color: var( --gbc-muet );
	cursor: not-allowed;
}

/*
 * The stepper replaces the "Ajouter" button in place, so it used to stretch across the
 * card like it did. It only ever holds three small things; sizing it to its content keeps
 * the card's foot readable and leaves the "Détails" link its room.
 */
.gbc .gbc-stepper {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	max-width: 150px;
	border: 1px solid var( --gbc-structure );
	border-radius: var( --gbc-r-pill );
	background: var( --gbc-structure );
	background-color: var( --gbc-structure );
	color: var( --gbc-sur-bouton );
	padding: 3px;
}

/*
 * `.gbc-stepper button` was (0,1,1) - the exact specificity of the kit's
 * `.elementor-kit-4875 button`, which loads after us, so the kit's `border-radius: 0` and
 * its zeroed padding won the tie and the circles came out square.
 * `.gbc .gbc-stepper button` is (0,2,1).
 *
 * width, height, min-width and flex-basis are all stated: the kit zeroes the padding and
 * the theme's reset sets `width: auto` on `[type=button]`, so nothing here can be left to
 * intrinsic sizing if the two are to stay round.
 */
.gbc .gbc-stepper button {
	width: 32px;
	height: 32px;
	min-width: 32px;
	flex: 0 0 32px;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(249, 246, 238, .14);
	background-color: rgba(249, 246, 238, .14);
	color: var( --gbc-sur-bouton );
	font-size: 1.1rem;
	line-height: 1;
	display: grid;
	place-items: center;
	transition: background-color .15s ease;
}

.gbc .gbc-stepper button:hover:not(:disabled),
.gbc .gbc-stepper button:focus:not(:disabled),
.gbc .gbc-stepper button:focus-visible:not(:disabled) {
	background: rgba(249, 246, 238, .3);
	background-color: rgba(249, 246, 238, .3);
	color: var( --gbc-sur-bouton );
}

.gbc .gbc-stepper button:disabled {
	background: rgba(249, 246, 238, .14);
	background-color: rgba(249, 246, 238, .14);
	color: var( --gbc-sur-bouton );
	opacity: .35;
	cursor: not-allowed;
}

.gbc .gbc-stepper__n {
	min-width: 1.6em;
	text-align: center;
	font-family: var( --gbc-font-titre );
	font-weight: 600;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
}

.gbc .gbc-card__link {
	font-size: .78rem;
	color: var( --gbc-muet );
	text-decoration: none;
	border-bottom: 1px solid var( --gbc-trait );
	white-space: nowrap;
}

.gbc .gbc-card__link:hover {
	color: var( --gbc-encre );
	border-bottom-color: var( --gbc-encre );
}

/*
 * The card on a phone: one row, a 96px square photo on the left, the copy and the control
 * on the right, about 145px tall instead of 600. Type is a step smaller and the stepper's
 * circles go from 32px to 28px, which keeps them a comfortable target; the badge shrinks
 * with the photo it sits on.
 */
@media (max-width: 767px) {
	.gbc .gbc-card {
		flex-direction: row;
		align-items: stretch;
	}

	.gbc .gbc-card:hover {
		transform: none;
	}

	.gbc .gbc-card__media {
		flex: 0 0 96px;
		width: 96px;
		height: 96px;
		aspect-ratio: 1 / 1;
		align-self: center;
		margin: 10px 0 10px 10px;
		border-radius: 3px;
	}

	.gbc .gbc-card__badge {
		min-width: 26px;
		height: 26px;
		font-size: .9rem;
		border-top-right-radius: 3px;
		border-bottom-left-radius: 3px;
	}

	.gbc .gbc-card__body {
		padding: 8px 12px;
		gap: 2px;
		min-width: 0;
	}

	/* The tag inherits the body's 1.8rem line-height, which alone cost 29px on a 10px label. */
	.gbc-card__tag {
		font-size: .62rem;
		line-height: 1.3;
	}

	.gbc .gbc-card__name {
		font-size: 1rem;
	}

	.gbc .gbc-card__desc {
		font-size: .8rem;
		line-height: 1.4;
		max-height: 4.2em;
	}

	.gbc .gbc-card__foot {
		gap: 8px;
		padding-top: 4px;
	}

	.gbc .gbc-card__foot .gbc-card__controls,
	.gbc .gbc-card__foot [data-gbc-controls] {
		flex: 0 1 auto;
		justify-content: flex-start;
	}

	.gbc .gbc-btn-pick {
		padding: 7px 14px;
		font-size: .72rem;
	}

	.gbc .gbc-stepper {
		padding: 2px;
	}

	.gbc .gbc-stepper button {
		width: 28px;
		height: 28px;
		min-width: 28px;
		flex: 0 0 28px;
		font-size: 1rem;
	}

	.gbc .gbc-stepper__n {
		font-size: .95rem;
	}

	.gbc-card__qty-input {
		max-width: 76px;
		padding: 6px 10px;
	}
}

.gbc-grid-empty {
	padding: 60px 0;
	text-align: center;
	color: var( --gbc-muet );
}

/* ---------------------------------------------------------------- Summary */

.gbc-recap {
	padding: 20px 0 40px;
}

.gbc .gbc-recap__head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	border-top: 1px solid var( --gbc-trait );
	padding-top: 34px;
	margin-bottom: 20px;
}

/*
 * "Votre box" is an h2, so it had the same problem for the same reason:
 * `.elementor-kit-4875 h2` at (0,1,1) sets the family and the size from the kit's "Titre
 * normal", and `.gbc-recap__title` at (0,1,0) could not answer. It is a section heading,
 * so it takes the kit's "H 2" global whole - size included, unlike the card title.
 */
.gbc .gbc-recap__title {
	font-family: var( --e-global-typography-30cce68-font-family, "TT-Firs-Neue-Medium" ), sans-serif;
	font-size: var( --e-global-typography-30cce68-font-size, 2rem );
	font-weight: var( --e-global-typography-30cce68-font-weight, 700 );
	line-height: var( --e-global-typography-30cce68-line-height, 1.2em );
	text-transform: var( --e-global-typography-30cce68-text-transform, none );
	font-style: var( --e-global-typography-30cce68-font-style, normal );
	text-decoration: var( --e-global-typography-30cce68-text-decoration, none );
	word-spacing: normal;
	letter-spacing: normal;
	color: var( --gbc-encre );
	margin: 0;
}

.gbc-recap__state {
	font-size: .85rem;
	color: var( --gbc-muet );
}

.gbc-recap__panel {
	background: var( --gbc-craie );
	border: 1px solid var( --gbc-trait );
	border-radius: var( --gbc-r-card );
	padding: 8px 20px;
}

.gbc-recap__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gbc .gbc-recap__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 0;
	border-bottom: 1px solid var( --gbc-trait );
}

.gbc .gbc-recap__row:last-child {
	border-bottom: 0;
}

.gbc-recap__thumb {
	width: 46px;
	height: 46px;
	border-radius: 3px;
	object-fit: cover;
	flex: none;
}

.gbc .gbc-recap__name {
	display: block;
	font-weight: 700;
	font-size: .92rem;
}

.gbc-recap__meta {
	font-size: .78rem;
	color: var( --gbc-muet );
}

.gbc-recap__qty {
	margin-left: auto;
	font-family: var( --gbc-font-titre );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/*
 * On white, at .78rem, the muted grey was not carrying its weight for something that
 * removes a jar. Chocolate dark plus a permanent underline: readable, and unmistakably a
 * control rather than a label.
 */
.gbc .gbc-recap__drop {
	border: 0;
	background: none;
	background-color: transparent;
	color: var( --gbc-encre );
	font-family: var( --gbc-font-corps );
	font-size: .85rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 4px;
}

.gbc .gbc-recap__drop:hover,
.gbc .gbc-recap__drop:focus,
.gbc .gbc-recap__drop:focus-visible {
	background: none;
	background-color: transparent;
	color: var( --gbc-alerte );
}

.gbc .gbc-recap__empty {
	padding: 34px 0;
	color: var( --gbc-muet );
	text-align: center;
}

.gbc .gbc-recap__empty strong {
	display: block;
	color: var( --gbc-encre );
	font-size: 1rem;
	margin-bottom: 5px;
}

.gbc .gbc-recap__total {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 18px 0 6px;
	border-top: 1px solid var( --gbc-trait );
	margin-top: 4px;
}

.gbc-recap__total-label {
	font-size: .85rem;
	color: var( --gbc-muet );
}

.gbc-recap__total-amount {
	margin-left: auto;
	font-family: var( --gbc-font-titre );
	font-weight: 600;
	font-size: 1.5rem;
}

/* ---------------------------------------------------------------- The crate */

/*
 * Sticky, not fixed. The crate is the last child of the form, itself the last child of
 * .gbc, and bottom: 0 keeps it at the bottom of the viewport only while its own place -
 * the end of the composer - is below the fold: above the composer it is not on screen,
 * and once its place scrolls into view it settles there and the cart below is left
 * alone. Nothing between the crate and the viewport may clip overflow, or the viewport
 * stops being what it sticks to: neither .gbc nor the form does, and StylesheetTest
 * checks that no rule of this file ever gives them one.
 *
 * The negative margins take it to the frame's edges through .gbc's padding, and its
 * bottom corners follow the frame's; on a phone, where the frame is full-bleed and has
 * no side padding, the margins are 0.
 *
 * `.gbc .gbc-crate`, (0,2,0), and not `.gbc-crate`: the crate carries role="region" for
 * assistive technology, and WordPress 7.1's wp-includes/css/dist/components/style.css
 * declares `[role=region] { position: relative }` at (0,1,0), loaded after this file on a
 * site where a block or a plugin enqueues it. Equal specificity, later in the cascade:
 * the crate stopped being sticky on the Hostinger staging. The same goes for every rule
 * in this file that sets position, display or overflow - all at (0,2,0) or more, and
 * StylesheetTest refuses a new one below that.
 */
.gbc .gbc-crate {
	position: -webkit-sticky; /* Safari before 13; every other browser drops it and keeps the next line. */
	position: sticky;
	bottom: 0;
	z-index: 40;
	margin: 0 -24px -8px;
	border-radius: 0 0 var( --gbc-r-card ) var( --gbc-r-card );
	background: var( --gbc-structure );
	color: var( --gbc-papier );
	box-shadow: var( --gbc-shadow-bar );
}

@media (max-width: 767px) {
	.gbc .gbc-crate {
		margin: 0 0 -4px;
		border-radius: 0;
	}
}

.gbc .gbc-crate__in {
	display: flex;
	align-items: center;
	gap: 26px;
	min-height: 96px;
	padding-block: 14px;
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 20px;
}

.gbc .gbc-slots {
	display: flex;
	gap: 6px;
	flex: none;
}

.gbc .gbc-slots__group {
	display: flex;
	gap: 6px;
}

.gbc .gbc-slots__gap {
	width: 12px;
	flex: none;
}

.gbc .gbc-slot {
	width: 46px;
	height: 46px;
	flex: none;
	border: 1px dashed rgba(249, 246, 238, .32);
	border-radius: 3px;
	background: rgba(0, 0, 0, .14);
	padding: 0;
	overflow: hidden;
	position: relative;
	display: grid;
	place-items: center;
	color: rgba(249, 246, 238, .34);
	transition: border-color .2s ease, transform .2s ease;
	cursor: default;
}

.gbc-jar-icon {
	width: 22px;
	height: 22px;
}

.gbc .gbc-slot.is-full {
	border-style: solid;
	border-color: var( --gbc-accent );
	background: transparent;
	cursor: pointer;
}

.gbc .gbc-slot.is-full img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gbc .gbc-slot.is-full::after {
	content: "\00D7";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(78, 34, 2, .72);
	color: var( --gbc-papier );
	font-size: 1.1rem;
	opacity: 0;
	transition: opacity .15s ease;
}

.gbc .gbc-slot.is-full:hover::after,
.gbc .gbc-slot.is-full:focus-visible::after {
	opacity: 1;
}

.gbc .gbc-slot.just-filled {
	animation: gbc-pop .32s cubic-bezier(.2, .9, .3, 1.4);
}

@keyframes gbc-pop {
	0% {
		transform: scale(.7);
	}

	60% {
		transform: scale(1.08);
	}

	100% {
		transform: scale(1);
	}
}

.gbc-crate__count {
	flex: none;
	line-height: 1.1;
	margin: 0;
}

.gbc-crate__n {
	font-family: var( --gbc-font-titre );
	font-weight: 600;
	font-size: 2rem;
	font-variant-numeric: tabular-nums;
}

.gbc-crate__d {
	font-size: 1.15rem;
	color: var( --gbc-sur-fonce-faible );
}

.gbc .gbc-crate__l {
	display: block;
	font-size: .66rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --gbc-sur-fonce-faible );
}

.gbc .gbc-crate__msg {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: .87rem;
	color: var( --gbc-sur-fonce-doux );
}

.gbc .gbc-crate__msg.is-warn {
	color: var( --gbc-accent-pale );
}

.gbc .gbc-crate__price {
	flex: none;
	text-align: right;
	line-height: 1.15;
	margin: 0;
}

.gbc-crate__p {
	font-family: var( --gbc-font-titre );
	font-weight: 600;
	font-size: 1.35rem;
}

.gbc .gbc-btn-cart {
	flex: none;
	border: 1px solid rgba(249, 246, 238, .3);
	background: transparent;
	background-color: transparent;
	color: var( --gbc-sur-fonce-faible );
	border-radius: var( --gbc-r-pill );
	padding: 14px 26px;
	font-family: var( --gbc-font-bouton );
	font-size: .92rem;
	font-weight: var( --gbc-bouton-poids );
	text-transform: var( --gbc-bouton-casse );
	letter-spacing: var( --gbc-bouton-interlettre );
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.gbc .gbc-btn-cart.is-ready {
	background: var( --gbc-accent );
	border-color: var( --gbc-accent );
	color: #1B1206;
}

.gbc .gbc-btn-cart.is-ready:hover,
.gbc .gbc-btn-cart.is-ready:focus,
.gbc .gbc-btn-cart.is-ready:focus-visible {
	background: var( --gbc-accent );
	background-color: var( --gbc-accent );
	border-color: var( --gbc-accent );
	color: var( --gbc-encre );
	filter: brightness(1.08);
}
/*
 * :hover matches a disabled button too, so the kit's `button:hover` would repaint the
 * greyed-out call to action the moment the pointer crossed it. Restated here.
 */
.gbc .gbc-btn-cart:disabled,
.gbc .gbc-btn-cart:disabled:hover,
.gbc .gbc-btn-cart:disabled:focus {
	background: transparent;
	background-color: transparent;
	border-color: rgba(249, 246, 238, .3);
	color: var( --gbc-sur-fonce-faible );
	cursor: not-allowed;
}

.gbc .gbc-crate__clear {
	flex: none;
	border: 0;
	background: none;
	color: var( --gbc-sur-fonce-faible );
	font-size: .78rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 6px;
}

.gbc .gbc-crate__clear:hover,
.gbc .gbc-crate__clear:focus,
.gbc .gbc-crate__clear:focus-visible {
	background: none;
	background-color: transparent;
	color: var( --gbc-sur-fonce );
}

/* The crate on small screens: two rows, as in the prototype. */
@media (max-width: 900px) {
	.gbc .gbc-crate__in {
		flex-wrap: wrap;
		gap: 12px 16px;
		align-content: center;
	}

.gbc .gbc-slots {
		order: 1;
		width: 100%;
		justify-content: space-between;
		gap: 0;
	}

.gbc .gbc-slots__group {
		gap: 5px;
	}

.gbc .gbc-slots__gap {
		width: 8px;
	}

.gbc .gbc-slot {
		width: 34px;
		height: 34px;
	}

	.gbc-jar-icon {
		width: 16px;
		height: 16px;
	}

	.gbc-crate__count {
		order: 2;
	}

	.gbc-crate__n {
		font-size: 1.45rem;
	}

	.gbc .gbc-crate__msg {
		order: 3;
		font-size: .78rem;
	}

	.gbc .gbc-crate__price {
		display: none;
	}

.gbc .gbc-btn-cart {
		order: 4;
		margin-left: auto;
		padding: 11px 18px;
		font-size: .85rem;
	}

.gbc .gbc-crate__clear {
		display: none;
	}
}

@media (max-width: 430px) {
	/* `.gbc .gbc-slot`: the 900px block above sets 34px from that selector, and this rule at (0,1,0) never won against it. */
	.gbc .gbc-slot {
		width: 30px;
		height: 30px;
	}

	.gbc .gbc-crate__msg {
		display: none;
	}
}

/* ---------------------------------------------------------------- Toast */

/*
 * bottom is the resting value, for a crate that is off screen. composer.js measures the
 * crate's position each time it shows a toast and lifts the toast 18px above it.
 */
.gbc .gbc-toast {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translate(-50%, 14px);
	z-index: 60;
	background: var( --gbc-encre );
	color: var( --gbc-papier );
	padding: 14px 22px;
	border-radius: var( --gbc-r-pill );
	font-size: .9rem;
	box-shadow: var( --gbc-shadow-lift );
	opacity: 0;
	pointer-events: none;
	transition: opacity .22s ease, transform .22s ease;
	max-width: 90vw;
	text-align: center;
}

.gbc .gbc-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ---------------------------------------------------------------- Added to cart */

.gbc-editing {
	margin: 0 0 24px;
	padding: 12px 20px;
	background: var( --gbc-craie );
	color: var( --gbc-encre );
	border: 1px solid var( --gbc-trait );
	border-left: 4px solid var( --gbc-structure );
	border-radius: var( --gbc-r-card );
	font-family: var( --gbc-font-corps );
	font-size: .9rem;
}

.gbc .gbc-added {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	background: var( --gbc-craie );
	color: var( --gbc-encre );
	border: 1px solid var( --gbc-trait );
	border-left: 4px solid var( --gbc-succes );
	border-radius: var( --gbc-r-card );
	padding: 16px 20px;
	margin: 0 0 24px;
}

.gbc .gbc-added__text {
	margin: 0;
	flex: 1;
	min-width: 14em;
	font-family: var( --gbc-font-corps );
	font-size: .9rem;
	color: var( --gbc-muet );
}

.gbc .gbc-added__text strong {
	display: block;
	color: var( --gbc-encre );
	font-family: var( --gbc-font-titre );
	font-weight: var( --gbc-titre-poids );
	font-size: 1.1rem;
	line-height: var( --gbc-titre-interligne );
	margin-bottom: 2px;
}

.gbc .gbc-added__link {
	flex: none;
	background: var( --gbc-structure );
	color: var( --gbc-sur-bouton );
	border-radius: var( --gbc-r-pill );
	padding: 11px 22px;
	font-family: var( --gbc-font-bouton );
	font-size: .8rem;
	font-weight: var( --gbc-bouton-poids );
	text-transform: var( --gbc-bouton-casse );
	letter-spacing: var( --gbc-bouton-interlettre );
	text-decoration: none;
	transition: background .18s ease;
}

.gbc .gbc-added__link:hover,
.gbc .gbc-added__link:focus,
.gbc .gbc-added__link:focus-visible {
	background: var( --gbc-structure-survol );
	background-color: var( --gbc-structure-survol );
	color: var( --gbc-sur-bouton );
}

/* ------------------------------------------------ WooCommerce notices, ours only */

/*
 * The composer prints WooCommerce's notices itself, inside .gbc — see composer.php. Left
 * alone they arrive in WooCommerce's default green-on-grey, which is the one thing on the
 * page that belongs to no charter at all.
 *
 * Every selector below is under .gbc, so this restyles the notices the composer rendered
 * and nothing else: the cart, the checkout and the account pages keep whatever the theme
 * gives them. Both markups are covered - the classic one hello-elementor renders, and the
 * block one WooCommerce uses in newer templates.
 */
.gbc .woocommerce-notices-wrapper {
	margin: 0 0 24px;
}

.gbc .woocommerce-notices-wrapper:empty {
	margin: 0;
}

.gbc .woocommerce-message,
.gbc .woocommerce-info,
.gbc .woocommerce-error,
.gbc .wc-block-components-notice-banner {
	background: var( --gbc-papier );
	color: var( --gbc-encre );
	border: 1px solid var( --gbc-trait );
	border-left: 4px solid var( --gbc-structure );
	border-radius: var( --gbc-r-card );
	padding: 16px 20px;
	margin: 0 0 12px;
	list-style: none;
	font-family: var( --gbc-font-corps );
	font-size: .92rem;
	line-height: 1.5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

/* WooCommerce hangs its tick and its cross off ::before. */
.gbc .woocommerce-message::before,
.gbc .woocommerce-info::before,
.gbc .woocommerce-error::before {
	position: static;
	color: inherit;
	font-size: 1.05em;
	line-height: 1;
	margin: 0;
	top: auto;
	left: auto;
}

.gbc .wc-block-components-notice-banner svg,
.gbc .wc-block-components-notice-banner__content svg {
	fill: currentColor;
	flex: none;
}

/* Success: the green of the kit. */
.gbc .woocommerce-message,
.gbc .wc-block-components-notice-banner.is-success {
	border-left-color: var( --gbc-succes );
}

.gbc .woocommerce-message::before,
.gbc .wc-block-components-notice-banner.is-success svg {
	color: var( --gbc-succes );
	fill: var( --gbc-succes );
}

/* Refusal: the red of the kit. Mix and Match answers an incomplete box here. */
.gbc .woocommerce-error,
.gbc .wc-block-components-notice-banner.is-error {
	border-left-color: var( --gbc-alerte );
}

.gbc .woocommerce-error::before,
.gbc .wc-block-components-notice-banner.is-error svg {
	color: var( --gbc-alerte );
	fill: var( --gbc-alerte );
}

.gbc .woocommerce-error li {
	list-style: none;
	margin: 0;
}

/* The "Voir le panier" button WooCommerce puts in its own notice. */
.gbc .woocommerce-message .button,
.gbc .wc-block-components-notice-banner .wc-block-components-button {
	order: 2;
	margin-left: auto;
	background: var( --gbc-structure );
	color: var( --gbc-sur-bouton );
	border: 0;
	border-radius: var( --gbc-r-pill );
	padding: 9px 20px;
	font-family: var( --gbc-font-bouton );
	font-size: .78rem;
	font-weight: var( --gbc-bouton-poids );
	text-transform: var( --gbc-bouton-casse );
	letter-spacing: var( --gbc-bouton-interlettre );
	text-decoration: none;
}

.gbc .woocommerce-message .button:hover,
.gbc .woocommerce-message .button:focus,
.gbc .wc-block-components-notice-banner .wc-block-components-button:hover,
.gbc .wc-block-components-notice-banner .wc-block-components-button:focus {
	background: var( --gbc-structure-survol );
	background-color: var( --gbc-structure-survol );
	color: var( --gbc-sur-bouton );
}

/* ---------------------------------------------------------------- Notices */

.gbc-admin-hint {
	border: 1px solid var( --gbc-trait );
	border-left: 4px solid var( --gbc-accent );
	background: var( --gbc-craie );
	color: var( --gbc-encre );
	border-radius: var( --gbc-r-card );
	padding: 12px 16px;
	margin: 0 0 20px;
	font-family: var( --gbc-font-corps );
	font-size: .9rem;
}

.gbc-unavailable {
	color: var( --gbc-muet );
}

/* ---------------------------------------------------------------- Inside the frame, on a phone */

/*
 * 16px between the frame's edge and what it holds; the cards keep the full width of that
 * space. Declared here, after every base rule it overrides: `.gbc-grid-section` and
 * `.gbc-recap` set their padding at the same specificity, and a media block placed
 * earlier in the file lost to them on order alone (StylesheetTest caught it).
 */
@media (max-width: 767px) {
	.gbc-grid-section {
		padding: 16px 16px 20px;
	}

	.gbc .gbc-filterbar__in,
	.gbc-recap {
		padding-inline: 16px;
	}

	.gbc .gbc-added,
	.gbc-editing,
	.gbc .woocommerce-notices-wrapper {
		margin-inline: 16px;
	}
}

/* ---------------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.gbc *,
	.gbc *::before,
	.gbc *::after,
	.gbc .gbc-crate *,
	.gbc .gbc-toast {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}

	.gbc .gbc-card:hover {
		transform: none;
	}

	.gbc .gbc-card:hover .gbc-card__image {
		transform: none;
	}
}