/**
 * Pharmacos Beauty — styles complémentaires.
 *
 * theme.json couvre les tokens de design (couleurs, typo, spacing) et les
 * styles de blocs natifs. Ce fichier couvre : les composants propres au
 * thème (header, hero, cartes produit...), les templates WooCommerce
 * classiques (boutique, fiche produit, panier) qui ne passent pas par
 * theme.json, et les ajustements responsive.
 *
 * Convention : propriétés logiques CSS (margin-inline, padding-inline,
 * inset-inline, text-align:start...) plutôt que physiques, pour rester
 * prêt pour une éventuelle version arabe (RTL) sans réécriture (brief §5).
 *
 * Points de rupture testés : 390px / 768px / 1280px / 1440px (brief §29).
 *
 * @package Pharmacos_Beauty
 */

/* -------------------------------------------------------------------- */
/* Accessibilité de base                                                  */
/* -------------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.pharmacos-skip-link {
	position: absolute;
	inset-block-start: -100px;
	inset-inline-start: 0;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	padding: 12px 20px;
	z-index: 100000;
	transition: inset-block-start 0.2s ease;
}

.pharmacos-skip-link:focus {
	inset-block-start: 0;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------- */
/* Header                                                                 */
/* -------------------------------------------------------------------- */

.pharmacos-header {
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.pharmacos-announcement {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	text-align: center;
	font-size: var(--wp--preset--font-size--caption);
	letter-spacing: 0.02em;
	padding-block: 8px;
	padding-inline: var(--wp--preset--spacing--50);
}

.pharmacos-header-row {
	padding-block: 16px;
	gap: 24px;
	flex-wrap: wrap;
}

.pharmacos-header-end {
	gap: 16px;
	align-items: center;
}

.pharmacos-search-toggle summary {
	list-style: none;
	cursor: pointer;
	color: var(--wp--preset--color--secondary);
	display: flex;
}
.pharmacos-search-toggle summary::-webkit-details-marker {
	display: none;
}
.pharmacos-search-toggle[open] .pharmacos-search-form {
	position: absolute;
	inset-inline-end: 0;
	margin-block-start: 8px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: 8px;
	display: flex;
	gap: 8px;
	z-index: 10;
}
.pharmacos-search-toggle {
	position: relative;
}

.pharmacos-search-input {
	padding: 10px 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	min-width: 220px;
}

.pharmacos-account-link,
.pharmacos-cart-link {
	position: relative;
	color: var(--wp--preset--color--secondary);
	display: inline-flex;
}

.pharmacos-cart-count {
	position: absolute;
	inset-block-start: -6px;
	inset-inline-end: -8px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: 10px;
	line-height: 1;
	border-radius: 999px;
	min-width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2px;
}

/* -------------------------------------------------------------------- */
/* Hero                                                                   */
/* -------------------------------------------------------------------- */

.pharmacos-hero {
	padding-inline: var(--wp--preset--spacing--50);
	overflow: hidden;
}

.pharmacos-hero-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1fr);
	align-items: center;
	gap: 32px;
	padding-block: var(--wp--preset--spacing--70);
}

.pharmacos-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
	background: var(--wp--preset--color--base);
	border-radius: 999px;
	padding: 6px 16px;
	margin-block-end: 16px;
}

.pharmacos-hero-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display);
	color: var(--wp--preset--color--secondary);
	margin-block: 0 12px;
}

.pharmacos-hero-subtitle {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--contrast-light);
	margin-block-end: 24px;
	max-width: 46ch;
}

.pharmacos-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

.pharmacos-hero-cta {
	display: inline-block;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	padding: 14px 32px;
	font-weight: 600;
	text-decoration: none;
}
.pharmacos-hero-cta:hover {
	background: var(--wp--preset--color--primary-dark);
}

.pharmacos-hero-cta-secondary {
	display: inline-block;
	background: transparent;
	color: var(--wp--preset--color--secondary);
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 999px;
	padding: 13px 28px;
	font-weight: 600;
	text-decoration: none;
}
.pharmacos-hero-cta-secondary:hover {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}

.pharmacos-hero-image-col {
	display: flex;
	justify-content: center;
}

.pharmacos-hero-image {
	width: 100%;
	max-width: 320px;
	height: auto;
	object-fit: contain;
}

