/* ==========================================================================
   Boutique sur-mesure (/boutique/) — inc/momkin-shop.php
   Portée : #momkin-shop. Tokens du thème (mode sombre automatique).
   ========================================================================== */
.momkin-has-shop { overflow-x: clip; }

#momkin-shop {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin: 0 calc(50% - 50vw);
	background: var(--mk-paper);
	color: var(--mk-text);
	font-family: var(--mk-font-body);
	font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body);
}

#momkin-shop *,
#momkin-shop *::before,
#momkin-shop *::after { box-sizing: border-box; }

#momkin-shop :where(h1, h2, h3, p, ul, li, figure) { margin: 0; padding: 0; }
#momkin-shop :where(ul[role="list"]) { list-style: none; }
#momkin-shop img { display: block; max-width: 100%; height: auto; }
#momkin-shop a:focus-visible { outline: 2px solid var(--mk-lagoon); outline-offset: 3px; border-radius: 4px; }

#momkin-shop .ms-wrap { width: min(var(--mk-container, 1200px), 100% - 2 * var(--mk-gutter)); margin-inline: auto; }
#momkin-shop .ms-sec { padding-block: var(--mk-section-y); }
#momkin-shop .ms-sec--sand { background: var(--mk-sand); }
/* Messages WooCommerce : la zone n'existe visuellement que s'il y a un message */
#momkin-shop .ms-notices:not(:has(.woocommerce-message, .woocommerce-error, .woocommerce-info, .wc-block-components-notice-banner)) { display: none; }

/* Typo */
#momkin-shop .ms-kicker {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: var(--mk-sp-3);
	font-family: var(--mk-font-title);
	font-style: italic;
	font-size: 1.0625rem;
	color: var(--mk-terra-deep);
}
#momkin-shop .ms-kicker::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--mk-saffron), var(--mk-terra)); }
#momkin-shop .ms-h1,
#momkin-shop .ms-h2 { font-family: var(--mk-font-title); font-weight: 600; letter-spacing: -.015em; line-height: 1.1; color: var(--mk-heading); text-wrap: balance; }
#momkin-shop .ms-h1 { font-size: var(--mk-fs-display); }
#momkin-shop .ms-h2 { font-size: var(--mk-fs-h2); margin-bottom: var(--mk-sp-6); }
#momkin-shop .ms-h2 a { color: inherit; text-decoration: none; }
#momkin-shop .ms-lead { font-size: var(--mk-fs-lead); line-height: 1.65; }

/* Bandes encre */
#momkin-shop .ms-ink { position: relative; isolation: isolate; overflow: hidden; background: var(--mk-ink); color: var(--mk-text-on-ink); }
#momkin-shop .ms-ink::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 70% at 85% 30%, rgba(31, 122, 140, .35), transparent 70%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(194, 85, 47, .16), transparent 70%); }
#momkin-shop .ms-ink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--mk-saffron), var(--mk-terra)); }
#momkin-shop .ms-ink :is(.ms-h1, .ms-h2, strong) { color: var(--mk-text-on-ink); }
#momkin-shop .ms-ink .ms-lead { color: #D3DEE1; }
#momkin-shop .ms-ink .ms-kicker { color: var(--mk-saffron); }

/* Hero */
#momkin-shop .ms-hero { padding-block: clamp(3.5rem, 2.5rem + 4.5vw, 6rem); }
#momkin-shop .ms-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
#momkin-shop .ms-hero .ms-lead { margin-top: var(--mk-sp-5); max-width: 38ch; }
#momkin-shop .ms-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--mk-sp-6); }
#momkin-shop .ms-chips li { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 100px; background: rgba(251, 247, 241, .07); border: 1px solid var(--mk-border-on-ink); font-size: .9375rem; color: var(--mk-text-on-ink); }
#momkin-shop .ms-chips svg { width: 1.15rem; height: 1.15rem; color: var(--mk-saffron); flex: 0 0 auto; }

