/* Stone Tower Winery — Login (split vineyard) inner-content design.
   Adapted from the Claude Design handoff: V1 Split direction.
   Active when body.stw-login-active is present (logged-out my-account). */

.stw-login-active {
	--stw-cream: #ffffff;
	--stw-cream-soft: #faf9f7;
	--stw-sage: #ad9841;
	--stw-sage-deep: #8a7a30;
	--stw-tan: #ad9841;
	--stw-tan-soft: #c9b76a;
	--stw-forest: #0a0a0a;
	--stw-ink: #0a0a0a;
	--stw-line: rgba(10, 10, 10, 0.12);
	--stw-line-strong: rgba(10, 10, 10, 0.36);
	--stw-mute: rgba(10, 10, 10, 0.62);
	--stw-light-mute: rgba(255, 255, 255, 0.72);
	--stw-serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
	--stw-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Hide the page-content title group ("My Account" + tab-name shortcode)
   so the form takes the full inner area while the WP header/footer still
   wrap the page. The whole flex group above the shortcode is hidden, as
   well as any direct heading/tab-title leftovers. */
.stw-login-active .wp-site-blocks .wp-block-group.is-vertical:has(> .wp-block-heading),
.stw-login-active .wp-site-blocks .wp-block-heading.has-text-align-center,
.stw-login-active .my-account-tab-title {
	display: none !important;
}

.stw-login-active .woocommerce-notices-wrapper:empty {
	display: none;
}

/* WC notices (errors / success) — centered over the card area near the top
   so they read like part of the design, not a stray browser banner. */
.stw-login-active .woocommerce-notices-wrapper {
	position: absolute;
	top: 92px;
	left: 50%;
	transform: translateX(-50%);
	right: auto;
	width: min(520px, 92vw);
	z-index: 5;
	margin: 0;
	pointer-events: none;
}
.stw-login-active .woocommerce-notices-wrapper > * { pointer-events: auto; }
.stw-login-active .woocommerce-notices-wrapper .woocommerce-error,
.stw-login-active .woocommerce-notices-wrapper .woocommerce-info,
.stw-login-active .woocommerce-notices-wrapper .woocommerce-message {
	background: rgba(255, 255, 255, 0.92);
	border-left: 3px solid var(--stw-tan);
	color: var(--stw-forest);
	font-family: var(--stw-sans);
	font-size: 12.5px;
	letter-spacing: 0.02em;
	line-height: 1.5;
	padding: 14px 16px;
	margin: 0 0 12px;
	list-style: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.stw-login-active .woocommerce-notices-wrapper .woocommerce-error {
	border-left-color: #8a2a2a;
	color: #8a2a2a;
}
.stw-login-active .woocommerce-notices-wrapper .woocommerce-error a,
.stw-login-active .woocommerce-notices-wrapper .woocommerce-message a,
.stw-login-active .woocommerce-notices-wrapper .woocommerce-info a {
	color: inherit;
	border-bottom: 1px solid currentColor;
}
.stw-login-active .woocommerce-notices-wrapper .woocommerce-error::before,
.stw-login-active .woocommerce-notices-wrapper .woocommerce-info::before,
.stw-login-active .woocommerce-notices-wrapper .woocommerce-message::before {
	display: none;
}

@media (max-width: 860px) {
	.stw-login-active .woocommerce-notices-wrapper {
		position: static;
		width: auto;
		transform: none;
		left: auto;
		padding: 12px 20px 0;
	}
}

/* No site header / footer on the login screen — we use a dedicated minimal
   header inside the .stw-login section so the design stays focused. */
.stw-login-active .wp-site-blocks > footer.wp-block-template-part,
.stw-login-active .wp-site-blocks > header.wp-block-template-part {
	display: none !important;
}
.stw-login-active .wp-site-blocks {
	position: relative;
}

/* The parent theme's .solid-nav rule pushes content down by the WP header
   height. We render our own header inside the section, so neutralise that. */
.stw-login-active.solid-nav .wp-site-blocks > *:not(header):not(footer) > div:first-of-type,
.stw-login-active.solid-nav .wp-site-blocks > *:not(header):not(footer) > main:first-of-type {
	margin-top: 0 !important;
}

/* Custom minimal header for the login page. */
.stw-login__header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28px clamp(28px, 4vw, 56px);
	pointer-events: none;
}
.stw-login__header > * { pointer-events: auto; }

.stw-login__logo {
	display: inline-flex;
	align-items: center;
}
.stw-login__logo img {
	display: block;
	width: auto;
	height: 38px;
	max-height: 56px;
}

.stw-login__back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--stw-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	/* Header sits over the dark full-bleed vineyard — light treatment. */
	color: var(--stw-cream);
	text-decoration: none;
	padding: 10px 4px;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
	transition: color .25s ease, transform .25s ease;
}
.stw-login__back .stw-login__back-arrow {
	display: inline-flex;
	transition: transform .25s ease;
}
.stw-login__back:hover {
	color: var(--stw-tan-soft);
}
.stw-login__back:hover .stw-login__back-arrow {
	transform: translateX(-4px);
}

