@import url('https://fonts.googleapis.com/css2?family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');



/* Add at the end of your CSS for theme variables */

:root {

  --dark-bg: #1e202c;

  --mid-bg: #31323e;

  --light-bg: #f7f6fd;

  --white: #fff;

  --light-text: #e6e6f7;

  --purple: #a084e8;

}





* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

  font-family: 'Montserrat', sans-serif;

}



/* Header Container */

.header {

  background: var(--dark-bg);

  color: var(--light-text);

  text-align: center;

  padding: 1rem 0;

  box-shadow: 0 2px 8px rgba(0,0,0,0.3);

}



/* Store Name */

.store-name h1 {

  font-family: 'Playfair', serif;

  font-size: 1.7rem;

  font-weight: 700;

  letter-spacing: 1px;

  color: var(--white);

  margin-bottom: 0.5rem;

  text-shadow: 0 0 16px var(--purple), 0 0 8px #bca7f7;

  display: inline-block;

}

.store-name h1 span {

  color: #bca7f7;

  text-shadow: 0 0 12px var(--purple);

}



/* Navigation Styles */

nav {

  background: var(--mid-bg);

  padding: 0.5rem 0;

  text-align: center;

}



nav ul {

  list-style: none;

  display: flex;

  justify-content: center;

  gap: 2rem;

  margin: 0;

  padding: 0;

}



nav ul li a {

  font-family: 'Playfair', serif;

  color: var(--light-text);

  text-decoration: none;

  font-size: 1.1rem;

  padding: 0.5rem 1rem;

  border-radius: 6px;

  transition: box-shadow 0.3s, color 0.3s;

}



nav ul li a:hover {

  color: var(--white);

  box-shadow: 0 0 12px 2px var(--purple);

  background: var(--purple);

}



/* Hamburger button */

.nav-toggle {

  display: none;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  width: 2.5rem;

  height: 2.5rem;

  background: var(--mid-bg);

  border: none;

  border-radius: 50%;

  cursor: pointer;

  margin-left: 1rem;

  z-index: 1200;

  transition: background 0.2s;

}

.nav-toggle span {

  display: block;

  width: 1.5rem;

  height: 3px;

  background: var(--white);

  margin: 3px 0;

  border-radius: 2px;

  transition: all 0.3s;

}

.nav-toggle.open span:nth-child(1) {

  transform: translateY(6px) rotate(45deg);

}

.nav-toggle.open span:nth-child(2) {

  opacity: 0;

}

.nav-toggle.open span:nth-child(3) {

  transform: translateY(-6px) rotate(-45deg);

}



/* Hero Carousel Styles */

.hero {

  position: relative;

  background: var(--mid-bg);

  color: var(--white);

  min-height: 400px;

  height: 60vh;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



.hero-carousel {

  width: 100%;

  height: 100%;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}



.hero-slide {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

  transition: opacity 0.7s ease;

  text-align: center;

  padding: 2rem 1rem;

  z-index: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}



.hero-slide {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  opacity: 0;

  transition: opacity 0.7s ease;

  text-align: center;

  padding: 2rem 1rem;

  z-index: 1;

}



.hero-slide.active {

  opacity: 1;

  z-index: 2;

}



.hero-slide h1 {

  font-family: 'Playfair', serif;

  font-size: 2.2rem;

  margin-bottom: 0.7rem;

}



.hero-slide p {

  font-size: 1.2rem;

  color: #fff;

  text-shadow: 0 2px 8px rgba(0,0,0,0.35);

  font-weight: 500;

}



.hero-slide img {

  display: none;

}



.hero-slide {

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

}



/* Gallery Title */

#gallery h2 {

  text-align: center;

  color: #fff;

  font-family: 'Playfair', serif;

  font-size: 2.1rem;

  margin-bottom: 2rem;

  text-shadow: 0 0 16px #bfc0d1, 0 0 8px var(--purple);

  position: relative;

}

#gallery h2::after {

  content: '';

  display: block;

  margin: 0.7rem auto 0 auto;

  width: 60px;

  height: 3px;

  background: linear-gradient(90deg, var(--purple), #bfc0d1);

  border-radius: 2px;

  opacity: 0.8;

}

/* Gallery Section */

#gallery {

  background: var(--dark-bg);

  padding: 2.5rem 0 3rem 0;

}



