/**
 * Cristaline — static content pages (Nos boutiques / Bons cadeaux / Contact).
 *
 * 0.2.0-dev.35 — premium finishing round on Bons cadeaux/Contact only. The
 * "Nos boutiques" grid/card system below (.cristaline-shops-grid/.cristaline-
 * shop-card*) is UNCHANGED this round per the brief's own explicit "ne pas
 * modifier les pages boutiques" constraint — only the shared page-header,
 * content-block and form system above it were touched.
 *
 * The centered kicker/title/intro header and the col-full content-width
 * formula below intentionally match shop.css's own .woocommerce-products-
 * header / .cristaline-shop-intro__text pattern (same max(space-6,
 * calc((100% - container-max)/2)) gutter, same centered title treatment)
 * for visual consistency across every "real content page" on the site —
 * these 3 pages are simply not WooCommerce-context pages, so they get
 * their own equivalent classes instead of piggy-backing on shop.css's
 * WooCommerce-coupled ones.
 */

.cristaline-page-header {
	padding: var(--space-12) max(var(--space-6), calc((100% - var(--container-max)) / 2)) var(--space-8);
	text-align: center;
}

/* .cristaline-page-intro — Contact AND Bons cadeaux' shared full-width
   centered header modifier (0.2.0-dev.37: both pages now use it, renamed
   from the previous Contact-only ".cristaline-page-header--spacious" per
   this round's own explicit "créer .cristaline-page-intro" component
   spec). A DELIBERATELY SEPARATE modifier rather than changing the shared
   .cristaline-page-header's own padding-top directly: that base class is
   also used bare by page-nos-boutiques.php and the boutique detail pages
   (never touched by this round), so bumping it there too would have been
   an unintended side effect. padding-top: --space-12 + --space-8 = 80px,
   inside the client's own requested 70-100px gap between the sticky site
   header and the page title. margin-bottom: 56px, inside the client's own
   48-64px "espacement après l'introduction" spec — the two-column layout
   below no longer supplies this itself (0.2.0-dev.37's new containers
   have no top margin of their own, see .cristaline-gift-layout/.cristaline-
   contact-layout), so this single declaration is the one real source of
   that gap now, never doubled between the two. */
.cristaline-page-intro {
	margin-bottom: 56px;
	padding-top: calc(var(--space-12) + var(--space-8));
}

.cristaline-page-intro .cristaline-page-header__intro {
	margin-bottom: 0;
}

.cristaline-page-header__kicker {
	color: var(--color-gold-hover);
	font-family: var(--font-nav);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .08em;
	margin: 0 0 var(--space-2);
	text-transform: uppercase;
}

.cristaline-page-header__title {
	color: var(--color-ink);
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	font-weight: 500;
	margin: 0 0 var(--space-4);
}

.cristaline-page-header__intro {
	color: color-mix(in srgb, var(--color-neutral) 40%, var(--color-ink) 60%);
	font-family: var(--font-body);
	margin: 0 auto;
	/* 0.2.0-dev.36 — explicit px range (client's own "650-720px" spec) rather
	   than the previous 60ch, which resolves narrower than that range at
	   this theme's own body font size/weight. */
	max-width: 680px;
}

/* Contact's sober "Comment pouvons-nous vous aider ?" list — 0.2.0-dev.36:
   replaced the plain bullet markers with fine row separators (client's own
   explicit "liste propre avec de fins séparateurs" ask) — no marker at all,
   a hairline border between rows instead, no card-within-card look. */
.cristaline-help-list {
	color: var(--color-ink);
	font-family: var(--font-body);
	line-height: 1.6;
	list-style: none;
	margin: 0 0 var(--space-2);
	padding: 0;
}

.cristaline-help-list li {
	border-bottom: 1px solid var(--color-accent-soft);
	padding: var(--space-3) 0;
}

.cristaline-help-list li:first-child {
	padding-top: 0;
}

.cristaline-help-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

/* =========================================================
   "Comment ça fonctionne ?" — Bons cadeaux' 3-step block. A plain ordered
   list read visually as 3 numbered rows rather than native list markers
   (list-style:none + our own "01/02/03" number span), each with a title +
   description — deliberately simple HTML/CSS, no icon library.
   ========================================================= */
.cristaline-howitworks {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: 0;
}

/* Fine separators between steps (client's own explicit ask) — spacing
   comes from this single padding-bottom, not doubled up with a flex `gap`
   on the parent list any more. */
.cristaline-howitworks__step {
	border-bottom: 1px solid var(--color-accent-soft);
	display: flex;
	gap: var(--space-4);
	padding-bottom: var(--space-6);
	padding-top: var(--space-6);
}

