/* Pill button absolutely centered on top of banner */
.banner-pill-btn {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: inline-block;
	padding: 10px 36px;
	border: 3.5px solid #fff;
	background: transparent;
	color: #fff;
	font-size: 1.5rem;
	font-weight: 600;
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.18s, color 0.18s, box-shadow 0.18s;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
	letter-spacing: 0.02em;
	z-index: 2;
}
.banner-pill-btn:hover, .banner-pill-btn:focus {
	background: rgba(255,255,255,0.12);
	color: #fff;
	box-shadow: 0 4px 18px rgba(0,0,0,0.16);
	text-decoration: none;
}
@media (max-width: 740px) {
	.banner-pill-btn {
		padding: 8px 22px;
		font-size: 1.15rem;
	}
}
/* CSS Reset and Base Styles */
html {
   box-sizing: border-box;
   font-size: 62.5%;
}


*,
*:before,
*:after {
   box-sizing: inherit;
   margin: 0;
   padding: 0;
}


html,
body {
   height: 100%;
}


body {
    margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    font-size: 1.6rem;
   /* font-size 1.6rem is now the same as 16px */
   line-height: 1.6;
}

/* FAQ page layout */
.faq-wrap {
	padding: 28px 16px;
}
.faq-container {
	max-width: 860px;
	width: 100%;
	margin: 0 auto;
	text-align: left; /* left align text while container is centered */
}
.faq-container h1 {
	text-align: center;
	margin-bottom: 28px;
}
.faq-item { 
	margin: 16px 0 18px; 
}
.faq-q { 
	margin-bottom: 6px; 
	line-height: 1.6; 
}
.faq-a { 
	margin: 0; 
	line-height: 1.8; /* add more line spacing for readability */
}

/* FAQ link colors */
.faq-container a {
	color: #A088BE;
	text-decoration: underline;
}
.faq-container a:hover, .faq-container a:focus {
	color: #8A73A3; /* slightly darker on hover for contrast */
}


/*Shipping header*/
.shipping-header {
    background-color: #FDE7EC;
    color: #333;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
}

/* Navigation Bar */

/* Nav layout: logo left, centered links, icons right */
.nav { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 20px; background: #fff; }
.nav-left { display: flex; align-items: center; justify-self: start; }
.nav-center { display: flex; justify-content: center; position: absolute; left: 50%; transform: translateX(-50%); z-index: 5; }
.nav-right { display: flex; gap: 12px; align-items: center; justify-self: end; }
.logo { width: 160px; height: auto; display: block; }
.nav-list { list-style: none; display: flex; gap: 36px; }
.nav-link { 
	text-decoration: none; 
	color: #111; 
	font-weight: 600; 
	font-size: 1.6rem; 
	position: relative;
	padding-bottom: 4px;
}
.nav-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background-color: #111;
	transition: width 0.3s ease;
}
.nav-link:hover::after {
	width: 100%;
}
.icon-btn { background: none; border: none; padding: 6px; cursor: pointer; }
.icon { width: 24px; height: 24px; display: block; }

/* shop button (mobile only) */
.shop-btn { display: none; }

/* hamburger toggle (hidden on desktop) */
.nav-toggle { display: none; background: none; border: none; padding: 6px; cursor: pointer; }
.hamburger { display: block; width: 22px; height: 2px; background: #111; position: relative; }
.hamburger::before, .hamburger::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: #111; }
.hamburger::before { top: -7px; }
.hamburger::after { top: 7px; }

/* Mobile menu rules */
@media (max-width: 740px) {
	.nav { padding: 14px 20px; }
	.nav-list { display: none; }
	.logo { height: 52px; }
	.nav-toggle { display: inline-flex; }
	.nav-center { position: absolute; right: 20px; top: calc(100% + 6px); z-index: 40; left: auto; transform: none; }
	.nav-center .nav-list { display: none; flex-direction: column; gap: 10px; background: white; padding: 12px 16px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
	.nav-center.open .nav-list { display: flex; }
}

	/* PayPal cart button scaling and responsive sizing */
	.paypal-cart { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; }
	.paypal-cart paypal-cart-button { display: inline-block; transform-origin: center center; transition: transform 160ms ease; }

	
	/* Desktop default: slightly larger than native */
	@media (min-width: 741px) {
		.paypal-cart paypal-cart-button { transform: scale(1.20); }
	}

	/* Mobile: visually reduce size but keep wrapper padding for a comfortable touch target */
	@media (max-width: 740px) {
		.paypal-cart paypal-cart-button { transform: scale(1.05); }
		.paypal-cart { padding: 10px; }
	}







/* Banner (replaces carousel) */
.banner {
	width: 100%;
	max-width: 100%;
	margin: 0 auto 20px;
	position: relative;
	overflow: hidden;
	background: #000;
	height: 450px; /* default desktop height for 1280x300 banner */
}

.banner::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.25); /* black tint, adjust alpha as needed */
	pointer-events: none;
	z-index: 1;
}
.banner img {
	position: relative;
	z-index: 0;
}

.banner img { width: 100%; height: 100%; display: block; object-fit: cover; }

@media (max-width: 1024px) {
	.banner { height: 260px; }
}

@media (max-width: 740px) {
	.banner { height: 220px; }
}

@media (max-width: 420px) {
	.banner { height: 160px; }
}

/* Shop Banner - 1280x250 with black tint */
.banner-shop {
	width: 100%;
	max-width: 100%;
	margin: 0 auto 20px;
	position: relative;
	overflow: hidden;
	background: #000;
	height: 375px; /* default desktop height for 1280x250 banner */
}

.banner-shop::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.25); /* black tint overlay */
	pointer-events: none;
	z-index: 1;
}

