/*
 * Moldova Store — global stylesheet.
 *
 * Company-wide rules ONLY. Brand-specific styles belong in
 * assets/brands/<brand>/css/<brand>.css — do not add brand rules here, and
 * do not add generic selectors broad enough to accidentally style a brand's
 * content area.
 *
 * Foundation phase: minimal reset + structural scaffolding only, no final
 * visual design. LTR by design (final site is Romanian/LTR) — prefer
 * logical properties (margin-inline, padding-inline, inset-inline,
 * text-align: start/end) over physical left/right ones so this stays
 * direction-safe as brand layers are added.
 */

:root {
	--moldova-store-content-max-width: 1400px;

	/* Global header/footer tokens ONLY — brand layers (e.g.
	   assets/brands/subderma/css/subderma.css) define their own tokens
	   scoped under their brand wrapper and must never read these as if
	   they were shared, so the two layers can't accidentally couple.
	   Deliberately monochrome (no accent blue) — a neutral, understated
	   palette so the header never competes with a brand's own color
	   identity below it; interactive state is communicated with
	   underlines/opacity rather than a color change. */
	--mds-header-height: 72px;
	--mds-ink: #16181c;
	--mds-muted: #777d87;
	--mds-border: rgba(255, 255, 255, 0.68);
	--mds-bg: #ffffff;
	--mds-hover-bg: rgba(255, 255, 255, 0.72);
	--mds-focus-ring: #16181c;
	--mds-glass: rgba(248, 249, 250, 0.72);
	--mds-footer-bg: #151719;
	--mds-footer-ink: #f4f3ef;
	--mds-footer-muted: #a7aaad;
}

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

body.moldova-store {
	margin: 0;
	direction: ltr;
	text-align: start;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--mds-ink);
}

/* ---------------------------------------------------------------------
 * Global company header
 *
 * Premium/minimal redesign pass — visual only. Nav structure, items,
 * destinations, and accessibility behavior (hover-open, click/tap
 * toggle, Escape-to-close, ARIA state) are unchanged from the previous
 * version; only class names carried over so no markup restructuring was
 * needed beyond a cart icon and an is-current class (see
 * components/global/site-header.php). Sticky via plain `position:
 * sticky` — no scroll JS, no scroll-triggered animation.
 * ------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	padding: 12px 20px 0;
	background: transparent;
	pointer-events: none;
}

.site-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 32px;
	max-width: var(--moldova-store-content-max-width);
	margin-inline: auto;
	padding-inline: 24px;
	min-height: var(--mds-header-height);
	background: var(--mds-glass);
	border: 1px solid var(--mds-border);
	border-radius: 999px;
	box-shadow: 0 18px 42px rgba(15, 19, 24, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.24);
	-webkit-backdrop-filter: blur(22px) saturate(155%);
	backdrop-filter: blur(22px) saturate(155%);
	pointer-events: auto;
	isolation: isolate;
}

.site-header__inner::before {
	content: '';
	position: absolute;
	inset: 1px 8% auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.96), transparent);
	pointer-events: none;
}

.site-header__logo {
	display: flex;
	align-items: center;
	width: 112px;
	height: 54px;
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: 0.01em;
	color: var(--mds-ink);
	text-decoration: none;
	white-space: nowrap;
	opacity: 1;
	transition: opacity 0.15s ease;
}

.site-header__logo-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: scale(1.18);
}

.site-header__logo:hover,
.site-header__logo:focus-visible {
	opacity: 0.65;
}

/* Mobile hamburger toggle — hidden on desktop, shown below the 900px
   breakpoint where the nav list collapses (see the media query below).
   Icon-only (the "Menu" label is visually hidden, not removed — see
   .screen-reader-text in components/global/site-header.php) for a
   quieter mobile bar. */
.site-header__menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-inline-start: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--mds-ink);
	cursor: pointer;
}

.site-header__menu-toggle-icon {
	display: block;
	width: 18px;
	height: 1px;
	background: currentColor;
	position: relative;
}

.site-header__menu-toggle-icon::before,
.site-header__menu-toggle-icon::after {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	width: 18px;
	height: 1px;
	background: currentColor;
	transition: transform 0.15s ease;
}

.site-header__menu-toggle-icon::before {
	top: -5px;
}