#momkin-shop .ms-fan { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 460px; margin-inline: auto; }
#momkin-shop .ms-fan__b { position: absolute; width: 43%; border-radius: 2px 5px 5px 2px; box-shadow: var(--mk-shadow-book); transition: transform .35s var(--mk-ease); }
#momkin-shop .ms-fan__b1 { left: 2%; top: 22%; transform: rotate(-10deg); }
#momkin-shop .ms-fan__b2 { left: 20%; top: 14%; transform: rotate(-3deg); z-index: 3; }
#momkin-shop .ms-fan__b3 { left: 38%; top: 16%; transform: rotate(4deg); z-index: 2; }
#momkin-shop .ms-fan__b4 { left: 50%; top: 24%; transform: rotate(9deg); }
#momkin-shop .ms-fan:hover .ms-fan__b1 { transform: rotate(-13deg) translateX(-6px); }
#momkin-shop .ms-fan:hover .ms-fan__b4 { transform: rotate(14deg) translateX(6px); }

/* Boutons (complète les classes momkin-button du helper d'ajout au panier) */
#momkin-shop .ms-actions { display: flex; flex-wrap: wrap; gap: var(--mk-sp-3); }
#momkin-shop .ms-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 3rem; margin: 0; padding: .75rem 1.5rem;
	border: 0; border-radius: var(--mk-r-md);
	font-family: var(--mk-font-body); font-size: 1rem; font-weight: 600; line-height: 1.2;
	text-decoration: none; text-transform: none; cursor: pointer;
	transition: background-color var(--mk-transition), color var(--mk-transition), box-shadow var(--mk-transition), transform var(--mk-transition);
}
#momkin-shop .ms-btn--large { min-height: 3.5rem; padding: 1rem 2.25rem; font-size: 1.0625rem; }
#momkin-shop .ms-btn--primary { background: var(--mk-terra); color: var(--mk-on-accent); box-shadow: 0 10px 22px -12px rgba(194, 85, 47, .8); }
#momkin-shop .ms-btn--primary:hover { background: var(--mk-terra-deep); color: var(--mk-on-accent); transform: translateY(-1px); }
#momkin-shop .ms-btn--outline { background: transparent; color: var(--mk-heading); box-shadow: inset 0 0 0 1.5px var(--mk-heading); }
#momkin-shop .ms-btn--outline:hover { background: var(--mk-heading); color: var(--mk-paper); }
#momkin-shop .ms-btn--ghost { background: transparent; color: var(--mk-heading); box-shadow: inset 0 0 0 1.5px var(--mk-border-strong); }
#momkin-shop .ms-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--mk-heading); }
#momkin-shop .ms-ink .ms-btn--ghost { color: var(--mk-text-on-ink); box-shadow: inset 0 0 0 1.5px rgba(251, 247, 241, .45); }
#momkin-shop .ms-ink .ms-btn--ghost:hover { background: rgba(251, 247, 241, .1); box-shadow: inset 0 0 0 1.5px var(--mk-text-on-ink); }
#momkin-shop .ms-btn.loading { opacity: .7; cursor: progress; }
#momkin-shop .ms-btn.added::after { content: ""; width: .45rem; height: .8rem; margin-left: .25rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
/* « Voir le panier » : style global dans style.css § 6 (bouton secondaire lisible). */

/* Prix, stock, note */
#momkin-shop .ms-buy { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; }
#momkin-shop .ms-price { font-family: var(--mk-font-title); font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--mk-heading); font-variant-numeric: lining-nums; }
#momkin-shop .ms-price del { margin-right: .4rem; color: var(--mk-text-soft); font-size: .7em; font-weight: 400; }
#momkin-shop .ms-price ins { color: var(--mk-promo); text-decoration: none; }
#momkin-shop .ms-stock { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 600; color: var(--mk-success); }
#momkin-shop .ms-stock::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
#momkin-shop .ms-stock--out-of-stock { color: var(--mk-error); }
#momkin-shop .momkin-rating { display: inline-flex; align-items: center; gap: .5rem; min-height: 1.5rem; color: var(--mk-text-soft); font-size: .875rem; text-decoration: none; }
#momkin-shop .momkin-rating:hover .momkin-rating__count { color: var(--mk-heading); text-decoration: underline; }
#momkin-shop .momkin-rating__stars { position: relative; display: inline-block; width: 5.25rem; height: 1rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23D8CBB8' d='M10 1.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.9l-5.2 2.7 1-5.8L1.6 7.7l5.8-.8z'/%3E%3C/svg%3E") left center / 1.05rem 1rem repeat-x; }
#momkin-shop .momkin-rating__stars > span { position: absolute; inset: 0 auto 0 0; overflow: hidden; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23E0A03C' d='M10 1.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.9l-5.2 2.7 1-5.8L1.6 7.7l5.8-.8z'/%3E%3C/svg%3E") left center / 1.05rem 1rem repeat-x; }