.gallery-filters {

  display: flex;

  justify-content: center;

  gap: 1.2rem;

  margin-bottom: 1.5rem;

}



.gallery-filter {

  background: var(--mid-bg);

  color: var(--light-text);

  border: none;

  padding: 0.5rem 1.2rem;

  border-radius: 6px;

  font-family: 'Montserrat', sans-serif;

  font-size: 1rem;

  cursor: pointer;

  transition: box-shadow 0.3s, background 0.3s;

}

.gallery-filter.active,

.gallery-filter:hover {

  background: var(--purple);

  color: var(--white);

  box-shadow: 0 0 8px 2px #bfc0d1;

}





.gallery-wrapper {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 1rem;

  /* Remove overflow/height limits if not needed */

  background: none;

  box-shadow: none;

}



.gallery-btn {

  background: var(--mid-bg);

  color: var(--white);

  border: none;

  font-size: 2rem;

  border-radius: 50%;

  width: 2.5rem;

  height: 2.5rem;

  cursor: pointer;

  transition: background 0.3s;

  display: flex;

  align-items: center;

  justify-content: center;

  /* Vertically align with grid */

}



.gallery-btn:hover {

  background: var(--purple);

}



.gallery-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-template-rows: repeat(2, 1fr);

  gap: 1.2rem;

  background: var(--dark-bg);

  padding: 1rem;

  border-radius: 12px;

  min-width: 600px;

  max-width: 900px;

  margin: 0 auto;

  overflow: hidden;

  position: relative;

  transition: transform 0.7s cubic-bezier(.77,.2,.05,1.0);

}



.gallery-item {

  background: var(--mid-bg);

  border-radius: 10px;

  box-shadow: 0 2px 8px rgba(0,0,0,0.18);

  border: 2px solid var(--mid-bg);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 0.7rem 0.5rem 0.5rem 0.5rem;

  transition: box-shadow 0.3s, transform 0.3s;

  position: relative;

}

.gallery-item img {

  width: 100%;

  max-width: 120px;

  border-radius: 8px;

  margin-bottom: 0.5rem;

  transition: transform 0.3s;

}

.gallery-item span {

  color: var(--light-text);

  font-size: 1rem;

  margin-top: 0.2rem;

}

.gallery-item:hover {

  box-shadow: 0 0 16px 4px #bfc0d1, 0 0 8px 2px var(--purple);

  transform: scale(1.06);

  z-index: 2;

}

.gallery-item:hover img {

  transform: scale(1.08);

}





.gallery-price {

  display: block;

  color: #bca7f7;

  font-weight: 600;

  margin: 0.2rem 0 0.5rem 0;

  font-size: 1rem;

}



/* Cart Icon and Sidebar */



.cart-icon {

  position: fixed;

  top: 2rem;

  right: 2rem;

  background: var(--purple);

  color: #fff;

  border-radius: 50%;

  width: 3.2rem;

  height: 3.2rem;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.7rem;

  box-shadow: 0 2px 12px rgba(96,81,155,0.18);

  cursor: pointer;

  z-index: 1001;

}

.cart-icon #cartCount {

  position: absolute;

  top: 0.3rem;

  right: 0.5rem;

  background: #fff;

  color: var(--purple);

  border-radius: 50%;

  font-size: 0.9rem;

  width: 1.3rem;

  height: 1.3rem;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: bold;

}

.cart-sidebar {

  position: fixed;

  top: 0;

  right: -350px;

  width: 320px;

  height: 100vh;

  background: #23243a;

  color: #fff;

  box-shadow: -2px 0 16px rgba(49,50,62,0.18);

  padding: 2rem 1.2rem 1rem 1.2rem;

  z-index: 1002;

  transition: right 0.4s cubic-bezier(.4,0,.2,1);

  display: flex;

  flex-direction: column;

}

.cart-sidebar.open {

  right: 0;

}

.cart-sidebar h3 {

  font-family: 'Playfair', serif;

  margin-bottom: 1rem;

}

.cart-sidebar ul {

  list-style: none;

  padding: 0;

  margin: 0 0 1.5rem 0;

  flex: 1;

  overflow-y: auto;

}

.cart-sidebar li {

  margin-bottom: 1rem;

  border-bottom: 1px solid #393a4a;

  padding-bottom: 0.7rem;

}

