/*
Theme Name: Minimog Child — Snowflakes Lagos
Theme URI: https://shopsnowflakes.com/
Author: Loystar Managed Hosting
Author URI: https://loystar.co/
Version: 3.0.2
Template: minimog
Text Domain: minimog-child
*/

:root {
	--sf-obsidian: #111111;
	--sf-charcoal: #222222;
	--sf-muted: #666666;
	--sf-gold: #B8924A;
	--sf-ivory: #FFFFFF;
	--sf-sand: #F7F5F0;
	--sf-border: #EBE8E2;
	--sf-white: #FFFFFF;
	--sf-font-serif: 'Cormorant Garamond', Georgia, serif;
	--sf-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
	font-family: var(--sf-font-sans);
	color: var(--sf-obsidian);
	background-color: var(--sf-white);
	overflow-x: hidden;
}

/* Modern Web Guidance: Balanced headings & pretty body copy */
h1, h2, h3, h4,
.sf-full-hero__title,
.sf-section-title,
.sf-cat-card__title,
.sf-banner-box__title {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Hide redundant default page title bar on front page */
body.home .page-title-bar {
	display: none !important;
}

/* ==========================================================================
   1. TEXT-BASED SERIF LOGO ("Snowflakes")
   ========================================================================== */
.branding,
.branding__logo,
.mobile-menu .branding__logo,
.header-pinned .branding__logo {
	width: auto !important;
	max-width: none !important;
}

.sf-text-logo {
	font-family: var(--sf-font-serif) !important;
	font-size: clamp(1.65rem, 1.35rem + 1.2vw, 2.55rem) !important;
	font-weight: 600 !important;
	letter-spacing: 0.03em !important;
	line-height: 1 !important;
	color: var(--sf-obsidian) !important;
	text-decoration: none !important;
	display: inline-block;
	padding: 4px 0;
	white-space: nowrap;
}

.sf-text-logo:hover {
	color: var(--sf-obsidian) !important;
	opacity: 0.85;
}

/* ==========================================================================
   2. NATIVE MINIMOG TOP BANNER (.header-above) & SINGLE-ROW MAIN MENU
   ========================================================================== */
#page-header .header-above {
	background-color: var(--sf-obsidian) !important;
	color: var(--sf-white) !important;
	border-bottom: none !important;
	font-size: 12px;
	letter-spacing: 0.04em;
	min-height: 38px;
	display: flex;
	align-items: center;
}

#page-header .header-above a,
#page-header .header-above .info-text,
#page-header .header-above .info-icon,
#page-header .header-above .header-text {
	color: rgba(255, 255, 255, 0.92) !important;
}

#page-header .header-above .header-text a {
	color: var(--sf-white) !important;
	font-weight: 600;
}

/* Single-Row Header Wrap Layout */
#page-header .header-wrap {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: nowrap !important;
	min-height: 74px;
	gap: 20px;
}

#page-header .header-left {
	flex: 0 0 auto !important;
	width: auto !important;
}

.desktop-menu #page-header .header-center {
	flex: 1 1 auto !important;
	width: auto !important;
	display: flex !important;
	justify-content: center !important;
	min-width: 0;
}

#page-header .header-right {
	flex: 0 0 auto !important;
	width: auto !important;
}

/* Hide desktop navigation completely on mobile/tablet so it never floats over the header */
.mobile-menu #page-header .header-center,
.mobile-menu #page-navigation,
.mobile-menu .page-navigation {
	display: none !important;
}

@media (max-width: 1199px) {
	#page-header .header-center,
	#page-navigation,
	.page-navigation {
		display: none !important;
	}
	#page-header .header-wrap {
		min-height: 62px;
		gap: 12px;
	}
}

/* Force Main Navigation Menu onto One Single Row on Desktop Only */
.desktop-menu #page-navigation,
.desktop-menu #page-navigation .menu--primary,
.desktop-menu #page-navigation ul.menu__container {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	white-space: nowrap !important;
}

.desktop-menu #page-navigation ul.menu__container > li {
	flex: 0 0 auto !important;
	white-space: nowrap !important;
	margin: 0 !important;
}

.desktop-menu #page-navigation ul.menu__container > li > a {
	white-space: nowrap !important;
	padding: 22px 16px !important;
	font-family: var(--sf-font-sans) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
	color: var(--sf-obsidian) !important;
}

