/*
Theme Name: Les Pépites d'Angélique
Theme URI: https://lespepitesdangelique.recettesexpress.fr
Author: Les Pépites d'Angélique
Description: Thème WooCommerce pour une boutique de mode et de seconde main premium. Direction éditoriale sobre et chaleureuse, inspirée des petites boutiques françaises (beaucoup d'espace, photographie mise en avant, couleurs douces).
Version: 1.2.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pepites
WC requires at least: 7.0
*/

/* ============================================================
   1. VARIABLES
   ============================================================ */
:root {
	--bg:        #FFF8ED; /* blanc cassé : fond principal, clair et aéré */
	--sand:      #F8EFE2; /* fond beige (palette) : sections alternées */
	--white:     #FFFFFF;
	--gold:      #B9823F; /* accent doré / caramel, usage parcimonieux */
	--gold-dark: #8C5E2D;
	--brown:     #7A4A24; /* marron doux */
	--ink:       #2C2520; /* texte */
	--muted:     #8a7c6c; /* texte secondaire */
	--line:      #E4D7C3; /* filets très fins */

	--font-title: "Playfair Display", Georgia, "Times New Roman", serif;
	--font-body:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--container: 1240px;
	--container-narrow: 760px;
	--radius: 6px;          /* coins légèrement arrondis */
	--transition: 0.25s ease; /* hover doux, 0,25 s max */
}

/* ============================================================
   2. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.75;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-dark); }

/* Accessibilité : focus clavier visible et discret */
:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

h1, h2, h3, h4 {
	font-family: var(--font-title);
	font-weight: 500;
	line-height: 1.15;
	color: var(--ink);
	margin: 0 0 0.5em;
	letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.2em; }
strong { font-weight: 600; }

::selection { background: var(--gold); color: #fff; }

/* ============================================================
   3. LAYOUT
   ============================================================ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 28px; }
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: 28px; }

.section { padding: clamp(56px, 9vw, 120px) 0; }
.section--sand { background: var(--sand); }
.section--tight { padding: clamp(40px, 6vw, 72px) 0; }

.grid { display: grid; gap: 28px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Petit intitulé de section, discret */
.eyebrow {
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: 0.28em;
	font-size: 0.68rem;
	font-weight: 500;
	color: var(--gold-dark);
	margin: 0 0 16px;
}

/* En-tête de section : aligné à gauche, simple */
.section-head { margin-bottom: clamp(32px, 5vw, 52px); }
.section-head h2 { margin: 0; }
.section-head--center { text-align: center; max-width: 640px; margin-inline: auto; }
.section-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ============================================================
   4. BOUTONS & LIENS
   ============================================================ */
.btn,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt,
button[type="submit"], input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	padding: 15px 30px;
	border: 1px solid var(--brown);
	border-radius: var(--radius);
	background: var(--brown);
	color: #fff;
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
button[type="submit"]:hover, input[type="submit"]:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

/* Bouton secondaire : contour fin */
.btn--outline {
	background: transparent;
	color: var(--brown);
	border-color: var(--brown);
}
.btn--outline:hover { background: var(--brown); color: #fff; }

/* Lien texte souligné, élégant */
.link-underline {
	font-family: var(--font-body);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	padding-bottom: 3px;
	transition: color var(--transition), border-color var(--transition);
}
.link-underline:hover { color: var(--gold-dark); border-color: var(--gold-dark); }

/* ============================================================
   5. FORMULAIRES
   ============================================================ */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"], input[type="url"],
textarea, select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single {
	width: 100%;
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px 16px;
	transition: border-color var(--transition);
}
textarea { min-height: 150px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); }
label { font-weight: 500; font-size: 0.85rem; }

/* ============================================================
   6. EN-TÊTE
   ============================================================ */
.announcement {
	background: var(--brown);
	color: var(--bg);
	font-size: 0.74rem;
	letter-spacing: 0.04em;
	padding: 9px 14px;
}
.announcement__inner {
	max-width: var(--container);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	flex-wrap: wrap;
}
.announcement__item { display: inline-flex; align-items: center; gap: 7px; }
.announcement__item svg { opacity: 0.85; }
.announcement__sep { width: 1px; height: 12px; background: rgba(255, 248, 237, 0.3); }
@media (max-width: 680px) {
	.announcement { font-size: 0.68rem; letter-spacing: 0.02em; }
	.announcement__inner { gap: 12px; }
	.announcement__item--mid, .announcement__sep { display: none; }
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}
.header-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	max-width: var(--container);
	margin-inline: auto;
	padding: 14px 28px;
}
.site-branding { justify-self: start; }
.site-logo img { max-height: 58px; width: auto; }
.site-title {
	font-family: var(--font-title);
	font-size: 1.85rem;
	font-weight: 600;
	line-height: 1;
	margin: 0;
	color: var(--ink);
	letter-spacing: 0.01em;
}
.site-title a { color: inherit; }
.site-title small {
	display: block;
	font-family: var(--font-body);
	font-size: 0.56rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 500;
	margin-top: 6px;
}

