/**
 * EMPORAS — Homepage & Footer Styles
 *
 * @package EMPORAS
 */

/* ============================================
   COMMON SECTION HELPERS
   ============================================ */
.section { padding: 80px 0; }

.section-header {
	margin-bottom: 48px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	border-bottom: 2px solid var(--charcoal);
	padding-bottom: 24px;
}

.section-eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--emporas-steel);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 8px;
}

.section-title {
	font-family: var(--font-display);
	font-size: 42px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--charcoal);
	line-height: 1.1;
	margin: 0;
}

.section-link {
	color: var(--emporas-navy);
	font-weight: 600;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
}
.section-link:hover { color: var(--emporas-navy-dark); }

/* Buttons */
.btn {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	padding: 16px 32px;
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: all 0.15s ease;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}
.btn--primary { background: var(--white); color: var(--emporas-navy); }
.btn--primary:hover { background: var(--light-grey); transform: translateY(-1px); }
.btn--outline { background: transparent; color: var(--white); border: 2px solid var(--white); }
.btn--outline:hover { background: var(--white); color: var(--emporas-navy); }

/* ============================================
   HERO
   ============================================ */
.hero { background: var(--charcoal); overflow: hidden; }
.hero__link { display: block; }
.hero__image { width: 100%; height: auto; display: block; }

/* ============================================
   TRUST STRIP
   ============================================ */
.trust-strip {
	background: var(--white);
	border-bottom: 1px solid var(--concrete);
	padding: 32px 0;
}
.trust-strip__grid {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 32px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.trust-strip__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	border-right: 1px solid var(--concrete);
}
.trust-strip__item:last-child { border-right: none; }
.trust-strip__icon {
	width: 48px;
	height: 48px;
	background: var(--emporas-navy);
	color: var(--white);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.trust-strip__icon svg { width: 24px; height: 24px; }
.trust-strip__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--charcoal);
	line-height: 1.2;
}
.trust-strip__sub {
	font-size: 12px;
	color: var(--emporas-steel);
	margin-top: 2px;
}

/* ============================================
   CATEGORIES
   ============================================ */
.categories-section {
	background: var(--light-grey);
	padding: 80px 0;
}
.categories-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.category-card {
	background: var(--white);
	border: 1px solid var(--concrete);
	border-radius: var(--radius-lg);
	overflow: hidden;
	position: relative;
	height: 420px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	text-decoration: none;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.category-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(30, 42, 94, 0.18);
	border-color: var(--emporas-navy);
}
.category-card__bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--emporas-navy-dark), var(--emporas-navy));
	transition: transform 0.5s ease;
}
.category-card:hover .category-card__bg {
	transform: scale(1.05);
}
.category-card__bg--image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* Navy overlay on top of image — keeps the EMPORAS brand color even with bg image */
.category-card__bg--image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(30, 42, 94, 0.78), rgba(42, 56, 112, 0.7));
	mix-blend-mode: multiply;
}
.categories-grid--1 { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
.categories-grid--2 { grid-template-columns: repeat(2, 1fr); }
.category-card__content {
	position: relative;
	padding: 40px;
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 70%, transparent 100%);
	color: var(--white);
	z-index: 2;
}
.category-card__eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--emporas-steel-light);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 12px;
}
.category-card__title {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--white);
	margin: 0 0 20px;
	line-height: 1.1;
}
.category-card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--emporas-steel-light);
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: gap 0.15s ease, color 0.15s ease;
}
.category-card:hover .category-card__link {
	gap: 12px;
	color: var(--white);
}

/* ============================================
   FEATURED BANNER
   ============================================ */
.featured-banner { padding: 80px 0 0; }
.featured-banner__link { display: block; }
.featured-banner__image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-md);
}

/* ============================================
   FEATURED PRODUCTS (homepage section)
   ============================================ */
.featured-products .woocommerce,
.featured-products .products-grid {
	width: 100%;
}
.featured-products .products-grid ul.products,
.featured-products ul.products,
.featured-products .woocommerce ul.products,
section.featured-products ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 24px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}
.featured-products ul.products li.product,
.featured-products .woocommerce ul.products li.product {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	display: flex !important;
	flex-direction: column !important;
}
.featured-products ul.products::before,
.featured-products ul.products::after {
	display: none !important;
	content: none !important;
}