.desktop-menu #page-navigation ul.menu__container > li > a:hover {
	color: var(--sf-gold) !important;
}

/* ==========================================================================
   3. LAYOUT & BUTTONS
   ========================================================================== */
.sf-container {
	max-width: 1380px;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 3vw, 3rem);
}

.sf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 36px;
	font-family: var(--sf-font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none !important;
	border-radius: 0;
	transition: all 0.25s ease;
	cursor: pointer;
}

.sf-btn--white {
	background: var(--sf-white);
	color: var(--sf-obsidian) !important;
	border: 1px solid var(--sf-white);
}

.sf-btn--white:hover {
	background: var(--sf-obsidian);
	color: var(--sf-white) !important;
	border-color: var(--sf-obsidian);
}

.sf-btn--outline {
	background: transparent;
	color: var(--sf-obsidian) !important;
	border: 1px solid var(--sf-obsidian);
}

.sf-btn--outline:hover {
	background: var(--sf-obsidian);
	color: var(--sf-white) !important;
}

/* ==========================================================================
   4. ABOVE-THE-FOLD FULL-WIDTH HERO BANNER (MINIMOG SAMPLE DEMO STYLE)
   ========================================================================== */
.sf-full-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	min-height: clamp(500px, 78vh, 760px);
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--sf-obsidian);
}

.sf-full-hero__backdrop {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
}

.sf-full-hero__panel {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.sf-full-hero__panel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	transform: scale(1.02);
}

.sf-full-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(15, 15, 15, 0.62) 0%,
		rgba(15, 15, 15, 0.35) 55%,
		rgba(15, 15, 15, 0.22) 100%
	);
}

.sf-full-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

.sf-full-hero__content {
	max-width: 640px;
	color: var(--sf-white);
	padding: 40px 0;
}

.sf-full-hero__eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 14px;
}

.sf-full-hero__title {
	font-family: var(--sf-font-serif);
	font-size: clamp(3rem, 2rem + 3.8vw, 5.25rem);
	font-weight: 500;
	line-height: 1.04;
	color: var(--sf-white);
	margin: 0 0 30px;
}

/* ==========================================================================
   5. MINIMAL SECTIONS & HEADINGS
   ========================================================================== */
.sf-section {
	padding: clamp(3.5rem, 6vw, 5.5rem) 0;
}

.sf-section--pt0 {
	padding-top: 0;
}

.sf-section-head {
	text-align: center;
	margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.sf-section-title {
	font-family: var(--sf-font-serif);
	font-size: clamp(2rem, 1.5rem + 1.8vw, 2.85rem);
	font-weight: 500;
	line-height: 1.15;
	color: var(--sf-obsidian);
	margin: 0;
}

.sf-section-foot {
	text-align: center;
	margin-top: 40px;
}

/* ==========================================================================
   6. SHOP BY CATEGORY (MINIMOG DEMO CARDS)
   ========================================================================== */
.sf-cat-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.sf-cat-card {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	display: block;
	background: var(--sf-sand);
	text-decoration: none !important;
}

.sf-cat-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.sf-cat-card:hover img {
	transform: scale(1.06);
}

.sf-cat-card__bar {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(6px);
	padding: 18px 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	transition: background-color 0.25s ease;
}

.sf-cat-card__title {
	font-family: var(--sf-font-serif);
	font-size: 22px;
	font-weight: 600;
	color: var(--sf-obsidian);
	margin: 0;
	line-height: 1.2;
}

.sf-cat-card__count {
	font-size: 12px;
	color: var(--sf-muted);
	display: block;
	margin-top: 2px;
}

.sf-cat-card__arrow {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--sf-sand);
	color: var(--sf-obsidian);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.sf-cat-card:hover .sf-cat-card__arrow {
	background: var(--sf-obsidian);
	color: var(--sf-white);
}

/* ==========================================================================
   7. MINIMAL MINIMOG PRODUCT GRID (BORDERLESS)
   ========================================================================== */
.sf-product-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px 24px;
}

.sf-product-card {
	display: flex;
	flex-direction: column;
}

.sf-product-card__media {
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--sf-sand);
	overflow: hidden;
	display: block;
	margin-bottom: 14px;
}