@media (max-width: 860px) {
	.stw-login__header {
		padding: 18px 20px;
	}
	.stw-login__logo img { height: 32px; }
	.stw-login__back {
		font-size: 10px;
		letter-spacing: 0.18em;
		color: var(--stw-cream); /* over the vineyard image on mobile */
	}
	.stw-login__back:hover { color: var(--stw-tan-soft); }
}

/* Main + content padding override so the login section can claim full
   width and full viewport height. */
.stw-login-active main.wp-block-post-content,
.stw-login-active .wp-site-blocks main {
	min-height: 0 !important;
	padding: 0 !important;
}

.stw-login-active .wp-site-blocks main > .entry-content,
.stw-login-active .wp-site-blocks main .entry-content {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}

/* Break out of the constrained content size on the WC shortcode wrapper. */
.stw-login-active .wp-block-group.alignwide:has(.stw-login),
.stw-login-active .wp-block-group:has(> .woocommerce > .stw-login),
.stw-login-active .wp-block-group:has(.stw-login) {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* WooCommerce core (woocommerce-blocktheme.css) ships
   `.woocommerce-account main .woocommerce { max-width: 1000px }` — specificity
   (0,2,1), which beats a plain `.stw-login-active .woocommerce` (0,2,0) and
   leaves the full-bleed grid computing `margin-left: calc(50% - 50vw)` against a
   1000px box (shoving it ~220px left with whitespace on the right). Match WC's
   `main` selector and force the override so the break-out claims the viewport. */
.stw-login-active .woocommerce,
.stw-login-active main .woocommerce {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Centered-card layout — full viewport break-out, full viewport height.
   The vineyard is a full-bleed background; the cream card floats centered. */
.stw-login {
	--stw-header-h: 80px;
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100vh;
	min-height: 600px;
	background: var(--stw-forest);
	color: var(--stw-ink);
	font-family: var(--stw-sans);
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: hidden;
}

/* Soft gradient at the top so the floating header keeps contrast over
   the dark vineyard. */
.stw-login::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 200px;
	background: linear-gradient(to bottom, rgba(10, 14, 12, 0.55) 0%, rgba(10, 14, 12, 0) 100%);
	pointer-events: none;
	z-index: 2;
}

/* Vineyard image — full-bleed background behind everything. */
.stw-login__image {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--stw-forest);
	z-index: 0;
}

.stw-login__vineyard {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* Dark vignette over the vineyard to seat the card and keep the header
   legible. */
.stw-login__vignette {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 80%),
		linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55));
	pointer-events: none;
}

.stw-login__vineyard-svg {
	width: 100%;
	height: 100%;
	display: block;
}

.stw-login__drift {
	transform-origin: 50% 50%;
	animation: stw-login-drift 28s ease-in-out infinite alternate;
}
.stw-login__drift--slow { animation-duration: 44s; }
.stw-login__drift--med  { animation-duration: 26s; animation-delay: -8s; }

@keyframes stw-login-drift {
	0%   { transform: translateX(-14px); }
	100% { transform: translateX(14px); }
}

@media (prefers-reduced-motion: reduce) {
	.stw-login__drift { animation: none; }
}