.cristaline-howitworks__step:first-child {
	padding-top: 0;
}

.cristaline-howitworks__step:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.cristaline-howitworks__number {
	color: var(--color-gold-hover);
	flex-shrink: 0;
	font-family: var(--font-heading);
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.4;
	width: 2.5ch;
}

.cristaline-howitworks__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.cristaline-howitworks__title {
	color: var(--color-ink);
	font-family: var(--font-nav);
	font-size: 1rem;
	font-weight: 600;
}

.cristaline-howitworks__text {
	color: var(--color-ink);
	font-family: var(--font-body);
	line-height: 1.6;
}

.cristaline-howitworks__note {
	color: color-mix(in srgb, var(--color-neutral) 40%, var(--color-ink) 60%);
	font-family: var(--font-body);
	font-size: .9rem;
	font-style: italic;
	margin: 0;
}

/* =========================================================
   Nos boutiques — 2-col desktop grid of real shop cards. UNCHANGED this
   round (0.2.0-dev.35 scope is Bons cadeaux/Contact only).
   ========================================================= */
.cristaline-shops-grid {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: 1fr;
	margin: 0 auto var(--space-16);
	padding: 0 max(var(--space-6), calc((100% - var(--container-max)) / 2));
}

@media (min-width: 768px) {
	.cristaline-shops-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.cristaline-shops-grid::before,
.cristaline-shops-grid::after {
	content: none;
}

.cristaline-shop-card {
	background-color: var(--color-bg-alt);
	border: 1px solid rgba(168, 176, 179, .4);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow 220ms ease, transform 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.cristaline-shop-card:hover {
		box-shadow: 0 12px 28px rgba(23, 23, 23, .12);
		transform: translateY(-4px);
	}

	.cristaline-shop-card:hover .cristaline-shop-card__media img {
		transform: scale(1.04);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cristaline-shop-card,
	.cristaline-shop-card__media img {
		transition: none;
	}
}

.cristaline-shop-card__media {
	display: block;
	overflow: hidden;
}

.cristaline-shop-card__media img {
	aspect-ratio: 4 / 3;
	display: block;
	height: auto;
	object-fit: cover;
	transition: transform 420ms ease;
	width: 100%;
}

.cristaline-shop-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
}

.cristaline-shop-card__name {
	font-family: var(--font-heading);
	font-size: 1.3rem;
	font-weight: 500;
	margin: 0;
}

.cristaline-shop-card__name a,
.cristaline-shop-card__name a:hover,
.cristaline-shop-card__name a:focus,
.cristaline-shop-card__name a:visited {
	color: var(--color-ink);
	text-decoration: none;
}

.cristaline-shop-card__name a:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
}

.cristaline-shop-card__text {
	color: var(--color-ink);
	font-family: var(--font-body);
	line-height: 1.55;
	margin: 0;
}

.cristaline-shop-card__address {
	color: var(--color-ink);
	font-family: var(--font-nav);
	font-size: .95rem;
	font-weight: 600;
	margin: 0;
}

.cristaline-shop-card__phone {
	margin: 0;
}

.cristaline-shop-card__phone a {
	color: var(--color-ink);
	font-family: var(--font-nav);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}

.cristaline-shop-card__hours {
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: .9rem;
	line-height: 1.7;
	margin: 0;
}

.cristaline-shop-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: auto;
	padding-top: var(--space-2);
}

.cristaline-shop-card__actions .button {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.cristaline-shop-card__actions {
		flex-direction: column;
	}

	.cristaline-shop-card__actions .button {
		white-space: normal;
		width: 100%;
	}
}

@media (min-width: 768px) {
	.cristaline-shop-card__call {
		display: none;
	}
}

/* =========================================================
   Forms (Bons cadeaux / Contact) — 0.2.0-dev.37 structural rebuild. Shared
   field/label/button styling, scoped to .cristaline-form/.cristaline-form-
   grid only — never a bare input[type] rule that could leak into
   WooCommerce's own checkout/account forms elsewhere on the site.
   ========================================================= */
.cristaline-form__banner {
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	margin: 0 0 var(--space-6);
	padding: var(--space-4);
}

.cristaline-form__banner--ok {
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-gold);
	color: var(--color-ink);
}

.cristaline-form__banner--erreur {
	background-color: var(--color-bg);
	border: 1px solid var(--color-ink);
	color: var(--color-ink);
}

