/**
 * Ugett Store — layout: skip link, trust bar, header, footer.
 */

/* Skip link */
.ug-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--ug-red);
	color: #fff;
	padding: 10px 18px;
	border-radius: 0 0 var(--ug-radius) 0;
	font-weight: 600;
}
.ug-skip-link:focus { left: 0; }

/* ============ Trust bar ============ */
.ug-trust-bar {
	position: relative;
	z-index: 60;
	background: linear-gradient(90deg, #050506, var(--ug-charcoal) 50%, #050506);
	border-bottom: 1px solid var(--ug-border);
	overflow: hidden;
	height: var(--ug-trust);
	display: flex;
	align-items: center;
}
.ug-trust-bar__track {
	display: flex;
	gap: clamp(24px, 6vw, 72px);
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
	padding-inline: var(--ug-gutter);
}
.ug-trust-bar__item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ug-text-2);
	font-weight: 500;
	white-space: nowrap;
}
.ug-trust-bar__dot {
	width: 5px;
	height: 5px;
	background: var(--ug-red);
	transform: rotate(45deg);
	box-shadow: 0 0 8px var(--ug-red-glow);
}

/* ============ Header ============ */
.ug-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(10, 11, 13, 0.7);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	border-bottom: 1px solid transparent;
	transition: background var(--ug-dur), border-color var(--ug-dur), box-shadow var(--ug-dur);
}
.ug-header.is-scrolled {
	background: rgba(8, 9, 11, 0.92);
	border-bottom-color: var(--ug-border);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
.ug-header__inner {
	display: flex;
	align-items: center;
	gap: var(--ug-space-lg);
	height: var(--ug-header);
}

/* Logo */
.ug-logo {
	display: inline-flex;
	align-items: center;
}
/* Full lockup (mark + wordmark) — sized by height so the wordmark scales with it. */
.ug-logo__lockup {
	height: 26px;
	width: auto;
	max-height: calc(var(--ug-header) - 34px);
	max-width: 160px;
	object-fit: contain;
	display: block;
	transition: filter var(--ug-dur), transform var(--ug-dur);
}
.ug-logo--footer .ug-logo__lockup {
	height: 64px;
	max-height: none;
	max-width: 260px;
}
/* Compact square mark (SVG) for tight spots. */
.ug-logo__mark {
	width: 34px;
	height: 34px;
	flex: none;
	transition: filter var(--ug-dur), transform var(--ug-dur);
}
.ug-header__logo:hover .ug-logo__lockup,
.ug-header__logo:hover .ug-logo__mark {
	filter: drop-shadow(0 0 12px var(--ug-red-glow));
	transform: translateY(-1px);
}

/* Nav */
.ug-header__nav {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 30px);
	margin-right: auto;
}
.ug-header__nav a {
	position: relative;
	font-family: var(--ug-font-display);
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ug-text-2);
	padding: 6px 2px;
	transition: color var(--ug-dur);
}
.ug-header__nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 2px;
	background: var(--ug-red);
	box-shadow: 0 0 8px var(--ug-red-glow);
	transition: width var(--ug-dur) var(--ug-ease);
}
.ug-header__nav a:hover,
.ug-header__nav a.is-current { color: var(--ug-text); }
.ug-header__nav a:hover::after,
.ug-header__nav a.is-current::after { width: 100%; }

/* Tools */
.ug-header__tools {
	display: flex;
	align-items: center;
	gap: 6px;
}
.ug-header__tool {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ug-touch);
	height: var(--ug-touch);
	color: var(--ug-text-2);
	border-radius: var(--ug-radius);
	transition: color var(--ug-dur), background var(--ug-dur);
}
.ug-header__tool:hover { color: var(--ug-text); background: rgba(255, 255, 255, 0.05); }
.ug-header__cart.is-bumping { animation: ug-bump 0.4s var(--ug-ease); }
.ug-header__badge {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.66rem;
	font-weight: 700;
	line-height: 1;
	border-radius: var(--ug-radius-pill);
	background: var(--ug-surface-2);
	color: var(--ug-text);
	border: 1px solid var(--ug-border-strong);
}
.ug-header__badge--red {
	background: var(--ug-red);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 0 10px var(--ug-red-glow);
}
.ug-header__badge[hidden] { display: none; }