/* Card wrap — centers the cream card over the full-bleed vineyard, both
   horizontally and vertically. Scrolls internally if the card is taller
   than the viewport (e.g. register pane with privacy/newsletter content). */
.stw-login__panel {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	display: grid;
	place-items: center;
	width: 100%;
	padding: 16px 24px 12px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* The cream card itself. */
.stw-login__body {
	position: relative;
	width: min(760px, 94%);
	margin: auto;
	background: var(--stw-cream);
	padding: 34px 60px 30px;
	box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35), 0 6px 24px rgba(0, 0, 0, 0.18);
}

/* Thin corner brackets inset within the card. */
.stw-login__corners {
	position: absolute;
	inset: 12px;
	pointer-events: none;
}
.stw-login__cnr {
	position: absolute;
	width: 18px;
	height: 18px;
	border: 1px solid var(--stw-line-strong);
}
.stw-login__cnr--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.stw-login__cnr--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.stw-login__cnr--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.stw-login__cnr--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* Footer line pinned to the bottom over the vineyard. */
.stw-login__foot {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 0 20px 24px;
	color: var(--stw-light-mute);
	font-family: var(--stw-sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: center;
}
.stw-login__foot-sep { opacity: 0.6; }

/* Tab toggle between sign-in and create-account views — centered in card. */
.stw-login__tabs {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin: 0 auto 18px;
	padding: 4px;
	background: rgba(10, 10, 10, 0.06);
	border: 1px solid var(--stw-line);
	width: fit-content;
}

.stw-login__tab {
	border: 0;
	background: transparent;
	color: var(--stw-mute);
	font-family: var(--stw-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding: 10px 18px;
	cursor: pointer;
	transition: background .25s ease, color .25s ease;
}
.stw-login__tab:hover { color: var(--stw-forest); }
.stw-login__tab[aria-selected="true"] {
	background: var(--stw-forest);
	color: var(--stw-cream);
}

.stw-login__pane[hidden] {
	display: none;
}

.stw-login__switch {
	margin: 18px 0 0;
	font-family: var(--stw-serif);
	font-size: 17px;
	color: var(--stw-mute);
	text-align: center;
}
.stw-login__switch a {
	color: var(--stw-forest);
	font-style: italic;
	text-decoration: none;
	border-bottom: 1px solid var(--stw-line-strong);
	padding-bottom: 2px;
	margin-left: 6px;
	transition: border-color .2s ease;
}
.stw-login__switch a:hover { border-color: var(--stw-forest); }

.stw-login__hint {
	font-family: var(--stw-serif);
	font-size: 15px;
	color: var(--stw-mute);
	margin: 0;
	padding: 12px 14px;
	border-left: 2px solid var(--stw-tan);
	background: rgba(154, 122, 90, 0.06);
}

/* Tame third-party (Mailchimp / WooCommerce privacy) content injected into
   the register form via woocommerce_register_form. */
.stw-login__form .mailchimp-newsletter {
	margin: 4px 0;
	font-size: 12.5px;
	color: var(--stw-mute);
}
.stw-login__form .mailchimp-newsletter label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--stw-sans);
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--stw-mute);
}
.stw-login__form .mailchimp-newsletter input[type="checkbox"] {
	width: 14px;
	height: 14px;
	accent-color: var(--stw-sage);
}

/* Hide the GDPR audience permissions block on the register form — it's
   noisy on a focused signup view and the newsletter optin already covers
   consent. Matches the existing checkout-level treatment in the child theme. */
.stw-login__form #mailchimp-gdpr-fields {
	display: none !important;
}

.stw-login__form .woocommerce-privacy-policy-text {
	margin: 0;
	font-family: var(--stw-sans);
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--stw-mute);
}
.stw-login__form .woocommerce-privacy-policy-text p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}
.stw-login__form .woocommerce-privacy-policy-text a {
	color: var(--stw-sage);
	border-bottom: 1px solid var(--stw-line);
}
.stw-login__form .woocommerce-privacy-policy-text a:hover {
	color: var(--stw-forest);
	border-color: var(--stw-sage);
}

.stw-login__form wc-order-attribution-inputs { display: none; }
.stw-login__form .clear { display: none; }