.cristaline-form {
	display: flex;
	flex-direction: column;
	/* 20px — explicit px value (not a --space-* token) to sit inside the
	   client's own two overlapping specs: "18-22px" between fields and
	   "20-24px entre les groupes de champs" — the nearest token, --space-6
	   (24px), was outside the first, narrower range. */
	gap: 20px;
}

/* .cristaline-form-grid — 0.2.0-dev.37: replaces the previous per-pair
   flexbox wrapper (.cristaline-form__row--pair, one <div> per 2-field row)
   with a single, flat 2-column CSS grid every field is a direct child of.
   A field that needs the full row (Sujet, Message, …) gets the
   `--full` modifier (grid-column:1/-1) instead of living in its own
   separate single-field row — fewer wrapper levels, and the SAME grid
   handles both "two fields side by side" and "one field spans both
   columns" with no extra markup. Only switches to 2 columns inside the
   SAME >=900px breakpoint the page-level layout itself uses (never a
   narrower, independent breakpoint) — below 900px every field is full
   width, matching the client's own explicit "tous les champs doivent
   passer en pleine largeur" mobile spec for the whole page, not just the
   2-column grid around the cards. */
.cristaline-form-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.cristaline-form-grid {
		gap: 20px 24px;
		grid-template-columns: 1fr 1fr;
	}
}

.cristaline-form-grid__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.cristaline-form-grid__field--full {
	grid-column: 1 / -1;
}

.cristaline-form-grid__field label,
.cristaline-form__row label,
.cristaline-form__fieldset legend {
	color: var(--color-ink);
	font-family: var(--font-nav);
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .01em;
}

.cristaline-form-grid__field input[type="text"],
.cristaline-form-grid__field input[type="email"],
.cristaline-form-grid__field input[type="tel"],
.cristaline-form-grid__field select,
.cristaline-form-grid__field textarea {
	background-color: var(--color-bg);
	border: 1px solid #D8D9D7;
	border-radius: 4px;
	color: var(--color-ink);
	font-family: var(--font-body);
	/* 16px minimum — prevents iOS Safari's automatic zoom-on-focus when a
	   field's own font-size is under 16px (client's own explicit ask). */
	font-size: 1rem;
	min-height: 52px;
	padding: var(--space-3) var(--space-4);
	width: 100%;
}

.cristaline-form-grid__field textarea {
	min-height: 150px;
	resize: vertical;
}

.cristaline-form-grid__field input:focus-visible,
.cristaline-form-grid__field select:focus-visible,
.cristaline-form-grid__field textarea:focus-visible {
	border-color: var(--color-gold);
	outline: 2px solid var(--color-gold);
	outline-offset: 1px;
}

/* .cristaline-form__row — still used, but only for the single-field
   consent checkbox row below the field grid (never text/email/tel inputs
   any more, those all live in .cristaline-form-grid__field now). */
