/* =============================================================================
   Esprit Fourmis — Page-specific styles (home, contact, cart, checkout)
   Loaded only on target pages.
   ========================================================================== */

/* ===== Section primitives ===== */
.ef-section { padding: 48px 0; }
.ef-section--tight { padding: 18px 0; }
.ef-section--soft { background: var(--ef-color-soft); }
/* Subtle dotted texture for sections that would otherwise feel "white empty"
   (gifts component + featured products). Same palette as --soft so the two
   blend visually if placed adjacent. */
.ef-section--texture {
	background-color: var(--ef-color-soft);
	background-image: radial-gradient(rgba(89, 60, 30, .06) 1px, transparent 1.4px);
	background-size: 18px 18px;
}
.ef-section--dark { background: var(--ef-color-dark); color: #f5f1e6; }
.ef-section--center { text-align: center; }
.ef-section__title { font-family: var(--ef-font-display); font-size: 30px; font-weight: 700; margin: 0 0 32px; color: var(--ef-color-text); text-align: center; }
.ef-section__title--small { font-size: 22px; margin: 0 0 18px; }
.ef-section__title--light { color: #fff; margin-bottom: 80px; }
.ef-section__cta { text-align: center; margin: 32px 0 0; }

/* ===== HOME ===== */
.ef-hero {
	background: #E5F1D1;
	padding: 100px 0 90px;
}
/* Hero CTA "ghost" button needs a solid white bg so it stands out on the
   pale-green hero background (transparent would blend in). */
.ef-hero .ef-button--ghost { background: #fff; }
.ef-hero__layout {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 56px;
	align-items: center;
}
.ef-hero__content { text-align: left; }
.ef-hero__content .ef-hero__title,
.ef-hero__content .ef-hero__lead { margin-left: 0; margin-right: 0; }
.ef-hero__content .ef-hero__ctas { justify-content: flex-start; }
.ef-hero__media { position: relative; }
.ef-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ef-radius-lg);
	box-shadow: var(--ef-shadow-lg);
}
.ef-hero__title {
	font-family: var(--ef-font-display);
	font-size: 44px; font-weight: 800; line-height: 1.15;
	margin: 0 0 18px; color: var(--ef-color-dark);
	max-width: 820px; margin-left: auto; margin-right: auto;
}
.ef-hero__lead { font-size: 18px; color: var(--ef-color-muted); margin: 0 auto 32px; max-width: 640px; }
.ef-hero__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Tiles grid (4 categories) */
.ef-tiles-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.ef-tile {
	position: relative;
	aspect-ratio: 4/5;
	overflow: hidden;
	border-radius: var(--ef-radius);
	display: flex; align-items: flex-end;
	color: #fff !important;
	text-decoration: none !important;
	transition: transform .2s;
	box-shadow: var(--ef-shadow);
}
.ef-tile:hover { transform: translateY(-3px); }
.ef-tile__bg {
	position: absolute; inset: 0;
	background: #555 center/cover no-repeat;
	transition: transform .4s;
}
.ef-tile:hover .ef-tile__bg { transform: scale(1.05); }
.ef-tile__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.1) 70%);
}
.ef-tile__label {
	position: relative;
	margin: 0;
	padding: 20px;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0,0,0,.4);
	line-height: 1.25;
}

