/* ========================================================= */
/* 1. GLOBAL THEME                                            */
/* ========================================================= */
body {
  background-color: #ffffff; /* soft off-white, makes jewelry photos pop */
  color: #333;
  font-family: 'Poppins', sans-serif; /* modern, elegant sans-serif */
  line-height: 1.6;
}

a {
  color: #d46b9c; /* sunset pink */
  transition: color 0.3s ease;
}
a:hover {
  color: #b54f85; /* deeper pink hover */
}

h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1.2;
  color: #222;
  margin-bottom: 0.6em;
}

h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.3;
  color: #444;
  margin-bottom: 0.5em;
}

h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  color: #333;
  margin: 0.5em 0;
}

p {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 1em;
}

/* ========================================================= */
/* 2. TYPOGRAPHY — CATEGORY OVERRIDES                        */
/* ========================================================= */
.hikashop_product_of_category_1 h2 { color: #2e7d32; }   /* Nature */
.hikashop_product_of_category_2 h2 { color: #8e44ad; }   /* Abstract */
.hikashop_product_of_category_20 h2,
.hikashop_product_of_category_3 h2 { color: #e1701a; }   /* Seasonal */
.hikashop_product_of_category_13 h2 { color: #c2185b; }  /* Whimsical */
.hikashop_product_of_category_19 h2 { color: #e91e63; }  /* Valentine */

/* Responsive typography */
@media (max-width: 991px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.35rem; }
  h3 { font-size: 1.05rem; }
  p  { font-size: 0.95rem; line-height: 1.55; }
}
@media (max-width: 767px) {
  h1 { font-size: 1.75rem; line-height: 1.25; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1rem; }
  p  { font-size: 0.9rem; line-height: 1.5; }
}
@media (max-width: 480px) {
  h1 { font-size: 1.5rem; line-height: 1.3; }
  h2 { font-size: 1.1rem; }
  h3 { font-size: 0.95rem; }
  p  { font-size: 0.85rem; line-height: 1.45; }
}

/* ========================================================= */
/* 3. HERO BANNER                                             */
/* ========================================================= */
.hero-banner {
  position: relative;
  max-width: 1800px;
  margin: 40px auto;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background-image: url('/images/headers/banner1100120252.png'); /* assign here instead */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 500px;
  padding: 80px 20px;
  color: #fff;
}

.hero-banner-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  opacity: 0.6;
  z-index: 1;
}

.hero-banner-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding: 40px 20px;
}


.hero-banner-content h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  margin-bottom: 20px;
  color: #fff;
  text-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

.hero-banner-content p {
  font-size: 1.2rem;
  margin-bottom: 25px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  color: #ffeaf0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

.hero-banner .btn-cta {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 30px;
  background: linear-gradient(135deg, #ff6f61, #d46b9c);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.hero-banner .btn-cta:hover {
  background: linear-gradient(135deg, #d46b9c, #ba77ff);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

/* Responsive hero */
@media (max-width: 991px) {
  .hero-banner { min-height: 350px; padding: 60px 15px; }
  .hero-banner-content h1 { font-size: 2rem; }
  .hero-banner-content p { font-size: 1rem; }
}
@media (max-width: 576px) {
  .hero-banner { min-height: 250px; padding: 40px 10px; }
  .hero-banner-content h1 { font-size: 1.6rem; }
  .hero-banner-content p { font-size: 0.9rem; }
}
/* ========================= */
/* 5. BUTTONS & CALL TO ACTION */
/* ========================= */
.button,
.hikabtn {
  background: linear-gradient(135deg, #ff9a76, #ff6f61); /* sunset gradient */
  color: #fff !important;
  font-weight: 600;
  border-radius: 30px;
  padding: 10px 22px;
  transition: background 0.3s ease, transform 0.2s ease;
}

.button:hover,
.hikabtn:hover {
  background: linear-gradient(135deg, #ff6f61, #d46b9c); /* pink/orange blend */
  transform: scale(1.05);
}

/* CTA button (standalone style) */
.cta-btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 30px;
  background: linear-gradient(135deg, #ff6f61, #d46b9c);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.1rem;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.cta-btn:hover {
  background: linear-gradient(135deg, #d46b9c, #ba77ff);
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* ========================= */
/* 6. BADGES & HIGHLIGHTS    */
/* ========================= */
.hikashop_product_discount {
  background: #ff6584; /* bold pink-red for urgency */
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 12px;
}

/* ========================= */
/* 7. SECTIONS & HEADERS     */
/* ========================= */
.section-title {
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: #d46b9c; /* pink headline */
  margin-bottom: 25px;
  position: relative;
}

.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #ba77ff; /* soft purple accent */
  margin: 10px auto 0;
  border-radius: 2px;
}

/* Category Collection Heading */
.collection-heading {
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  color: #d46b9c; /* sunset pink */
  margin-bottom: 30px;
  position: relative;
}

.collection-heading::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #ba77ff; /* purple accent */
  margin: 10px auto 0;
  border-radius: 2px;
}

/* Collections module heading */
.collections-heading {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin-bottom: 40px;
  color: #d46b9c;
  text-align: center;
  position: relative;
}

.collections-heading::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #ba77ff;
  margin: 12px auto 0;
  border-radius: 2px;
}

/* ========================= */
/* 8. CATEGORY COLLECTION GRID */
/* ========================= */

/* Modern CSS Grid version */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  margin: 30px 0 50px;
}

.collection-grid .category-card {
  display: block;
  background: #fff;
  border-radius: 18px;
  text-align: center;
  padding: 60px 20px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Flexbox version (collections module override) */
.collections-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.collections-grid .category-card {
  flex: 0 0 220px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.collections-grid .category-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(186, 119, 255, 0.25);
}

.collections-grid .category-card img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-bottom: 3px solid #f5f5f5;
  transition: transform 0.4s ease;
  position: relative;
  z-index: 1;
}

.collections-grid .category-card:hover img {
  transform: scale(1.05);
}

.collections-grid .category-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  margin: 15px 0;
  color: #333;
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 10;
  transition: color 0.3s ease;
}

.collections-grid .category-card:hover h3 {
  color: #d46b9c;
}

.collections-grid .category-card a {
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
  z-index: 2;
}
/* ========================= */
/* 9. CATEGORY GRID + MOTIFS */
/* ========================= */

/* Base category grid (grid version) */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  margin: 30px 0 50px;
}

.collection-grid .category-card {
  display: block;
  border-radius: 18px;
  text-align: center;
  padding: 60px 20px 40px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  transition: all 0.4s ease;
  cursor: pointer;
  position: relative;
  border: 3px solid transparent; /* for gradient border */
  background-clip: padding-box;
  overflow: hidden; /* for shimmer pseudo-element */
}

/* Motif placeholder */
.category-card::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Seasonal gradient variants */
.category-card.whimsical {
  background: linear-gradient(135deg, #fce9ff, #f9d6ff);
}
.category-card.whimsical::before {
  background-image: url("data:image/svg+xml;utf8,<svg ... ></svg>");
}

.category-card.christmas {
  background: linear-gradient(135deg, #e8f9f0, #d2f5e0);
}
.category-card.christmas::before {
  background-image: url("data:image/svg+xml;utf8,<svg ... ></svg>");
}

.category-card.autumn {
  background: linear-gradient(135deg, #fff1e0, #ffd9b3);
}
.category-card.autumn::before {
  background-image: url("data:image/svg+xml;utf8,<svg ... ></svg>");
}

.category-card.newyears {
  background: linear-gradient(135deg, #fffbea, #ffe8a3);
}
.category-card.newyears::before {
  background-image: url("data:image/svg+xml;utf8,<svg ... ></svg>");
}

.category-card.valentines {
  background: linear-gradient(135deg, #ffeaf0, #ffc4d6);
}
.category-card.valentines::before {
  background-image: url("data:image/svg+xml;utf8,<svg ... ></svg>");
}

/* ========================= */
/* 10. CATEGORY HOVER EFFECTS */
/* ========================= */

.collection-grid .category-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(186, 119, 255, 0.25);
  position: relative;
}

/* Gradient border per seasonal type */
.category-card.whimsical:hover { border-image: linear-gradient(135deg, #fce9ff, #f9d6ff) 1; }
.category-card.christmas:hover { border-image: linear-gradient(135deg, #e8f9f0, #d2f5e0) 1; }
.category-card.autumn:hover { border-image: linear-gradient(135deg, #fff1e0, #ffd9b3) 1; }
.category-card.newyears:hover { border-image: linear-gradient(135deg, #fffbea, #ffe8a3) 1; }
.category-card.valentines:hover { border-image: linear-gradient(135deg, #ffeaf0, #ffc4d6) 1; }

/* Shimmer effect */
.category-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-20deg);
  transition: opacity 0.3s ease;
  opacity: 0;
}
.category-card:hover::after {
  animation: shimmer 1.5s forwards;
  opacity: 1;
}

@keyframes shimmer {
  0%   { left: -75%; }
  100% { left: 125%; }
}

/* Hover motif + text */
.collection-grid .category-card:hover::before {
  transform: scale(1.2) rotate(-5deg);
  filter: drop-shadow(0 0 6px rgba(255,111,97,0.6));
}
.collection-grid .category-card:hover h4 {
  color: #d46b9c;
}

/* ========================= */
/* 11. RESPONSIVE BREAKPOINTS */
/* ========================= */

@media (max-width: 1024px) {
  .hero-banner {
    min-height: 400px; /* tablets */
  }
  .hero-banner-content h1 {
    font-size: 2.2rem;
  }
}

@media (max-width: 768px) {
  .hero-banner {
    min-height: 300px; /* mobile */
  }
  .hero-banner-content h1 {
    font-size: 1.8rem;
  }
  .hero-banner-content p {
    font-size: 1rem;
  }
  .cta-btn {
    padding: 12px 24px;
    font-size: 1rem;
  }
}

/* Typography responsiveness (global) */
@media (max-width: 991px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.35rem; }
  h3 { font-size: 1.05rem; }
  p  { font-size: 0.95rem; line-height: 1.55; }
}
@media (max-width: 767px) {
  h1 { font-size: 1.75rem; line-height: 1.25; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1rem; }
  p  { font-size: 0.9rem; line-height: 1.5; }
}
@media (max-width: 480px) {
  h1 { font-size: 1.5rem; line-height: 1.3; }
  h2 { font-size: 1.1rem; }
  h3 { font-size: 0.95rem; }
  p  { font-size: 0.85rem; line-height: 1.45; }
}

/* ========================= */
/* 12. SEASONAL THEMES       */
/* ========================= */

/* Valentine’s */
.valentines-hero .hero-banner-overlay {
  background: linear-gradient(135deg, rgba(255,111,97,0.6), rgba(212,107,156,0.6));
}
.valentines-hero .cta-btn {
  background: linear-gradient(135deg, #ff6f61, #d46b9c);
}

/* Autumn */
.autumn-hero .hero-banner-overlay {
  background: linear-gradient(135deg, rgba(255,154,60,0.6), rgba(255,217,179,0.6));
}
.autumn-hero .cta-btn {
  background: linear-gradient(135deg, #ff9a3c, #ff6f61);
}

/* Christmas */
.christmas-hero .hero-banner-overlay {
  background: linear-gradient(135deg, rgba(60,179,113,0.6), rgba(232,249,240,0.6));
}
.christmas-hero .cta-btn {
  background: linear-gradient(135deg, #3cb371, #2e8b57);
}

/* New Years */
.newyears-hero .hero-banner-overlay {
  background: linear-gradient(135deg, rgba(255,214,92,0.6), rgba(255,232,163,0.6));
}
.newyears-hero .cta-btn {
  background: linear-gradient(135deg, #ffd65c, #ff9a3c);
}

/* Whimsical */
.whimsical-hero .hero-banner-overlay {
  background: linear-gradient(135deg, rgba(186,119,255,0.6), rgba(249,214,255,0.6));
}
.whimsical-hero .cta-btn {
  background: linear-gradient(135deg, #ba77ff, #d46b9c);
}
/* ========================= */
/* 13. FOOTER BASE           */
/* ========================= */
.site-footer {
  background: linear-gradient(135deg, #fce9ff, #ffe0e0); /* soft boutique gradient */
  padding: 50px 20px 20px;
  color: #222;
  position: relative;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}

/* Decorative motifs */
.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: 180px 180px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.site-footer::before {
  top: -40px;
  left: -40px;
  width: 200px;
  height: 200px;
  background-image: url("data:image/svg+xml,%3Csvg ... %3C/svg%3E");
}
.site-footer::after {
  bottom: -40px;
  right: -40px;
  width: 220px;
  height: 220px;
  background-image: url("data:image/svg+xml,%3Csvg ... %3C/svg%3E");
}

/* Keep content above motifs */
.footer-grid,
.footer-bottom {
  position: relative;
  z-index: 1;
}

/* Grid layout */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto 30px;
}

/* Column titles */
.footer-col h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #222;
  position: relative;
}
.footer-col h4::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: #ff6f61;
  margin: 8px 0 0;
  border-radius: 2px;
}

/* About text */
.footer-col.footer-about p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  color: #333;
}

/* Links */
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li {
  margin: 10px 0;
}
.footer-col a {
  font-size: 1rem;
  font-weight: 600;
  color: #222 !important;
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
}
.footer-col a:hover {
  color: #d46b9c !important;
  transform: translateX(4px);
}

/* Subscribe form */
.subscribe-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.subscribe-form input[type="email"] {
  flex: 1;
  min-width: 180px;
  padding: 12px 16px;
  border-radius: 30px;
  border: 2px solid #d46b9c;
  outline: none;
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.subscribe-form input[type="email"]:focus {
  border-color: #ba77ff;
  box-shadow: 0 0 8px rgba(186, 119, 255, 0.3);
}
.subscribe-form button {
  padding: 12px 24px;
  border: none;
  border-radius: 30px;
  background: linear-gradient(135deg, #ff6f61, #d46b9c);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
.subscribe-form button:hover {
  background: linear-gradient(135deg, #d46b9c, #ba77ff);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

/* Social icons */
.footer-social a {
  display: inline-block;
  margin: 0 6px;
  font-size: 1.4rem;
  color: #222;
  transition: color 0.3s ease, transform 0.3s ease;
}
.footer-social a:hover {
  color: #ff6f61;
  transform: translateY(-3px);
}

/* Bottom strip */
.footer-bottom {
  text-align: center;
  font-size: 0.9rem;
  padding-top: 15px;
  border-top: 1px solid rgba(0,0,0,0.1);
  color: #333;
}

/* ========================= */
/* 14) HEADER — Final Unified    */
/* ========================= */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 14px 30px 40px;
  background: linear-gradient(90deg, #ff9a8b, #ff6f61, #d46b9c);
  border-bottom: 2px solid #ba77ff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  position: sticky;
  top: 0;
  z-index: 1000;
}
/* Left side (logo + tagline) */
.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-logo img {
  height: 80px;
  width: auto;
  display: block;
  margin-bottom: -30px; /* hang below */
}
.header-tagline {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  color: #fff;
  font-style: italic;
}

/* ========================= */
/* Main Navigation (Custom + Helix) */
/* ========================= */

/* Shared styling for both .header-nav and .sp-module.main-top */
.header-nav ul,
.sp-module.main-top ul.menu {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
}
.header-nav ul li,
.sp-module.main-top ul.menu li {
  display: inline-block;
}
.header-nav a,
.sp-module.main-top ul.menu li a {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  padding: 8px 14px 6px;
  position: relative;
  letter-spacing: 0.5px;
  transition: color 0.3s ease, background 0.3s ease;
}
.header-nav a::after,
.sp-module.main-top ul.menu li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: #fff;
  transition: width 0.3s ease;
}
.header-nav a:hover,
.sp-module.main-top ul.menu li a:hover {
  color: #ffd65c;
  background: rgba(255,255,255,0.08);
  border-radius: 6px;
}
.header-nav a:hover::after,
.sp-module.main-top ul.menu li a:hover::after {
  width: 100%;
}

/* ========================= */
/* Right-side User + Cart */
/* ========================= */
.header-user {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}
.header-user a {
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

/* Login link */
.header-user a[href*="login"] {
  color: #ffd65c !important;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
}
.header-user a[href*="login"]:hover {
  color: #fff !important;
  background: #ba77ff !important;
}

/* Cart link */
.header-user a[href*="cart"] {
  color: #ffd65c !important;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
}
.header-user a[href*="cart"]:hover {
  color: #fff !important;
  background: #ba77ff !important;
}
.header-user .cart-count {
  background: #fff;
  color: #ff6f61;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 50%;
  padding: 2px 6px;
  margin-left: 6px;
  line-height: 1;
  position: relative;
  top: -1px;
}

/* User menu dropdown (if used) */
.user-menu { position: relative; }
.user-menu > a {
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
}
.user-menu ul {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  list-style: none;
  padding: 8px 0;
  margin: 0;
  display: none;
  min-width: 180px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.user-menu ul li a {
  display: block;
  padding: 8px 14px;
  color: #333;
}
.user-menu ul li a:hover {
  background: #f5f5f5;
  color: #d46b9c;
}
.user-menu:hover ul { display: block; }

/* ========================= */
/* SVG hover effects */
/* ========================= */
.header-nav svg,
.sp-module.main-top ul.menu svg {
  fill: #fff;
  transition: fill 0.3s ease, transform 0.3s ease;
}
.header-nav svg:hover,
.sp-module.main-top ul.menu svg:hover {
  fill: #ffd65c;
  transform: scale(1.1);
}

/* ========================= */
/* Responsive header */
/* ========================= */
@media (max-width: 768px) {
  .site-header {
    flex-wrap: wrap;
    padding: 12px 16px 40px;
  }
  .header-left {
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
  }
  .header-nav,
  .sp-module.main-top {
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
  }
  .header-user {
    width: 100%;
    justify-content: center;
  }
  .header-tagline { display: none; }
  .header-logo img {
    height: 65px;
    margin-bottom: -25px;
  }
}

/* ========================= */
/* Responsive header */
/* ========================= */
@media (max-width: 768px) {
  .site-header {
    flex-wrap: wrap;
    padding: 12px 16px 40px;
  }
  .header-left {
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
  }
  .header-nav,
  .sp-module.main-top {
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
  }
  .header-user {
    width: 100%;
    justify-content: center;
  }
  .header-tagline { display: none; }
  .header-logo img {
    height: 65px;
    margin-bottom: -25px;
  }
}

/* ========================= */
/* 15. PRODUCT GRID & CARDS  */
/* ========================= */

/* Responsive container */
.hk-row-fluid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin: 30px auto;
  max-width: 1200px;
  padding: 0 15px;
}
.hk-row-fluid::before,
.hk-row-fluid::after {
  content: none !important;
  display: none !important;
}

/* Card base */
.hikashop_product {
  border-radius: 18px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  clear: none !important;
  background: #fff;
}
.hikashop_product:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}

/* Motif overlay */
.hikashop_product::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 60px;
  height: 60px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.hikashop_product:hover::before {
  opacity: 0.25;
  transform: rotate(-8deg) scale(1.1);
}

/* Image */
.hikashop_product img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-bottom: 4px solid rgba(0,0,0,0.05);
  transition: transform 0.4s ease;
  position: relative;
  z-index: 2;
}
.hikashop_product:hover img {
  transform: scale(1.05);
}

/* Title */
.hikashop_product .hikashop_product_name,
.hikashop_product h4,
.hikashop_product h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
  margin: 12px;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Price */
.hikashop_product_price_full {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  color: #111;
  font-weight: 600;
  text-align: center;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}
.hikashop_product_price_per_unit {
  font-size: 0.85rem;
  font-weight: 400;
  color: #333;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Add-to-cart button */
.hikashop_product button {
  border-radius: 24px;
  padding: 10px 22px;
  margin: 0 auto 16px;
  display: block;
  background: linear-gradient(135deg, #ff6f61, #d46b9c);
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  position: relative;
  z-index: 2;
}
.hikashop_product button:hover {
  background: linear-gradient(135deg, #d46b9c, #ba77ff);
  transform: translateY(-2px) scale(1.05);
}

/* ========================= */
/* 16. CATEGORY COLOR THEMES */
/* ========================= */

/* Nature (cat 1) */
.hikashop_product_of_category_1 {
  background: linear-gradient(135deg, #e0f7e9, #c2f0d1);
}
.hikashop_product_of_category_1::before {
  background-image: url("data:image/svg+xml,%3Csvg ... %3C/svg%3E");
}

/* Abstract (cat 2) */
.hikashop_product_of_category_2 {
  background: linear-gradient(135deg, #f4e1ff, #e3c4ff);
}
.hikashop_product_of_category_2::before {
  background-image: url("data:image/svg+xml,%3Csvg ... %3C/svg%3E");
}

/* Seasonal (cat 3 & 20) */
.hikashop_product_of_category_3,
.hikashop_product_of_category_20 {
  background: linear-gradient(135deg, #ffe8d6, #ffd1a9);
}
.hikashop_product_of_category_3::before,
.hikashop_product_of_category_20::before {
  background-image: url("data:image/svg+xml,%3Csvg ... %3C/svg%3E");
}

/* Whimsical (cat 13) */
.hikashop_product_of_category_13 {
  background: linear-gradient(135deg, #fff0f6, #ffe0ec);
}
.hikashop_product_of_category_13::before {
  background-image: url("data:image/svg+xml,%3Csvg ... %3C/svg%3E");
}

/* Valentine’s (cat 19) */
.hikashop_product_of_category_19 {
  background: linear-gradient(135deg, #ffe5ec, #ffccd5);
}
.hikashop_product_of_category_19::before {
  background-image: url("data:image/svg+xml,%3Csvg ... %3C/svg%3E");
}
/* ========================= */
/* 17. TYPOGRAPHY — GLOBAL   */
/* ========================= */
h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 2.25rem;   /* desktop default */
  line-height: 1.2;
  color: #222;          /* charcoal */
  margin-bottom: 0.6em;
}

h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.3;
  color: #444;
  margin-bottom: 0.5em;
}

h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  color: #333;
  margin: 0.5em 0;
}

p {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 1em;
}

/* Category-specific header overrides */
.hikashop_product_of_category_1 h2 { color: #2e7d32; }   /* Nature */
.hikashop_product_of_category_2 h2 { color: #8e44ad; }   /* Abstract */
.hikashop_product_of_category_3 h2,
.hikashop_product_of_category_20 h2 { color: #e1701a; }  /* Seasonal */
.hikashop_product_of_category_13 h2 { color: #c2185b; }  /* Whimsical */
.hikashop_product_of_category_19 h2 { color: #e91e63; }  /* Valentine */

/* Responsive typography */
@media (max-width: 991px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.35rem; }
  h3 { font-size: 1.05rem; }
  p  { font-size: 0.95rem; line-height: 1.55; }
}
@media (max-width: 767px) {
  h1 { font-size: 1.75rem; line-height: 1.25; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1rem; }
  p  { font-size: 0.9rem; line-height: 1.5; }
}
@media (max-width: 480px) {
  h1 { font-size: 1.5rem; line-height: 1.3; }
  h2 { font-size: 1.1rem; }
  h3 { font-size: 0.95rem; }
  p  { font-size: 0.85rem; line-height: 1.45; }
}

/* ========================= */
/* 18. GLOBAL USER PAGES     */
/* ========================= */
body.com-users {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

/* Card-style wrapper */
body.com-users .login,
body.com-users .registration,
body.com-users .profile {
  max-width: 700px;
  margin: 40px auto;
  background: linear-gradient(135deg, #fce9ff, #ffe0e0);
  padding: 30px;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Form fields */
body.com-users input[type="text"],
body.com-users input[type="email"],
body.com-users input[type="password"],
body.com-users select {
  width: 100%;
  padding: 12px 16px;
  border-radius: 30px;
  border: 2px solid #d46b9c;
  margin-bottom: 15px;
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
body.com-users input:focus,
body.com-users select:focus {
  border-color: #ba77ff;
  box-shadow: 0 0 8px rgba(186, 119, 255, 0.3);
  outline: none;
}

/* Labels */
body.com-users label {
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 5px;
  font-size: 0.95rem;
}

/* Buttons */
body.com-users button,
body.com-users .btn {
  border: none;
  border-radius: 30px;
  padding: 12px 24px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
body.com-users .btn.btn-primary {
  background: linear-gradient(135deg, #ff6f61, #d46b9c);
  color: #fff;
}
body.com-users .btn.btn-primary:hover {
  background: linear-gradient(135deg, #d46b9c, #ba77ff);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}
body.com-users .btn.btn-secondary {
  background: #f8f9fa;
  color: #333;
  border: 1px solid #ccc;
}
body.com-users .btn.btn-secondary:hover {
  background: #eee;
  transform: translateY(-2px);
}

/* Passkey button */
body.com-users .plg_system_webauthn_login_button {
  width: auto !important;
  display: inline-block !important;
  padding: 10px 20px !important;
  font-size: 0.9rem !important;
  margin: 0.5rem 0 1rem;
  background: #f8f9fa;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 30px;
}
body.com-users .plg_system_webauthn_login_button:hover {
  background: #eee;
}

/* Profile page */
body.com-users.view-profile .profile fieldset {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body.com-users.view-profile .profile fieldset:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(212,107,156,0.25);
}
body.com-users.view-profile legend {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: #d46b9c;
  margin-bottom: 10px;
}
body.com-users.view-profile dt {
  font-weight: 600;
  color: #d46b9c;
}
body.com-users.view-profile dd {
  margin: 0 0 10px;
  color: #444;
}

/* Registration */
body.com-users.view-registration .registration form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 30px;
}
body.com-users.view-registration .registration form .control-group,
body.com-users.view-registration .registration form .mb-3 {
  display: flex;
  flex-direction: column;
  margin: 0;
}
body.com-users.view-registration .registration form .control-group.full,
body.com-users.view-registration .registration form .mb-3.full {
  grid-column: 1 / -1;
}
body.com-users.view-registration .registration form button[type="submit"] {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 10px;
  border-radius: 30px;
  background: linear-gradient(135deg, #ff6f61, #d46b9c);
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  padding: 14px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
body.com-users.view-registration .registration form button[type="submit"]:hover {
  background: linear-gradient(135deg, #d46b9c, #ba77ff);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
  body.com-users.view-registration .registration form {
    grid-template-columns: 1fr;
  }
}

/* Link lists */
body.com-users .list-group a {
  display: block;
  padding: 10px 15px;
  border-radius: 8px;
  background: #fff;
  margin: 6px 0;
  color: #333;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}
body.com-users .list-group a:hover {
  background: #ffeff5;
  color: #d46b9c;
  transform: translateX(4px);
}

/* ========================= */
/* 19. HIKASHOP CHECKOUT     */
/* ========================= */
body.com_hikashop.view-checkout {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

/* Main container */
body.com_hikashop.view-checkout #hikashop_checkout {
  max-width: 1280px;
  margin: 50px auto;
  background: linear-gradient(135deg, #fce9ff, #ffe0e0);
  padding: 40px;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
}

/* Checkout headings */
body.com_hikashop.view-checkout h1,
body.com_hikashop.view-checkout h2,
body.com_hikashop.view-checkout h3 {
  font-family: 'Playfair Display', serif;
  color: #d46b9c;
  margin-bottom: 20px;
}

/* Fields & selects */
body.com_hikashop.view-checkout input[type="text"],
body.com_hikashop.view-checkout input[type="email"],
body.com_hikashop.view-checkout input[type="tel"],
body.com_hikashop.view-checkout input[type="password"],
body.com_hikashop.view-checkout select,
body.com_hikashop.view-checkout textarea {
  width: 100%;
  padding: 14px 18px;
  border-radius: 30px;
  border: 2px solid #d46b9c;
  margin-bottom: 20px;
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
body.com_hikashop.view-checkout input:focus,
body.com_hikashop.view-checkout select:focus,
body.com_hikashop.view-checkout textarea:focus {
  border-color: #ba77ff;
  box-shadow: 0 0 8px rgba(186, 119, 255, 0.3);
  outline: none;
}

/* Labels */
body.com_hikashop.view-checkout label {
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 6px;
  font-size: 0.95rem;
}

/* Buttons */
body.com_hikashop.view-checkout .hikabtn,
body.com_hikashop.view-checkout button,
body.com_hikashop.view-checkout input[type="submit"] {
  display: block;
  width: 100%;
  border: none;
  border-radius: 30px;
  padding: 14px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
}
body.com_hikashop.view-checkout .hikabtn.hikabtn-primary,
body.com_hikashop.view-checkout button.btn-primary,
body.com_hikashop.view-checkout input[type="submit"].btn-primary {
  background: linear-gradient(135deg, #ff6f61, #d46b9c);
  color: #fff;
}
body.com_hikashop.view-checkout .hikabtn.hikabtn-primary:hover,
body.com_hikashop.view-checkout button.btn-primary:hover,
body.com_hikashop.view-checkout input[type="submit"].btn-primary:hover {
  background: linear-gradient(135deg, #d46b9c, #ba77ff);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

/* Login & registration boxes */
body.com_hikashop.view-checkout #hikashop_checkout_login,
body.com_hikashop.view-checkout #hikashop_checkout_registration {
  background: #fff;
  padding: 25px;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  margin-bottom: 25px;
}

/* Cart summary */
body.com_hikashop.view-checkout #hikashop_checkout_summary,
body.com_hikashop.view-checkout #hikashop_checkout_cart {
  background: #fff;
  border-radius: 14px;
  padding: 25px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  font-size: 1.05rem;
}
body.com_hikashop.view-checkout #hikashop_checkout_summary table {
  width: 100%;
  border-collapse: collapse;
}
body.com_hikashop.view-checkout #hikashop_checkout_summary th,
body.com_hikashop.view-checkout #hikashop_checkout_summary td {
  padding: 12px;
  border-bottom: 1px solid #eee;
}
body.com_hikashop.view-checkout #hikashop_checkout_summary th {
  color: #d46b9c;
  font-weight: 600;
}

/* Responsive checkout */
@media (max-width: 991px) {
  body.com_hikashop.view-checkout #hikashop_checkout {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  body.com_hikashop.view-checkout #hikashop_checkout_summary,
  body.com_hikashop.view-checkout #hikashop_checkout_cart {
    margin-top: 20px;
  }
}

/* Fix selects */
body.com_hikashop.view-checkout .hikashop_checkout_page select {
  width: 100%;
  padding: 12px 16px !important;
  border-radius: 30px;
  border: 2px solid #d46b9c;
  font-size: 1rem !important;
  color: #333 !important;
  background: #fff !important;
  line-height: 1.5 !important;
  height: auto !important;
}
body.com_hikashop.view-checkout .hikashop_checkout_page select option {
  padding: 8px 12px !important;
  font-size: 1rem !important;
  background: #fff !important;
  color: #333 !important;
}

/* ========================= */
/* HEADER — STARFIELD MOTIFS */
/* ========================= */
.site-header {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.site-header::before {
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.9) 5px, transparent 6px),
    radial-gradient(circle, rgba(255,255,255,0.8) 4px, transparent 5px),
    radial-gradient(circle, rgba(255,255,255,0.7) 3px, transparent 4px),
    radial-gradient(circle, rgba(255,255,255,0.6) 2px, transparent 3px),
    radial-gradient(circle, rgba(255,255,255,0.5) 2px, transparent 3px),
    radial-gradient(circle, rgba(255,255,255,0.4) 1px, transparent 2px);
  background-size: 120px 160px, 180px 220px, 240px 280px,
                   320px 360px, 400px 440px, 480px 520px;
  background-position: 40px 60px, 100px 140px, 180px 90px,
                       260px 200px, 140px 280px, 300px 120px;
  opacity: 0.7;
  animation: sparkleTwinkle 10s ease-in-out infinite alternate,
             sparkleColorCycle1 90s linear infinite;
}
.site-header::after {
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.8) 4px, transparent 5px),
    radial-gradient(circle, rgba(255,255,255,0.6) 3px, transparent 4px),
    radial-gradient(circle, rgba(255,255,255,0.5) 2px, transparent 3px),
    radial-gradient(circle, rgba(255,255,255,0.4) 1.5px, transparent 2px);
  background-size: 150px 190px, 210px 260px, 280px 330px, 360px 400px;
  background-position: 70px 90px, 190px 220px, 250px 150px, 330px 260px;
  opacity: 0.5;
  animation: sparkleTwinkle 12s ease-in-out infinite alternate,
             sparkleColorCycle2 100s linear infinite;
}
@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.9; }
}
@keyframes sparkleColorCycle1 {
  0%   { filter: drop-shadow(0 0 3px #ffc4d6); }
  25%  { filter: drop-shadow(0 0 3px #ff9a3c); }
  50%  { filter: drop-shadow(0 0 3px #3cb371); }
  75%  { filter: drop-shadow(0 0 3px #ba77ff); }
  100% { filter: drop-shadow(0 0 3px #ffc4d6); }
}
@keyframes sparkleColorCycle2 {
  0%   { filter: drop-shadow(0 0 3px #ba77ff); }
  25%  { filter: drop-shadow(0 0 3px #ffc4d6); }
  50%  { filter: drop-shadow(0 0 3px #ff9a3c); }
  75%  { filter: drop-shadow(0 0 3px #3cb371); }
  100% { filter: drop-shadow(0 0 3px #ba77ff); }
}
.site-header > * { position: relative; z-index: 1; }


/* ========================= */
/* CATEGORY CARD MOTIFS      */
/* ========================= */
.category-card::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.category-card.whimsical { background: linear-gradient(135deg, #fce9ff, #f9d6ff); }
.category-card.whimsical::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 4 L36 20 L52 24 L36 28 L32 44 L28 28 L12 24 L28 20 Z' fill='none' stroke='%23ba77ff' stroke-width='3'/></svg>");
}
.category-card.christmas { background: linear-gradient(135deg, #e8f9f0, #d2f5e0); }
.category-card.christmas::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 8 L32 56 M8 32 L56 32 M16 16 L48 48 M48 16 L16 48' stroke='%233cb371' stroke-width='3' fill='none'/></svg>");
}
.category-card.autumn { background: linear-gradient(135deg, #fff1e0, #ffd9b3); }
.category-card.autumn::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 4 C20 12, 12 28, 20 44 C28 56, 44 56, 52 40 C60 24, 44 12, 32 4 Z' fill='none' stroke='%23ff9a3c' stroke-width='3'/></svg>");
}
.category-card.valentines { background: linear-gradient(135deg, #ffeaf0, #ffc4d6); }
.category-card.valentines::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 56 L12 36 C4 24, 16 8, 32 20 C48 8, 60 24, 52 36 Z' fill='none' stroke='%23d46b9c' stroke-width='3'/></svg>");
}
.category-card.newyears { background: linear-gradient(135deg, #fffbea, #ffe8a3); }
.category-card.newyears::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='32' cy='32' r='4' fill='%23ffd65c'/></svg>");
}


/* ========================= */
/* FOOTER MOTIFS             */
/* ========================= */
.site-footer {
  background: linear-gradient(135deg, #fce9ff, #ffe0e0);
  padding: 50px 20px 20px;
  color: #222;
  position: relative;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}
.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: 180px 180px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.site-footer::before {
  top: -40px;
  left: -40px;
  width: 200px;
  height: 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23ba77ff' stroke-width='2' fill='none'%3E%3Ccircle cx='30' cy='30' r='10'/%3E%3Ccircle cx='70' cy='40' r='6'/%3E%3Cpath d='M20 80 C40 60, 60 90, 80 70'/%3E%3C/g%3E%3C/svg%3E");
}
.site-footer::after {
  bottom: -40px;
  right: -40px;
  width: 220px;
  height: 220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 70 L20 40 A15 15 0 0 1 50 20 A15 15 0 0 1 80 40 Z' fill='none' stroke='%23ff6f61' stroke-width='2'/%3E%3C/svg%3E");
}
.footer-grid,
.footer-bottom {
  position: relative;
  z-index: 1;
}


/* ========================= */
/* SEASONAL BACKGROUND TINTS */
/* ========================= */
body.season-winter { 
  background: linear-gradient(135deg, #e8f9f0, #d2f5e0); 
}
body.season-spring { 
  background: linear-gradient(135deg, #ffeaf0, #ffc4d6); 
}
body.season-summer { 
  background: linear-gradient(135deg, #fce9ff, #f9d6ff); 
}
body.season-autumn { 
  background: linear-gradient(135deg, #fff1e0, #ffd9b3); 
}

/* ========================= */
/* CATEGORY CARDS MOTIFS     */
/* ========================= */
.category-card::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Whimsical (summer) */
.category-card.whimsical {
  background: linear-gradient(135deg, #fce9ff, #f9d6ff);
}
.category-card.whimsical::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0%' stop-color='%23fce9ff'/><stop offset='100%' stop-color='%23f9d6ff'/></linearGradient></defs><path d='M32 4 L36 20 L52 24 L36 28 L32 44 L28 28 L12 24 L28 20 Z' fill='none' stroke='url(%23g)' stroke-width='3'/></svg>");
}

/* Christmas (winter) */
.category-card.christmas {
  background: linear-gradient(135deg, #e8f9f0, #d2f5e0);
}
.category-card.christmas::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0%' stop-color='%23e8f9f0'/><stop offset='100%' stop-color='%23d2f5e0'/></linearGradient></defs><path d='M32 8 L32 56 M8 32 L56 32 M16 16 L48 48 M48 16 L16 48' stroke='url(%23g)' stroke-width='3' fill='none'/></svg>");
}

/* Autumn (fall) */
.category-card.autumn {
  background: linear-gradient(135deg, #fff1e0, #ffd9b3);
}
.category-card.autumn::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0%' stop-color='%23fff1e0'/><stop offset='100%' stop-color='%23ffd9b3'/></linearGradient></defs><path d='M32 4 C20 12, 12 28, 20 44 C28 56, 44 56, 52 40 C60 24, 44 12, 32 4 Z' fill='none' stroke='url(%23g)' stroke-width='3'/></svg>");
}

/* Valentines (spring) */
.category-card.valentines {
  background: linear-gradient(135deg, #ffeaf0, #ffc4d6);
}
.category-card.valentines::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0%' stop-color='%23ffeaf0'/><stop offset='100%' stop-color='%23ffc4d6'/></linearGradient></defs><path d='M32 56 L12 36 C4 24, 16 8, 32 20 C48 8, 60 24, 52 36 Z' fill='none' stroke='url(%23g)' stroke-width='3'/></svg>");
}

/* ========================= */
/* FOOTER MOTIFS             */
/* ========================= */
.site-footer {
  background: linear-gradient(135deg, #fce9ff, #ffe0e0);
  padding: 50px 20px 20px;
  color: #222;
  position: relative;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}

/* Decorative background motifs (SVG) */
.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: 180px 180px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.site-footer::before {
  top: -40px;
  left: -40px;
  width: 200px;
  height: 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23ba77ff' stroke-width='2' fill='none'%3E%3Ccircle cx='30' cy='30' r='10'/%3E%3Ccircle cx='70' cy='40' r='6'/%3E%3Cpath d='M20 80 C40 60, 60 90, 80 70'/%3E%3C/g%3E%3C/svg%3E");
}
.site-footer::after {
  bottom: -40px;
  right: -40px;
  width: 220px;
  height: 220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 70 L20 40 A15 15 0 0 1 50 20 A15 15 0 0 1 80 40 Z' fill='none' stroke='%23ff6f61' stroke-width='2'/%3E%3C/svg%3E");
}

/* Keep footer content above motifs */
.footer-grid,
.footer-bottom {
  position: relative;
  z-index: 1;
}
/* ========================= */
/* SEASONAL BACKGROUND MOTIFS + TINT */
/* ========================= */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.07; /* motifs faint */
  background-repeat: repeat;
  background-size: 300px 300px;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35; /* subtle tint */
}

/* Winter (Christmas) */
body.season-winter::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 8 L32 56 M8 32 L56 32 M16 16 L48 48 M48 16 L16 48' stroke='%233cb371' stroke-width='3' fill='none'/%3E%3C/svg%3E");
}
body.season-winter::after {
  background: linear-gradient(135deg, #e8f9f0, #d2f5e0);
}

/* Spring (Valentines) */
body.season-spring::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 56 L12 36 C4 24, 16 8, 32 20 C48 8, 60 24, 52 36 Z' stroke='%23d46b9c' stroke-width='3' fill='none'/%3E%3C/svg%3E");
}
body.season-spring::after {
  background: linear-gradient(135deg, #ffeaf0, #ffc4d6);
}

/* Summer (Whimsical) */
body.season-summer::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 4 L36 20 L52 24 L36 28 L32 44 L28 28 L12 24 L28 20 Z' stroke='%23ba77ff' stroke-width='3' fill='none'/%3E%3C/svg%3E");
}
body.season-summer::after {
  background: linear-gradient(135deg, #fce9ff, #f9d6ff);
}

/* Autumn (Fall) */
body.season-autumn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 4 C20 12, 12 28, 20 44 C28 56, 44 56, 52 40 C60 24, 44 12, 32 4 Z' stroke='%23ff9a3c' stroke-width='3' fill='none'/%3E%3C/svg%3E");
}
body.season-autumn::after {
  background: linear-gradient(135deg, #fff1e0, #ffd9b3);
}

/* Keep content above both layers */
body > * {
  position: relative;
  z-index: 1;
}
/* ========================= */
/* HEADER USER MENU MATCHING */
/* ========================= */
.header-user .user-nav {
  position: relative;
  display: inline-block;
}

.header-user .user-nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
}

.header-user .user-nav > ul > li > a {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  color: #ffd65c; /* gold */
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  transition: background 0.3s ease, color 0.3s ease;
}

.header-user .user-nav > ul > li > a:hover {
  background: #ba77ff;
  color: #fff;
}

/* Dropdown */
.header-user .user-nav ul li ul {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 8px 0;
  min-width: 180px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  z-index: 1000;
}

.header-user .user-nav ul li ul li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}

.header-user .user-nav ul li ul li a svg {
  width: 16px;
  height: 16px;
  fill: #ba77ff; /* lavender */
  flex-shrink: 0;
  transition: fill 0.3s ease;
}

.header-user .user-nav ul li ul li a:hover {
  background: #f9f0ff;
  color: #ba77ff;
}

.header-user .user-nav ul li ul li a:hover svg {
  fill: #ff6f61; /* coral accent on hover */
}

.header-user .user-nav ul li:hover > ul {
  display: block;
}
.header-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
}

.header-nav ul li a {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff; /* base white text */
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 0.3s ease, color 0.3s ease;
}

.header-nav ul li a:hover {
  background: #ba77ff; /* lavender hover */
  color: #fff; /* white text */
}
/* Default icons = gold */
.header-nav ul li a svg,
.header-user .user-nav ul li a svg {
  width: 18px;
  height: 18px;
  fill: #ffd65c; /* gold */
  margin-right: 6px;
  transition: fill 0.3s ease, transform 0.3s ease;
}

/* Hover = white for main nav, coral for user dropdown */
.header-nav ul li a:hover svg {
  fill: #fff;
  transform: scale(1.1);
}

.header-user .user-nav ul li a:hover svg {
  fill: #ff6f61; /* coral accent */
}

/* ========================= */
/* ACCOUNT DROPDOWN FIX v2   */
/* ========================= */

/* Let dropdown escape clipping */
.site-header,
.header-user,
.sp-module.user-nav,
.sp-module-content,
.user-nav {
  position: relative;
  overflow: visible !important;
  z-index: 1001;
}

/* Top-level dropdown link */
.user-nav ul li.dropdown > a {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #ffd65c; /* gold accent */
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  transition: background 0.3s ease, color 0.3s ease;
}

/* Hover effect */
.user-nav ul li.dropdown > a:hover {
  background: #ba77ff;
  color: #fff;
}

/* Submenu hidden by default */
.user-nav ul li.dropdown > ul {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 8px 0;
  min-width: 200px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  z-index: 2000;
}

/* Show submenu on hover */
.user-nav ul li.dropdown:hover > ul {
  display: block;
}

/* Submenu links */
.user-nav ul li.dropdown > ul li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 0.95rem;
  color: #333;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}

.user-nav ul li.dropdown > ul li a:hover {
  background: #f9f0ff;
  color: #ba77ff;
}
/* ========================= */
/* FAQ PAGE LAYOUT MATCH     */
/* ========================= */
.faq-section {
  max-width: 960px;
  margin: 40px auto;
  padding: 40px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fce9ff, #ffe0e0); /* soft pink gradient like other pages */
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  font-family: 'Poppins', sans-serif;
}

.faq-section h2 {
  font-family: 'Playfair Display', serif; /* headline font used elsewhere */
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
  color: #d46b9c; /* headline pink */
}

.faq-item {
  border-bottom: 1px solid #eee;
  margin-bottom: 16px;
  padding-bottom: 10px;
}

.faq-question {
  width: 100%;
  text-align: left;
  background: #fff;
  border: 2px solid #d46b9c;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  color: #333;
  transition: all 0.3s ease;
}

.faq-question:hover {
  background: #ba77ff;
  border-color: #ba77ff;
  color: #fff;
}

.faq-answer {
  display: none;
  margin-top: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: #fff;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.faq-answer a {
  color: #ba77ff;
  text-decoration: underline;
  font-weight: 500;
}