.close-cart-btn {

  background: none;

  color: #fff;

  border: none;

  font-size: 1rem;

  margin-top: 1rem;

  cursor: pointer;

  align-self: flex-end;

}



.add-to-cart {

  background: #a084e8;

  color: #fff;

  border: none;

  border-radius: 1.2rem;

  padding: 0.4rem 1.2rem;

  font-size: 0.95rem;

  cursor: pointer;

  margin-bottom: 0.3rem;

  transition: background 0.2s;

}

.add-to-cart:hover {

  background: #bca7f7;

}



/* Banner Section (Visual Breather) */

.site-banner {

  background: #f5f5fa;

  padding: 2.5rem 0 2.5rem 0;

  display: flex;

  justify-content: center;

  align-items: center;

}

.banner-content {

  display: flex;

  align-items: center;

  gap: 2.5rem;

  max-width: 900px;

  margin: 0 auto;

  flex-wrap: wrap;

}

.banner-img {

  width: 260px;

  max-width: 40vw;

  border-radius: 18px;

  box-shadow: 0 4px 24px rgba(96,81,155,0.10);

  background: #fff;

}

.banner-text {

  flex: 1;

  min-width: 220px;

}

.banner-text h3 {

  font-family: 'Playfair', serif;

  font-size: 2rem;

  color: var(--purple);

  margin-bottom: 0.7rem;

}

.banner-text p {

  color: #333;

  font-size: 1.1rem;

  margin-bottom: 1.2rem;

}

.banner-btn {

  display: inline-block;

  background: var(--purple);

  color: #fff;

  padding: 0.7rem 1.6rem;

  border-radius: 6px;

  text-decoration: none;

  font-weight: 600;

  font-size: 1rem;

  box-shadow: 0 2px 8px rgba(96,81,155,0.13);

  transition: background 0.3s, box-shadow 0.3s;

}

.banner-btn:hover {

  background: #483a7a;

  box-shadow: 0 0 16px 4px #bfc0d1, 0 0 8px 2px var(--purple);

}



/* Portfolio Section */

#portfolio {

  background: var(--mid-bg);

  padding: 3rem 0 3.5rem 0;

}

.portfolio-title {

  text-align: center;

  color: #fff;

  font-family: 'Playfair', serif;

  font-size: 2.1rem;

  margin-bottom: 2.2rem;

  text-shadow: 0 0 16px #bfc0d1, 0 0 8px var(--purple);

  position: relative;

}

.portfolio-title::after {

  content: '';

  display: block;

  margin: 0.7rem auto 0 auto;

  width: 60px;

  height: 3px;

  background: linear-gradient(90deg, var(--purple), #bfc0d1);

  border-radius: 2px;

  opacity: 0.8;

}

.portfolio-showcase {

  display: flex;

  flex-wrap: wrap;

  gap: 2.5rem;

  justify-content: center;

  align-items: flex-start;

  max-width: 1100px;

  margin: 0 auto;

}

.portfolio-featured {

  flex: 1 1 320px;

  max-width: 340px;

  background: #23243a;

  border-radius: 18px;

  box-shadow: 0 4px 24px rgba(96,81,155,0.10);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-end;

  position: relative;

  min-width: 260px;

  margin-bottom: 1.5rem;

  transition: transform 0.3s, box-shadow 0.3s;

}

.portfolio-featured img {

  width: 100%;

  height: auto;

  max-height: 300px;

  object-fit: contain;

  border-radius: 18px 18px 0 0;

  transition: inherit;

  display: block;

}

.portfolio-featured .portfolio-caption {

  padding: 1.2rem 1rem 1.5rem 1rem;

  text-align: center;

}

.portfolio-featured h3 {

  color: var(--purple);

  font-family: 'Playfair', serif;

  font-size: 1.4rem;

  margin-bottom: 0.4rem;

}

.portfolio-featured p {

  color: var(--light-text);

  font-size: 1.05rem;

}

.portfolio-featured:hover {

  transform: scale(1.04) rotate(-1deg);

  box-shadow: 0 0 24px 6px #bfc0d1, 0 0 12px 3px var(--purple);

  z-index: 2;

}

.portfolio-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.5rem;

  flex: 2 1 480px;

  min-width: 320px;

}