/* Featured products */
.ef-products-grid {
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
/* Collapsed: only first row of 4 (matches desktop). On smaller breakpoints
   the same first 4 items show, occupying multiple visual rows — acceptable. */
.ef-products-grid.is-collapsed > li:nth-child(n+5) { display: none; }

/* Show-more button */
.ef-show-more {
	display: inline-flex; align-items: center; gap: 8px;
	background: none; border: none;
	color: var(--ef-color-accent-d);
	font: inherit; font-size: 14px; font-weight: 600;
	padding: 8px 14px; cursor: pointer;
	border-radius: 999px;
	transition: background .2s, color .2s;
}
.ef-show-more:hover { background: rgba(117, 195, 44, .10); color: var(--ef-color-primary-d); }
.ef-show-more__arrow { transition: transform .2s; }
.ef-show-more[aria-expanded="true"] .ef-show-more__arrow { transform: rotate(180deg); }
.ef-product-card {
	background: #fff;
	border: 1px solid var(--ef-color-line);
	border-radius: var(--ef-radius);
	overflow: hidden;
	transition: box-shadow .2s, transform .15s, border-color .2s;
}
.ef-product-card:hover { box-shadow: var(--ef-shadow-lg); border-color: transparent; transform: translateY(-3px); }
.ef-product-card__link { display: block; text-decoration: none !important; color: inherit; }
.ef-product-card__thumb {
	width: 100%; aspect-ratio: 1/1;
	background: var(--ef-color-soft) center/cover no-repeat;
	display: flex; align-items: center; justify-content: center;
	font-size: 48px;
}
.ef-product-card__body { padding: 14px 16px; }
.ef-product-card__title { font-size: 15px; font-weight: 600; margin: 0 0 8px; min-height: 2.6em; line-height: 1.3; color: var(--ef-color-text); }
.ef-product-card__price { font-size: 16px; font-weight: 700; color: var(--ef-color-accent-d); }
.ef-product-card__price ins { background: none; text-decoration: none; }
.ef-product-card__price del { color: var(--ef-color-muted); font-weight: 400; margin-right: 6px; }

/* Reassurance pillars — uses CSS subgrid so the start of each text level
   (title, sub, detail) aligns horizontally across all 4 pillars regardless
   of how many lines each section takes. */
.ef-pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto auto auto;
	column-gap: 32px;
	row-gap: 0;
}
.ef-pillar {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: 1 / -1;
	text-align: justify;
	padding: 12px 6px;
}
.ef-pillar__title { text-align: left; }
.ef-pillar__sub   { text-align: left; }
.ef-pillar__title { font-size: 17px; font-weight: 700; margin: 0 0 8px; color: #fff; }
.ef-pillar__sub { font-size: 13.5px; color: #c9c2af; margin: 0 0 12px; line-height: 1.45; font-style: italic; }
.ef-pillar__detail { font-size: 13px; color: #9a9384; margin: 0; line-height: 1.55; }

/* Subgrid fallback for older browsers — keeps things readable but unaligned */
@supports not (grid-template-rows: subgrid) {
	.ef-pillar { display: block; }
}

/* About */
.ef-about { text-align: center; }
.ef-about__text { font-size: 17px; color: var(--ef-color-muted); line-height: 1.6; margin: 0; }

/* Why-keep-ants — long-form intro placed right under the hero. Narrow column,
   justified body text, single H2 — designed for both readability and SEO weight. */
.ef-why { padding: 56px 0 36px; }
.ef-why__inner { max-width: 780px; }
.ef-why__title {
	font-family: var(--ef-font-display);
	font-size: 28px; font-weight: 700;
	margin: 0 0 22px;
	color: var(--ef-color-text);
	text-align: center;
}
.ef-why__inner p {
	font-size: 16px; line-height: 1.7;
	color: var(--ef-color-text);
	margin: 0 0 16px;
	text-align: justify;
}
.ef-why__inner p:last-child { margin-bottom: 0; }

/* Spotlight species — image + descriptive copy + CTA, 2-column on desktop. */
.ef-spotlight { padding-top: 32px; padding-bottom: 32px; }
.ef-spotlight__inner {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 40px;
	align-items: center;
	max-width: 980px;
	margin: 0 auto;
}
.ef-spotlight__media {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 4/3;
	background: var(--ef-color-soft) center/cover no-repeat;
	border-radius: var(--ef-radius);
	overflow: hidden;
	font-size: 64px;
	box-shadow: var(--ef-shadow);
	transition: transform .25s;
}
.ef-spotlight__media:hover { transform: translateY(-2px); }
.ef-spotlight__body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ef-spotlight__name {
	font-family: var(--ef-font-display);
	font-size: 24px; font-weight: 700;
	margin: 0;
	color: var(--ef-color-text);
}
.ef-spotlight__desc { font-size: 15px; line-height: 1.65; color: var(--ef-color-muted); }
.ef-spotlight__desc p { margin: 0 0 12px; }
.ef-spotlight__desc p:last-child { margin-bottom: 0; }
.ef-spotlight__cta { margin: 6px 0 0; align-self: flex-start; }

/* Help / contact CTA at the bottom of the home */
.ef-help { padding: 70px 0 80px; }
.ef-help__title { font-family: var(--ef-font-display); font-size: 26px; font-weight: 700; margin: 0 0 18px; color: var(--ef-color-dark); line-height: 1.3; }
.ef-help__text { font-size: 16px; color: var(--ef-color-muted); margin: 0 0 28px; line-height: 1.6; }

/* ===== TRAP THE ANT ===== */
.ef-section--ants {
	background: linear-gradient(180deg, #EFE3CC 0%, #E2D2B3 100%);
	position: relative;
	overflow: hidden;
}
.ef-section--ants::before {
	content: '';
	position: absolute; inset: 0;
	background-image: radial-gradient(rgba(89, 60, 30, .12) 1px, transparent 1.5px);
	background-size: 14px 14px;
	pointer-events: none;
	opacity: .55;
}
.ef-trap { position: relative; text-align: center; max-width: 560px; }
.ef-trap__title { color: #4A3724; }
.ef-trap__sub {
	color: #6B5439;
	font-size: 14px;
	font-style: italic;
	margin: -8px 0 22px;
}
.ef-trap__board {
	width: 100%;
	background: rgba(255, 252, 244, 0.45);
	border: 1px dashed rgba(89, 60, 30, .25);
	border-radius: var(--ef-radius-lg);
	padding: 14px;
	box-sizing: border-box;
}
.ef-trap__svg { display: block; width: 100%; height: auto; }

/* Hex tiles */
.ef-trap__hex {
	fill: #F4E9D0;
	stroke: #D6C9A8;
	stroke-width: .8;
	cursor: pointer;
	transition: fill .15s;
}
.ef-trap__hex:hover { fill: #E8DCB5; }
.ef-trap__hex.is-blocked { fill: #5A3E1F; cursor: default; }
.ef-trap__hex.is-blocked:hover { fill: #5A3E1F; }
.ef-trap.is-over .ef-trap__hex:not(.is-blocked) { cursor: default; }
.ef-trap.is-over .ef-trap__hex:hover { fill: #F4E9D0; }
.ef-trap.is-win .ef-trap__hex:not(.is-blocked) { fill: #E8F4D9; }
.ef-trap.is-lose .ef-trap__hex:not(.is-blocked) { fill: #FBE6D0; }

/* The ant overlay — its SVG transform attribute is animated by JS (rAF),
   so no CSS transition needed (which wouldn't apply to the attribute anyway). */
.ef-trap__ant {
	pointer-events: none;
	will-change: transform;
}
.ef-trap__ant svg { display: block; }

/* Status text + restart */
.ef-trap__status {
	margin: 18px 0 0;
	min-height: 22px;
	color: #4A3724;
	font-size: 14px;
	font-weight: 600;
}
.ef-trap.is-win .ef-trap__status { color: var(--ef-color-accent-d); font-size: 16px; }
.ef-trap.is-lose .ef-trap__status { color: #B45A00; font-size: 16px; }
.ef-trap__restart {
	display: none;
	margin: 14px auto 0;
}
.ef-trap.is-over .ef-trap__restart { display: inline-flex; }

/* ===== ABOUT — stats row ===== */
body main.ef-page--about { padding: 150px 0 100px !important; }
.ef-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 24px 0 32px;
	padding: 28px;
	background: var(--ef-color-soft);
	border-radius: var(--ef-radius-lg);
}
.ef-stat { text-align: center; }
.ef-stat__value { font-family: var(--ef-font-display); font-size: 30px; font-weight: 800; color: var(--ef-color-accent-d); line-height: 1.1; }
.ef-stat__label { font-size: 13px; color: var(--ef-color-muted); margin-top: 4px; line-height: 1.35; }
@media (max-width: 600px) {
	.ef-stats { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
	.ef-stat__value { font-size: 26px; }
}

/* ===== HUB pages (Fourmis par X) ===== */
/* !important + body prefix to outrank any Astra/WC default that targets
   #primary or .ast-container with higher specificity. */
body main.ef-page--hub { padding: 60px 0 100px !important; }

/* ===== WooCommerce product archives (shop, product cat, product tag) =====
   Astra's default container hugs the navbar/footer on these archive pages.
   Add explicit breathing room — same rationale as hub pages.
   We target #content (the outermost Astra wrapper) so the padding sits OUTSIDE
   any sidebar/grid alignment. */
body.post-type-archive-product #content,
body.tax-product_cat #content,
body.tax-product_tag #content,
body.tax-product_brand #content {
	padding-top: 90px;
	padding-bottom: 130px;
}
.ef-hub-grid {
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
}
.ef-hub-tile {
	background: #fff;
	border: 1px solid var(--ef-color-line);
	border-radius: var(--ef-radius-lg);
	overflow: hidden;
	transition: box-shadow .2s, transform .15s, border-color .2s;
}
.ef-hub-tile:hover { box-shadow: var(--ef-shadow-lg); transform: translateY(-3px); border-color: transparent; }
.ef-hub-tile__link { display: block; text-decoration: none; color: inherit; }
.ef-hub-tile__thumb {
	width: 100%; aspect-ratio: 16/10;             /* less tall than 1/1, more landscape feel */
	background: var(--ef-color-soft) center/cover no-repeat;
	display: flex; align-items: center; justify-content: center;
	font-size: 48px;
}
.ef-hub-tile__body { padding: 14px 16px; text-align: center; }
.ef-hub-tile__name { font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--ef-color-text); }
.ef-hub-tile__count { font-size: 13px; color: var(--ef-color-muted); }

/* ===== LEGAL pages — reuse .ef-prose, just bigger top padding ===== */
body main.ef-page--legal { padding: 70px 0 100px !important; }

/* ===== GUARANTEE / Long-form prose ===== */
body main.ef-page--guarantee { padding: 70px 0 80px !important; }
.ef-prose { font-size: 16px; color: var(--ef-color-text); line-height: 1.7; }
.ef-prose h2 {
	font-family: var(--ef-font-display);
	font-size: 22px; font-weight: 700;
	margin: 40px 0 12px;
	color: var(--ef-color-dark);
	border-left: 3px solid var(--ef-color-accent);
	padding-left: 14px;
}
.ef-prose p { margin: 0 0 14px; color: var(--ef-color-text); }
.ef-defs { margin: 0 0 18px; }
.ef-defs dt { font-weight: 700; color: var(--ef-color-dark); margin-top: 12px; font-size: 15px; }
.ef-defs dd { margin: 4px 0 0 0; color: var(--ef-color-muted); font-size: 15px; line-height: 1.6; }
.ef-list { margin: 0 0 18px 0; padding-left: 22px; }
.ef-list li { margin: 4px 0; }
.ef-steps { margin: 0 0 18px 0; padding-left: 22px; counter-reset: step; }
.ef-steps li { margin: 8px 0; }

/* Packaging diagram (Garantie page) — top-down cross-section.
   Nested rounded divs: each layer is a circle with padding that creates the
   visible ring band; the next inner layer sits centered inside. Labels are
   absolutely positioned at the top of each band, in the colored ring area. */
.ef-packaging-diagram {
	margin: 32px auto 40px;
	max-width: 460px;
}
.ef-pkg {
	position: relative;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.ef-pkg__label {
	position: absolute;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 13px;
	font-weight: 600;
	color: var(--ef-color-dark);
	white-space: nowrap;
	letter-spacing: .2px;
	pointer-events: none;
}
.ef-pkg__label--center {
	top: auto;
	bottom: 20%;
	transform: translateX(-50%);
}
/* L1: outer alu — thinner band */
.ef-pkg--alu-outer {
	width: 100%;
	background: #D8DCE0;
	padding: 8%;
	box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.18);
}
/* L2: bubble wrap — thicker band (pale blue + tiny white dots pattern) */
.ef-pkg--bulle {
	width: 100%;
	background-color: #DCE9F1;
	background-image: radial-gradient(circle, rgba(255,255,255,.95) 1.7px, transparent 2.4px);
	background-size: 14px 14px;
	padding: 20%;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
/* L3: inner alu */
.ef-pkg--alu-inner {
	width: 100%;
	background: #D8DCE0;
	padding: 14%;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.ef-pkg--alu-inner .ef-pkg__label { font-size: 12px; }
/* L4: tube — amber center */
.ef-pkg--tube {
	width: 100%;
	background: #F4E2BC;
	box-shadow: inset 0 0 0 1.5px rgba(180,140,80,.45);
}
.ef-pkg__core {
	font-size: 36px;
	line-height: 1;
	font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', serif;
	margin-top: -8%;
}
@media (max-width: 480px) {
	.ef-packaging-diagram { max-width: 320px; }
	.ef-pkg__label { font-size: 11px; top: 10px; }
	.ef-pkg--alu-inner .ef-pkg__label { font-size: 10px; }
	.ef-pkg__core { font-size: 28px; }
}

.ef-cta-block {
	margin: 56px 0 0;
	padding: 28px 32px;
	background: var(--ef-color-soft);
	border-radius: var(--ef-radius-lg);
	text-align: center;
}
.ef-cta-block h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--ef-color-dark); }
.ef-cta-block p { color: var(--ef-color-muted); margin: 0 0 18px; font-size: 14px; }

/* ===== CONTACT ===== */
body main.ef-page--contact { padding: 150px 0 120px !important; }
.ef-page__header { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.ef-page__title { font-family: var(--ef-font-display); font-size: 38px; font-weight: 800; margin: 0 0 18px; color: var(--ef-color-dark); }
.ef-page__lead { font-size: 17px; color: var(--ef-color-muted); margin: 0; line-height: 1.5; }

.ef-page__layout { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: stretch; }

.ef-card {
	background: #fff;
	border: 1px solid var(--ef-color-line);
	border-radius: var(--ef-radius-lg);
	padding: 32px;
	box-shadow: var(--ef-shadow);
}
.ef-card__title { font-size: 18px; font-weight: 700; margin: 0 0 36px; color: var(--ef-color-text); }

/* Contact channels list */
.ef-channels { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 22px; }
.ef-channel { display: flex; gap: 18px; align-items: flex-start; }
.ef-channel__icon {
	flex-shrink: 0;
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(117, 195, 44, .10);
	color: var(--ef-color-accent);
}
/* SVG icons can have visually off-centered content within their viewBox.
   `display: block` removes inline-baseline shift; small translate tweak
   compensates the typical Lucide/Feather visual-bias toward the bottom-right. */
.ef-channel__icon svg {
	display: block;
	transform: translate(0.5px, -0.5px);
}
.ef-channel__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ef-channel__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ef-color-muted); }
.ef-channel__value, .ef-mail {
	font-size: 17px; font-weight: 600;
	color: var(--ef-color-text);
	text-decoration: none;
	word-break: break-word;
}
.ef-channel__value:hover { color: var(--ef-color-accent-d); }
.ef-mail { user-select: text; }
.ef-channel__hint { font-size: 13px; color: var(--ef-color-muted); line-height: 1.4; margin-top: 2px; }
.ef-channel__btn {
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 13px; font-weight: 600;
	text-decoration: none;
	transition: background .2s, color .2s;
	width: fit-content;
}
.ef-channel__btn--whatsapp {
	background: #25D366;
	color: #fff !important;
}
.ef-channel__btn--whatsapp:hover { background: #1EB852; }

/* FAQ side card */
.ef-faq dt { font-weight: 700; color: var(--ef-color-text); margin-top: 16px; font-size: 14px; }
.ef-faq dt:first-child { margin-top: 0; }
.ef-faq dd { margin: 4px 0 0; font-size: 13px; color: var(--ef-color-muted); line-height: 1.55; }
.ef-faq dd a { color: var(--ef-color-accent-d); text-decoration: underline; }
.ef-faq dd a:hover { color: var(--ef-color-primary-d); }

/* =============================================================================
   CART — items at top (flex rows), centered summary card below
   ========================================================================== */
.ef-cart { max-width: 1200px; margin: 0 auto; padding: 40px 20px 80px; }
.ef-cart__title {
	font-family: var(--ef-font-display);
	font-size: 32px;
	font-weight: 800;
	margin: 0 0 24px;
	color: var(--ef-color-dark);
}
.ef-cart__notices { margin-bottom: 28px; display: flex; flex-direction: column; gap: 16px; }

/* Shipping notice (rendered by the plugin) */
.efc-shipping-notice {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 16px 20px;
	background: #FAF6E8;
	border: 1px solid #E9DEC2;
	border-left: 4px solid #C8902A;
	border-radius: var(--ef-radius);
}
.efc-shipping-notice__icon {
	flex-shrink: 0;
	width: 38px; height: 38px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(200, 144, 42, .14);
	color: #8E6520;
}
.efc-shipping-notice__icon svg { display: block; }
.efc-shipping-notice__body { flex: 1; min-width: 0; }
.efc-shipping-notice__title {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #4A3724;
	text-transform: uppercase;
	letter-spacing: .5px;
	margin-bottom: 4px;
}
.efc-shipping-notice__text { font-size: 14px; color: #4A3724; line-height: 1.55; }
.efc-shipping-notice__text p { margin: 0 0 6px; }
.efc-shipping-notice__text p:last-child { margin-bottom: 0; }

/* Layout — items at top, full-width summary below */
.ef-cart__layout { display: flex; flex-direction: column; gap: 28px; }

/* Items column */
.ef-cart__items {
	background: #fff;
	border: 1px solid var(--ef-color-line);
	border-radius: var(--ef-radius-lg);
	overflow: hidden;
}

/* Header row + each item share IDENTICAL fixed-width column tracks so they
   always line up. They're separate grids — using `auto` would let each grid
   compute different widths based on its own content. Hard widths fix it. */
.ef-cart-items__header,
.ef-cart-item {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr) 90px 130px 90px 28px;
	gap: 14px;
	align-items: center;
}
.ef-cart-items__header {
	padding: 14px 20px;
	background: #fff;
	border-bottom: 1px solid var(--ef-color-line);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--ef-color-muted);
}
.ef-cart-items__header .ef-cart-items__h--name  { grid-column: 2; }
.ef-cart-items__header .ef-cart-items__h--price { grid-column: 3; text-align: left; }
.ef-cart-items__header .ef-cart-items__h--qty   { grid-column: 4; text-align: left; }
.ef-cart-items__header .ef-cart-items__h--total { grid-column: 5; text-align: left; }

/* Each row */
.ef-cart-items { display: flex; flex-direction: column; }
.ef-cart-item {
	padding: 18px 20px;
	border-bottom: 1px solid var(--ef-color-line);
}
.ef-cart-item:last-child { border-bottom: none; }

.ef-cart-item__thumb { width: 80px; height: 80px; border-radius: var(--ef-radius-sm); overflow: hidden; background: var(--ef-color-soft); }
.ef-cart-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ef-cart-item__thumb a { display: block; height: 100%; }

.ef-cart-item__main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ef-cart-item__name { font-weight: 700; font-size: 15px; line-height: 1.3; }
.ef-cart-item__name a { color: var(--ef-color-text); text-decoration: none; }
.ef-cart-item__name a:hover { color: var(--ef-color-primary-d); }
.ef-cart-item__meta { font-size: 12px; color: var(--ef-color-muted); }
.ef-cart-item__meta p, .ef-cart-item__meta dl { margin: 0; }
.ef-cart-item__meta dt, .ef-cart-item__meta dd { display: inline; margin: 0; }
/* dt::after intentionally NOT set — WC's cart-item-data.php template (and our
   override) already include the ":" inside the <dt> text. Adding it here too
   would render "Nombre de reines:: 1 reine". */
.ef-cart-item__meta dt { margin-right: 4px; }
.ef-cart-item__meta dd::after { content: ' · '; color: var(--ef-color-line); }
.ef-cart-item__meta dd:last-of-type::after { content: ''; }

.ef-cart-item__price { text-align: left; color: var(--ef-color-muted); font-size: 14px; align-self: center; }

.ef-cart-item__qty { text-align: left; align-self: center; }
.ef-cart-item .quantity { display: inline-flex; align-items: stretch; border: 1px solid var(--ef-color-line); border-radius: 999px; overflow: hidden; background: #fff; }
.ef-cart-item .quantity input.qty {
	width: 50px; padding: 8px 4px;
	border: none; background: transparent;
	text-align: center; font: inherit; font-weight: 600;
	color: var(--ef-color-text);
	-moz-appearance: textfield;
}
.ef-cart-item .quantity input.qty::-webkit-outer-spin-button,
.ef-cart-item .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ef-cart-item .quantity input.qty:focus { outline: 2px solid rgba(117,195,44,.25); }

.ef-cart-item__total { text-align: left; font-weight: 700; color: var(--ef-color-text); font-size: 15px; align-self: center; }

.ef-cart-item__remove,
.ef-cart-item__remove:visited {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: transparent;
	color: var(--ef-color-muted);
	font-size: 18px; line-height: 1;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.ef-cart-item__remove:hover { background: #FBE6E6; color: #C53030; }
.ef-cart-item__remove-mobile { display: none; }

/* Footer with update button */
.ef-cart-items__footer {
	display: flex; justify-content: flex-end;
	padding: 14px 20px;
	background: #fff;
	border-top: 1px solid var(--ef-color-line);
}
.ef-cart__update {
	background: var(--ef-color-primary) !important;
	border: 1px solid var(--ef-color-primary) !important;
	color: #fff !important;
	padding: 10px 22px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s, border-color .15s, color .15s !important;
}
.ef-cart__update:hover,
.ef-cart__update:focus {
	background: var(--ef-color-primary-d) !important;
	border-color: var(--ef-color-primary-d) !important;
	color: #fff !important;
}

/* Summary — single centered card below items */
.ef-cart__sidebar { width: 100%; display: flex; justify-content: center; }
.ef-cart-summary {
	background: #fff;
	border: 1px solid var(--ef-color-line);
	border-radius: var(--ef-radius-lg);
	padding: 30px 36px;
	width: 100%;
	max-width: 720px;
	box-sizing: border-box;
}
.ef-cart-summary__title { font-size: 18px; font-weight: 700; margin: 0 0 18px; color: var(--ef-color-text); }

/* WC totals: kill the table layout, force block; force the inner container white. */
.ef-cart-summary__totals .cart_totals,
.ef-cart-summary__totals .cart-collaterals,
.ef-cart-summary__totals .cart-collaterals > * {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}
.ef-cart-summary__totals h2 { display: none; } /* WC's "Cart totals" heading — we render our own */

/* Force the totals table to flow as block, not as <table>. */
.ef-cart-summary__totals table.shop_table_responsive,
.ef-cart-summary__totals table.shop_table_responsive tbody {
	display: block !important;
	width: 100% !important;
	border: none !important;
	border-collapse: collapse !important;
}

/* Each row = flex line: label left, value right */
.ef-cart-summary__totals table.shop_table_responsive tr {
	display: flex !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	gap: 16px;
	padding: 10px 0 !important;
	border: none !important;
	border-bottom: 1px solid var(--ef-color-line) !important;
}
.ef-cart-summary__totals table.shop_table_responsive tr:last-child { border-bottom: none !important; }

.ef-cart-summary__totals table.shop_table_responsive th {
	display: block !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	text-align: left !important;
	font-weight: 500 !important;
	color: var(--ef-color-muted) !important;
	font-size: 14px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	width: auto !important;
	flex-shrink: 0;
}
.ef-cart-summary__totals table.shop_table_responsive td {
	display: block !important;
	padding: 0 !important;
	border: none !important;
	text-align: right !important;
	font-weight: 600 !important;
	color: var(--ef-color-text) !important;
	font-size: 14px !important;
	min-width: 0;
}

/* Shipping row — radio list is wide; stack label above options */
.ef-cart-summary__totals table.shop_table_responsive tr.shipping {
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 8px;
}
.ef-cart-summary__totals table.shop_table_responsive tr.shipping th { font-weight: 700 !important; color: var(--ef-color-text) !important; }
.ef-cart-summary__totals table.shop_table_responsive tr.shipping td { text-align: left !important; font-weight: 400 !important; }
.ef-cart-summary__totals tr.shipping ul#shipping_method,
.ef-cart-summary__totals tr.shipping ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 13px;
}
/* Shipping list — let WC/Astra render naturally, just spacing tweaks. */
.ef-cart-summary__totals tr.shipping ul li {
	margin: 0 0 6px;
	line-height: 1.5;
}
/* Vertically centre the radio with the label text (default baseline alignment
   leaves the radio sitting too high relative to multi-word labels). */
.ef-cart-summary__totals tr.shipping ul li input[type="radio"] {
	vertical-align: middle;
	margin-top: -2px;
}
.ef-cart-summary__totals tr.shipping ul li label {
	vertical-align: middle;
}
.ef-cart-summary__totals .woocommerce-shipping-destination { color: var(--ef-color-muted); font-size: 12px; margin-top: 6px; }
.ef-cart-summary__totals .shipping-calculator-button { color: var(--ef-color-accent-d); font-size: 13px; }

/* WC shipping calculator (collapsible "Modifier l'adresse" form) */
.ef-cart-summary__totals .shipping-calculator-form {
	margin-top: 10px;
	padding: 14px;
	background: #FAFAFA;
	border: 1px solid var(--ef-color-line);
	border-radius: var(--ef-radius-sm);
}
.ef-cart-summary__totals .shipping-calculator-form .form-row { margin-bottom: 10px; }
.ef-cart-summary__totals .shipping-calculator-form label { display: block; font-size: 12px; font-weight: 600; color: var(--ef-color-muted); margin-bottom: 4px; }
.ef-cart-summary__totals .shipping-calculator-form input,
.ef-cart-summary__totals .shipping-calculator-form select {
	width: 100% !important;
	height: 40px !important;
	padding: 0 12px !important;
	border: 1px solid var(--ef-color-line) !important;
	border-radius: var(--ef-radius-sm) !important;
	font: inherit;
	font-size: 14px;
	box-sizing: border-box;
}
/* Select2 wrapper for the country dropdown — match the 40px height of the other inputs */
.ef-cart-summary__totals .shipping-calculator-form .select2-container--default .select2-selection--single {
	width: 100% !important;
	height: 40px !important;
	padding: 0 !important;
	border: 1px solid var(--ef-color-line) !important;
	border-radius: var(--ef-radius-sm) !important;
	box-sizing: border-box;
}
.ef-cart-summary__totals .shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 38px !important;
	padding-left: 12px !important;
	padding-right: 32px !important;
	color: var(--ef-color-text) !important;
	font-size: 14px;
}
.ef-cart-summary__totals .shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 38px !important;
	right: 4px !important;
}
/* The update button — primary green */
.ef-cart-summary__totals .shipping-calculator-form button,
.ef-cart-summary__totals .shipping-calculator-form .button,
.ef-cart-summary__totals button[name="calc_shipping"] {
	background: var(--ef-color-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 10px 22px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background .2s !important;
}
.ef-cart-summary__totals .shipping-calculator-form button:hover,
.ef-cart-summary__totals .shipping-calculator-form .button:hover,
.ef-cart-summary__totals button[name="calc_shipping"]:hover { background: var(--ef-color-primary-d) !important; }

/* Order total — emphasised */
.ef-cart-summary__totals tr.order-total th,
.ef-cart-summary__totals tr.order-total td {
	font-size: 19px !important;
	padding-top: 14px !important;
	color: var(--ef-color-text) !important;
	font-weight: 700 !important;
}

/* Checkout button — primary green, full width, big */
.ef-cart-summary__totals .wc-proceed-to-checkout { margin: 24px 0 0 !important; padding: 0 !important; }
.ef-cart-summary__totals .checkout-button,
.ef-cart-summary__totals .wc-proceed-to-checkout .checkout-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	padding: 12px 28px !important;
	border-radius: 999px !important;
	background: var(--ef-color-primary) !important;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	border: none !important;
	box-shadow: none !important;
	transition: background .2s !important;
}
.ef-cart-summary__totals .wc-proceed-to-checkout { text-align: right; }
.ef-cart-summary__totals .checkout-button:hover,
.ef-cart-summary__totals .checkout-button:focus { background: var(--ef-color-primary-d) !important; }

/* Fragile-species warning — sits between totals and packaging info */
.efc-fragile-warning {
	margin-top: 18px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 14px 18px;
	background: #FFF4E5;
	border: 1px solid #F4D9A8;
	border-left: 4px solid #C46900;
	border-radius: var(--ef-radius);
}
.efc-fragile-warning__icon {
	flex-shrink: 0;
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(196, 105, 0, .14);
	color: #8E4C00;
}
.efc-fragile-warning__icon svg { display: block; }
.efc-fragile-warning__body { flex: 1; min-width: 0; }
.efc-fragile-warning__title {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #6B3A00;
	text-transform: uppercase;
	letter-spacing: .5px;
	margin-bottom: 4px;
}
.efc-fragile-warning__text { font-size: 14px; color: #4A3724; line-height: 1.5; }

/* In the checkout review table the wrapper row collapses padding */
.efc-fragile-warning-row td {
	background: none !important;
	text-align: left !important;        /* tfoot td is right-aligned by default */
	padding: 0 !important;
	border: none !important;
}
.efc-fragile-warning-row .efc-fragile-warning { margin: 12px 0; text-align: left; }
.efc-fragile-warning-row .efc-fragile-warning__text,
.efc-fragile-warning-row .efc-fragile-warning__title { text-align: left !important; }

/* Reassurance about packaging — sits between totals and coupon */
.ef-cart-packaging {
	margin-top: 22px;
	padding: 16px 18px;
	background: rgba(117, 195, 44, .06);
	border: 1px solid rgba(117, 195, 44, .25);
	border-radius: var(--ef-radius);
}
.ef-cart-packaging__title {
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 10px;
	color: var(--ef-color-accent-d);
	text-transform: uppercase;
	letter-spacing: .4px;
}
.ef-cart-packaging__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ef-cart-packaging__list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	color: var(--ef-color-text);
	line-height: 1.45;
}
.ef-cart-packaging__check {
	flex-shrink: 0;
	color: var(--ef-color-accent);
	margin-top: 3px;
}
/* Cart-wide live-arrival guarantee banner, shown between items & summary */
.ef-guarantee-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	margin: 0;
	border-radius: var(--ef-radius);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}
.ef-guarantee-banner::before {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: #fff;
	font-weight: 900;
	font-size: 14px;
	line-height: 1;
}
.ef-guarantee-banner--ok {
	background: rgba(117, 195, 44, .12);
	color: var(--ef-color-primary-d);
	border: 1px solid rgba(117, 195, 44, .35);
}
.ef-guarantee-banner--ok::before { content: "✓"; background: var(--ef-color-primary); }
.ef-guarantee-banner--ko {
	background: rgba(224, 78, 92, .10);
	color: #B33A3A;
	border: 1px solid rgba(224, 78, 92, .35);
}
.ef-guarantee-banner--ko::before { content: "✗"; background: #E04E5C; }

/* Guarantee item — slightly emphasised first point with a "read more" link */
.ef-cart-packaging__guarantee {
	padding-bottom: 8px;
	margin-bottom: 4px;
	border-bottom: 1px dashed var(--ef-color-line);
}
.ef-cart-packaging__guarantee strong {
	font-weight: 700;
	color: var(--ef-color-dark);
	display: block;
}
.ef-cart-packaging__link {
	display: inline-block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--ef-color-primary-d);
	text-decoration: none;
	font-weight: 600;
}
.ef-cart-packaging__link:hover {
	color: var(--ef-color-primary);
	text-decoration: underline;
}

/* Coupon — open by default (no <details>), input + primary apply button */
.ef-cart-coupon {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--ef-color-line);
}
.ef-cart-coupon__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ef-color-muted);
	margin-bottom: 8px;
}
.ef-cart-coupon__form { display: flex; gap: 8px; }
.ef-cart-coupon__form input {
	flex: 1; min-width: 0;
	padding: 11px 14px;
	border: 1px solid var(--ef-color-line);
	border-radius: var(--ef-radius-sm);
	font: inherit; font-size: 14px;
}
.ef-cart-coupon__form input:focus {
	outline: none;
	border-color: var(--ef-color-accent);
	box-shadow: 0 0 0 3px rgba(117, 195, 44, .15);
}
.ef-cart-coupon__form button {
	padding: 11px 22px;
	background: var(--ef-color-primary);
	color: #fff;
	border: none;
	border-radius: var(--ef-radius-sm);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s;
}
.ef-cart-coupon__form button:hover { background: var(--ef-color-primary-d); }

/* ===== CHECKOUT (light restyle, hooks intact) ===== */
/* Centered wrapper around notices + form — counters page-builder's full-bleed.
   The .ef-checkout-notices stays a plain flex column inside it. */
.ef-checkout {
	max-width: 1100px;
	margin: 0 auto;
	padding: 32px 20px 60px;
}
.woocommerce-checkout .ef-checkout-notices,
.woocommerce-checkout .ef-checkout-progress { margin: 0 0 24px; display: flex; flex-direction: column; gap: 16px; }
/* Both columns rendered as identical white cards. !important is needed
   because Astra's WC stylesheet ships its own bg/border on #order_review
   with higher specificity, which made the two columns look mismatched. */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
	background: #fff !important;
	border: 1px solid var(--ef-color-line) !important;
	border-radius: var(--ef-radius) !important;
	padding: 28px !important;
	margin-bottom: 24px !important;
	box-shadow: none !important;
}
/* "Votre commande" heading — hidden so the top of #order_review aligns with
   the top of #customer_details. The "Produit / Sous-total" table header
   inside #order_review already labels the section. */
.woocommerce-checkout #order_review_heading { display: none !important; }

/* Order review table — auto layout + the "width: 1%" trick on product-total
   makes the price column shrink-wrap to its content (e.g. "90,00 €") and
   gives ALL the remaining space to product-name. No more wasted gap. */
body.woocommerce-checkout table.shop_table {
	width: 100% !important;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
}
body.woocommerce-checkout table.shop_table th.product-name,
body.woocommerce-checkout table.shop_table td.product-name {
	width: auto !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
	padding-right: 12px !important;
}
body.woocommerce-checkout table.shop_table th.product-total,
body.woocommerce-checkout table.shop_table td.product-total {
	width: 1% !important;              /* shrink-wrap to content */
	white-space: nowrap !important;
	text-align: right !important;
	padding-left: 0 !important;
}

/* Borders — kill ALL td/th borders that come from WC/Astra defaults, then
   apply ONE clean border-bottom on the cart_item row only. With
   border-collapse:collapse, this renders as a single unbroken line across
   the full row width. No more layered/doubled borders. */
body.woocommerce-checkout table.shop_table thead th,
body.woocommerce-checkout table.shop_table tbody td,
body.woocommerce-checkout table.shop_table tfoot th,
body.woocommerce-checkout table.shop_table tfoot td {
	border: 0 !important;
}
body.woocommerce-checkout table.shop_table tbody tr.cart_item {
	border-bottom: 1px solid var(--ef-color-line) !important;
}
body.woocommerce-checkout table.shop_table thead tr {
	border-bottom: 1px solid var(--ef-color-line) !important;
}

/* Shipping row uses our overridden cart-shipping.php template which splits
   the label and options into two colspan="2" rows — no more squeezed left
   column, and no more display:block hack on a <tr> (which caused the
   double-border + non-full-width options the user reported). */
.woocommerce-checkout table.shop_table tr.efc-shipping-label th {
	padding: 14px 12px 6px !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--ef-color-muted) !important;
	border-top: 1px solid var(--ef-color-line) !important;
	border-bottom: none !important;
	background: transparent !important;
	text-align: left !important;          /* tfoot th is right-aligned by default */
}
.woocommerce-checkout table.shop_table tr.efc-shipping-options td {
	padding: 0 12px 14px !important;
	border-top: none !important;
	text-align: left !important;
}

/* Reassurance pill appended to "Expédition" label by the
   woocommerce_shipping_package_name filter (cart + checkout only). Soft
   amber so it reads as informational rather than as a status badge. */
.ef-ship-package-note {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #fff5e6;
	color: #8a4f00;
	border: 1px solid #f5d7a8;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	font-style: normal;
	vertical-align: middle;
	white-space: normal;
	text-indent: 0;
	text-align: center;
	direction: ltr;
}

/* Shipping method list — full reset because Astra applies padding-left,
   list-style, line-height etc. to "ul li" globally that would offset the
   wrapped lines and squeeze our flex layout. */
.woocommerce-checkout ul#shipping_method {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	text-indent: 0 !important;
}
.woocommerce-checkout ul#shipping_method li {
	margin: 0 !important;
	padding: 6px 0 !important;
	list-style: none !important;
	text-indent: 0 !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 10px !important;
	line-height: 1.4 !important;
	background: none !important;
}
.woocommerce-checkout ul#shipping_method li::before,
.woocommerce-checkout ul#shipping_method li::marker { content: none !important; display: none !important; }
.woocommerce-checkout ul#shipping_method li input[type="radio"] {
	margin: 3px 0 0 0 !important;
	padding: 0 !important;
	flex: 0 0 auto !important;
	width: 16px; height: 16px;
}
.woocommerce-checkout ul#shipping_method li label {
	flex: 1 1 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	text-indent: 0 !important;
	display: block !important;
	font-weight: 400 !important;
}
.woocommerce-checkout .form-row label { font-weight: 600; font-size: 13px; color: var(--ef-color-text); }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout #order_comments,
.woocommerce-checkout .select2-selection {
	padding: 11px 14px !important;
	border: 1px solid var(--ef-color-line) !important;
	border-radius: var(--ef-radius) !important;
	font: inherit !important;
	font-size: 14px !important;
	color: var(--ef-color-text) !important;
	background: #fff !important;
	box-shadow: none !important;
	line-height: 1.5 !important;
	transition: border-color .2s, box-shadow .2s;
}
.woocommerce-checkout #order_comments {
	width: 100%;
	box-sizing: border-box;
	min-height: 110px;
	resize: vertical;
	display: block;
}
.woocommerce-checkout #order_comments_field .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout #order_comments:focus {
	outline: none;
	border-color: var(--ef-color-accent) !important;
	box-shadow: 0 0 0 3px rgba(117, 195, 44, .15) !important;
}
.woocommerce-checkout #place_order {
	background: var(--ef-color-primary) !important;
	color: #fff !important;
	padding: 14px 28px !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	border: none !important;
	transition: background .2s;
}
.woocommerce-checkout #place_order:hover { background: var(--ef-color-primary-d) !important; }