.pharmacos-hero-benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pharmacos-hero-benefit {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.pharmacos-hero-benefit-icon {
	flex: none;
	display: inline-flex;
	color: var(--wp--preset--color--primary-dark);
	margin-block-start: 2px;
}

.pharmacos-hero-benefit-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: var(--wp--preset--color--contrast-light);
	font-size: var(--wp--preset--font-size--small);
}
.pharmacos-hero-benefit-body strong {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
}

@media (max-width: 960px) {
	.pharmacos-hero-layout {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.pharmacos-hero-actions {
		justify-content: center;
	}
	.pharmacos-hero-benefits {
		text-align: start;
	}
}

/* -------------------------------------------------------------------- */
/* Sections génériques                                                    */
/* -------------------------------------------------------------------- */

.pharmacos-section-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	text-align: center;
	margin-block-end: 32px;
}

.pharmacos-section-heading {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-block-end: 24px;
}
.pharmacos-section-heading .pharmacos-section-title {
	margin-block-end: 0;
	text-align: start;
}
.pharmacos-section-link {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	white-space: nowrap;
}

.pharmacos-empty-notice {
	text-align: center;
	color: var(--wp--preset--color--contrast-light);
	padding-block: 32px;
}

/*
 * Conteneur centré utilisé à l'intérieur des sections pleine largeur
 * (align:full) du header, du footer et des patterns de la page d'accueil —
 * la couleur de fond de la section touche les deux bords de l'écran, mais
 * son contenu réel reste lisible et centré (largeur cohérente avec
 * .pharmacos-shop-layout / .pharmacos-related-products, déjà à 1400px).
 * Corrige le bug d'affichage où tout le contenu se retrouvait limité à
 * 720px (largeur de contenu par défaut de theme.json, prévue pour du texte
 * éditorial, pas pour ces sections pleine largeur) tant qu'aucun bloc
 * Navigation/Group n'utilisait explicitement l'alignement pleine largeur.
 */
.pharmacos-container {
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
}

.pharmacos-hero,
.pharmacos-trust-badges,
.pharmacos-categories,
.pharmacos-best-sellers,
.pharmacos-new-arrivals,
.pharmacos-science-story,
.pharmacos-featured-product,
.pharmacos-why-choose,
.pharmacos-testimonials,
.pharmacos-newsletter,
.pharmacos-promo-banner {
	padding-block: var(--wp--preset--spacing--70);
}

/* -------------------------------------------------------------------- */
/* Confiance & certifications                                             */
/* -------------------------------------------------------------------- */

.pharmacos-trust-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pharmacos-trust-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	max-width: 120px;
	text-align: center;
}
.pharmacos-trust-icon {
	color: var(--wp--preset--color--primary);
}
.pharmacos-trust-label {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--base);
	opacity: 0.9;
}

/* -------------------------------------------------------------------- */
/* Catégories                                                             */
/* -------------------------------------------------------------------- */

.pharmacos-categories-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.pharmacos-category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	text-align: center;
}
.pharmacos-category-image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 16px;
	overflow: hidden;
	background: var(--wp--preset--color--base);
	box-shadow: 0 4px 24px rgba(26, 64, 51, 0.06);
}
.pharmacos-category-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pharmacos-category-name {
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
}

/* -------------------------------------------------------------------- */
/* Cartes produit (partagées : homepage, boutique, recherche, 404)       */
/* -------------------------------------------------------------------- */

ul.products,
.pharmacos-product-grid,
.pharmacos-search-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pharmacos-product-card {
	background: var(--wp--preset--color--base);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(26, 64, 51, 0.06);
	display: flex;
	flex-direction: column;
}
.pharmacos-product-card-link {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.pharmacos-product-image {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--base-alt);
}
.pharmacos-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pharmacos-product-badges {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	display: flex;
	gap: 6px;
}
.pharmacos-badge {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	border-radius: 999px;
	color: var(--wp--preset--color--base);
}
.pharmacos-badge-sale { background: var(--wp--preset--color--primary); }
.pharmacos-badge-new { background: var(--wp--preset--color--secondary); }
.pharmacos-badge-outofstock { background: var(--wp--preset--color--contrast-light); }