.portfolio-card {

  background: #23243a;

  border-radius: 14px;

  box-shadow: 0 2px 8px rgba(0,0,0,0.13);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  align-items: center;

  transition: transform 0.3s, box-shadow 0.3s;

  position: relative;

}

.portfolio-card img {

  width: 100%;

  height: auto;

  max-height: 180px;

  object-fit: contain;

  border-radius: 14px 14px 0 0;

  transition: inherit;

  display: block;

}

.portfolio-caption {

  padding: 0.8rem 0.7rem 1.1rem 0.7rem;

  text-align: center;

}

.portfolio-card h4 {

  color: var(--purple);

  font-family: 'Playfair', serif;

  font-size: 1.1rem;

  margin-bottom: 0.3rem;

}

.portfolio-card p {

  color: var(--light-text);

  font-size: 0.98rem;

}

.portfolio-card:hover {

  transform: scale(1.05) rotate(1deg);

  box-shadow: 0 0 16px 4px #bfc0d1, 0 0 8px 2px var(--purple);

  z-index: 2;

}



/* Promos Section */

.promos-section {

  background: var(--dark-bg);

  padding: 3rem 0 3.5rem 0;

}

.promos-title {

  text-align: center;

  color: #fff;

  font-family: 'Playfair', serif;

  font-size: 2.1rem;

  margin-bottom: 2.2rem;

  text-shadow: 0 0 16px #bfc0d1, 0 0 8px var(--purple);

  position: relative;

}

.promos-title::after {

  content: '';

  display: block;

  margin: 0.7rem auto 0 auto;

  width: 60px;

  height: 3px;

  background: linear-gradient(90deg, var(--purple), #bfc0d1);

  border-radius: 2px;

  opacity: 0.8;

}

.promos-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 2rem;

  justify-content: center;

  align-items: stretch;

  max-width: 900px;

  margin: 0 auto;

}

.promo-card {

  background: var(--mid-bg);

  border-radius: 16px;

  box-shadow: 0 2px 12px rgba(96,81,155,0.10);

  padding: 2rem 1.5rem 1.5rem 1.5rem;

  min-width: 220px;

  max-width: 270px;

  flex: 1 1 220px;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  transition: transform 0.3s, box-shadow 0.3s;

  position: relative;

}

.promo-card:hover {

  transform: scale(1.05) rotate(-1deg);

  box-shadow: 0 0 16px 4px #bfc0d1, 0 0 8px 2px var(--purple);

  z-index: 2;

}