/* ===== Pink-to-green override + login/coupon polish ===== */
/* Astra's accent (used in WC) is pink by default. Repaint everything in our
   primary green so WC notices match the brand on every page (product, shop,
   cart, checkout, account...). */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	border-top: 3px solid var(--ef-color-primary) !important;
	background: rgb(247, 246, 247) !important;
	color: var(--ef-color-text) !important;
	padding: 14px 20px !important;
	margin: 0 0 14px !important;
	border-radius: 0 !important;
	position: relative;
}
/* Astra's ::before icon overlaps the text on narrow widths — kill it. */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
	display: none !important;
	content: none !important;
}
/* The action link inside the message ("Voir le panier") — make it green too */
.woocommerce-message a.wc-forward,
.woocommerce-message .button.wc-forward {
	color: var(--ef-color-primary-d) !important;
	background: transparent !important;
	border-color: var(--ef-color-primary) !important;
}
.woocommerce-checkout .woocommerce-info a,
.woocommerce-checkout .woocommerce-message a,
.woocommerce-checkout .lost_password a,
.woocommerce-checkout a.showcoupon,
.woocommerce-checkout a.showlogin {
	color: var(--ef-color-primary-d) !important;
	text-decoration: underline;
	font-weight: 600;
}
.woocommerce-checkout .woocommerce-info a:hover,
.woocommerce-checkout .lost_password a:hover { color: var(--ef-color-primary) !important; }

