/* ========================================
   SELFRIDGES-INSPIRED HOMEPAGE DESIGN
   ======================================== */

/* Header Styles */
.mainHeader {
	background: #101622;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	position: sticky;
	top: 0;
	z-index: 1000;
}

.topBar {
	background: #1a1a1a;
	color: #fff;
	padding: 8px 0;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 40px;
}

.topBarLeft, .topBarRight {
	display: flex;
	gap: 20px;
}

.topBarCenter {
	flex: 1;
	text-align: center;
	font-weight: 500;
}

.topBarLink {
	color: #fff;
	text-decoration: none;
	transition: opacity 0.3s;
	font-size: 11px;
}

.topBarLink:hover {
	opacity: 0.7;
}

.topBarPromo {
	font-weight: 500;
}

.headerMain {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 40px;
	max-width: 1400px;
	margin: 0 auto;
}

.headerLogo {
	flex: 0 0 auto;
}

.logoImage {
	height: 70px;
	width: auto;
	display: block;
}

.logoTitle {
	font-family: 'Playfair Display', serif;
	font-size: 28px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	letter-spacing: 1px;
	margin: 0;
}

.headerNav {
	display: flex;
	gap: 35px;
	align-items: center;
}

.navLink {
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	transition: color 0.3s;
	position: relative;
}

.navLink:hover {
	color: #d4af37;
}

.navDropdown {
	position: relative;
}

.navDropdownToggle {
	cursor: pointer;
}

.navDropdownMenu {
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	box-shadow: 0 4px 20px rgba(0,0,0,0.1);
	min-width: 220px;
	padding: 15px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.3s;
	z-index: 100;
}

.navDropdown:hover .navDropdownMenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.navDropdownLink {
	display: block;
	padding: 10px 20px;
	color: #1a1a1a;
	text-decoration: none;
	font-size: 13px;
	transition: background 0.3s;
}

.navDropdownLink:hover {
	background: #f5f5f5;
}

.headerActions {
	display: flex;
	gap: 20px;
	align-items: center;
}

.mobileMenuToggle {
	display: none;
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: #fff;
}

/* Mobile Menu */
.mobileMenu {
	position: fixed;
	top: 0;
	right: -100%;
	width: 320px;
	height: 100vh;
	background: #fff;
	box-shadow: -2px 0 20px rgba(0,0,0,0.1);
	z-index: 2000;
	transition: right 0.4s;
	overflow-y: auto;
}

.mobileMenu.active {
	right: 0;
}

.mobileMenuHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	border-bottom: 1px solid #e5e5e5;
}

.mobileMenuTitle {
	font-size: 18px;
	font-weight: 600;
}

.mobileMenuClose {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: #1a1a1a;
}

.mobileMenuContent {
	padding: 20px;
}

.mobileMenuLink {
	display: block;
	padding: 15px 0;
	color: #1a1a1a;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	border-bottom: 1px solid #f0f0f0;
}

.mobileMenuSection {
	margin-top: 25px;
}

.mobileMenuSectionTitle {
	font-size: 14px;
	font-weight: 600;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 10px;
}

.mobileMenuSubLink {
	display: block;
	padding: 12px 0 12px 15px;
	color: #1a1a1a;
	text-decoration: none;
	font-size: 14px;
	border-bottom: 1px solid #f5f5f5;
}

.mobileMenuPhone {
	margin-top: 20px;
	color: #000;
	font-weight: 600;
}

/* Hero Section */
.heroSection {
	background: black;
	color: #fff;
	padding: 80px 40px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.heroSection::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('/images/hero.jpg') center/cover;
	opacity: 0.4;
}

.heroContent {
	position: relative;
	max-width: 800px;
	margin: 0 auto;
	z-index: 1;
}

.heroTitle {
	color: white;
	font-family: 'Playfair Display', serif;
	font-size: 48px;
	font-weight: 700;
	margin-bottom: 20px;
	line-height: 1.2;
}

.heroSubtitle {
	font-size: 18px;
	margin-bottom: 35px;
	line-height: 1.6;
	opacity: 0.9;
}

.heroButton {
	display: inline-block;
	background: #fff;
	color: #1a1a1a;
	padding: 16px 45px;
	text-decoration: none;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	transition: all 0.3s;
	border-radius: 2px;
}

.heroButton:hover {
	background: #f0f0f0;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Categories Grid */
.categoriesSection {
	padding: 70px 40px;
	background: #fff;
}

.categoriesGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 25px;
	max-width: 1200px;
	margin: 0 auto;
}

.categoryCard {
	text-align: center;
	text-decoration: none;
	transition: transform 0.3s;
}

.categoryCard:hover {
	transform: translateY(-5px);
}