.primary-nav { justify-self: center; }
.primary-nav ul { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
.primary-nav a {
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
	padding: 4px 0;
	position: relative;
}
.primary-nav a::after {
	content: "";
	position: absolute;
	left: 0; bottom: -2px;
	width: 0; height: 1px;
	background: var(--gold-dark);
	transition: width var(--transition);
}
.primary-nav a:hover::after,
.primary-nav .current-menu-item > a::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 2px; justify-self: end; }
.header-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	color: var(--ink);
	position: relative;
	transition: color var(--transition);
}
.header-icon:hover { color: var(--gold-dark); }
.header-icon svg { width: 20px; height: 20px; }
.cart-count {
	position: absolute;
	top: 6px; right: 2px;
	min-width: 16px; height: 16px;
	padding: 0 4px;
	background: var(--gold);
	color: #fff;
	font-size: 0.6rem;
	font-weight: 600;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-body);
}

.menu-toggle { display: none; background: none; border: none; padding: 8px; color: var(--ink); cursor: pointer; }
.menu-toggle svg { width: 26px; height: 26px; }

.search-panel { display: none; border-top: 1px solid var(--line); background: var(--bg); }
.search-panel.is-open { display: block; }
.search-panel .container { padding-block: 20px; }
.search-panel form > div { display: flex; gap: 12px; }

/* ============================================================
   7. HERO (image + texte, sans dégradé ni ombre)
   ============================================================ */
.hero { background: var(--bg); }
.hero__inner {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	align-items: center;
	gap: clamp(36px, 6vw, 84px);
	padding: clamp(40px, 6vw, 84px) 0;
}
.hero__content { max-width: 460px; }
.hero h1 { margin-bottom: 14px; font-weight: 600; }
.hero h1 em { font-style: italic; color: var(--gold-dark); }
.hero__subtitle {
	font-family: var(--font-title);
	font-style: italic;
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	color: var(--brown);
	margin: 0 0 18px;
}
.hero__text { font-size: 1.02rem; color: var(--muted); margin-bottom: 30px; }
.hero__actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   8. CATÉGORIES (image + libellé dessous, sans surimpression)
   ============================================================ */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cat { display: block; }
.cat__img { aspect-ratio: 3 / 4; overflow: hidden; background: var(--sand); margin-bottom: 14px; }
.cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.cat:hover .cat__img img { transform: scale(1.04); }
.cat__name {
	font-family: var(--font-title);
	font-size: 1.25rem;
	color: var(--ink);
	margin: 0;
}
.cat:hover .cat__name { color: var(--gold-dark); }

/* ============================================================
   9. PRODUITS WOOCOMMERCE (épuré : image, nom, prix)
   ============================================================ */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px 24px;
	margin: 0 0 48px !important;
	padding: 0 !important;
	list-style: none;
}
/* Neutralise le clearfix WooCommerce (::before/::after) qui, en CSS grid,
   crée des cellules fantômes et décale les produits d'une case. */
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after {
	content: none !important;
	display: none !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	background: none;
	border: none;
	padding: 0 !important;
	text-align: left;
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.woocommerce ul.products li.product a img {
	margin: 0 0 16px !important;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
	background: var(--sand);
	border-radius: var(--radius);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-body) !important;
	font-size: 0.92rem !important;
	font-weight: 400 !important;
	color: var(--ink);
	padding: 0 !important;
	margin: 0 0 6px !important;
	line-height: 1.4;
	/* Réserve 2 lignes pour aligner tous les prix */
	min-height: 2.55em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.woocommerce ul.products li.product .price {
	color: var(--ink) !important;
	font-weight: 600;
	font-size: 0.92rem;
	font-family: var(--font-body);
}
.woocommerce ul.products li.product .price del { color: var(--muted); font-weight: 400; opacity: 1; margin-right: 8px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--gold-dark); }
.woocommerce ul.products li.product .star-rating { margin: 8px 0 0; color: var(--gold); font-size: 0.8em; }

