/* =========================================================================
   LUMA — components
   Buttons, form fields, navigation, language switch, carousel controls,
   social marks. All direction-agnostic.
   ========================================================================= */

/* ------------------------------------------------------------------ icons */
/* Icons carry explicit width/height attributes; keep them from shrinking. */
.luma-icon {
	flex: 0 0 auto;
}

/* Chevrons and arrows point along the reading direction. */
[dir="rtl"] .btn__icon,
[dir="rtl"] .carousel__icon,
[dir="rtl"] .footer-link::after {
	transform: scaleX(-1);
}

/* ================================================================= NOTE
 * Parent-theme state matrices.
 *
 * Hello Elementor styles bare elements with its own brand pink:
 *
 *   a, a:hover, a:focus, a:active, a:visited      { color: <parent pink> }
 *   button, .button, input[type=submit]           { background: <parent pink> }
 *   button:hover, button:focus, button:active     { background/color: <parent pink> }
 *
 * `a:hover` and `button:hover` are (0,1,1) selectors, so a LUMA rule carrying a
 * single class — `.btn--line { color: … }` at (0,1,0) — loses to them on hover.
 * That is exactly why "View Product" turned pink.
 *
 * The fix, below, is to declare every interactive LUMA component's full state
 * matrix (:hover, :focus, :focus-visible, :active, :visited) with two or more
 * classes, which outranks the parent theme without !important and without any
 * broad `a:hover { … !important }` sledgehammer. Colours come only from LUMA
 * tokens.
 * =================================================================== */

/* ---------------------------------------------------------------- buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: 0.9375rem 1.5rem;
	font-size: var(--step--1);
	font-weight: 500;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	line-height: 1.15;
	border: 1px solid transparent;
	border-radius: var(--radius-s);
	transition:
		background-color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		color var(--dur) var(--ease),
		transform var(--dur-fast) var(--ease);
	text-align: center;
}

.btn__icon {
	transition: transform var(--dur) var(--ease);
}

.btn:hover .btn__icon {
	transform: translateX(3px);
}

[dir="rtl"] .btn:hover .btn__icon {
	transform: scaleX(-1) translateX(3px);
}

/* --- Explore New Arrivals / Send Message ------------------------------- */
.btn.btn--primary,
.btn.btn--primary:visited {
	background-color: var(--color-dark);
	border-color: var(--color-dark);
	color: var(--color-on-dark);
}

.btn.btn--primary:hover,
.btn.btn--primary:focus,
.btn.btn--primary:focus-visible,
.btn.btn--primary:active {
	background-color: var(--color-dark-deep);
	border-color: var(--color-dark-deep);
	color: var(--color-on-dark);
}

/* --- Why LUMA ---------------------------------------------------------- */
.btn.btn--ghost,
.btn.btn--ghost:visited {
	background-color: transparent;
	border-color: var(--color-border-strong);
	color: var(--color-text);
}

.btn.btn--ghost:hover,
.btn.btn--ghost:focus,
.btn.btn--ghost:focus-visible,
.btn.btn--ghost:active {
	border-color: var(--color-dark);
	background-color: var(--color-surface);
	color: var(--color-text);
}

/* --- Subscribe --------------------------------------------------------- */
.btn.btn--light,
.btn.btn--light:visited {
	background-color: var(--color-on-dark);
	border-color: var(--color-on-dark);
	color: var(--color-dark-deep);
}

.btn.btn--light:hover,
.btn.btn--light:focus,
.btn.btn--light:focus-visible,
.btn.btn--light:active {
	background-color: #fff;
	border-color: #fff;
	color: var(--color-dark-deep);
}

/* --- View Product: text-forward button on the product cards -------------
 * This is the element that showed the pink: the parent theme's
 * `button:hover` rule beat the single-class `.btn--line`, so background, border
 * and colour are all pinned here for every state. */
.btn.btn--line,
.btn.btn--line:visited,
.btn.btn--line:hover,
.btn.btn--line:focus,
.btn.btn--line:focus-visible,
.btn.btn--line:active {
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	color: var(--color-text);
	position: relative;
	letter-spacing: 0.08em;
	font-size: var(--step--2);
	text-decoration: none;
}

.btn.btn--line:hover,
.btn.btn--line:focus-visible {
	color: var(--color-primary-strong);
}

.btn--line::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -4px;
	block-size: 1px;
	background-color: var(--color-border-strong);
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.btn.btn--line:hover::after,
.btn.btn--line:focus-visible::after,
.btn.btn--line:active::after {
	background-color: var(--color-primary);
}

/* --------------------------------------------------------------- the brand */
.brand,
.brand:visited,
.brand:hover,
.brand:focus,
.brand:focus-visible,
.brand:active {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--color-text);
	text-decoration: none;
}