.cristaline-form__row {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.cristaline-form__fieldset {
	border: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
}

.cristaline-form__radio,
.cristaline-form__checkbox {
	align-items: flex-start;
	color: var(--color-ink);
	display: flex;
	font-family: var(--font-body);
	font-weight: 400;
	gap: var(--space-2);
}

.cristaline-form__radio input,
.cristaline-form__checkbox input {
	accent-color: var(--color-gold);
	flex-shrink: 0;
	/* 20px (up from the ~13-16px browser default) — client's own explicit
	   "cases à cocher faciles à sélectionner" mobile ask. */
	height: 20px;
	margin-top: .1em;
	width: 20px;
}

.cristaline-form__checkbox-text {
	flex: 1 1 auto;
	font-size: 1rem;
	line-height: 1.6;
	min-width: 0;
}

.cristaline-form__checkbox-text a {
	color: var(--color-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}

@media (hover: hover) and (pointer: fine) {
	.cristaline-form__checkbox-text a:hover {
		color: var(--color-gold-hover);
	}
}

.cristaline-form__checkbox-text a:focus-visible {
	color: var(--color-gold-hover);
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
}

/* Field-level error (currently: the "Montant souhaité" amount field,
   assets/js/giftcard-amount.js) — a bordeaux tone RESERVED for this one
   purpose (form validation errors), deliberately a DIFFERENT hex from
   --color-sale (#8E2633, reserved strictly for sale/promo signalling per
   this project's own standing palette rule — reusing it here would break
   that reservation, not honour the brief's own separate "bordeaux réservée
   aux erreurs" ask). */
.cristaline-form__field-error {
	color: #7B2942;
	font-family: var(--font-body);
	font-size: .85rem;
	margin: 0;
}

.cristaline-form__hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.cristaline-form__submit {
	align-self: flex-start;
	font-size: 1rem;
	font-weight: 600;
	margin-top: var(--space-2);
	min-height: 48px;
	/* 240px — inside the client's own explicit "220-260px minimum" spec
	   (0.2.0-dev.37); the button was previously sized purely by its own
	   padding + text, which could read as too small next to the wide field
	   grid beside it. */
	min-width: 240px;
	padding: var(--space-4) var(--space-8);
	text-align: center;
}

.cristaline-form__submit:disabled {
	background-color: var(--color-neutral);
	border-color: var(--color-neutral);
	color: var(--color-bg);
	cursor: not-allowed;
}

@media (max-width: 480px) {
	.cristaline-form__submit {
		align-self: stretch;
	}
}

/* =========================================================
   0.2.0-dev.37 — ROOT-CAUSE FIX for the "diagonal" Contact/Bons cadeaux
   layout. The previous container (.cristaline-two-col-layout, all rounds
   0.2.0-dev.35/36) ALSO carried Storefront's own `.col-full` class for its
   width formula. Storefront's real compiled style.css ships
   `.col-full::before,.col-full::after{content:"";display:table}` (a
   legacy clearfix) — confirmed LIVE via getComputedStyle() that once the
   container became `display:grid`, those two pseudo-elements were
   blockified into real PHANTOM GRID ITEMS (per spec, `display` values are
   blockified inside a grid container), inserted before/after the two real
   children — silently occupying the first cell and pushing the real
   second child into an entire extra ROW (`grid-template-rows` measured as
   2 real rows, not 1, with the second child's own y-position hundreds of
   pixels below the first). This is the exact same bug CLASS already
   documented twice elsewhere in this project (0.2.0-dev.26's
   `ul.products::before`, 0.2.0-dev.31's `.cristaline-shops-grid::before/
   ::after`) — this component simply never got the same audit.

   The fix removes the dependency entirely rather than patching around it:
   neither .cristaline-gift-layout nor .cristaline-contact-layout carries
   `.col-full` — width/centering is implemented directly (max-width +
   margin-inline + padding-inline), so there is no Storefront clearfix left
   to collide with. Both containers are real, single-level CSS Grids with
   their two real children as the ONLY items — verified by design, not by
   patching a symptom.
   ========================================================= */
.cristaline-gift-layout,
.cristaline-contact-layout {
	display: grid;
	gap: 56px;
	grid-template-columns: 1fr;
	margin: 0 auto calc(var(--space-16) + var(--space-8));
	max-width: 1180px;
	padding-inline: clamp(20px, 4vw, 48px);
	width: 100%;
}

/* 0.2.0-dev.38 — Bons cadeaux' column order reversed per the client's
   newest spec: "Comment ça fonctionne ?" is now the LEFT column, the form
   the RIGHT column (opposite of 0.2.0-dev.37). The steps card is now FIRST
   in the real DOM (page-bons-cadeaux.php) — which already matches the
   client's own required mobile sequence (intro → steps → form) with zero
   CSS reordering needed, so the `order:-1`/`order:0` pair 0.2.0-dev.37
   needed here has been removed entirely: one fewer moving part for the
   same visual result on both breakpoints. */
@media (min-width: 900px) {
	.cristaline-gift-layout,
	.cristaline-contact-layout {
		align-items: start;
		gap: 56px;
	}

	.cristaline-gift-layout {
		/* Client's own explicit spec: steps card ~45% (left), form ~55%
		   (right) — minmax() keeps the steps column from ever shrinking
		   below a readable width. */
		grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1fr);
	}

	.cristaline-contact-layout {
		/* Client's own explicit spec: minmax(300px,0.8fr) minmax(0,1.4fr)
		   — info card the narrower left column, form the wider right
		   column. Real DOM order already matches this (info card first in
		   the markup), so no `order` override is needed here at all. */
		grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.4fr);
	}
}

/* .cristaline-form-card / .cristaline-info-card — shared "carte premium"
   base (client's own explicit style spec this round): fond blanc/blanc
   perle, bordure 1px rgba(23,23,23,.10), rayon 8px (inside the 4-8px max),
   padding desktop 42px (inside 38-46px), ombre extrêmement légère. The
   info card (Contact's own left card AND Bons cadeaux' "Comment ça
   fonctionne ?") uses a slightly different, pearl-tinted background
   (client's own "fond légèrement différent du fond général" ask for the
   Bons cadeaux steps card, applied consistently to both info-style cards
   for the same reason). */
.cristaline-form-card,
.cristaline-info-card {
	background-color: var(--color-bg);
	border: 1px solid rgba(23, 23, 23, .10);
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(23, 23, 23, .04);
	padding: 42px;
}