/* ============================================
   BRANDS
   ============================================ */
.brands-section {
	background: var(--charcoal);
	padding: 60px 0;
}
.brands-section__eyebrow {
	color: var(--emporas-steel-light) !important;
	text-align: center;
	margin-bottom: 32px;
}
.brands-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	max-width: 1100px;
	margin: 0 auto;
}
.brand-tile {
	height: 100px;
	background: var(--white);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	padding: 20px;
}
.brand-tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.brand-name {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 800;
	color: var(--charcoal);
	letter-spacing: 2px;
	text-transform: uppercase;
}
.brand-name--italic { font-style: italic; }

/* ============================================
   B2B CTA
   ============================================ */
.b2b-cta {
	background: var(--emporas-navy);
	color: var(--white);
	padding: 100px 32px;
	text-align: center;
	position: relative;
}
.b2b-cta::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(to right, var(--emporas-navy-light), var(--emporas-steel-light));
}
.b2b-cta__inner { max-width: 800px; margin: 0 auto; }
.b2b-cta__eyebrow {
	color: var(--emporas-steel-light) !important;
	letter-spacing: 3px !important;
	margin-bottom: 24px !important;
}
.b2b-cta__title {
	font-family: var(--font-display);
	font-size: 56px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 24px;
	line-height: 1.05;
	color: var(--white);
}
.b2b-cta__subtitle {
	font-size: 18px;
	opacity: 0.85;
	margin: 0 0 48px;
	line-height: 1.6;
}
.b2b-cta__features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 48px;
	text-align: left;
}
.b2b-feature {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	padding: 24px;
	border-radius: var(--radius-md);
}
.b2b-feature__icon {
	width: 40px;
	height: 40px;
	background: var(--white);
	color: var(--emporas-navy);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.b2b-feature__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
	color: var(--white);
}
.b2b-feature__text {
	font-size: 13px;
	opacity: 0.8;
	line-height: 1.5;
}
.b2b-cta__buttons {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ============================================
   TRUST SECTION (about + stats)
   ============================================ */
.trust-section { background: var(--white); }
.trust-section__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.trust-section__title {
	font-family: var(--font-display);
	font-size: 36px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 16px;
	line-height: 1.1;
}
.trust-section__text p {
	font-size: 16px;
	color: var(--graphite);
	line-height: 1.7;
	margin-bottom: 24px;
}

.official-distributors {
	background: var(--light-grey);
	padding: 32px;
	border-radius: var(--radius-md);
	border-left: 4px solid var(--emporas-navy);
}
.official-distributors__eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--emporas-navy);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 12px;
}
.official-distributors__title {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 16px;
}
.official-distributors__brands {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.official-brand {
	background: var(--white);
	padding: 12px 20px;
	border-radius: var(--radius-md);
	border: 1px solid var(--concrete);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 1px;
	color: var(--charcoal);
}

.trust-section__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.stat-box {
	background: var(--charcoal);
	color: var(--white);
	padding: 32px;
	border-radius: var(--radius-md);
	border-left: 4px solid var(--emporas-navy);
}
.stat-box__number {
	font-family: var(--font-display);
	font-size: 56px;
	font-weight: 800;
	line-height: 1;
	color: var(--white);
}
.stat-box__label {
	font-family: var(--font-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--emporas-steel-light);
	margin-top: 12px;
}

/* ============================================
   BLOG
   ============================================ */
.blog-section { background: var(--light-grey); }
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.blog-card {
	background: var(--white);
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid var(--concrete);
	transition: all 0.2s ease;
}
.blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(0,0,0,0.08);
	border-color: var(--emporas-navy);
}
.blog-card__link { color: inherit; text-decoration: none; display: block; }
.blog-card__image {
	height: 220px;
	background: linear-gradient(135deg, var(--emporas-navy-dark), var(--emporas-navy));
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.blog-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.blog-card__image svg { color: rgba(255,255,255,0.2); }
.blog-card__content { padding: 24px; }
.blog-card__meta {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--emporas-steel);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.blog-card__category { color: var(--emporas-navy); font-weight: 600; }
.blog-card__title {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--charcoal);
	margin: 0 0 12px;
	line-height: 1.2;
}
.blog-card__excerpt {
	font-size: 14px;
	color: var(--graphite);
	line-height: 1.6;
	margin: 0 0 16px;
}
.blog-card__readmore {
	color: var(--emporas-navy);
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
	background: var(--charcoal);
	color: var(--white);
	padding: 80px 0 0;
	margin-top: 0;
}
.site-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
	gap: 48px;
	margin-bottom: 64px;
}
.site-footer__logo img,
.site-footer__logo .custom-logo,
.site-footer__logo .custom-logo-link img {
	height: 48px !important;
	width: auto !important;
	max-width: 200px !important;
	max-height: 48px !important;
	filter: brightness(0) invert(1);
	margin-bottom: 24px;
	display: block;
}
.site-footer__logo-text {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 800;
	letter-spacing: 2px;
	margin-bottom: 24px;
	text-transform: uppercase;
}
.site-footer__brand p {
	font-size: 14px;
	opacity: 0.7;
	line-height: 1.7;
	margin: 0 0 24px;
}
.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.site-footer__contact a,
.site-footer__contact span {
	color: var(--white);
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	opacity: 0.85;
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.site-footer__contact a:hover { opacity: 1; }

.site-footer__col h4 {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 24px;
	color: var(--white);
}
.site-footer__links {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
}
.site-footer__links a {
	color: var(--white);
	font-size: 14px;
	opacity: 0.7;
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.site-footer__links a:hover { opacity: 1; }

.site-footer__newsletter h4 {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 16px;
	color: var(--white);
}
.site-footer__newsletter p {
	font-size: 14px;
	opacity: 0.7;
	line-height: 1.6;
	margin: 0 0 16px;
}
.newsletter-form {
	display: flex;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-bottom: 24px;
}
.newsletter-form__input {
	flex: 1;
	background: transparent;
	border: none;
	padding: 12px 16px;
	color: var(--white);
	font-size: 14px;
	outline: none;
	min-width: 0;
}
.newsletter-form__input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-form__button {
	background: var(--emporas-navy);
	color: var(--white);
	border: none;
	padding: 0 20px;
	cursor: pointer;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.newsletter-form__button:hover { background: var(--emporas-navy-light); }

.social-links {
	display: flex;
	gap: 12px;
}
.social-link {
	width: 36px;
	height: 36px;
	background: rgba(255,255,255,0.1);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
	transition: background 0.15s ease;
}
.social-link:hover { background: var(--emporas-navy); }

.site-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.1);
	padding: 24px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	opacity: 0.6;
	flex-wrap: wrap;
	gap: 16px;
}
.site-footer__bottom p { margin: 0; }
.site-footer__bottom-links {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-footer__bottom-links a { color: var(--white); text-decoration: none; }
.site-footer__bottom-links a:hover { opacity: 1; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
	.section-title, .b2b-cta__title { font-size: 32px; }
	.trust-section__grid, .b2b-cta__features { grid-template-columns: 1fr; gap: 32px; }
	.categories-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
	.brands-grid { grid-template-columns: repeat(2, 1fr); }
	.featured-products .products-grid,
	.featured-products ul.products { grid-template-columns: repeat(2, 1fr) !important; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
	.section { padding: 48px 0; }
	.section-header { flex-direction: column; align-items: flex-start; }
	.section-title, .b2b-cta__title { font-size: 28px; }
	.trust-strip__grid { grid-template-columns: repeat(2, 1fr); }
	.trust-strip__item:nth-child(2) { border-right: none; }
	.categories-grid, .blog-grid, .brands-grid { grid-template-columns: 1fr; }
	.featured-products .products-grid,
	.featured-products ul.products { grid-template-columns: 1fr !important; }
	.b2b-cta { padding: 60px 20px; }
	.site-footer__grid { grid-template-columns: 1fr; }
	.site-footer__bottom { flex-direction: column; text-align: center; }
}