.promo-icon {

  font-size: 2.5rem;

  margin-bottom: 1rem;

  filter: drop-shadow(0 2px 8px #bfc0d1);

}

.promo-card h3 {

  color: var(--purple);

  font-family: 'Playfair', serif;

  font-size: 1.3rem;

  margin-bottom: 0.5rem;

}

.promo-card p {

  color: var(--light-text);

  font-size: 1.05rem;

}



/* About Us Section */

.about-section {

  background: #23243a;

  padding: 4rem 0 3rem 0;

  color: #fff;

  display: flex;

  justify-content: center;

}

.about-container {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  max-width: 1100px;

  margin: 0 auto;

  gap: 2.5rem;

  padding: 0 1.5rem;

}

.about-image img {

  width: 320px;

  max-width: 100%;

  border-radius: 1.5rem;

  box-shadow: 0 4px 32px 0 rgba(49,50,62,0.18);

  object-fit: cover;

}

.about-content {

  flex: 1 1 350px;

  min-width: 300px;

}

.about-title {

  font-family: 'Playfair Display', serif;

  font-size: 2.2rem;

  margin-bottom: 1.2rem;

  color: #fff;

  text-align: left;

  text-shadow: 0 2px 16px #a084e8cc;

  letter-spacing: 1px;

}

.about-content p {

  font-size: 1.08rem;

  color: #e6e6f7;

  margin-bottom: 1.1rem;

  line-height: 1.7;

}

.about-highlights {

  display: flex;

  gap: 2.2rem;

  margin-top: 1.5rem;

  flex-wrap: wrap;

}

.about-highlights div {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  background: #1e202c;

  border-radius: 1.2rem;

  padding: 0.6rem 1.2rem;

  font-size: 1.05rem;

  box-shadow: 0 2px 12px 0 rgba(160, 132, 232, 0.08);

}

.about-icon {

  font-size: 1.4rem;

  color: #bca7f7;

}

@media (max-width: 900px) {

  .about-container {

    flex-direction: column;

    align-items: flex-start;

    gap: 2rem;

  }

  .about-image img {

    width: 100%;

    max-width: 400px;

    margin: 0 auto;

    display: block;

  }

}



/* Contact Section */

.contact-section {

  background: #f7f6fd;

  padding: 4rem 0 3rem 0;

  display: flex;

  justify-content: center;

}

.contact-container {

  display: flex;

  flex-wrap: wrap;

  gap: 3rem;

  max-width: 1100px;

  margin: 0 auto;

  align-items: flex-start;

  padding: 0 1.5rem;

}

.contact-info {

  flex: 1 1 320px;

  min-width: 260px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.contact-title {

  font-family: 'Playfair Display', serif;

  font-size: 2.1rem;

  color: #a084e8;

  margin-bottom: 1rem;

  text-shadow: 0 2px 12px #bca7f733;

}

.contact-desc {

  color: #23243a;

  font-size: 1.08rem;

  margin-bottom: 2rem;

  line-height: 1.7;

}

.contact-cta {

  margin-top: 1.2rem;

}

.whatsapp-btn {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  background: #25d366;

  color: #fff;

  font-weight: 600;

  padding: 0.7rem 1.5rem;

  border-radius: 2rem;

  text-decoration: none;

  font-size: 1.08rem;

  box-shadow: 0 2px 12px 0 #25d36633;

  transition: background 0.2s;

}

.whatsapp-btn:hover {

  background: #1ebe5d;

}



.contact-form {

  background: #fff;

  border-radius: 1.5rem;

  box-shadow: 0 4px 32px 0 rgba(49,50,62,0.08);

  padding: 2.2rem 2rem 2rem 2rem;

  flex: 1 1 350px;

  min-width: 300px;

  display: flex;

  flex-direction: column;

  gap: 1.1rem;

}

.form-row {

  display: flex;

  flex-direction: column;

  gap: 0.3rem;

}

.contact-form label {

  font-weight: 600;

  color: #a084e8;

  font-size: 1rem;

}

.contact-form input,

.contact-form select,

.contact-form textarea {

  border: 1.5px solid #e0def7;

  border-radius: 0.7rem;

  padding: 0.7rem 1rem;

  font-size: 1rem;

  background: #fafaff;

  color: #23243a;

  transition: border 0.2s;

}

.contact-form input:focus,

.contact-form select:focus,

.contact-form textarea:focus {

  border-color: #a084e8;

  outline: none;

}

.contact-submit-btn {

  background: #a084e8;

  color: #fff;

  border: none;

  border-radius: 2rem;

  padding: 0.8rem 2.2rem;

  font-size: 1.1rem;

  font-family: 'Montserrat', sans-serif;

  font-weight: 600;

  cursor: pointer;

  margin-top: 0.7rem;

  box-shadow: 0 2px 12px 0 #a084e833;

  transition: background 0.2s;

}

.contact-submit-btn:hover {

  background: #bca7f7;

}



/* Footer */

.site-footer {

  background: var(--dark-bg);

  color: var(--light-text);

  padding: 2.5rem 0 1.2rem 0;

  box-shadow: 0 -2px 16px 0 var(--purple);

  position: relative;

  margin-top: 0;

}

.footer-container {

  max-width: 1100px;

  margin: 0 auto;

  display: flex;

  flex-wrap: wrap;

  align-items: flex-start;

  justify-content: space-between;

  gap: 2.5rem;

  padding: 0 1.5rem;

}

.footer-brand {

  flex: 1 1 220px;

}

.footer-logo {

  font-family: 'Playfair', serif;

  font-size: 1.7rem;

  color: var(--white);

  text-shadow: 0 0 16px var(--purple), 0 0 8px #bca7f7;

  font-weight: 700;

  letter-spacing: 1px;

  display: block;

  margin-bottom: 0.5rem;

}

.footer-logo span {

  color: #bca7f7;

  text-shadow: 0 0 12px var(--purple);

}

.footer-tagline {

  font-size: 1rem;

  color: #bca7f7;

  opacity: 0.85;

  margin-bottom: 0.7rem;

}

.footer-nav {

  flex: 2 1 320px;

  display: flex;

  flex-wrap: wrap;

  gap: 1.5rem;

  align-items: center;

  justify-content: center;

}

.footer-nav a {

  color: var(--light-text);

  text-decoration: none;

  font-size: 1.05rem;

  font-family: 'Montserrat', sans-serif;

  padding: 0.3rem 0.8rem;

  border-radius: 6px;

  transition: color 0.2s, box-shadow 0.3s;

  box-shadow: 0 0 0px 0 var(--purple);

}

.footer-nav a:hover {

  color: var(--white);

  box-shadow: 0 0 12px 2px var(--purple);

  background: var(--purple);

}

.footer-social {

  flex: 1 1 120px;

  display: flex;

  gap: 1.1rem;

  align-items: center;

  justify-content: flex-end;

}

.footer-social-icon {

  font-size: 1.5rem;

  color: #bca7f7;

  text-shadow: 0 0 10px var(--purple), 0 0 6px #bca7f7;

  transition: color 0.2s, text-shadow 0.3s;

  text-decoration: none;

}

.footer-social-icon:hover {

  color: var(--white);

  text-shadow: 0 0 18px #bca7f7, 0 0 12px var(--purple);

}

.footer-bottom {

  text-align: center;

  color: #bca7f7;

  font-size: 0.98rem;

  margin-top: 2.2rem;

  opacity: 0.85;

  letter-spacing: 0.5px;

  text-shadow: 0 0 8px var(--purple);

}



.remove-cart-item {

  margin-left: 1rem;

  background: #e84f6a;

  color: #fff;

  border: none;

  border-radius: 1rem;

  padding: 0.2rem 0.9rem;

  font-size: 0.9rem;

  cursor: pointer;

  transition: background 0.2s;

}

.remove-cart-item:hover {

  background: #b3002d;

}



/* Theme toggle button */

.theme-toggle {

  margin-left: 2rem;

  background: var(--mid-bg, #31323e);

  color: var(--white, #fff);

  border: none;

  border-radius: 50%;

  width: 2.4rem;

  height: 2.4rem;

  font-size: 1.3rem;

  cursor: pointer;

  box-shadow: 0 2px 12px 0 rgba(160, 132, 232, 0.12);

  transition: background 0.2s, color 0.2s;

  display: flex;

  align-items: center;

  justify-content: center;

}

.theme-toggle:hover {

  background: var(--purple, #a084e8);

  color: #fff;

}



@media (max-width: 900px) {

  .about-container {

    flex-direction: column;

    align-items: flex-start;

    gap: 2rem;

  }

  .about-image img {

    width: 100%;

    max-width: 400px;

    margin: 0 auto;

    display: block;

  }

  .contact-container {

    flex-direction: column;

    gap: 2rem;

    align-items: stretch;

  }

  .contact-info, .contact-form {

    min-width: 0;

  }

  .footer-container {

    flex-direction: column;

    gap: 1.5rem;

    align-items: center;

    text-align: center;

  }

  .footer-social {

    justify-content: center;

  }

}



/* Responsive Media Queries */



/* Large tablets and small desktops (up to 1024px) */

@media (max-width: 1024px) {

  .hero-slide h1 {

    font-size: 1.9rem;

  }

  

  .hero-slide p {

    font-size: 1.1rem;

  }

  

  .gallery-grid {

    grid-template-columns: repeat(2, 1fr);

    min-width: 500px;

    max-width: 700px;

  }

  

  .portfolio-grid {

    grid-template-columns: repeat(2, 1fr);

  }

  

  .portfolio-showcase {

    flex-direction: column;

    align-items: center;

    gap: 1.5rem;

  }

  

  .portfolio-featured {

    max-width: 100%;

    min-width: auto;

  }

  

  .promos-grid {

    gap: 1.5rem;

  }

  

  .about-container,

  .contact-container {

    gap: 2rem;

    padding: 0 1rem;

  }

  

  .footer-container {

    gap: 2rem;

  }

}



/* Tablets (up to 768px) */

@media (max-width: 768px) {

  .header {

    padding: 0.8rem 0;

  }

  

  .store-name h1 {

    font-size: 1.5rem;

  }

  

  nav ul {

    flex-direction: column;

    gap: 0.5rem;

    padding: 0 1rem;

  }

  

  nav ul li a {

    font-size: 1rem;

    padding: 0.4rem 0.8rem;

  }

  

  .hero {

    height: 50vh;

    min-height: 300px;

  }

  

  .hero-slide h1 {

    font-size: 1.7rem;

  }

  

  .hero-slide p {

    font-size: 1rem;

  }

  

  #gallery h2,

  .portfolio-title,

  .promos-title {

    font-size: 1.8rem;

    margin-bottom: 1.5rem;

  }

  

  .gallery-filters {

    flex-wrap: wrap;

    gap: 0.8rem;

  }

  

  .gallery-grid {

    grid-template-columns: 1fr;

    min-width: auto;

    max-width: 100%;

    padding: 0.8rem;

    gap: 0.8rem;

  }

  

  .gallery-wrapper {

    gap: 0.5rem;

  }

  

  .gallery-btn {

    width: 2rem;

    height: 2rem;

    font-size: 1.5rem;

  }

  

  .gallery-item img {

    max-width: 100px;

  }

  

  .cart-icon {

    top: 1rem;

    right: 1rem;

    width: 2.8rem;

    height: 2.8rem;

    font-size: 1.5rem;

  }

  

  .cart-sidebar {

    width: 300px;

    right: -300px;

  }

  

  .banner-content {

    flex-direction: column;

    text-align: center;

    gap: 1.5rem;

  }

  

  .banner-img {

    width: 200px;

    max-width: 60vw;

  }

  

  .banner-text h3 {

    font-size: 1.6rem;

  }

  

  .portfolio-grid {

    grid-template-columns: 1fr;

    gap: 1rem;

  }

  

  .portfolio-card img,

  .portfolio-featured img {

    max-height: 150px;

  }

  

  .promos-grid {

    flex-direction: column;

    align-items: center;

    gap: 1.5rem;

  }

  

  .promo-card {

    max-width: 100%;

    min-width: auto;

  }

  

  .about-container,

  .contact-container {

    flex-direction: column;

    gap: 1.5rem;

    align-items: center;

    text-align: center;

  }

  

  .about-image img,

  .about-content {

    min-width: auto;

  }

  

  .about-title,

  .contact-title {

    font-size: 1.9rem;

  }

  

  .contact-form {

    padding: 1.5rem;

  }

  

  .footer-container {

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 1.5rem;

  }

  

  .footer-nav {

    flex-direction: column;

    gap: 1rem;

  }

  

  .footer-social {

    justify-content: center;

  }

  

  .theme-toggle {

    margin-left: 1rem;

    margin-top: 0.5rem;

  }

}



/* Mobile (up to 480px) */

@media (max-width: 480px) {

  body {

    font-size: 0.95rem;

  }

  

  .header {

    padding: 0.5rem 0;

  }

  

  .store-name h1 {

    font-size: 1.3rem;

    letter-spacing: 0.5px;

  }

  

  nav {

    padding: 0.3rem 0;

  }

  

  nav ul {

    gap: 0.3rem;

  }

  

  .hero {

    height: 40vh;

    min-height: 250px;

  }

  

  .hero-slide {

    padding: 1rem 0.5rem;

  }

  

  .hero-slide h1 {

    font-size: 1.4rem;

    margin-bottom: 0.5rem;

  }

  

  .hero-slide p {

    font-size: 0.95rem;

  }

  

  #gallery,

  #portfolio,

  .promos-section,

  .about-section,

  .contact-section {

    padding: 2rem 0;

  }

  

  #gallery h2,

  .portfolio-title,

  .promos-title,

  .about-title,

  .contact-title {

    font-size: 1.6rem;

  }

  

  .gallery-filters {

    justify-content: center;

    gap: 0.5rem;

  }

  

  .gallery-filter {

    padding: 0.4rem 0.8rem;

    font-size: 0.9rem;

  }

  

  .gallery-grid {

    padding: 0.5rem;

    gap: 0.6rem;

    border-radius: 8px;

  }

  

  .gallery-item {

    padding: 0.5rem;

  }

  

  .gallery-item img {

    max-width: 80px;

  }

  

  .gallery-item span,

  .gallery-price {

    font-size: 0.9rem;

  }

  

  .cart-icon {

    top: 0.8rem;

    right: 0.8rem;

    width: 2.5rem;

    height: 2.5rem;

    font-size: 1.3rem;

  }

  

  .cart-icon #cartCount {

    width: 1.1rem;

    height: 1.1rem;

    font-size: 0.8rem;

  }

  

  .cart-sidebar {

    width: 100%;

    right: -100%;

  }

  

  .cart-sidebar.open {

    right: 0;

  }

  

  .banner-content {

    gap: 1rem;

  }

  

  .banner-img {

    width: 160px;

  }

  

  .banner-text h3 {

    font-size: 1.4rem;

  }

  

  .banner-text p {

    font-size: 1rem;

  }

  

  .banner-btn {

    padding: 0.6rem 1.2rem;

    font-size: 0.95rem;

  }

  

  .portfolio-showcase {

    gap: 1rem;

  }

  

  .portfolio-featured,

  .portfolio-card {

    border-radius: 12px;

  }

  

  .portfolio-featured h3,

  .portfolio-card h4 {

    font-size: 1rem;

  }

  

  .promo-card {

    padding: 1.5rem 1rem;

  }

  

  .promo-icon {

    font-size: 2rem;

  }

  

  .promo-card h3 {

    font-size: 1.2rem;

  }

  

  .about-section,

  .contact-section {

    padding: 2.5rem 0 2rem 0;

  }

  

  .about-container,

  .contact-container {

    padding: 0 0.8rem;

    gap: 1.2rem;

  }

  

  .about-image img {

    width: 100%;

    max-width: 280px;

  }

  

  .about-content p,

  .contact-desc {

    font-size: 1rem;

  }

  

  .about-highlights {

    gap: 1rem;

    justify-content: center;

  }

  

  .about-highlights div {

    padding: 0.5rem 1rem;

    font-size: 0.95rem;

  }

  

  .contact-form {

    padding: 1.2rem;

    gap: 0.8rem;

  }

  

  .contact-form input,

  .contact-form select,

  .contact-form textarea {

    padding: 0.6rem 0.8rem;

    font-size: 0.95rem;

  }

  

  .contact-submit-btn {

    padding: 0.7rem 1.8rem;

    font-size: 1rem;

  }

  

  .whatsapp-btn {

    padding: 0.6rem 1.2rem;

    font-size: 1rem;

  }

  

  .site-footer {

    padding: 2rem 0 1rem 0;

  }

  

  .footer-container {

    gap: 1.2rem;

    padding: 0 0.8rem;

  }

  

  .footer-logo {

    font-size: 1.4rem;

  }

  

  .footer-nav a {

    font-size: 1rem;

    padding: 0.2rem 0.6rem;

  }

  

  .footer-social-icon {

    font-size: 1.3rem;

  }

  

  .footer-bottom {

    font-size: 0.9rem;

  }

  

  .add-to-cart,

  .remove-cart-item {

    padding: 0.3rem 0.8rem;

    font-size: 0.85rem;

  }

  

  .theme-toggle {

    width: 2rem;

    height: 2rem;

    font-size: 1.1rem;

    margin-left: 0.5rem;

  }

}



/* Extra small mobile (up to 320px) */

@media (max-width: 320px) {

  .hero {

    height: 35vh;

    min-height: 220px;

  }

  

  .hero-slide h1 {

    font-size: 1.2rem;

  }

  

  .hero-slide p {

    font-size: 0.9rem;

  }

  

  .gallery-item img {

    max-width: 70px;

  }

  

  .banner-img {

    width: 140px;

  }

  

  .about-image img {

    max-width: 240px;

  }

  

  .footer-logo {

    font-size: 1.2rem;

  }

}



/* Mobile nav styles */

@media (max-width: 768px) {

  .nav-toggle {

    display: flex;

  }

  nav#mainNav {

    position: absolute;

    top: 100%;

    left: 0;

    width: 100vw;

    background: var(--mid-bg);

    box-shadow: 0 4px 24px rgba(49,50,62,0.13);

    transform: translateY(-30px);

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s, transform 0.3s;

    z-index: 1100;

  }

  nav#mainNav.open {

    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;

  }

  nav#mainNav ul {

    flex-direction: column;

    gap: 0.5rem;

    padding: 1.2rem 0;

  }

  nav#mainNav ul li {

    text-align: center;

  }

  .header {

    position: relative;

    z-index: 1200;

  }

}