/* Search */
.ug-search {
	position: relative;
	display: flex;
	align-items: center;
}
.ug-search__icon {
	position: absolute;
	left: 12px;
	display: inline-flex;
	color: var(--ug-text-muted);
	pointer-events: none;
}
.ug-search input[type="search"] {
	width: 210px;
	max-width: 34vw;
	height: 40px;
	padding: 0 14px 0 38px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--ug-border);
	border-radius: var(--ug-radius);
	color: var(--ug-text);
	font-family: var(--ug-font);
	font-size: 0.9rem;
	transition: border-color var(--ug-dur), background var(--ug-dur), width var(--ug-dur);
}
.ug-search input[type="search"]::placeholder { color: var(--ug-text-muted); }
.ug-search input[type="search"]:focus {
	outline: none;
	border-color: var(--ug-border-red);
	background: rgba(255, 255, 255, 0.06);
}
.ug-search__submit {
	position: absolute;
	right: 0;
	width: 1px; height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* Burger */
.ug-header__burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	width: var(--ug-touch);
	height: var(--ug-touch);
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid var(--ug-border);
	border-radius: var(--ug-radius);
	cursor: pointer;
}
.ug-header__burger span:not(.ug-sr) {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--ug-text);
	transition: transform var(--ug-dur), opacity var(--ug-dur);
}
.ug-header__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(7px) rotate(45deg); }
.ug-header__burger[aria-expanded="true"] span:nth-child(3) { opacity: 0; }
.ug-header__burger[aria-expanded="true"] span:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

/* ============ Footer ============ */
.ug-footer {
	position: relative;
	margin-top: var(--ug-section-y);
	background: linear-gradient(180deg, transparent, #050506 40%);
	border-top: 1px solid var(--ug-border);
	padding-top: var(--ug-space-xl);
}
.ug-footer__edge {
	position: absolute;
	top: -1px; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--ug-red), transparent);
	opacity: 0.6;
}
.ug-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: var(--ug-space-lg);
	padding-bottom: var(--ug-space-xl);
}
.ug-footer__brand p { max-width: 34ch; color: var(--ug-text-muted); font-size: 0.92rem; }
.ug-footer__logo { display: inline-flex; margin-bottom: var(--ug-space-sm); }
.ug-footer__address { font-style: normal; color: var(--ug-text-muted); font-size: 0.88rem; line-height: 1.9; }
.ug-footer__address a { color: var(--ug-text-2); transition: color var(--ug-dur); }
.ug-footer__address a:hover { color: var(--ug-red); }
.ug-footer__map { display: inline-block; }
.ug-footer__col h2 {
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ug-text-muted);
	margin-bottom: var(--ug-space-sm);
}
.ug-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ug-footer__col a { color: var(--ug-text-2); font-size: 0.92rem; transition: color var(--ug-dur), padding var(--ug-dur); }
.ug-footer__col a:hover { color: var(--ug-red); padding-left: 4px; }
.ug-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ug-space-md);
	padding: var(--ug-space-md) 0 var(--ug-space-lg);
	border-top: 1px solid var(--ug-border);
	flex-wrap: wrap;
}
.ug-footer__copy { margin: 0; color: var(--ug-text-muted); font-size: 0.85rem; }
.ug-partner-badge { margin-top: var(--ug-space-md); }
.ug-partner-badge img { max-height: 46px; width: auto; opacity: 0.85; }

/* Payment blocks */
.ug-payments-img img { max-width: 100%; height: auto; border-radius: var(--ug-radius-sm); opacity: 0.92; }
.ug-payments-img--compact img { max-height: 26px; width: auto; }
.ug-payments {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}
.ug-payments li {
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	padding: 5px 10px;
	border: 1px solid var(--ug-border);
	border-radius: var(--ug-radius-sm);
	color: var(--ug-text-2);
	background: rgba(255, 255, 255, 0.03);
}

/* ============ Responsive ============ */
@media (max-width: 1024px) {
	.ug-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
	.ug-header__burger { display: inline-flex; }
	/* Dropdown anchored to the sticky header so it always tracks it — no gap. */
	.ug-header__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		background: rgba(12, 14, 17, 0.98);
		backdrop-filter: blur(16px) saturate(140%);
		-webkit-backdrop-filter: blur(16px) saturate(140%);
		border-bottom: 1px solid var(--ug-border);
		box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
		padding: var(--ug-space-xs) var(--ug-gutter) var(--ug-space-sm);
		transform: translateY(-14px);
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--ug-dur), transform var(--ug-dur);
	}
	.ug-header__nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
	.ug-header__nav a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--ug-border); }
	.ug-header__nav a:last-child { border-bottom: none; }
	.ug-search input[type="search"] { width: 150px; }
}
@media (max-width: 560px) {
	.ug-footer__grid { grid-template-columns: 1fr; }
	.ug-search { display: none; }
	.ug-header__inner { gap: var(--ug-space-sm); }
}