.categoryImage {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	margin-bottom: 15px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.categoryName {
	color: #1a1a1a;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Shop New In Section */
.shopNewInSection, .latestProductsSection, .featuredCollectionsSection {
	padding: 70px 40px;
	background: #fafafa;
}

.sectionHeader {
	text-align: center;
	margin-bottom: 50px;
}

.sectionTitle {
	font-family: 'Playfair Display', serif;
	font-size: 36px;
	font-weight: 700;
	margin-bottom: 15px;
	color: #1a1a1a;
}

.sectionSubtitle {
	font-size: 16px;
	color: #666;
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.6;
}

.productsGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 35px;
	max-width: 1400px;
	margin: 0 auto;
}

.productCard {
	background: #fff;
	text-decoration: none;
	transition: all 0.3s;
	position: relative;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.productCard:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	transform: translateY(-5px);
}

.productCardLink {
	text-decoration: none;
	display: block;
}

.productCardImage {
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	background: #f5f5f5;
	position: relative;
}

.productCardImage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s;
}

.productCard:hover .productCardImage img {
	transform: scale(1.05);
}

.productBadge {
	position: absolute;
	top: 15px;
	right: 15px;
	background: #d4af37;
	color: #fff;
	padding: 6px 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	z-index: 10;
}

.productCardContent {
	padding: 20px;
}

.productBrand {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #999;
	margin-bottom: 8px;
	font-weight: 600;
}

.productCardTitle {
	font-size: 15px;
	color: #1a1a1a;
	margin-bottom: 12px;
	line-height: 1.4;
	font-weight: 500;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.productRating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.ratingScore {
	background: #1a1a1a;
	color: #fff;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 2px;
}

.ratingLabel {
	font-size: 12px;
	color: #666;
	font-weight: 500;
}

.productPrice {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.priceWas {
	text-decoration: line-through;
	color: #999;
	font-size: 14px;
}

.priceNow {
	font-size: 18px;
	font-weight: 700;
	color: #1a1a1a;
}

.productCTA {
	color: #1a1a1a;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.productCard:hover .productCTA {
	gap: 12px;
}

/* Collections Section */
.collectionsSection, .allCollectionsSection {
	padding: 70px 40px;
	background: #fff;
}

.collectionsGrid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 25px;
	max-width: 1400px;
	margin: 0 auto;
}

.collectionCard {
	position: relative;
	height: 300px;
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.4s;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.collectionCard:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}

.collectionCardImage {
	width: 100%;
	height: 100%;
	position: relative;
}

.collectionCardImage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s;
}

.collectionCard:hover .collectionCardImage img {
	transform: scale(1.08);
}

.collectionCardOverlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.7));
}

.collectionCardContent {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30px;
	color: #fff;
	z-index: 2;
}

.collectionCardTitle {
	font-family: 'Playfair Display', serif;
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 15px;
}

.collectionCardCTA {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.collectionCard:hover .collectionCardCTA {
	gap: 15px;
}

/* All Collections Pills */
.allCollectionsGrid {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	max-width: 1200px;
	margin: 0 auto;
}

.collectionPill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 24px;
	background: #fff;
	border: 1px solid #e0e0e0;
	text-decoration: none;
	transition: all 0.3s;
	border-radius: 4px;
}

.collectionPill:hover {
	background: #1a1a1a;
	border-color: #1a1a1a;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.collectionPillTitle {
	color: #1a1a1a;
	font-size: 14px;
	font-weight: 500;
	transition: color 0.3s;
}

.collectionPill:hover .collectionPillTitle {
	color: #fff;
}

.collectionPill i {
	color: #999;
	font-size: 12px;
	transition: color 0.3s;
}

.collectionPill:hover i {
	color: #fff;
}

/* About Section */
.aboutSection {
	padding: 70px 40px;
	background: #fafafa;
}

.aboutContainer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	max-width: 1200px;
	margin: 0 auto;
	align-items: center;
}

