/* Contact Us — storefront page */

.contact-us {
	--contact-us-radius: 1.125rem;
	--contact-us-radius-lg: 1.5rem;
	--contact-us-border: color-mix(in srgb, var(--primary-text-color, #64748b) 12%, transparent);
	--contact-us-shadow: 0 18px 48px color-mix(in srgb, var(--primary-title-color, #0f172a) 8%, transparent);
	--contact-us-shadow-soft: 0 8px 24px color-mix(in srgb, var(--primary-title-color, #0f172a) 6%, transparent);
	margin-bottom: clamp(2rem, 5vw, 4rem);
}

.contact-us-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(3rem, 8vw, 5.5rem) clamp(1.25rem, 4vw, 2rem);
	text-align: center;
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--primary-brand-color, #d4af37) 92%, #000 8%) 0%,
		color-mix(in srgb, var(--primary-brand-color, #d4af37) 55%, var(--primary-title-color, #1a1a1a) 45%) 100%
	);
	color: var(--sc-contact-us-hero-text, #fff);
}

.contact-us-hero__glow {
	position: absolute;
	inset: -40% auto auto 50%;
	width: min(520px, 90vw);
	height: min(520px, 90vw);
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, transparent 68%);
	pointer-events: none;
}

.contact-us-hero__pattern {
	position: absolute;
	inset: 0;
	opacity: 0.08;
	background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
	background-size: 22px 22px;
	pointer-events: none;
}

.contact-us-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 42rem;
	margin: 0 auto;
}

.contact-us-hero__eyebrow {
	display: inline-block;
	margin-bottom: 0.75rem;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: color-mix(in srgb, #fff 16%, transparent);
	border: 1px solid color-mix(in srgb, #fff 28%, transparent);
}

.contact-us-hero__title {
	margin: 0 0 0.85rem;
	font-family: var(--font-family, 'Roboto', sans-serif);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--sc-contact-us-hero-title-text, #fff);
}

.contact-us-hero__subtitle {
	margin: 0;
	font-size: clamp(1rem, 2.2vw, 1.125rem);
	line-height: 1.65;
	color: var(--sc-contact-us-hero-subtitle-text, color-mix(in srgb, #fff 88%, transparent));
}

.contact-us__container {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 clamp(1rem, 3vw, 1.5rem);
	transform: translateY(clamp(-2rem, -4vw, -3rem));
}

.contact-us-quick {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

.contact-us-quick__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	padding: 1.25rem 1.35rem;
	border-radius: var(--contact-us-radius);
	text-decoration: none;
	background: var(--sc-contact-us-quick-bg, var(--primary-background-color, #fff));
	border: 1px solid var(--sc-contact-us-quick-border, var(--contact-us-border));
	box-shadow: var(--contact-us-shadow-soft);
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.contact-us-quick__item:hover {
	transform: translateY(-3px);
	box-shadow: var(--contact-us-shadow);
	border-color: color-mix(in srgb, var(--primary-brand-color, #d4af37) 35%, var(--contact-us-border));
}

.contact-us-quick__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.75rem;
	font-size: 1.1rem;
	margin-bottom: 0.15rem;
}

.contact-us-quick__item--phone .contact-us-quick__icon {
	background: color-mix(in srgb, var(--primary-brand-color, #d4af37) 18%, transparent);
	color: var(--primary-brand-color, #d4af37);
}

.contact-us-quick__item--whatsapp .contact-us-quick__icon {
	background: color-mix(in srgb, #25d366 18%, transparent);
	color: #128c7e;
}

.contact-us-quick__item--maps .contact-us-quick__icon {
	background: color-mix(in srgb, #4285f4 18%, transparent);
	color: #1a73e8;
}

.contact-us-quick__label {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sc-contact-us-quick-label-text, var(--secondary-text-color, #64748b));
}

.contact-us-quick__value {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--sc-contact-us-quick-value-text, var(--primary-title-color, #0f172a));
}

.contact-us-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
	gap: clamp(1.25rem, 3vw, 1.75rem);
	align-items: start;
}

.contact-us-main {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.contact-us-card {
	position: relative;
	padding: 1.5rem 1.5rem 1.35rem;
	border-radius: var(--contact-us-radius-lg);
	background: var(--sc-contact-us-card-bg, var(--primary-background-color, #fff));
	border: 1px solid var(--sc-contact-us-card-border, var(--contact-us-border));
	box-shadow: var(--contact-us-shadow-soft);
}

.contact-us-card--hours {
	background: linear-gradient(
		180deg,
		var(--sc-contact-us-card-hours-bg-top, color-mix(in srgb, var(--secondary-background-color, #f7e5b7) 45%, #fff 55%)) 0%,
		var(--sc-contact-us-card-bg, var(--primary-background-color, #fff)) 100%
	);
}

.contact-us-card__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 0.85rem;
	border-radius: 0.85rem;
	font-size: 1.15rem;
	color: var(--sc-contact-us-card-badge-text, var(--primary-brand-color, #d4af37));
	background: color-mix(in srgb, var(--primary-brand-color, #d4af37) 14%, transparent);
}

.contact-us-card__heading {
	position: relative;
	margin: 0 0 0.85rem;
	padding-bottom: 0.65rem;
	font-family: var(--font-family, 'Roboto', sans-serif);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--sc-contact-us-card-heading-text, var(--secondary-title-color, #1e293b));
}

.contact-us-card__heading::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3rem;
	height: 3px;
	border-radius: 999px;
	background: var(--sc-contact-us-card-heading-accent-bg, var(--primary-brand-color, #d4af37));
}

.contact-us-card__lead {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--sc-contact-us-card-lead-text, var(--primary-text-color, #334155));
}

.contact-us-card__link-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1.1rem;
	border-radius: 0.65rem;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	color: var(--sc-contact-us-card-link-btn-text, #fff);
	background: var(--sc-contact-us-card-link-btn-bg, var(--primary-brand-color, #d4af37));
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.contact-us-card__link-btn:hover {
	opacity: 0.92;
	transform: translateY(-1px);
}

.contact-us-hours {
	padding: 1rem 1.1rem;
	border-radius: 0.85rem;
	border: 1px dashed color-mix(in srgb, var(--primary-brand-color, #d4af37) 35%, var(--contact-us-border));
	background: color-mix(in srgb, var(--primary-background-color, #fff) 88%, var(--secondary-background-color, #f7e5b7) 12%);
}

.contact-us-hours__text {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.75;
	font-weight: 500;
	color: var(--sc-contact-us-hours-text, var(--primary-text-color, #334155));
	white-space: pre-line;
}

.contact-us-card__rows {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.contact-us-card__row {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 0.85rem 0.95rem;
	border-radius: 0.85rem;
	background: color-mix(in srgb, var(--secondary-background-color, #f7e5b7) 22%, var(--primary-background-color, #fff) 78%);
}

.contact-us-card__row-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.65rem;
	background: color-mix(in srgb, var(--primary-brand-color, #d4af37) 16%, transparent);
	color: var(--primary-brand-color, #d4af37);
}

.contact-us-card__row-icon--whatsapp {
	background: color-mix(in srgb, #25d366 16%, transparent);
	color: #128c7e;
}

.contact-us-card__row-body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.contact-us-card__row-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sc-contact-us-row-label-text, var(--secondary-text-color, #64748b));
}

.contact-us-card__row-body a {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--sc-contact-us-row-link-text, var(--primary-brand-color, #d4af37));
	text-decoration: none;
	word-break: break-word;
}

.contact-us-card__row-body a:hover {
	text-decoration: underline;
}

.contact-us-social-panel {
	padding: 1.35rem;
	border-radius: var(--contact-us-radius-lg);
	border: 1px solid var(--sc-contact-us-social-panel-border, var(--contact-us-border));
	background: linear-gradient(
		145deg,
		color-mix(in srgb, var(--secondary-background-color, #f7e5b7) 35%, var(--primary-background-color, #fff) 65%) 0%,
		var(--primary-background-color, #fff) 100%
	);
	box-shadow: var(--contact-us-shadow-soft);
}

.contact-us-social-panel__head {
	margin-bottom: 1rem;
}

.contact-us-social-panel__title {
	margin: 0 0 0.35rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--sc-contact-us-social-title-text, var(--primary-title-color, #0f172a));
}

.contact-us-social-panel__subtitle {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--sc-contact-us-social-subtitle-text, var(--secondary-text-color, #64748b));
}

.contact-us-social {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: 0.75rem;
}

.contact-us-social__link {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.75rem 0.9rem;
	border-radius: 0.75rem;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--sc-contact-us-social-link-text, var(--primary-title-color, #0f172a));
	background: var(--sc-contact-us-social-link-bg, var(--primary-background-color, #fff));
	border: 1px solid var(--contact-us-border);
	transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.contact-us-social__link i,
.contact-us-social__link svg {
	width: 1.15rem;
	text-align: center;
	font-size: 1.1rem;
	flex-shrink: 0;
}

.contact-us-social__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--contact-us-shadow-soft);
	color: #fff;
}

.contact-us-social__link--facebook:hover { background: #1877f2; border-color: #1877f2; }
.contact-us-social__link--instagram:hover { background: #e4405f; border-color: #e4405f; }
.contact-us-social__link--tiktok:hover { background: #010101; border-color: #010101; }
.contact-us-social__link--x:hover { background: #000; border-color: #000; }
.contact-us-social__link--youtube:hover { background: #ff0000; border-color: #ff0000; }
.contact-us-social__link--snapchat:hover { background: #fffc00; border-color: #fffc00; color: #111; }
.contact-us-social__link--telegram:hover { background: #0088cc; border-color: #0088cc; }

.contact-us-aside {
	position: sticky;
	top: calc(1rem + env(safe-area-inset-top, 0px));
}

.contact-us-map {
	position: relative;
	overflow: hidden;
	min-height: 320px;
	border-radius: var(--contact-us-radius-lg);
	border: 1px solid var(--contact-us-border);
	box-shadow: var(--contact-us-shadow);
	background: color-mix(in srgb, var(--secondary-background-color, #f7e5b7) 30%, #e2e8f0 70%);
}

.contact-us-map__frame {
	display: block;
	width: 100%;
	height: min(420px, 62vh);
	border: 0;
}

.contact-us-map__overlay-link {
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
	color: #fff;
	background: color-mix(in srgb, #111 72%, transparent);
	backdrop-filter: blur(6px);
	transition: background 0.2s ease;
}

.contact-us-map__overlay-link:hover {
	background: color-mix(in srgb, #111 88%, transparent);
}

.contact-us-map--placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 280px;
	padding: 2rem;
	text-decoration: none;
	color: var(--primary-title-color, #0f172a);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-us-map--placeholder:hover {
	transform: translateY(-2px);
	box-shadow: var(--contact-us-shadow);
}

.contact-us-map__pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	font-size: 1.75rem;
	color: var(--primary-brand-color, #d4af37);
	background: color-mix(in srgb, var(--primary-brand-color, #d4af37) 16%, #fff 84%);
}

.contact-us-map__placeholder-title {
	font-size: 1.25rem;
	font-weight: 700;
}

.contact-us-map__placeholder-text {
	font-size: 0.9375rem;
	color: var(--secondary-text-color, #64748b);
}

.contact-us-aside-card {
	padding: 1.75rem 1.5rem;
	border-radius: var(--contact-us-radius-lg);
	text-align: center;
	border: 1px solid var(--contact-us-border);
	background: var(--primary-background-color, #fff);
	box-shadow: var(--contact-us-shadow-soft);
}

.contact-us-aside-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: 0.85rem;
	border-radius: 1rem;
	font-size: 1.35rem;
	color: var(--primary-brand-color, #d4af37);
	background: color-mix(in srgb, var(--primary-brand-color, #d4af37) 14%, transparent);
}

.contact-us-aside-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--primary-title-color, #0f172a);
}

.contact-us-aside-card__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--secondary-text-color, #64748b);
}

.contact-us-empty {
	max-width: 32rem;
	margin: clamp(2rem, 6vw, 4rem) auto 0;
	padding: clamp(2rem, 5vw, 3rem);
	text-align: center;
	border-radius: var(--contact-us-radius-lg);
	border: 1px dashed var(--contact-us-border);
	background: var(--primary-background-color, #fff);
	box-shadow: var(--contact-us-shadow-soft);
}

.contact-us-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	margin-bottom: 1rem;
	border-radius: 50%;
	font-size: 1.75rem;
	color: var(--primary-brand-color, #d4af37);
	background: color-mix(in srgb, var(--primary-brand-color, #d4af37) 12%, transparent);
}

.contact-us-empty__title {
	margin: 0 0 0.65rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--primary-title-color, #0f172a);
}

.contact-us-empty__text {
	margin: 0 0 1.25rem;
	line-height: 1.65;
	color: var(--secondary-text-color, #64748b);
}

.contact-us-empty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.35rem;
	border-radius: 0.65rem;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	background: var(--primary-brand-color, #d4af37);
	transition: opacity 0.2s ease;
}

.contact-us-empty__btn:hover {
	opacity: 0.92;
}

@media (max-width: 960px) {
	.contact-us-layout {
		grid-template-columns: 1fr;
	}

	.contact-us-aside {
		position: static;
		order: -1;
	}

	.contact-us-map__frame {
		height: min(340px, 50vh);
	}
}

@media (max-width: 640px) {
	.contact-us__container {
		transform: translateY(-1.25rem);
	}

	.contact-us-social {
		grid-template-columns: 1fr 1fr;
	}

	.contact-us-social__link span {
		font-size: 0.875rem;
	}
}