/* Pack */
#momkin-shop .ms-sec--pack { padding-bottom: 0; }
#momkin-shop .ms-pack {
	position: relative; overflow: hidden;
	display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center;
	padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
	background: var(--mk-chalk); border: 1px solid var(--mk-border); border-radius: var(--mk-r-xl);
	box-shadow: 0 30px 60px -40px rgba(14, 44, 54, .5);
}
#momkin-shop .ms-pack::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--mk-saffron), var(--mk-terra)); }
#momkin-shop .ms-pack__media { position: relative; display: block; background: var(--mk-sand); border-radius: var(--mk-r-lg); padding: 10% 18% 8%; }
#momkin-shop .ms-pack__media img { border-radius: 2px 5px 5px 2px; box-shadow: var(--mk-shadow-book); transition: transform .3s var(--mk-ease); }
#momkin-shop .ms-pack__media:hover img { transform: translateY(-6px) rotate(-1deg); }
#momkin-shop .ms-pack__flag { position: absolute; top: 1rem; left: 1rem; z-index: 2; padding: .4rem .8rem; border-radius: 100px; background: var(--mk-promo-bg); color: var(--mk-on-accent); font-size: .875rem; font-weight: 700; }
#momkin-shop .ms-pack .ms-h2 { margin-bottom: var(--mk-sp-4); }
#momkin-shop .ms-pack__text { font-size: var(--mk-fs-lead); line-height: 1.6; max-width: 46ch; }
#momkin-shop .ms-pack__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.25rem; margin: var(--mk-sp-5) 0; }
#momkin-shop .ms-pack__list li { display: flex; gap: .5rem; align-items: baseline; font-family: var(--mk-font-title); font-size: 1.0625rem; color: var(--mk-heading); }
#momkin-shop .ms-pack__list li::before { content: ""; flex: 0 0 auto; width: .5rem; height: .5rem; border-radius: 50%; background: var(--mk-saffron); transform: translateY(-.1em); }
#momkin-shop .ms-pack .ms-buy { margin-bottom: var(--mk-sp-5); }
#momkin-shop .ms-pack .ms-price { font-size: 2rem; }