.sf-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.sf-product-card:hover .sf-product-card__media img {
	transform: scale(1.05);
}

.sf-product-card__quick {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	background: rgba(255, 255, 255, 0.95);
	color: var(--sf-obsidian);
	text-align: center;
	padding: 11px 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(8px);
	transition: all 0.25s ease;
}

.sf-product-card:hover .sf-product-card__quick {
	opacity: 1;
	transform: translateY(0);
}

.sf-product-card__title {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	margin: 0 0 6px;
}

.sf-product-card__title a {
	color: var(--sf-obsidian);
	text-decoration: none;
}

.sf-product-card__title a:hover {
	color: var(--sf-gold);
}

.sf-product-card__price {
	font-size: 14px;
	font-weight: 600;
	color: var(--sf-obsidian);
}

/* ==========================================================================
   8. DUAL EDITORIAL LOOKBOOK BANNERS
   ========================================================================== */
.sf-dual-banner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}

.sf-banner-box {
	position: relative;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	text-decoration: none !important;
	background: var(--sf-obsidian);
}

.sf-banner-box img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.sf-banner-box:hover img {
	transform: scale(1.05);
}

.sf-banner-box__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 35%, rgba(0, 0, 0, 0.68) 100%);
}

.sf-banner-box__content {
	position: relative;
	z-index: 2;
	padding: clamp(1.75rem, 3.5vw, 3rem);
	color: var(--sf-white);
}

.sf-banner-box__sub {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 8px;
}

.sf-banner-box__title {
	font-family: var(--sf-font-serif);
	font-size: clamp(1.85rem, 1.4rem + 1.4vw, 2.6rem);
	font-weight: 500;
	color: var(--sf-white);
	margin: 0 0 14px;
	line-height: 1.12;
}

.sf-banner-box__link {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sf-white);
	border-bottom: 1px solid var(--sf-white);
	padding-bottom: 3px;
}

/* ==========================================================================
   9. MINIMAL STORE STRIP & FOOTER
   ========================================================================== */
.sf-store-strip {
	border-top: 1px solid var(--sf-border);
	border-bottom: 1px solid var(--sf-border);
	padding: 36px 0;
	background: var(--sf-sand);
}

.sf-store-strip__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	text-align: center;
}

.sf-store-strip__item h4 {
	font-family: var(--sf-font-serif);
	font-size: 20px;
	font-weight: 600;
	color: var(--sf-obsidian);
	margin: 0 0 4px;
}

.sf-store-strip__item p {
	font-size: 13px;
	color: var(--sf-muted);
	margin: 0;
}

.sf-luxury-footer {
	background: var(--sf-obsidian);
	color: rgba(255, 255, 255, 0.8);
	padding: 56px 0 32px;
}

/* Hide parent theme's empty default copyright bar so we don't have two footers */
.page-footer {
	display: none !important;
}

.sf-luxury-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
	gap: 36px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sf-luxury-footer__brand {
	font-family: var(--sf-font-serif);
	font-size: 32px;
	font-weight: 600;
	color: var(--sf-white);
	margin: 0 0 12px;
	letter-spacing: 0.03em;
}

.sf-luxury-footer__tagline,
.sf-luxury-footer__address {
	font-size: 13px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
}

.sf-luxury-footer h4 {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sf-white);
	margin: 0 0 16px;
}

.sf-luxury-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sf-luxury-footer ul li {
	margin-bottom: 10px;
}

.sf-luxury-footer a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	font-size: 13px;
	transition: color 0.2s ease;
}

.sf-luxury-footer a:hover {
	color: var(--sf-white);
}

.sf-luxury-footer__bottom {
	padding-top: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   10. RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
	.sf-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sf-cat-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
	}
	.sf-luxury-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.sf-full-hero {
		min-height: 440px;
	}
	.sf-full-hero__backdrop {
		grid-template-columns: 1fr;
	}
	.sf-full-hero__panel:not(:first-child) {
		display: none;
	}
	.sf-full-hero__title {
		font-size: clamp(2.35rem, 8vw, 3.2rem);
		margin-bottom: 22px;
	}
	.sf-cat-grid,
	.sf-dual-banner,
	.sf-store-strip__grid,
	.sf-luxury-footer__grid {
		grid-template-columns: 1fr;
	}
	.sf-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 14px;
	}
}