.site-header__menu-toggle-icon::after {
	top: 5px;
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-icon {
	background: transparent;
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-icon::before {
	top: 0;
	transform: rotate(45deg);
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-icon::after {
	top: 0;
	transform: rotate(-45deg);
}

.site-header__nav {
	position: absolute;
	inset-inline-start: 50%;
	margin-inline-start: 0;
	transform: translateX(-50%);
}

.site-header__nav-list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__nav-item {
	position: relative;
}

.site-header__nav-item-row {
	display: flex;
	align-items: center;
}

/* Clean text links — no button/pill chrome. Hover and "current brand"
   state are both communicated with the same understated underline
   (::after), not a color or background change, per the "avoid oversized
   pill buttons / heavy boxes" direction. */
.site-header__nav-link,
.site-header__nav-placeholder {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 10px 14px;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.site-header__nav-link {
	color: var(--mds-ink);
	text-decoration: none;
}

.site-header__nav-link::after {
	content: '';
	position: absolute;
	inset-inline: 14px;
	bottom: 8px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.18s ease;
}

.site-header__nav-link:hover::after,
.site-header__nav-link:focus-visible::after {
	transform: scaleX(1);
}

/* Minimal "you are here" detail for the current brand — a permanent
   version of the same hover underline, not a separate visual language. */
.site-header__nav-link.is-current::after {
	transform: scaleX(1);
}

/* Brand 2 / Brand 3: inert placeholders per this task's scope — visually
   present in the header, not interactive, not yet linked to any page. */
.site-header__nav-placeholder {
	color: var(--mds-muted);
	cursor: default;
	user-select: none;
}

.site-header__dropdown-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-inline-start: -8px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--mds-muted);
	border-radius: 4px;
}

.site-header__caret {
	display: block;
	width: 6px;
	height: 6px;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
	margin-block-start: -4px;
}

.site-header__dropdown-toggle[aria-expanded="true"] .site-header__caret {
	transform: rotate(-135deg);
	margin-block-start: 2px;
}

/* Floating panel, aligned to the SUBDERMA link's own text inset (14px —
   matches .site-header__nav-link's horizontal padding above) rather than
   the nav item's outer edge, so the panel reads as anchored to the word
   "SUBDERMA" itself. Small radius, very subtle shadow, subtle border —
   no oversized menu box. */
.site-header__dropdown {
	position: absolute;
	inset-inline-start: 14px;
	top: 100%;
	margin: 10px 0 0;
	min-width: 200px;
	padding: 6px;
	list-style: none;
	background: rgba(250, 250, 250, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.82);
	border-radius: 16px;
	box-shadow: 0 16px 38px rgba(20, 23, 28, 0.14), inset 0 1px 0 #fff;
	-webkit-backdrop-filter: blur(18px) saturate(145%);
	backdrop-filter: blur(18px) saturate(145%);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
	z-index: 20;
}

.site-header__dropdown a {
	display: block;
	padding: 9px 12px;
	border-radius: 6px;
	color: var(--mds-ink);
	text-decoration: none;
	font-size: 0.88rem;
}

.site-header__dropdown a:hover,
.site-header__dropdown a:focus-visible {
	background: var(--mds-hover-bg);
}

/* Opens on hover (desktop mouse convenience) and via the explicit
   is-open class assets/global/js/global.js toggles on click/tap/Enter/
   Space — see that file for the full interaction. Deliberately NOT also
   opening on :focus-within: the toggle button itself is a real <button>
   so Enter/Space already reaches it and fires the same click handler,
   and :focus-within would keep the menu visually open any time focus is
   anywhere inside it (including right after Escape moves focus back to
   the toggle to close it) regardless of the JS-tracked open/closed
   state — that combination made Escape look broken. */
.site-header__nav-item--dropdown:hover .site-header__dropdown,
.site-header__nav-item--dropdown.is-open .site-header__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Minimal icon + text — no pill/border/background chrome. */
.site-header__cart {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-inline-start: auto;
	padding: 8px 2px;
	border: 0;
	color: var(--mds-ink);
	font-size: 0.88rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.site-header__cart-icon {
	flex: none;
}

.site-header__cart:hover,
.site-header__cart:focus-visible {
	opacity: 0.65;
}

.site-header__cart--disabled {
	color: var(--mds-muted);
	cursor: default;
}

.site-header__cart--disabled:hover {
	opacity: 1;
}

/* Shared focus-visible treatment for every interactive header element —
   keyboard users must be able to see where they are (task requirement:
   keyboard accessible, hover AND focus states). */
.site-header a:focus-visible,
.site-header button:focus-visible {
	outline: 2px solid var(--mds-focus-ring);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------
 * Mobile header (< 900px): hamburger-collapsed nav opening as a clean
 * panel, stacked SUBDERMA submenu, cart stays visible at all widths.
 * ------------------------------------------------------------------- */
@media (max-width: 900px) {
	.site-header {
		padding: 10px 12px 0;
	}

	.site-header__inner {
		flex-wrap: wrap;
		gap: 0;
		padding-inline: 18px;
		min-height: 64px;
		border-radius: 32px;
	}

	.site-header__menu-toggle {
		display: inline-flex;
	}

	.site-header__cart {
		margin-inline-start: 16px;
	}

	.site-header__nav {
		position: static;
		transform: none;
		flex-basis: 100%;
		margin-inline-start: 0;
		/* Collapsed by default; assets/global/js/global.js toggles this via
		   the hamburger button's aria-expanded/is-open state. Kept in normal
		   flow (not display:none) when JS is unavailable, since a header
		   nav that's impossible to reach without JS would fail the
		   "usable on mobile" requirement — see the no-JS fallback below. */
		display: none;
		border-block-start: 1px solid rgba(22, 24, 28, 0.1);
		margin-block-start: 8px;
		padding-block-end: 10px;
	}

	.site-header__nav.is-open {
		display: block;
	}

	/* No-JS fallback: without JavaScript the hamburger button can't toggle
	   anything, so the nav stays reachable (not hidden) rather than
	   trapping mobile users behind a dead button. */
	.no-js .site-header__nav {
		display: block;
	}

	.site-header__nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-block: 8px;
	}

	.site-header__nav-item-row {
		justify-content: space-between;
	}

	.site-header__nav-link,
	.site-header__nav-placeholder {
		width: 100%;
		padding-block: 14px;
	}

	.site-header__nav-link::after {
		display: none;
	}

	.site-header__nav-link.is-current {
		color: var(--mds-ink);
		font-weight: 600;
	}

	.site-header__dropdown {
		position: static;
		box-shadow: none;
		border: 0;
		border-inline-start: 2px solid var(--mds-border);
		border-radius: 0;
		margin: 0 0 4px;
		padding-inline-start: 12px;
		/* On mobile the submenu expand/collapse is driven purely by the
		   is-open class (JS) — a touch tap has no hover state, so the
		   desktop hover-to-open rule is explicitly cancelled below rather
		   than relied on to naturally not apply. */
		opacity: 1;
		visibility: hidden;
		max-height: 0;
		overflow: hidden;
		transform: none;
		transition: max-height 0.15s ease;
	}

	.site-header__nav-item--dropdown:hover .site-header__dropdown {
		visibility: hidden;
		max-height: 0;
	}

	.site-header__nav-item--dropdown.is-open .site-header__dropdown {
		visibility: visible;
		max-height: 240px;
	}
}

@media (max-width: 560px) {
	.site-header__logo {
		width: 92px;
		height: 48px;
	}

	.site-header__cart {
		margin-inline-start: 8px;
	}

	.site-header__cart-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header *,
	.site-header *::before,
	.site-header *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------------
 * Global distributor footer
 * ------------------------------------------------------------------- */

.site-footer {
	position: relative;
	padding: 76px 32px 26px;
	background: var(--mds-footer-bg);
	color: var(--mds-footer-ink);
	overflow: hidden;
}

.site-footer::before {
	content: '';
	position: absolute;
	inset: 0 8% auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
}

.site-footer__inner {
	position: relative;
	max-width: var(--moldova-store-content-max-width);
	margin-inline: auto;
}

.site-footer__top {
	display: grid;
	grid-template-columns: minmax(240px, 0.9fr) minmax(540px, 1.6fr);
	gap: clamp(56px, 9vw, 140px);
	padding-block-end: 68px;
}

.site-footer__logo {
	display: flex;
	align-items: center;
	width: 150px;
	height: 72px;
	color: var(--mds-footer-ink);
	text-decoration: none;
}

.site-footer__logo-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: scale(1.18);
}

.site-footer__intro {
	max-width: 370px;
	margin: 24px 0 0;
	color: var(--mds-footer-muted);
	font-size: 0.94rem;
	line-height: 1.7;
}

.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 5vw, 76px);
}

.site-footer__heading {
	margin: 0 0 20px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.site-footer__links,
.site-footer__nav ul {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__links a,
.site-footer__legal a {
	color: var(--mds-footer-muted);
	text-decoration: none;
	transition: color 0.16s ease;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible,
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
	color: var(--mds-footer-ink);
}

.site-footer__links a,
.site-footer__placeholder,
.site-footer__contact {
	font-size: 0.88rem;
	line-height: 1.55;
}

.site-footer__placeholder {
	color: #73777b;
}

.site-footer__contact {
	display: grid;
	gap: 12px;
	margin: 0;
	color: var(--mds-footer-muted);
	font-style: normal;
}

.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding-block-start: 24px;
	border-block-start: 1px solid rgba(255, 255, 255, 0.11);
	color: #85898d;
	font-size: 0.76rem;
}

.site-footer__copyright {
	margin: 0;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px 24px;
}

.site-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer a:focus-visible {
	outline: 2px solid var(--mds-footer-ink);
	outline-offset: 4px;
}

@media (max-width: 960px) {
	.site-footer__top {
		grid-template-columns: 1fr;
		gap: 48px;
	}
}

@media (max-width: 680px) {
	.site-footer {
		padding: 58px 22px 24px;
	}

	.site-footer__top {
		padding-block-end: 48px;
	}

	.site-footer__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 42px;
	}

	.site-footer__column--contact {
		grid-column: 1 / -1;
	}

	.site-footer__bottom {
		align-items: flex-start;
		flex-direction: column;
	}

	.site-footer__legal {
		justify-content: flex-start;
	}
}

@media (max-width: 420px) {
	.site-footer__columns {
		grid-template-columns: 1fr;
	}

	.site-footer__column--contact {
		grid-column: auto;
	}
}