.aboutImage img {
	width: 100%;
	height: auto;
	box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.aboutContent {
	padding: 20px;
}

.aboutTitle {
	font-family: 'Playfair Display', serif;
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 25px;
	color: #1a1a1a;
	line-height: 1.3;
}

.aboutContent p {
	font-size: 15px;
	line-height: 1.8;
	color: #555;
	margin-bottom: 20px;
}

.aboutButton {
	display: inline-block;
	background: #1a1a1a;
	color: #fff;
	padding: 14px 35px;
	text-decoration: none;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 12px;
	transition: all 0.3s;
	margin-top: 15px;
}

.aboutButton:hover {
	background: #333;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Why Choose Section */
.whyChooseSection {
	padding: 70px 40px;
	background: #fff;
}

.whyChooseContainer {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 60px;
	max-width: 1200px;
	margin: 0 auto;
}

.whyChooseTitle {
	font-family: 'Playfair Display', serif;
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 20px;
	color: #1a1a1a;
}

.whyChooseIntro {
	font-size: 15px;
	line-height: 1.8;
	color: #555;
	margin-bottom: 30px;
}

.whyChooseList {
	list-style: none;
	padding: 0;
	margin: 0;
}

.whyChooseList li {
	display: flex;
	gap: 15px;
	margin-bottom: 25px;
	align-items: flex-start;
}

.whyChooseIcon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	background: #1a1a1a;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.whyChooseText {
	font-size: 14px;
	line-height: 1.7;
	color: #555;
}

.whyChooseText strong {
	color: #1a1a1a;
	display: block;
	margin-bottom: 5px;
}

.whyChooseHighlight {

}

.highlightBox {
	background: #f8f8f8;
	padding: 35px;
	border-left: 4px solid #1a1a1a;
	box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.highlightTitle {
	font-family: 'Playfair Display', serif;
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 20px;
	color: #1a1a1a;
}

.highlightList {
	list-style: none;
	padding: 0;
	margin: 0;
}

.highlightList li {
	margin-bottom: 15px;
	font-size: 14px;
	line-height: 1.6;
	color: #555;
}

.highlightList a {
	color: #1a1a1a;
	font-weight: 600;
}

.highlightList a:hover {
	text-decoration: none;
}

/* FAQ Section */
.faqSection {
	padding: 70px 40px;
	background: #fafafa;
}

.faqContainer {
	max-width: 900px;
	margin: 0 auto;
}

.faqItem {
	background: #fff;
	margin-bottom: 15px;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	cursor: pointer;
	transition: box-shadow 0.3s;
}

.faqItem:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.faqQuestion {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25px 30px;
}

.faqQuestionText {
	font-size: 16px;
	font-weight: 600;
	color: #1a1a1a;
	margin: 0;
}

.faqIcon {
	font-size: 24px;
	color: #1a1a1a;
	font-weight: 300;
	transition: transform 0.3s;
}

.faqItem.active .faqIcon {
	transform: rotate(45deg);
}

.faqAnswer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease-out;
}

.faqItem.active .faqAnswer {
	max-height: 500px;
	transition: max-height 0.5s ease-in;
}

.faqAnswerText {
	padding: 0 30px 25px 30px;
	font-size: 14px;
	line-height: 1.8;
	color: #555;
	margin: 0;
}

/* Documents Section */
.documentsSection {
	padding: 70px 40px;
	background: #fff;
}

.documentsGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 25px;
	max-width: 1200px;
	margin: 0 auto;
}

.documentCard {
	background: #fafafa;
	padding: 35px;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s;
	border-radius: 4px;
	border: 1px solid #e5e5e5;
}