/* All buttons inside checkout (login submit, coupon apply, etc.) — green pill,
   consistent height. Excludes #place_order which has its own bigger styling. */
.woocommerce-checkout button.button:not(#place_order),
.woocommerce-checkout input[type="submit"]:not(#place_order),
.woocommerce-checkout .checkout_coupon button[type="submit"],
.woocommerce-checkout .login button[type="submit"] {
	background: var(--ef-color-primary) !important;
	border: 1px solid var(--ef-color-primary) !important;
	color: #fff !important;
	padding: 10px 20px !important;
	height: 44px !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	cursor: pointer;
	transition: background .15s;
	box-shadow: none !important;
	text-shadow: none !important;
	line-height: 1 !important;
}
.woocommerce-checkout button.button:not(#place_order):hover,
.woocommerce-checkout input[type="submit"]:not(#place_order):hover {
	background: var(--ef-color-primary-d) !important;
	border-color: var(--ef-color-primary-d) !important;
}

/* Login form — DOM is already in the right order via woocommerce/global/form-login.php
   override (username → password → lost-pw → submit → rememberme). All this CSS
   does is the visual polish: white card, tight spacing, neutralise WC's default
   float on the submit button. */
.woocommerce-checkout .login.woocommerce-form-login {
	border: 1px solid var(--ef-color-line);
	border-radius: var(--ef-radius);
	padding: 22px;
	background: #fff;
	margin-bottom: 16px;
}
.woocommerce-checkout .login .form-row { margin-bottom: 14px; }
.woocommerce-checkout .login .form-row.form-row-first,
.woocommerce-checkout .login .form-row.form-row-last {
	width: 100%;
	float: none;
}
/* Lost-password sits right under the password field — kill the gap between
   the password row's bottom margin and the link. */
.woocommerce-checkout .login .lost_password {
	margin: -10px 0 14px;
	font-size: 13px;
}
.woocommerce-checkout .login .form-row-submit { margin: 4px 0 10px; }
.woocommerce-checkout .login .form-row-rememberme { margin: 0; }
.woocommerce-checkout .login .woocommerce-form-login__rememberme {
	display: inline-flex; align-items: center; gap: 6px; margin: 0;
	float: none;
}
.woocommerce-checkout .login .woocommerce-form-login__submit {
	float: none !important; margin: 0 !important;
}

/* WC's password reveal eye — by default it ships unstyled and shows up as
   an empty block below the password input. Position it absolutely inside
   the input on the right, with WC's own eye glyph from the WooCommerce icon
   font (\e010 = closed, becomes open via .display-password toggle class). */
.woocommerce-checkout .password-input {
	position: relative;
	display: block;
	width: 100%;
}
.woocommerce-checkout .password-input input.input-text {
	padding-right: 40px !important;
}
.woocommerce-checkout .show-password-input {
	position: absolute !important;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	color: var(--ef-color-muted) !important;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1 !important;
	transition: color .15s;
}
.woocommerce-checkout .show-password-input::after {
	font-family: WooCommerce;
	content: "\e010";
	font-size: 16px;
	line-height: 1;
}
.woocommerce-checkout .show-password-input:hover {
	color: var(--ef-color-primary-d) !important;
}
.woocommerce-checkout .show-password-input.display-password {
	color: var(--ef-color-primary-d) !important;
}

/* Coupon form — KEEP it as display:block (so jQuery's slideToggle animates
   smoothly with no display swap mid-animation). Layout the children with
   inline-block instead of putting flex on the form itself.
   IMPORTANT: do NOT mark padding / margin-bottom !important — jQuery's
   slideToggle animates height + paddingTop/Bottom + marginTop/Bottom in
   parallel, and !important blocks its inline-style animation, causing a
   visible "snap" at the start of opening and end of closing. */
.woocommerce-checkout form.checkout_coupon {
	border: 1px solid var(--ef-color-line) !important;
	border-radius: var(--ef-radius) !important;
	padding: 18px;
	background: #fff !important;
	margin-bottom: 16px;
	width: 100% !important;
	box-sizing: border-box !important;
	font-size: 0;                      /* kill whitespace between inline-block siblings */
}
.woocommerce-checkout form.checkout_coupon::before,
.woocommerce-checkout form.checkout_coupon::after { display: none !important; }
.woocommerce-checkout form.checkout_coupon .form-row {
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-block !important;
	vertical-align: middle !important;
	font-size: 14px;                   /* restore inside children */
}
.woocommerce-checkout form.checkout_coupon p:first-of-type {
	width: 200px !important;
	max-width: 200px !important;
	margin-right: 8px !important;
}
.woocommerce-checkout form.checkout_coupon p:nth-of-type(2) {
	width: auto !important;
}
.woocommerce-checkout form.checkout_coupon input[type="text"] {
	height: 44px !important;
	width: 100% !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}
.woocommerce-checkout form.checkout_coupon button[type="submit"] {
	height: 44px !important;
	width: auto !important;
	white-space: nowrap !important;
	margin: 0 !important;
	padding: 10px 18px !important;
	vertical-align: middle !important;
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
	.ef-hero__layout { grid-template-columns: 1fr; gap: 32px; }
	.ef-hero__media { display: none; }   /* hide image on tablet/mobile */
	.ef-hero__content { text-align: center; }
	.ef-hero__content .ef-hero__title,
	.ef-hero__content .ef-hero__lead { margin-left: auto; margin-right: auto; }
	.ef-hero__content .ef-hero__ctas { justify-content: center; }
	.ef-tiles-grid { grid-template-columns: repeat(2, 1fr); }
	.ef-products-grid { grid-template-columns: repeat(2, 1fr); }
	/* Below 3-col, abandon subgrid alignment entirely — the rows-of-3 layout
	   only makes sense when all pillars sit side by side. Stack as plain
	   blocks so each pillar's title/sub/detail flow naturally. */
	.ef-pillars {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: none;
		column-gap: 32px;
		row-gap: 40px;
	}
	.ef-pillar { display: block; grid-row: auto; }
	/* The 3rd pillar lands alone on row 2 — span both columns and center it
	   so the layout doesn't look unbalanced (orphan card hanging on the left). */
	.ef-pillar:nth-child(3) {
		grid-column: 1 / -1;
		max-width: 560px;
		margin-inline: auto;
	}
	.ef-page__layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	.ef-cart-items__header { display: none; }
	.ef-cart-summary { grid-template-columns: 1fr; column-gap: 0; row-gap: 18px; padding: 22px 18px; }
	.ef-cart-coupon { grid-column: auto; }
	.ef-cart-summary__totals { grid-column: auto; }
	.ef-cart-item {
		grid-template-columns: 80px 1fr;
		grid-template-areas:
			'thumb main'
			'thumb meta'
			'price total'
			'qty   remove';
		gap: 8px 14px;
		padding: 16px;
	}
	.ef-cart-item__thumb { grid-area: thumb; align-self: start; }
	.ef-cart-item__main  { grid-area: main; }
	.ef-cart-item__price { grid-area: price; text-align: left; padding-top: 6px; border-top: 1px solid var(--ef-color-line); }
	.ef-cart-item__price::before { content: attr(data-label) ' : '; color: var(--ef-color-muted); font-weight: 400; }
	.ef-cart-item__qty   { grid-area: qty; text-align: left; padding-top: 6px; }
	.ef-cart-item__total { grid-area: total; text-align: right; padding-top: 6px; border-top: 1px solid var(--ef-color-line); font-size: 16px; }
	.ef-cart-item__remove { display: none; }
	.ef-cart-item__remove-mobile {
		grid-area: remove;
		display: inline-block;
		justify-self: end; align-self: center;
		padding: 6px 12px;
		background: none; border: none;
		color: #C53030;
		font-size: 13px; font-weight: 600;
		cursor: pointer;
		text-decoration: underline;
	}
}

@media (max-width: 600px) {
	.ef-hero { padding: 60px 0 50px; }
	.ef-hero__title { font-size: 30px; }
	.ef-hero__lead { font-size: 15px; }
	.ef-section { padding: 32px 0; }
	.ef-section--tight { padding: 12px 0; }
	.ef-section__title { font-size: 24px; }
	.ef-section__title--light { margin-bottom: 56px; } /* dark section, pillars stack */
	.ef-tiles-grid { grid-template-columns: 1fr; }
	.ef-pillars { grid-template-columns: 1fr; row-gap: 32px; }
	.ef-form__row--two { grid-template-columns: 1fr; }
	.ef-card { padding: 20px; }
	.ef-cart { padding: 24px 14px 60px; }
	.ef-cart-summary { padding: 22px 18px; }
	.efc-shipping-notice { padding: 14px 16px; gap: 12px; }
	.efc-shipping-notice__icon { width: 32px; height: 32px; }
	.ef-why { padding: 36px 0 20px; }
	.ef-why__title { font-size: 22px; }
	.ef-why__inner p { text-align: left; font-size: 15px; }
	.ef-spotlight__inner { grid-template-columns: 1fr; gap: 18px; }
	.ef-spotlight__media { aspect-ratio: 1/1; max-width: 380px; margin: 0 auto; }
	.ef-spotlight__cta { align-self: stretch; }
	.ef-spotlight__cta .ef-button { display: block; text-align: center; }
	body main.ef-page--hub { padding: 36px 0 60px !important; }   /* reduce hub padding on phones */
	.ef-page__header { margin: 0 auto 32px; }
	body.post-type-archive-product #content,
	body.tax-product_cat #content,
	body.tax-product_tag #content,
	body.tax-product_brand #content { padding-top: 50px; padding-bottom: 70px; }
}