.banner-shop img {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

@media (max-width: 1024px) {
	.banner-shop { height: 215px; }
}

@media (max-width: 740px) {
	.banner-shop { height: 180px; }
}

@media (max-width: 420px) {
	.banner-shop { height: 130px; }
}

/* Shop banner heading */
.banner-shop-heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
  margin: 0;
  z-index: 2;
  pointer-events: none;
}

/* Featured items grid */
.featured-items {
	padding: 28px 16px;
	max-width: 1280px;
	margin: 20px auto;
	text-align: center;
}



.featured-items h1 { font-size: 2.2rem; margin-bottom: 20px; }

.featured-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px 24px;
	align-items: start;
	justify-items: center; /* center content inside each cell */
}

.product-item { width: 100%; max-width: 260px; }
.product-item a { color: inherit; text-decoration: none; display: block; position: relative; overflow: hidden; border-radius: 10px; }
.product-item img { 
	width: 100%; 
	height: auto; 
	display: block; 
	border-radius: 10px; 
	object-fit: cover; 
	transition: transform 0.3s ease;
}
.product-item a::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.3);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	border-radius: 10px;
}
.product-item a:hover img {
	transform: scale(1.05);
}
.product-item a:hover::after {
	opacity: 1;
}
.item-title { font-size: 1.5rem; margin: 10px 0 0px; font-weight: 450; text-align:left; }
.item-price { font-size: 1.4rem; color: #444; margin-bottom: 6px; text-align:left;}
.sale-text { color: green; font-weight: 600; font-size: 1.8rem; 
}

/* Deals section */
.deals-section {
	background: #FDE7EC;
	padding: 28px 16px;
	margin: 20px 0;
}
.deals-inner {
	max-width: 1280px;
	margin: 0 auto;
	text-align: center;
}
.deals-inner h2 { font-size: 2.2rem; margin-bottom: 20px; }
.deals-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 260px));
	max-width: 860px; /* max for 3 items with gaps */
	margin: 0 auto;
	column-gap: 50px;
	row-gap: 12px;
	align-items: start;
	justify-items: center;
	justify-content: center;
}

@media (max-width: 1024px) {
	.deals-grid { 
		grid-template-columns: repeat(auto-fit, minmax(240px, 260px)); 
		max-width: 100%;
	}
}
@media (max-width: 740px) {
	.deals-grid { grid-template-columns: repeat(2, 1fr); row-gap: 12px; column-gap: 12px; }
}

/* New Arrivals section */
.new-arrivals {
	padding: 28px 16px;
	max-width: 1280px;
	margin: 20px auto;
	text-align: center;
}
.new-arrivals h2 { font-size: 2.2rem; margin-bottom: 20px; }
.new-arrivals-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 260px));
	column-gap: 50px;
	row-gap: 12px;
	align-items: start;
	justify-items: center;
	justify-content: center;
}

@media (max-width: 1024px) {
	.new-arrivals-grid { 
		grid-template-columns: repeat(2, minmax(0, 260px));
	}
}
@media (max-width: 740px) {
	.new-arrivals-grid { grid-template-columns: repeat(2, 1fr); row-gap: 12px; column-gap: 12px; }
}

/* Responsive: 2 columns on medium screens, 1 column on small */
@media (max-width: 1024px) {
	.featured-grid { grid-template-columns: repeat(2, 1fr); }
	.product-item { max-width: 320px; }
}

@media (max-width: 740px) {
	.featured-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
	.product-item { max-width: 520px; }
	.featured-items { padding: 20px 12px; }
}

/* Shop Grid Styles */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 24px;
  align-items: start;
  justify-items: center;
  max-width: 1280px;
  margin: 20px auto;
}

@media (max-width: 1024px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 740px) {
	.shop-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
}

/* Side padding for shop pages on mobile */
@media (max-width: 740px) {
	.shop-items { padding: 0 12px; }
}

/* Mini Navigation Bar above Product Grid */
.shop-mini-nav {
  margin: 64px auto 12px;
  text-align: center;
}
.shop-mini-nav ul {
  display: inline-flex;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.shop-mini-nav li {
  display: flex;
  align-items: center;
}
.shop-mini-nav .separator {
  color: #bbb;
  font-size: 1.3rem;
  margin: 0 10px;
  user-select: none;
  pointer-events: none;
}
.shop-mini-nav a {
	color: #593b7e; /* dark pink for contrast */
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  transition: background 0.18s, color 0.18s;
}
.shop-mini-nav a.active,
.shop-mini-nav a:hover {
	background: #FDE7EC;
	color: #593b7e; /* slightly darker pink on active/hover for readability */
}

/* Footer */
.footer {
	background: #FDE7EC;
	padding: 32px 20px;
	margin-top: 40px;
}
.footer-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}
.footer-left {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.footer-logo {
	width: 140px;
	height: auto;
}
.footer-text {
	font-size: 1.3rem;
	color: #666;
	margin: 0;
}
.footer-right {
	display: flex;
	gap: 16px;
	align-items: center;
}
.footer-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	border-radius: 50%;
	transition: background 0.18s, transform 0.18s;
}
.footer-social-link:hover {
	background: rgba(255, 255, 255, 0.5);
	transform: scale(1.08);
}
.footer-social-icon {
	width: 28px;
	height: 28px;
	display: block;
}

@media (max-width: 740px) {
	.footer-inner {
		flex-direction: column;
		text-align: center;
		gap: 24px;
	}
	.footer-left {
		align-items: center;
	}
	.footer-logo {
		width: 120px;
	}
	.footer-right {
		gap: 20px;
	}
	.footer-social-icon {
		width: 32px;
		height: 32px;
	}
}