.stw-login__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--stw-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--stw-sage);
	margin-bottom: 14px;
}
/* Centered eyebrow with flanking dashes (centered-card design). */
.stw-login__eyebrow--center,
.stw-login__body--single .stw-login__eyebrow {
	display: flex;
	justify-content: center;
	gap: 14px;
}

.stw-login__eyebrow-dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--stw-tan);
	display: inline-block;
}
.stw-login__eyebrow-dash {
	width: 28px;
	height: 1px;
	background: var(--stw-line-strong);
	display: inline-block;
}
/* Single-variant templates reuse the dot; render it as a dash for parity. */
.stw-login__body--single .stw-login__eyebrow-dot {
	width: 28px;
	height: 1px;
	border-radius: 0;
}

.stw-login__display {
	font-family: var(--stw-serif);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.04;
	letter-spacing: -0.01em;
	color: var(--stw-forest);
	margin: 0 0 6px;
	text-wrap: balance;
}
.stw-login__display em {
	font-style: italic;
	color: var(--stw-sage);
	font-weight: 400;
}
.stw-login__display--center,
.stw-login__body--single .stw-login__display {
	text-align: center;
}

.stw-login__lede {
	font-family: var(--stw-serif);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.45;
	color: var(--stw-mute);
	max-width: 44ch;
	margin: 8px 0 20px;
}
.stw-login__lede--center,
.stw-login__body--single .stw-login__lede {
	max-width: 54ch;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* Form — fills the card width; fields stay left-aligned. */
.stw-login__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 100%;
	margin: 0;
}
.stw-login__form.is-shake {
	animation: stw-login-shake .42s ease;
}

@keyframes stw-login-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	50% { transform: translateX(6px); }
	75% { transform: translateX(-3px); }
}

.stw-field {
	display: block;
	position: relative;
}

.stw-field__label {
	display: block;
	font-family: var(--stw-sans);
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--stw-mute);
	margin-bottom: 8px;
	font-weight: 500;
	transition: color .25s ease;
}

.stw-field.is-active .stw-field__label {
	color: var(--stw-sage);
}

.stw-field.is-error .stw-field__label {
	color: #8a2a2a;
}

.stw-field__row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.stw-field__input,
.stw-login .stw-field__input.woocommerce-Input {
	flex: 1;
	background: transparent;
	border: 0;
	outline: 0;
	font-family: var(--stw-serif);
	font-weight: 400;
	font-size: 22px;
	color: var(--stw-ink);
	padding: 4px 0 10px;
	letter-spacing: 0;
	width: 100%;
	box-shadow: none;
	border-radius: 0;
	line-height: 1.2;
}

.stw-field__input::placeholder {
	color: var(--stw-mute);
}

.stw-field__rule {
	display: block;
	height: 1px;
	background: var(--stw-line);
	position: relative;
}

.stw-field__rule::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 100%;
	background: var(--stw-sage);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s cubic-bezier(.2,.7,.2,1);
}

.stw-field.is-active .stw-field__rule::after {
	transform: scaleX(1);
}

.stw-field.is-error .stw-field__rule::after {
	background: #8a2a2a;
	transform: scaleX(1);
}

.stw-field__eye {
	border: 0;
	background: transparent;
	color: var(--stw-mute);
	cursor: pointer;
	padding: 4px;
	display: inline-flex;
	align-items: center;
	transition: color .2s ease;
}
.stw-field__eye:hover,
.stw-field__eye:focus-visible {
	color: var(--stw-sage);
}
.stw-field__eye .stw-field__eye-off { display: none; }
.stw-field__eye[aria-pressed="true"] .stw-field__eye-on { display: none; }
.stw-field__eye[aria-pressed="true"] .stw-field__eye-off { display: inline-block; }

/* Remember + Forgot row */
.stw-login__row-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: -6px;
}

.stw-login__quiet-link {
	font-family: var(--stw-sans);
	font-size: 12px;
	color: var(--stw-sage);
	text-decoration: none;
	border-bottom: 1px solid var(--stw-line);
	padding-bottom: 2px;
	transition: color .2s ease, border-color .2s ease;
}
.stw-login__quiet-link:hover {
	color: var(--stw-forest);
	border-color: var(--stw-sage);
}