/* Ajouter au panier : bouton sobre, identique sur chaque carte, aligné en bas */
.woocommerce ul.products li.product .price { margin-bottom: 12px; }
.woocommerce ul.products li.product .button {
	display: block;
	width: 100%;
	margin: auto 0 0 !important; /* pousse le bouton en bas pour aligner toutes les cartes */
	padding: 11px 14px !important;
	background: transparent !important;
	border: 1px solid var(--line) !important;
	color: var(--brown) !important;
	font-size: 0.7rem !important;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius: var(--radius) !important;
	text-align: center;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.woocommerce ul.products li.product .button:hover {
	background: var(--brown) !important;
	border-color: var(--brown) !important;
	color: #fff !important;
}
.woocommerce ul.products li.product .added_to_cart {
	display: block;
	width: 100%;
	margin-top: 8px !important;
	text-align: center;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-dark);
	border-bottom: 1px solid var(--line);
	padding-bottom: 4px;
}

/* Étiquette promo : discrète, en texte */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	position: absolute;
	background: none;
	color: var(--gold-dark);
	border: none;
	border-radius: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	min-height: auto; min-width: auto;
	padding: 0;
	top: 12px; left: 12px;
	margin: 0;
	line-height: 1;
}
.woocommerce span.onsale::before { content: "— "; }

/* Fiche produit */
.woocommerce div.product .product_title { font-family: var(--font-title); font-weight: 500; }
.woocommerce div.product p.price, .woocommerce div.product span.price {
	color: var(--ink);
	font-weight: 500;
	font-size: 1.4rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--line); }
.woocommerce .quantity .qty { width: 76px; text-align: center; }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
	border-top-color: var(--gold) !important;
	background: var(--sand);
	border-radius: 0;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--gold-dark); }

/* Boutique : grille pleine largeur, filtres en haut (pas de colonne lourde) */
.shop-layout { display: block; }
.shop-toolbar {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 16px;
	margin-bottom: 36px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
}
.woocommerce .woocommerce-result-count { color: var(--muted); margin: 0; font-size: 0.85rem; }
.woocommerce .woocommerce-ordering select { width: auto; }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul { border: none; gap: 4px; display: flex; }
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--white);
	padding: 10px 16px;
	color: var(--ink);
	font-size: 0.85rem;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ============================================================
   10. BLOC ÉDITORIAL (histoire de la boutique)
   ============================================================ */
.editorial { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(36px, 6vw, 80px); }
.editorial--reverse .editorial__media { order: 2; }
.editorial__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.editorial__media img { width: 100%; height: 100%; object-fit: cover; }
.editorial__body { max-width: 460px; }
.editorial__body p { color: var(--ink); }
.signature {
	font-family: var(--font-title);
	font-style: italic;
	font-size: 1.4rem;
	color: var(--gold-dark);
	margin-top: 18px;
}

/* ============================================================
   11. BANDE RÉASSURANCE (texte sobre, une ligne)
   ============================================================ */
.reassurance { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.reassurance__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding: 36px 0;
	text-align: center;
}
.reassurance__item h4 { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 6px; color: var(--ink); }
.reassurance__item p { margin: 0; font-size: 0.88rem; color: var(--muted); }
.reassurance__item + .reassurance__item { border-left: 1px solid var(--line); }

/* ============================================================
   12. PAGES
   ============================================================ */
.page-hero {
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	padding: clamp(40px, 6vw, 80px) 0 clamp(28px, 4vw, 44px);
}
.page-hero .container { max-width: var(--container-narrow); }
.page-hero h1 { margin: 0 0 6px; }
.page-hero p { color: var(--muted); margin: 0; }
.page-hero--center { text-align: center; }

.content-narrow { max-width: var(--container-narrow); margin-inline: auto; }
.entry-content { font-size: 1.02rem; }
.entry-content h2 { margin-top: 1.8em; }
.entry-content h3 { margin-top: 1.5em; }
.entry-content a { text-decoration: underline; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li { margin-bottom: 0.4em; }

.woocommerce-breadcrumb {
	font-size: 0.78rem !important;
	letter-spacing: 0.04em;
	color: var(--muted) !important;
	margin-bottom: 28px !important;
}
.woocommerce-breadcrumb a { color: var(--brown); }

/* À propos / contact */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 72px); align-items: center; }
.about-media { overflow: hidden; aspect-ratio: 4/5; background: var(--sand); }
.about-media img { width: 100%; height: 100%; object-fit: cover; }

