/**
 * Ugett Store — interior pages: hero, about, contact, faq, wishlist, 404, post list.
 */

.ug-page { padding-block: var(--ug-space-lg) 0; }
.ug-page__content { max-width: 78ch; color: var(--ug-text-2); line-height: 1.75; }
.ug-page__content h2 { font-size: 1.6rem; margin-top: var(--ug-space-lg); }
.ug-page__content a { color: var(--ug-red); }

/* ============ Page hero ============ */
.ug-page-hero {
	position: relative;
	padding-block: var(--ug-space-xl) var(--ug-space-lg);
	margin-bottom: var(--ug-space-lg);
	border-bottom: 1px solid var(--ug-border);
	overflow: hidden;
}
.ug-page-hero__glow {
	position: absolute; top: -60%; right: -10%;
	width: 40vw; height: 40vw;
	background: radial-gradient(circle, var(--ug-red-glow), transparent 62%);
	filter: blur(70px); opacity: 0.4; pointer-events: none;
}
.ug-page-hero__label {
	font-family: var(--ug-font-display); font-size: 0.74rem; letter-spacing: 0.2em;
	text-transform: uppercase; color: var(--ug-red); margin: 0 0 8px;
}
.ug-page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); text-transform: uppercase; margin: 0; }
.ug-page-hero__sub { color: var(--ug-text-2); max-width: 60ch; margin-top: var(--ug-space-sm); font-size: 1.05rem; }

/* ============ About ============ */
.ug-about-grid { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: var(--ug-space-xl); align-items: start; margin-bottom: var(--ug-space-xl); }
.ug-about-story { color: var(--ug-text-2); font-size: 1.05rem; line-height: 1.8; }
.ug-about-story .ug-btn { margin-top: var(--ug-space-md); }
.ug-about-stats { display: grid; gap: var(--ug-space-sm); }
.ug-about-stat {
	padding: var(--ug-space-md);
	background: var(--ug-charcoal);
	border: 1px solid var(--ug-border);
	border-left: 3px solid var(--ug-red);
	border-radius: var(--ug-radius);
}
.ug-about-stat strong { display: block; font-family: var(--ug-font-display); font-size: 1.5rem; }
.ug-about-stat span { color: var(--ug-text-muted); font-size: 0.85rem; }
.ug-about-brands { display: flex; gap: var(--ug-space-lg); justify-content: center; padding: var(--ug-space-lg) 0; opacity: 0.5; }
.ug-about-brands .ug-cat-icon { width: 48px; height: 48px; color: var(--ug-metal); }

/* ============ Contact ============ */
.ug-contact-grid { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: var(--ug-space-xl); align-items: start; }
.ug-contact-form-wrap {
	background: var(--ug-charcoal); border: 1px solid var(--ug-border);
	border-radius: var(--ug-radius-lg); padding: var(--ug-space-lg);
}
.ug-contact-form-wrap h2 { font-size: 1.4rem; margin: 0 0 var(--ug-space-md); }
.ug-contact-info { display: grid; gap: var(--ug-space-sm); }
.ug-contact-card {
	padding: var(--ug-space-md);
	background: var(--ug-charcoal); border: 1px solid var(--ug-border);
	border-radius: var(--ug-radius);
}
.ug-contact-card h3 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ug-text-muted); margin: 0 0 6px; }
.ug-contact-card p { margin: 0; color: var(--ug-text); }
.ug-contact-card a { color: var(--ug-red); }
.ug-contact-card--accent { border-left: 3px solid var(--ug-red); }
.ug-contact-card--accent p { color: var(--ug-text-2); font-size: 0.9rem; }

/* ============ FAQ ============ */
.ug-faq { max-width: 820px; margin-inline: auto; display: grid; gap: 10px; }
.ug-faq__item {
	background: var(--ug-charcoal);
	border: 1px solid var(--ug-border);
	border-radius: var(--ug-radius-lg);
	overflow: hidden;
	transition: border-color var(--ug-dur);
}
.ug-faq__item[open] { border-color: var(--ug-border-strong); }
.ug-faq__item summary {
	display: flex; align-items: center; justify-content: space-between; gap: var(--ug-space-md);
	padding: var(--ug-space-md) var(--ug-space-md);
	cursor: pointer; list-style: none;
	font-family: var(--ug-font-display); font-weight: 600; font-size: 1.05rem; color: var(--ug-text);
}
.ug-faq__item summary::-webkit-details-marker { display: none; }
.ug-faq__marker { position: relative; width: 16px; height: 16px; flex: none; }
.ug-faq__marker::before, .ug-faq__marker::after {
	content: ""; position: absolute; background: var(--ug-red); border-radius: 2px;
	transition: transform var(--ug-dur);
}
.ug-faq__marker::before { top: 7px; left: 0; width: 16px; height: 2px; }
.ug-faq__marker::after { top: 0; left: 7px; width: 2px; height: 16px; }
.ug-faq__item[open] .ug-faq__marker::after { transform: scaleY(0); }
.ug-faq__answer { padding: 0 var(--ug-space-md) var(--ug-space-md); color: var(--ug-text-2); }
.ug-faq__answer p { margin: 0; }
.ug-faq__cta { text-align: center; margin-top: var(--ug-space-lg); color: var(--ug-text-2); }

/* ============ 404 ============ */
.ug-404__inner { text-align: center; padding-block: var(--ug-space-xl); display: grid; justify-items: center; gap: var(--ug-space-sm); }
.ug-404__code {
	font-family: var(--ug-font-display); font-size: clamp(5rem, 18vw, 12rem); font-weight: 700; line-height: 0.9;
	color: transparent; -webkit-text-stroke: 2px var(--ug-red); margin: 0;
	text-shadow: 0 0 60px var(--ug-red-glow);
}
.ug-404__title { font-size: clamp(1.8rem, 4vw, 2.8rem); text-transform: uppercase; margin: 0; }
.ug-404__sub { color: var(--ug-text-2); max-width: 52ch; }
.ug-404__search { width: min(420px, 100%); margin: var(--ug-space-sm) 0; }
.ug-404__search .ug-search { width: 100%; }
.ug-404__search .ug-search input[type="search"] { width: 100%; max-width: none; height: 48px; }
.ug-404__actions { display: flex; gap: var(--ug-space-sm); flex-wrap: wrap; justify-content: center; }

/* ============ Post list ============ */
.ug-post-list { display: grid; gap: var(--ug-space-md); max-width: 820px; }
.ug-post-card { padding: var(--ug-space-md); background: var(--ug-charcoal); border: 1px solid var(--ug-border); border-radius: var(--ug-radius-lg); }
.ug-post-card__title { font-size: 1.4rem; margin: 0 0 8px; }
.ug-post-card__title a { color: var(--ug-text); }
.ug-post-card__title a:hover { color: var(--ug-red); }
.ug-post-card__excerpt { color: var(--ug-text-2); margin-bottom: 10px; }

@media (max-width: 860px) {
	.ug-about-grid, .ug-contact-grid { grid-template-columns: 1fr; }
}