.cristaline-info-card {
	background-color: var(--color-bg-alt);
}

@media (max-width: 599px) {
	.cristaline-form-card,
	.cristaline-info-card {
		padding: var(--space-6);
	}
}

/* Sticky "Comment ça fonctionne ?" card — desktop (large screens) only,
   client's own explicit "position:sticky; top:120px" spec, "mais elle doit
   rester dans la grille normale" — this is a plain grid item, sticky only
   changes ITS OWN scroll behaviour within the grid row's own height, it
   never leaves the grid or needs any special positioning context. Never
   applied below 1024px (client's own explicit "supprimer le sticky sur
   mobile et tablette" — simply never set outside this query, so mobile/
   tablet stay position:static by default). Safe now that the phantom-
   grid-item bug above is fixed — deliberately NOT attempted in 0.2.0-
   dev.36 while that root cause was still unknown. */
@media (min-width: 1024px) {
	.cristaline-info-card--sticky {
		position: sticky;
		top: 120px;
	}
}

.cristaline-form-card__title,
.cristaline-info-card__title {
	color: var(--color-ink);
	font-family: var(--font-heading);
	font-size: 1.4rem;
	font-weight: 500;
	margin: 0 0 var(--space-4);
}

.cristaline-info-card__subtitle {
	color: var(--color-ink);
	font-family: var(--font-heading);
	font-size: 1.1rem;
	font-weight: 500;
	margin: var(--space-6) 0 var(--space-3);
}

.cristaline-form-card__intro {
	color: color-mix(in srgb, var(--color-neutral) 40%, var(--color-ink) 60%);
	font-family: var(--font-body);
	margin: 0 0 var(--space-6);
}

.cristaline-info-card__text {
	color: var(--color-ink);
	font-family: var(--font-body);
	line-height: 1.6;
	margin: 0 0 var(--space-4);
}

.cristaline-info-card__cta.button {
	display: inline-block;
	margin-top: var(--space-2);
}

/* =========================================================
   Legal pages (0.2.0-dev.50) — Mentions légales / Conditions
   générales / Politique de confidentialité / Livraison et
   retours / Gestion des cookies.

   Reuses .cristaline-page-header/.cristaline-page-intro (H1
   block) above unchanged. This block only styles the body:
   a single, comfortably narrow reading column (max 720px —
   narrower than the 680px page-intro to read as prose, not a
   headline), generous inter-section spacing via a hairline
   top border (skipped on the first section so nothing sits
   directly under the intro), and a highlighted placeholder
   chip so the client can spot every field left to personalize
   at a glance.
   ========================================================= */

.cristaline-legal {
	margin: 0 auto;
	max-width: 720px;
	padding: 0 max(var(--space-6), calc((100% - var(--container-max)) / 2)) var(--space-16);
}

.cristaline-legal__section {
	border-top: 1px solid var(--color-accent-soft);
	margin-top: var(--space-8);
	padding-top: var(--space-8);
}

.cristaline-legal__section:first-child {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

.cristaline-legal__heading {
	color: var(--color-ink);
	font-family: var(--font-heading);
	font-size: 1.4rem;
	font-weight: 500;
	margin: 0 0 var(--space-4);
}

.cristaline-legal__subheading {
	color: var(--color-ink);
	font-family: var(--font-heading);
	font-size: 1.1rem;
	font-weight: 500;
	margin: var(--space-6) 0 var(--space-3);
}

.cristaline-legal__text {
	color: var(--color-ink);
	font-family: var(--font-body);
	line-height: 1.7;
	margin: 0 0 var(--space-4);
}

.cristaline-legal__text:last-child {
	margin-bottom: 0;
}

.cristaline-legal__list {
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 0;
}

.cristaline-legal__list li {
	color: var(--color-ink);
	font-family: var(--font-body);
	line-height: 1.6;
	padding: var(--space-2) 0 var(--space-2) var(--space-4);
	position: relative;
}

.cristaline-legal__list li::before {
	color: var(--color-gold-hover);
	content: "—";
	left: 0;
	position: absolute;
}

.cristaline-legal__list:last-child {
	margin-bottom: 0;
}

/* Highlighted "[Nom de l'entreprise]"-style placeholder chip — deliberately
   more visible than plain italics/brackets alone, so every field still
   needing the client's real information stands out on a first skim. */
.cristaline-legal__placeholder {
	background-color: rgba(197, 173, 138, .16);
	border-radius: var(--radius-sm);
	color: var(--color-gold-hover);
	font-weight: 600;
	padding: .05em .4em;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.cristaline-legal__placeholder {
		white-space: normal;
	}
}