.documentCard:hover {
	background: #1a1a1a;
	border-color: #1a1a1a;
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.documentIcon {
	font-size: 40px;
	color: #1a1a1a;
	margin-bottom: 20px;
	transition: color 0.3s;
}

.documentCard:hover .documentIcon {
	color: #fff;
}

.documentTitle {
	font-size: 18px;
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 10px;
	transition: color 0.3s;
}

.documentCard:hover .documentTitle {
	color: #fff;
}

.documentSubtitle {
	font-size: 13px;
	color: #666;
	transition: color 0.3s;
}

.documentCard:hover .documentSubtitle {
	color: #ddd;
}

/* Newsletter Section */
.newsletterSection {
	background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
	padding: 60px 40px;
	color: #fff;
}

.newsletterContainer {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.newsletterTitle {
	font-family: 'Playfair Display', serif;
	font-size: 36px;
	font-weight: 700;
	margin-bottom: 15px;
}

.newsletterText {
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 30px;
	opacity: 0.9;
}

.newsletterForm {
	display: flex;
	gap: 10px;
	max-width: 500px;
	margin: 0 auto;
}

.newsletterInput {
	flex: 1;
	padding: 16px 20px;
	border: none;
	font-size: 14px;
	border-radius: 2px;
}

.newsletterButton {
	background: #d4af37;
	color: #fff;
	border: none;
	padding: 16px 35px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.3s;
	border-radius: 2px;
}

.newsletterButton:hover {
	background: #c49d2a;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

/* CTA Section */
.ctaSection {
	padding: 70px 40px;
	background: #fff;
	text-align: center;
}

.ctaContainer {
	max-width: 800px;
	margin: 0 auto;
}

.ctaTitle {
	font-family: 'Playfair Display', serif;
	font-size: 36px;
	font-weight: 700;
	margin-bottom: 20px;
	color: #1a1a1a;
}

.ctaText {
	font-size: 16px;
	line-height: 1.7;
	color: #555;
	margin-bottom: 35px;
}

.ctaButton {
	display: inline-block;
	background: #1a1a1a;
	color: #fff;
	padding: 18px 50px;
	text-decoration: none;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 14px;
	transition: all 0.3s;
	border-radius: 2px;
}

.ctaButton:hover {
	background: #333;
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

/* Section Footer */
.sectionFooter {
	text-align: center;
	margin-top: 50px;
}

.viewAllButton {
	display: inline-block;
	color: #1a1a1a;
	text-decoration: none;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	padding: 14px 35px;
	border: 2px solid #1a1a1a;
	transition: all 0.3s;
}

.viewAllButton:hover {
	background: #1a1a1a;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Footer Styles */
.mainFooter {
	background: #1a1a1a;
	color: #fff;
}

.footerTop {
	padding: 60px 40px 40px;
	border-bottom: 1px solid #333;
}

.footerContainer {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 40px;
}

.footerColumn {

}

.footerHeading {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 20px;
	color: #fff;
}

.footerList {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footerList li {
	margin-bottom: 12px;
}

.footerLink {
	color: #bbb;
	text-decoration: none;
	font-size: 13px;
	transition: color 0.3s;
	display: inline-block;
}

.footerLink:hover {
	color: #fff;
}

.footerMiddle {
	padding: 50px 40px;
	background: #2d2d2d;
}

.footerNewsletter {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
}

.newsletterHeading {
	font-family: 'Playfair Display', serif;
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 15px;
}

.footerBottom {
	padding: 30px 40px;
	border-top: 1px solid #333;
}

.footerBottomGrid {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
}

.footerBottomLeft {
	display: flex;
	gap: 25px;
	flex-wrap: wrap;
}

.footerBottomLink {
	color: #bbb;
	text-decoration: none;
	font-size: 12px;
	transition: color 0.3s;
}

.footerBottomLink:hover {
	color: #fff;
}

.footerCopyright {
	margin: 0;
	font-size: 12px;
	color: #bbb;
}

.footerAddress {
	padding: 20px 40px;
	background: #0d0d0d;
	text-align: center;
}

.footerAddress address,
.footerAddress p {
	margin: 5px 0;
	font-size: 12px;
	color: #888;
	font-style: normal;
}

.footerAddress a {
	color: #888;
	text-decoration: none;
}

.footerAddress a:hover {
	color: #fff;
}

/* USP Section */
.uspSection {
	padding: 60px 40px;
	background: #fff;
	border-bottom: 1px solid #e5e5e5;
}

.uspContainer {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 40px;
	max-width: 1200px;
	margin: 0 auto;
}

.uspItem {
	text-align: center;
}

.uspIcon {
	font-size: 36px;
	color: #1a1a1a;
	margin-bottom: 20px;
}

.uspTitle {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 12px;
	color: #1a1a1a;
}

.uspText {
	font-size: 14px;
	line-height: 1.6;
	color: #666;
}

/* Responsive Design */
@media (max-width: 1024px) {
	.collectionsGrid {
		grid-template-columns: repeat(3, 1fr);
	}

	.collectionCard {
		height: 250px;
	}

	.aboutContainer,
	.whyChooseContainer {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

@media (max-width: 768px) {
	.topBar {
		padding: 10px 20px;
	}

	.topBarLeft,
	.topBarRight {
		display: none;
	}

	.topBarCenter {
		text-align: center;
	}

	.headerMain {
		padding: 15px 20px;
	}

	.headerNav {
		display: none;
	}

	.mobileMenuToggle {
		display: block;
	}

	.heroSection {
		padding: 60px 20px;
	}

	.heroTitle {
		font-size: 32px;
	}

	.heroSubtitle {
		font-size: 16px;
	}

	.sectionTitle {
		font-size: 28px;
	}

	.productsGrid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		gap: 20px;
	}

	.collectionsSection,
	.aboutSection,
	.whyChooseSection,
	.faqSection,
	.documentsSection,
	.newsletterSection,
	.ctaSection,
	.latestProductsSection,
	.featuredCollectionsSection,
	.allCollectionsSection {
		padding: 50px 20px;
	}

	.footerTop,
	.footerMiddle {
		padding: 40px 20px;
	}

	.footerContainer {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.footerBottomGrid {
		flex-direction: column;
		text-align: center;
	}

	.footerBottomLeft {
		justify-content: center;
	}

	.newsletterForm {
		flex-direction: column;
	}

	.newsletterButton {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.heroTitle {
		font-size: 26px;
	}

	.productsGrid {
		grid-template-columns: 1fr;
	}

	.collectionsGrid {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}

	.collectionCard {
		height: 200px;
	}

	.categoriesGrid {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}

	.uspContainer {
		grid-template-columns: 1fr;
	}
}