/* Checkbox */
.stw-check {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	user-select: none;
	font-family: var(--stw-sans);
}

.stw-check__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.stw-check__box {
	width: 16px;
	height: 16px;
	border: 1px solid var(--stw-line-strong);
	background: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, border-color .2s ease;
	color: var(--stw-cream);
	flex-shrink: 0;
}
.stw-check__box svg { opacity: 0; transition: opacity .15s ease; }
.stw-check__input:checked + .stw-check__box {
	background: var(--stw-sage);
	border-color: var(--stw-sage);
}
.stw-check__input:checked + .stw-check__box svg { opacity: 1; }
.stw-check__input:focus-visible + .stw-check__box {
	outline: 2px solid var(--stw-sage);
	outline-offset: 2px;
}

.stw-check__label {
	font-family: var(--stw-sans);
	font-size: 12.5px;
	color: var(--stw-ink);
	letter-spacing: 0.02em;
}

/* Age gate */
.stw-age-gate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	padding: 14px 16px;
	border: 1px solid var(--stw-line);
	background: rgba(255,255,255,0.32);
}
.stw-age-gate.is-error {
	border-color: rgba(138, 42, 42, 0.5);
	background: rgba(138, 42, 42, 0.04);
}
.stw-age-gate .stw-check__label {
	font-size: 12px;
	color: var(--stw-mute);
}
.stw-age-gate__error {
	font-family: var(--stw-sans);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: #8a2a2a;
	min-height: 0;
}
.stw-age-gate.is-error .stw-age-gate__error::before {
	content: attr(data-message);
}

/* Submit button */
.stw-login__submit,
.stw-login .stw-login__submit.woocommerce-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	height: 56px;
	padding: 0 28px;
	background: var(--stw-forest);
	color: var(--stw-cream);
	border: 0;
	border-radius: 0;
	font-family: var(--stw-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	cursor: pointer;
	overflow: hidden;
	transition: background .35s ease, transform .25s ease;
	width: 100%;
	box-shadow: none;
}

.stw-login__submit::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--stw-sage);
	transform: translateY(100%);
	transition: transform .45s cubic-bezier(.2,.7,.2,1);
	z-index: 0;
}
.stw-login__submit:hover::before,
.stw-login__submit:focus-visible::before {
	transform: translateY(0);
}
.stw-login__submit-label,
.stw-login__submit-arrow {
	position: relative;
	z-index: 1;
}
.stw-login__submit-arrow {
	display: inline-flex;
	transition: transform .35s ease;
}
.stw-login__submit:hover .stw-login__submit-arrow,
.stw-login__submit:focus-visible .stw-login__submit-arrow {
	transform: translateX(4px);
}
.stw-login__submit:disabled {
	opacity: 0.75;
	cursor: progress;
}

/* Responsive */
/* On wide screens the centered card's side gutters clear the corner logo /
   back-link, so the panel needs only a small top inset (keeps the card within
   100vh). Once the viewport narrows enough that the card would collide with
   those header items, restore a full header reserve. */
@media (max-width: 1060px) {
	.stw-login__panel { padding-top: calc(var(--stw-header-h) + 16px); }
}

@media (max-width: 860px) {
	.stw-login {
		--stw-header-h: 72px;
	}
	.stw-login__body { padding: 44px 32px 40px; }
	.stw-login__display { font-size: 38px; }
	.stw-login__lede { font-size: 17px; }
	.stw-login::before { height: 140px; }
}

@media (max-width: 480px) {
	.stw-login {
		/* Allow the card to scroll naturally with the page on small phones. */
		height: auto;
		min-height: 100vh;
		min-height: 100dvh;
	}
	.stw-login__panel {
		padding: calc(var(--stw-header-h) + 20px) 16px 16px;
	}
	.stw-login__body {
		width: 100%;
		padding: 40px 24px 32px;
	}
	.stw-login__display { font-size: 32px; }
	.stw-login__lede { font-size: 16px; }
	.stw-login__row-between { flex-wrap: wrap; }
	.stw-login__foot {
		flex-wrap: wrap;
		font-size: 10px;
		letter-spacing: 0.12em;
	}
}