/**
 * Buttons, cards, badges, price styling.
 *
 * Palette discipline: --color-sale is used ONLY in this file for the
 * onsale badge, sale price text, and the manual .nav-sale menu item.
 * Every other button/CTA below uses --color-gold. Do not add
 * --color-sale anywhere else.
 */

/* Manual "Soldes" nav item — add the CSS class "nav-sale" to that menu
   item in Appearance > Menus (Screen Options > CSS Classes). */
.nav-sale > a {
	color: var(--color-sale) !important;
}

/* Buttons — covers Storefront/WooCommerce's default button classes so no
   markup changes are needed (button, .button, input[type=submit], WC's
   .single_add_to_cart_button, .checkout-button, etc. all match). */
/* Primary button (decision D3): ink/black fill, light text, 6px radius —
   this is the global default for .button / native buttons / submits.
   --color-gold is now the accent / secondary-button color only (see
   .button.secondary below), never the default fill. */
/* 0.2.0-dev.38 — added .cristaline-shop-filters__toggle/__close/
   __section-title/__brand-toggle to this exclusion list: confirmed these 4
   real <button> elements (assets/css/shop.css) were silently losing their
   OWN lighter background:none/background-color:var(--color-bg) rules to
   THIS global rule — same specificity family (0,1,0 vs the global rule's
   0,1,1, a class plus the `button` type selector), same bug class already
   documented for the mega-menu toggle/mobile-drawer buttons back in
   0.2.0-dev.19. This is the real, confirmed root cause of the client's
   "gros bouton noir «Filtrer les articles»" report on mobile — the
   toggle's own intended compact/light styling was never actually winning
   the cascade; it was rendering with the FULL ink-fill treatment
   (background, padding, border-radius) the whole time. */
.button,
button:not(.wc-block-components-button, .slick-arrow, .cristaline-mega-menu__toggle, .menu-toggle, .cristaline-mobile-drawer__close, .cristaline-mobile-drawer__back, .cristaline-mobile-panel__link, .cristaline-boutique-gallery__item, .cristaline-lightbox__close, .cristaline-lightbox__prev, .cristaline-lightbox__next, .cristaline-shop-filters__toggle, .cristaline-shop-filters__close, .cristaline-shop-filters__section-title, .cristaline-shop-filters__brand-toggle),
input[type="submit"],
input[type="button"] {
	background-color: var(--color-ink);
	border: 1px solid var(--color-ink);
	border-radius: var(--radius-md);
	color: var(--color-bg);
	cursor: pointer;
	font-family: var(--font-nav);
	font-size: .9rem;
	letter-spacing: .02em;
	padding: var(--space-3) var(--space-6);
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.button:hover,
button:not(.wc-block-components-button, .slick-arrow, .cristaline-mega-menu__toggle, .menu-toggle, .cristaline-mobile-drawer__close, .cristaline-mobile-drawer__back, .cristaline-mobile-panel__link, .cristaline-boutique-gallery__item, .cristaline-lightbox__close, .cristaline-lightbox__prev, .cristaline-lightbox__next, .cristaline-shop-filters__toggle, .cristaline-shop-filters__close, .cristaline-shop-filters__section-title, .cristaline-shop-filters__brand-toggle):hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	background-color: var(--color-gold-hover);
	border-color: var(--color-gold-hover);
	color: var(--color-ink);
}

/* Secondary button — champagne/gold outline, used sparingly where a CTA
   should read as less dominant than the primary ink button. Add the class
   "secondary" (e.g. <a class="button secondary">) where needed. */
.button.secondary {
	background-color: transparent;
	border-color: var(--color-gold);
	color: var(--color-ink);
}

.button.secondary:hover {
	background-color: var(--color-gold);
	border-color: var(--color-gold);
	color: var(--color-ink);
}

.button.alt,
.checkout-button {
	background-color: var(--color-ink);
	border-color: var(--color-ink);
	color: var(--color-bg);
}

.button.alt:hover,
.checkout-button:hover {
	background-color: var(--color-gold-hover);
	border-color: var(--color-gold-hover);
	color: var(--color-ink);
}

/* Badges — sale is the one deliberate use of --color-sale outside price text */
.cristaline-badge {
	background-color: var(--color-accent-soft);
	border-radius: var(--radius-sm);
	color: var(--color-ink);
	display: inline-block;
	font-size: .75rem;
	letter-spacing: .04em;
	padding: var(--space-1) var(--space-2);
	text-transform: uppercase;
}

.cristaline-badge--sale,
.onsale {
	background-color: var(--color-sale);
	color: var(--color-bg);
}

/* Price styling shared by shop loop and single product (targets
   WooCommerce's own .price markup, see woocommerce.css for context) */
.price ins {
	color: var(--color-sale);
	text-decoration: none;
}

.price del {
	color: var(--color-neutral);
	opacity: 1;
}