.pharmacos-product-info {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}
.pharmacos-product-cat {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--contrast-light);
}
.pharmacos-product-title {
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
}
.pharmacos-product-price {
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}
.pharmacos-product-price del {
	opacity: 0.5;
	font-weight: 400;
	margin-inline-end: 6px;
}
.pharmacos-product-price ins {
	text-decoration: none;
}
.pharmacos-product-rating {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--wp--preset--color--contrast-light);
}
.pharmacos-product-rating svg {
	color: var(--wp--preset--color--primary);
}
.pharmacos-product-add-to-cart {
	padding: 0 16px 16px;
}
.pharmacos-product-add-to-cart .button {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	padding: 10px;
	text-decoration: none;
	font-weight: 600;
}
.pharmacos-product-add-to-cart .button:hover {
	background: var(--wp--preset--color--primary);
}
.pharmacos-product-add-to-cart .button.loading {
	opacity: 0.6;
}

/* -------------------------------------------------------------------- */
/* Science story                                                         */
/* -------------------------------------------------------------------- */

.pharmacos-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}
.pharmacos-science-image img {
	border-radius: 16px;
}

/* -------------------------------------------------------------------- */
/* Pourquoi nous choisir                                                  */
/* -------------------------------------------------------------------- */

.pharmacos-why-choose-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
	gap: 48px;
	align-items: start;
}

.pharmacos-why-choose-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	margin-block: 8px 16px;
}
.pharmacos-why-choose-title mark {
	background: none;
	color: var(--wp--preset--color--primary-dark);
}

.pharmacos-why-choose-stats {
	list-style: none;
	margin: 24px 0 0;
	padding: 24px 0 0;
	border-block-start: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}
.pharmacos-why-choose-stats li {
	display: flex;
	flex-direction: column;
}
.pharmacos-why-choose-stats strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--secondary);
}
.pharmacos-why-choose-stats span {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--contrast-light);
}

.pharmacos-why-choose-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.pharmacos-why-choose-item {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pharmacos-why-choose-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--primary-dark);
	margin-block-end: 4px;
}
.pharmacos-why-choose-item p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-light);
}

@media (max-width: 960px) {
	.pharmacos-why-choose-layout {
		grid-template-columns: 1fr;
	}
	.pharmacos-why-choose-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 560px) {
	.pharmacos-why-choose-grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------- */
/* Produit du mois                                                        */
/* -------------------------------------------------------------------- */

.pharmacos-featured-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 48px;
	align-items: center;
}

.pharmacos-featured-image-col {
	position: relative;
	display: flex;
	justify-content: center;
}
.pharmacos-featured-image-col img {
	max-width: 280px;
	height: auto;
}
.pharmacos-featured-price {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-start: 0;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-weight: 700;
	border-radius: 999px;
	padding: 10px 20px;
	z-index: 1;
}

.pharmacos-featured-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	margin-block: 4px 16px;
}

.pharmacos-featured-description {
	opacity: 0.85;
	max-width: 56ch;
	margin-block-end: 24px;
}
.pharmacos-featured-description p:last-child {
	margin-block-end: 0;
}

.pharmacos-featured-benefits {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 24px;
}
.pharmacos-featured-benefits li {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	padding: 14px 16px;
}
.pharmacos-featured-benefit-icon {
	flex: none;
	display: inline-flex;
	color: var(--wp--preset--color--primary);
}

.pharmacos-hero-cta-secondary-inverse {
	color: var(--wp--preset--color--base);
	border-color: rgba(255, 255, 255, 0.5);
}
.pharmacos-hero-cta-secondary-inverse:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--secondary);
}