.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 5vw, 64px); align-items: start; }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: none; }
.contact-list strong { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }

/* ============================================================
   13. PIED DE PAGE
   ============================================================ */
.site-footer { background: var(--bg); border-top: 1px solid var(--line); padding-top: clamp(44px, 5vw, 68px); font-size: 0.9rem; color: var(--ink); }
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--gold-dark); }

.footer-top {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; flex-wrap: wrap;
	padding-bottom: 32px;
	margin-bottom: 44px;
	border-bottom: 1px solid var(--line);
}
.footer-name {
	font-family: var(--font-title);
	font-size: 1.7rem;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 4px;
}
.footer-tagline { font-family: var(--font-title); font-style: italic; color: var(--brown); margin: 0; }
.footer-social { display: flex; gap: 14px; }
.footer-social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border: 1px solid var(--line); border-radius: 50%;
	color: var(--brown);
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.footer-social a:hover { background: var(--brown); color: #fff; border-color: var(--brown); }
.footer-social svg { width: 19px; height: 19px; }

.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding-bottom: 40px; }
.footer-col h4 {
	font-family: var(--font-body);
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 600;
	margin-bottom: 18px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 11px; }
.footer-contact-line { margin-bottom: 12px; color: var(--ink); line-height: 1.5; }
.footer-contact-line span { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }

.footer-payments {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	padding: 22px 0;
	border-top: 1px solid var(--line);
}
.footer-payments__label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--ink); }
.footer-payments__label svg { color: var(--gold-dark); }
.footer-payments__cards { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-payments__cards span {
	font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
	color: var(--muted);
	border: 1px solid var(--line); border-radius: 4px;
	padding: 5px 9px; background: var(--white);
}

.footer-bottom { border-top: 1px solid var(--line); padding: 22px 0; font-size: 0.78rem; color: var(--muted); }
.footer-bottom__inner { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 22px; list-style: none; padding: 0; margin: 0; }

/* ============================================================
   14. UTILITAIRES
   ============================================================ */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.muted { color: var(--muted); }
.lead { font-size: 1.1rem; color: var(--muted); }
.btn--block { width: 100%; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; background: #fff; padding: 10px 16px; z-index: 999; }

/* ============================================================
   15. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr); }
	.cats { grid-template-columns: repeat(4, 1fr); gap: 16px; }
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 860px) {
	.primary-nav {
		position: fixed; inset: 0 0 0 auto;
		width: min(82vw, 330px);
		background: var(--bg);
		border-left: 1px solid var(--line);
		transform: translateX(100%);
		transition: transform 300ms ease;
		padding: 96px 32px 32px;
		overflow-y: auto;
		margin-left: 0;
	}
	.primary-nav.is-open { transform: translateX(0); }
	.primary-nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
	.primary-nav ul li { width: 100%; border-bottom: 1px solid var(--line); }
	.primary-nav a { display: block; padding: 18px 0; width: 100%; letter-spacing: 0.16em; }
	.menu-toggle { display: inline-flex; }
	.nav-backdrop { position: fixed; inset: 0; background: rgba(44,37,32,0.4); opacity: 0; visibility: hidden; transition: opacity 300ms ease; z-index: 99; }
	.nav-backdrop.is-open { opacity: 1; visibility: visible; }

	.header-inner { grid-template-columns: auto 1fr; gap: 12px; }
	.site-title { font-size: 1.5rem; }
	.hero__inner { grid-template-columns: 1fr; gap: 32px; }
	.hero__media { order: -1; aspect-ratio: 16/12; }
	.editorial, .editorial--reverse { grid-template-columns: 1fr; gap: 28px; }
	.editorial--reverse .editorial__media { order: 0; }
	.about-grid, .contact-grid { grid-template-columns: 1fr; gap: 28px; }
	.reassurance__row { grid-template-columns: 1fr; gap: 0; }
	.reassurance__item { padding: 22px 0; border-top: 1px solid var(--line); }
	.reassurance__item:first-child { border-top: none; }
	.reassurance__item + .reassurance__item { border-left: none; }
	.cats { grid-template-columns: repeat(2, 1fr); gap: 18px; }
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; gap: 28px; }
	.footer-bottom { flex-direction: column; text-align: center; }
	.section-head__row { align-items: flex-start; }
}