.brand__logo {
	block-size: var(--logo-h, 3.25rem);
	inline-size: auto;
	transition: block-size var(--dur) var(--ease);
}

/* --------------------------------------------------------- primary nav */
.site-nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.4vw, 2.25rem);
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 2rem);
}

.site-nav__link,
.site-nav__link:visited {
	position: relative;
	display: inline-block;
	padding-block: 0.5rem;
	font-size: var(--step--1);
	letter-spacing: 0.02em;
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

.site-nav__link:hover,
.site-nav__link:focus,
.site-nav__link:focus-visible,
.site-nav__link:active {
	color: var(--color-primary-strong);
	text-decoration: none;
}

.site-nav__link::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 1px;
	background-color: var(--color-primary);
	transform: scaleX(0);
	/* transform-origin takes no logical keywords, so it is flipped explicitly. */
	transform-origin: left center;
	transition: transform var(--dur) var(--ease);
}

[dir="rtl"] .site-nav__link::after {
	transform-origin: right center;
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link[aria-current="true"]::after {
	transform: scaleX(1);
}

.site-nav__link[aria-current="true"] {
	color: var(--color-primary-strong);
}

/* ------------------------------------------------------- language switch */
.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	padding: 2px;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
}

.lang-switch__link,
.lang-switch__link:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.375rem;
	padding: 0.375rem 0.625rem;
	font-size: var(--step--2);
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--color-muted);
	background-color: transparent;
	text-decoration: none;
	border-radius: var(--radius-pill);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.lang-switch__link:hover,
.lang-switch__link:focus,
.lang-switch__link:focus-visible,
.lang-switch__link:active {
	color: var(--color-text);
	text-decoration: none;
}

.lang-switch__link.is-current,
.lang-switch__link.is-current:visited,
.lang-switch__link.is-current:hover,
.lang-switch__link.is-current:focus,
.lang-switch__link.is-current:focus-visible,
.lang-switch__link.is-current:active {
	background-color: var(--color-dark);
	color: var(--color-on-dark);
}

/* ------------------------------------------------------------ nav toggle */
/* `display` stays out of the state matrix below: responsive.css flips it to
   inline-flex at ≤899px with a single-class selector, and a two-class state
   rule repeating `display: none` would win and hide the button on hover. */
.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	margin-inline-start: auto;
	border-radius: var(--radius-s);
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.nav-toggle,
.nav-toggle:visited,
.nav-toggle:active {
	border: 1px solid var(--color-border);
	color: var(--color-text);
	background-color: var(--color-background);
}

.nav-toggle:hover,
.nav-toggle:focus,
.nav-toggle:focus-visible {
	border: 1px solid var(--color-border-strong);
	color: var(--color-text);
	background-color: var(--color-surface);
}

.nav-toggle__box {
	display: grid;
	place-items: center;
}

.nav-toggle__icon {
	grid-area: 1 / 1;
	transition: opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}

.nav-toggle__icon--close {
	opacity: 0;
	transform: rotate(-45deg);
}

[aria-expanded="true"] .nav-toggle__icon--open {
	opacity: 0;
	transform: rotate(45deg);
}

[aria-expanded="true"] .nav-toggle__icon--close {
	opacity: 1;
	transform: rotate(0);
}

/* ----------------------------------------------------------------- fields */
.form__note {
	margin-block-end: var(--space-m);
	font-size: var(--step--2);
	color: var(--color-muted);
}

.form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-m);
}

.field {
	display: flex;
	flex-direction: column;
	gap: 0.4375rem;
	min-inline-size: 0;
}

.field--full {
	grid-column: 1 / -1;
}

.field__label {
	font-size: var(--step--2);
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.field__req {
	color: var(--color-primary);
}

.field__control {
	inline-size: 100%;
	padding: 0.8125rem 0.9375rem;
	background-color: var(--color-background);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-s);
	font-size: var(--step-0);
	line-height: 1.5;
	color: var(--color-text);
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
	text-align: start;
}

.field__control::placeholder {
	color: var(--color-muted);
	opacity: 0.8;
}

.field__control:hover {
	border-color: var(--color-dark-soft);
}

.field__control:focus {
	outline: 2px solid var(--color-primary-strong);
	outline-offset: 1px;
	border-color: var(--color-primary-strong);
}

textarea.field__control {
	resize: vertical;
	min-block-size: 8.5rem;
}

.field__error {
	display: none;
	align-items: flex-start;
	gap: 0.375rem;
	font-size: var(--step--2);
	line-height: 1.45;
	color: var(--color-danger);
}

.field.is-invalid .field__error {
	display: flex;
}

.field.is-invalid .field__control {
	border-color: var(--color-danger);
	background-color: #fdf6f4;
}