@media (max-width: 960px) {
	.pharmacos-featured-layout {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.pharmacos-featured-image-col {
		order: -1;
	}
	.pharmacos-featured-benefits {
		grid-template-columns: 1fr;
	}
	.pharmacos-hero-actions {
		justify-content: center;
	}
}

/* -------------------------------------------------------------------- */
/* Témoignages                                                           */
/* -------------------------------------------------------------------- */

.pharmacos-testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.pharmacos-testimonial {
	background: var(--wp--preset--color--base-alt);
	border-radius: 16px;
	padding: 24px;
	margin: 0;
}
.pharmacos-testimonial-rating {
	color: var(--wp--preset--color--primary);
	margin-block-end: 12px;
}
.pharmacos-testimonial-text {
	margin: 0 0 12px;
	font-style: italic;
}
.pharmacos-testimonial-author {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}
.pharmacos-testimonial-product {
	font-weight: 400;
	color: var(--wp--preset--color--contrast-light);
}

/* -------------------------------------------------------------------- */
/* Newsletter                                                            */
/* -------------------------------------------------------------------- */

.pharmacos-newsletter {
	text-align: center;
}
.pharmacos-newsletter-form {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-block-start: 24px;
}
.pharmacos-newsletter-form input[type="email"] {
	padding: 14px 20px;
	border-radius: 999px;
	border: none;
	min-width: 280px;
}
.pharmacos-newsletter-form button {
	border: none;
	cursor: pointer;
}
.pharmacos-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.pharmacos-newsletter-notice {
	font-weight: 600;
	margin-block-end: 12px;
}

/* -------------------------------------------------------------------- */
/* Bannière promo                                                        */
/* -------------------------------------------------------------------- */

.pharmacos-promo-link {
	display: block;
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
}
.pharmacos-promo-link img {
	width: 100%;
	display: block;
}
.pharmacos-promo-title {
	position: absolute;
	inset-block-end: 24px;
	inset-inline-start: 24px;
	background: rgba(26, 64, 51, 0.85);
	color: var(--wp--preset--color--base);
	padding: 10px 20px;
	border-radius: 999px;
	font-weight: 600;
}

/* -------------------------------------------------------------------- */
/* Footer                                                                 */
/* -------------------------------------------------------------------- */

.pharmacos-footer {
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
}
.pharmacos-footer-columns {
	gap: 32px;
	margin-block-end: 48px;
}
.pharmacos-footer-heading {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--base);
	margin-block-end: 16px;
}
.pharmacos-footer-tagline {
	opacity: 0.85;
	font-size: var(--wp--preset--font-size--small);
	margin-block-start: 16px;
}
.pharmacos-footer-nav a,
.pharmacos-contact-info a,
.pharmacos-social-links a {
	color: var(--wp--preset--color--base);
	opacity: 0.85;
	text-decoration: none;
}
.pharmacos-footer-nav a:hover,
.pharmacos-contact-info a:hover,
.pharmacos-social-links a:hover {
	opacity: 1;
	text-decoration: underline;
}
.pharmacos-contact-info {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}
.pharmacos-social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 12px;
}
.pharmacos-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: var(--wp--preset--color--base);
	opacity: 0.9;
}
.pharmacos-social-link:hover {
	opacity: 1;
	background: rgba(255, 255, 255, 0.1);
	text-decoration: none;
}
.pharmacos-footer-bottom {
	border-block-start: 1px solid rgba(255, 255, 255, 0.15);
	padding-block-start: 24px;
	font-size: var(--wp--preset--font-size--caption);
	opacity: 0.75;
}

/* -------------------------------------------------------------------- */
/* Boutique — archives / taxonomie                                       */
/* -------------------------------------------------------------------- */

.pharmacos-shop-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 40px;
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
	align-items: start;
}
.pharmacos-shop-main {
	grid-column: 2;
	grid-row: 1;
}
.pharmacos-shop-sidebar {
	grid-column: 1;
	grid-row: 1;
}
.pharmacos-shop-layout:has(.pharmacos-shop-sidebar) .pharmacos-shop-main {
	grid-column: 2;
}
.pharmacos-shop-layout:not(:has(.pharmacos-shop-sidebar)) {
	grid-template-columns: 1fr;
}
.pharmacos-shop-layout:not(:has(.pharmacos-shop-sidebar)) .pharmacos-shop-main {
	grid-column: 1;
}

.pharmacos-archive-header {
	margin-block-end: 32px;
}
.pharmacos-archive-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxx-large);
}
.pharmacos-category-banner img {
	width: 100%;
	border-radius: 16px;
	margin-block-end: 24px;
}
.pharmacos-archive-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-block-end: 24px;
	flex-wrap: wrap;
	gap: 12px;
}
.pharmacos-empty-category {
	text-align: center;
	padding-block: 64px;
	color: var(--wp--preset--color--contrast-light);
}

.pharmacos-widget {
	margin-block-end: 32px;
}
.pharmacos-widget-title {
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-block-end: 12px;
}

.woocommerce-pagination,
.pharmacos-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-block-start: 40px;
	list-style: none;
	padding: 0;
}
.pharmacos-load-more-button {
	display: block;
	margin: 40px auto 0;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: 999px;
	padding: 14px 32px;
	font-weight: 600;
	cursor: pointer;
}

/* -------------------------------------------------------------------- */
/* Fiche produit                                                         */
/* -------------------------------------------------------------------- */