/* Cartes romans */
#momkin-shop .ms-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, .5rem + 1.6vw, 1.75rem); }
#momkin-shop .ms-card { display: flex; flex-direction: column; background: var(--mk-chalk); border: 1px solid var(--mk-border); border-radius: var(--mk-r-lg); overflow: hidden; transition: box-shadow .25s var(--mk-ease), transform .25s var(--mk-ease); }
#momkin-shop .ms-card:hover { box-shadow: 0 24px 48px -30px rgba(14, 44, 54, .55); transform: translateY(-3px); }
#momkin-shop .ms-card__media { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--mk-sand); }
#momkin-shop .ms-card__media img { position: absolute; left: 50%; top: 50%; width: 58%; transform: translate(-50%, -50%); border-radius: 2px 4px 4px 2px; box-shadow: var(--mk-shadow-book); transition: opacity .35s var(--mk-ease), transform .35s var(--mk-ease); }
#momkin-shop .ms-card__back { opacity: 0; }
#momkin-shop .ms-card:hover .ms-card__front { transform: translate(-50%, -50%) rotate(-2deg) scale(1.02); }
#momkin-shop .ms-card:hover .ms-card__back { opacity: 1; transform: translate(-50%, -50%) rotate(2deg) scale(1.02); }
#momkin-shop .ms-card__flag { position: absolute; top: .9rem; left: .9rem; padding: .3rem .7rem; border-radius: 100px; background: var(--mk-promo-bg); color: var(--mk-on-accent); font-size: .8125rem; font-weight: 700; }
#momkin-shop .ms-card__body { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: 1.25rem 1.25rem 1.4rem; }
#momkin-shop .ms-card__place { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-terra-deep); }
#momkin-shop .ms-card__place span { color: var(--mk-text-soft); font-weight: 500; }
#momkin-shop .ms-card__title { font-family: var(--mk-font-title); font-weight: 600; font-size: 1.3125rem; line-height: 1.2; }
#momkin-shop .ms-card__title a { color: var(--mk-heading); text-decoration: none; }
#momkin-shop .ms-card__title a:hover { color: var(--mk-link); }
#momkin-shop .ms-card__by { font-size: .875rem; color: var(--mk-text-soft); }
#momkin-shop .ms-card__hook { font-family: var(--mk-font-title); font-style: italic; font-size: 1rem; line-height: 1.45; color: var(--mk-text); }
#momkin-shop .ms-card .ms-buy { margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--mk-divider); }
#momkin-shop .ms-card .ms-price { font-size: 1.375rem; }
#momkin-shop .ms-actions--card { display: grid; grid-template-columns: 1fr; gap: .5rem; margin-top: .25rem; }
#momkin-shop .ms-actions--card .ms-btn { width: 100%; padding-inline: .75rem; }

/* Avis */
#momkin-shop .ms-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .6rem + 1.5vw, 1.75rem); }
#momkin-shop .ms-review { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.75rem; background: var(--mk-chalk); border: 1px solid var(--mk-border); border-radius: var(--mk-r-lg); }
#momkin-shop .ms-review::before { content: "★★★★★"; color: var(--mk-saffron); letter-spacing: .15em; }
#momkin-shop .ms-review__text { font-family: var(--mk-font-title); font-style: italic; font-size: 1.125rem; line-height: 1.6; }
#momkin-shop .ms-review__by { display: flex; align-items: center; gap: .75rem; margin-top: auto; font-size: .9375rem; color: var(--mk-text-soft); }
#momkin-shop .ms-review__by img { width: 40px; border-radius: 2px; box-shadow: 0 4px 8px -4px rgba(0, 0, 0, .4); }
#momkin-shop .ms-review__by strong { display: block; color: var(--mk-heading); }
#momkin-shop .ms-review__by a { color: var(--mk-link); }

/* Professionnels */
#momkin-shop .ms-pro__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--mk-sp-6); align-items: center; }
#momkin-shop .ms-pro .ms-h2 { margin-bottom: var(--mk-sp-4); }
#momkin-shop .ms-actions--end { justify-content: flex-end; }

/* Responsive */
@media (max-width: 1100px) {
	#momkin-shop .ms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	#momkin-shop .ms-hero__grid,
	#momkin-shop .ms-pack,
	#momkin-shop .ms-pro__grid { grid-template-columns: 1fr; }
	#momkin-shop .ms-fan { max-width: 380px; }
	#momkin-shop .ms-reviews { grid-template-columns: 1fr; }
	#momkin-shop .ms-actions--end { justify-content: flex-start; }
	#momkin-shop .ms-pack__media { max-width: 360px; margin-inline: auto; width: 100%; }
}
@media (max-width: 560px) {
	#momkin-shop .ms-grid { grid-template-columns: 1fr; }
	#momkin-shop .ms-card__media { aspect-ratio: 5 / 4; }
	#momkin-shop .ms-card__media img { width: 42%; }
	#momkin-shop .ms-actions:not(.ms-actions--card) .ms-btn { width: 100%; }
	#momkin-shop .ms-pack__list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	#momkin-shop * { transition: none !important; }
	#momkin-shop .ms-card:hover { transform: none; }
}