.field__error::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 0.375rem;
	block-size: 0.375rem;
	margin-block-start: 0.55em;
	border-radius: 50%;
	background-color: currentColor;
}

/* Status line shared by both forms. */
.form__status {
	display: none;
	align-items: flex-start;
	gap: 0.5rem;
	margin-block-start: var(--space-m);
	padding: 0.875rem 1rem;
	font-size: var(--step--1);
	line-height: 1.5;
	border-radius: var(--radius-s);
	border: 1px solid transparent;
}

.form__status.is-visible {
	display: flex;
}

.form__status.is-success {
	background-color: #eef3ee;
	border-color: #cddccf;
	color: var(--color-success);
}

.form__status.is-error {
	background-color: #fbf1ee;
	border-color: #e8cdc5;
	color: var(--color-danger);
}

.form__submit[aria-disabled="true"],
.newsletter__submit[aria-disabled="true"] {
	opacity: 0.6;
	pointer-events: none;
}

/* ------------------------------------------------------ dark-panel fields */
.field__label--on-dark {
	color: var(--color-on-dark-muted);
}

.field__control--on-dark {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: var(--color-on-dark-border);
	color: var(--color-on-dark);
}

.field__control--on-dark::placeholder {
	color: var(--color-on-dark-muted);
	opacity: 0.7;
}

.field__control--on-dark:hover {
	border-color: var(--color-primary);
}

.field__control--on-dark:focus {
	outline-color: var(--color-primary-soft);
	border-color: var(--color-primary-soft);
}

.field__error--on-dark {
	color: #f0b7ab;
}

.field.is-invalid .field__control--on-dark {
	border-color: #d08a7c;
	background-color: rgba(208, 138, 124, 0.1);
}

.form__status--on-dark.is-success {
	background-color: rgba(176, 141, 99, 0.16);
	border-color: rgba(220, 196, 164, 0.42);
	color: #efe4d2;
}

.form__status--on-dark.is-error {
	background-color: rgba(208, 138, 124, 0.14);
	border-color: rgba(208, 138, 124, 0.4);
	color: #f2c3b8;
}

/* ------------------------------------------------------ carousel controls */
.carousel__controls {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	flex: 0 0 auto;
}

.carousel__btn,
.carousel__btn:visited,
.carousel__btn:hover,
.carousel__btn:focus,
.carousel__btn:focus-visible,
.carousel__btn:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.875rem;
	block-size: 2.875rem;
	border: 1px solid var(--color-border-strong);
	border-radius: 50%;
	color: var(--color-text);
	background-color: transparent;
	transition:
		background-color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		color var(--dur) var(--ease),
		opacity var(--dur) var(--ease);
}

.carousel__btn:hover:not([aria-disabled="true"]),
.carousel__btn:focus-visible:not([aria-disabled="true"]) {
	background-color: var(--color-dark);
	border-color: var(--color-dark);
	color: var(--color-on-dark);
}

.carousel__btn[aria-disabled="true"] {
	opacity: 0.32;
	cursor: default;
}

.carousel__icon--prev {
	transform: scaleX(-1);
}

[dir="rtl"] .carousel__icon--prev {
	transform: none;
}

[dir="rtl"] .carousel__icon--next {
	transform: scaleX(-1);
}

.carousel__hint {
	margin-block-start: var(--space-m);
	font-size: var(--step--2);
	color: var(--color-muted);
}

/* ----------------------------------------------------------- social marks */
.social-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
}

.social-link,
.social-link:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border: 1px solid var(--color-on-dark-border);
	border-radius: 50%;
	color: var(--color-on-dark-muted);
	background-color: transparent;
	text-decoration: none;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.social-link:hover,
.social-link:focus,
.social-link:focus-visible,
.social-link:active {
	color: var(--color-dark-deep);
	background-color: var(--color-primary-soft);
	border-color: var(--color-primary-soft);
	text-decoration: none;
}

/* ------------------------------------------------------------- to-top btn */
.to-top,
.to-top:visited,
.to-top:hover,
.to-top:focus,
.to-top:focus-visible,
.to-top:active {
	border: 0;
	background-color: var(--color-dark);
	color: var(--color-on-dark);
}

.to-top:hover,
.to-top:focus-visible {
	background-color: var(--color-dark-deep);
}

.to-top {
	position: fixed;
	inset-block-end: clamp(1rem, 3vw, 2rem);
	inset-inline-end: clamp(1rem, 3vw, 2rem);
	z-index: 60;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 50%;
	background-color: var(--color-dark);
	color: var(--color-on-dark);
	box-shadow: var(--shadow-m);
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.to-top[hidden] {
	display: none;
}

.to-top__icon {
	transform: rotate(-90deg);
}