.product {
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}
.woocommerce-product-gallery {
	grid-column: 1;
}
.summary.entry-summary {
	grid-column: 2;
}
.summary.entry-summary .price {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	color: var(--wp--preset--color--secondary);
}
.pharmacos-pdp-trust-strip {
	list-style: none;
	margin: 24px 0;
	padding: 16px;
	background: var(--wp--preset--color--base-alt);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: var(--wp--preset--font-size--small);
}
.pharmacos-pdp-trust-strip li {
	display: flex;
	align-items: center;
	gap: 8px;
}
.pharmacos-pdp-trust-strip svg {
	color: var(--wp--preset--color--primary);
	flex-shrink: 0;
}

.pharmacos-variation-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-end: 12px;
}
.pharmacos-variation-chip {
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	border-radius: 999px;
	padding: 8px 18px;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--small);
}
.pharmacos-variation-chip[aria-pressed="true"] {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.pharmacos-share {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-block-start: 24px;
	font-size: var(--wp--preset--font-size--caption);
}
.pharmacos-share a,
.pharmacos-share-copy {
	color: var(--wp--preset--color--contrast-light);
	text-decoration: none;
	border: none;
	background: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: inherit;
}
.pharmacos-share a:hover,
.pharmacos-share-copy:hover {
	color: var(--wp--preset--color--primary);
}

/* Onglets produit — largeur éditoriale confortable pour composition/mode
   d'emploi (brief §18). */
.woocommerce-tabs {
	max-width: 720px;
	margin-block-start: 64px;
	line-height: 1.7;
}
.pharmacos-product-field ul {
	padding-inline-start: 20px;
}
.pharmacos-accordion .pharmacos-accordion-trigger {
	display: block;
	width: 100%;
	text-align: start;
	background: var(--wp--preset--color--base-alt);
	border: none;
	border-radius: 8px;
	padding: 14px 16px;
	margin-block-end: 8px;
	font-weight: 600;
	cursor: pointer;
}
.pharmacos-accordion .pharmacos-accordion-panel {
	padding: 8px 16px 20px;
}

.pharmacos-related-products {
	max-width: 1400px;
	margin: 64px auto 0;
	padding-inline: var(--wp--preset--spacing--50);
}

/* -------------------------------------------------------------------- */
/* Recherche & 404                                                       */
/* -------------------------------------------------------------------- */

.pharmacos-search-meta {
	color: var(--wp--preset--color--contrast-light);
	margin-block-end: 24px;
}
.pharmacos-search-result {
	background: var(--wp--preset--color--base-alt);
	border-radius: 16px;
	padding: 16px;
}
.pharmacos-search-result-link {
	text-decoration: none;
	color: inherit;
}

.pharmacos-404 {
	text-align: center;
	padding-block: 64px;
}
.pharmacos-404-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxx-large);
}
.pharmacos-404-shop-link {
	margin-block: 24px;
}
.pharmacos-404-subheading {
	margin-block-start: 48px;
}

/* -------------------------------------------------------------------- */
/* Responsive — 1280 / 768 / 390 (desktop 1440 = comportement par défaut) */
/* -------------------------------------------------------------------- */

@media (max-width: 1280px) {
	.pharmacos-categories-grid,
	ul.products,
	.pharmacos-product-grid,
	.pharmacos-search-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.pharmacos-testimonials-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.pharmacos-shop-layout {
		grid-template-columns: 1fr;
	}
	.pharmacos-shop-sidebar {
		grid-column: 1;
		grid-row: 2;
	}
	.product {
		grid-template-columns: 1fr;
	}
	.woocommerce-product-gallery,
	.summary.entry-summary {
		grid-column: 1;
	}
	.pharmacos-categories-grid,
	ul.products,
	.pharmacos-product-grid,
	.pharmacos-search-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.pharmacos-testimonials-grid {
		grid-template-columns: 1fr;
	}
	.pharmacos-footer-columns {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 480px) {
	.pharmacos-categories-grid,
	ul.products,
	.pharmacos-product-grid,
	.pharmacos-search-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	.pharmacos-hero-title {
		font-size: 2.25rem;
	}
	.pharmacos-footer-columns {
		grid-template-columns: 1fr !important;
	}
	.pharmacos-newsletter-form input[type="email"] {
		min-width: 0;
		width: 100%;
	}
}