/* ==========================================================================

   TAJ CREATIONS - ULTRA-PREMIUM LUXURY DESIGN SYSTEM

   Award-Winning Editorial Architecture (Studio UX, Artociti & Orbiz Standard)

   Crafted with Millimeter Precision & Refined Micro-Interactions

   ========================================================================== */



@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');



/* --- Enterprise Design Tokens & Color Palette --- */

:root {

  /* Official User Design Tokens */

  --ivory: #FAF5EC;

  --sand: #F0E6D3;

  --ink: #2A1A14;

  --maroon: #6B1F2A;

  --gold-text: #8A6A24;

  --gold-line: #B08A3E;

  --whatsapp: #1F7A4D;



  --font-display: 'Manrope', -apple-system, sans-serif;

  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;



  /* Aliases for codebase harmony */

  --taj-maroon: var(--maroon);

  --taj-maroon-dark: #4A121A;

  --taj-maroon-deep: #2A080E;

  --taj-maroon-light: #892837;

  --taj-maroon-soft: #F9EFEF;



  --taj-gold: var(--gold-line);

  --taj-gold-light: var(--gold-text);

  --taj-gold-rich: #C59B27;

  --taj-gold-pale: #FBF6E6;



  --taj-bg-cream: var(--ivory);

  --taj-bg-paper: var(--sand);

  --taj-bg-surface: #FFFFFF;

  --taj-border-light: #E4D8C5;

  --taj-border-subtle: rgba(42, 26, 20, 0.08);

  --taj-border-gold: rgba(176, 138, 62, 0.45);



  --taj-text-dark: var(--ink);

  --taj-text-body: #3D2C24;

  --taj-text-muted: #736157;

  --taj-text-light: #FFFFFF;



  --font-heading: var(--font-display);

  

  --radius-xs: 2px;

  --radius-sm: 4px;

  --radius-md: 4px;

  --radius-lg: 6px;

  --radius-pill: 100px;



  --transition-smooth: all 0.25s ease;

  --transition-slow: all 0.5s ease;

}



/* --- Resets & Base Typography --- */

*, *::before, *::after {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

  font-size: 16px;

}



body {

  font-family: var(--font-body);

  color: var(--taj-text-body);

  background-color: var(--taj-bg-cream);

  line-height: 1.65;

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



h1, h2, h3, h4, h5, h6,

.font-heading {

  font-family: var(--font-heading);

  color: var(--taj-text-dark);

  letter-spacing: -0.03em;

  font-weight: 700;

}



a {

  color: var(--taj-maroon);

  text-decoration: none;

  transition: var(--transition-smooth);

}



a:hover {

  color: var(--taj-gold);

}



img {

  max-width: 100%;

  height: auto;

  display: block;

}



/* --- Utility Classes --- */

.text-maroon { color: var(--taj-maroon) !important; }

.text-maroon-dark { color: var(--taj-maroon-dark) !important; }

.text-gold { color: var(--taj-gold) !important; }

.bg-maroon { background-color: var(--taj-maroon) !important; }

.bg-maroon-dark { background-color: var(--taj-maroon-dark) !important; }

.bg-gold { background-color: var(--taj-gold) !important; }

.bg-cream { background-color: var(--taj-bg-cream) !important; }

.bg-paper { background-color: var(--taj-bg-paper) !important; }



.section-padding {

  padding: 90px 0;

}



@media (max-width: 768px) {

  .section-padding {

    padding: 60px 0;

  }

}



/* --- Section Headers --- */

.section-subtitle {

  font-family: var(--font-heading);

  font-size: 0.82rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  color: var(--taj-gold);

  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 0.65rem;

}



.section-subtitle::before,

.section-subtitle::after {

  content: "✦";

  font-size: 0.65rem;

  color: var(--taj-gold);

}



.section-title {

  font-size: clamp(1.9rem, 4vw, 2.6rem);

  font-weight: 800;

  color: var(--taj-text-dark);

  line-height: 1.22;

  margin-bottom: 0.85rem;

  letter-spacing: -0.035em;

}



.section-desc {

  color: var(--taj-text-muted);

  font-size: 1.05rem;

  max-width: 620px;

  margin-left: auto;

  margin-right: auto;

  line-height: 1.6;

}



/* --- Buttons --- */

.btn-taj-primary {

  background: var(--taj-maroon);

  color: #ffffff !important;

  border: 1px solid var(--taj-maroon);

  padding: 13px 30px;

  font-weight: 600;

  border-radius: var(--radius-pill);

  font-size: 0.95rem;

  transition: var(--transition-smooth);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  box-shadow: 0 4px 18px rgba(104, 13, 50, 0.24);

}



.btn-taj-primary:hover {

  background: var(--taj-maroon-dark);

  border-color: var(--taj-maroon-dark);

  transform: translateY(-2px);

  box-shadow: 0 8px 26px rgba(104, 13, 50, 0.35);

}



.btn-taj-gold {

  background: var(--taj-gold);

  color: #ffffff !important;

  border: 1px solid var(--taj-gold);

  padding: 13px 30px;

  font-weight: 600;

  border-radius: var(--radius-pill);

  font-size: 0.95rem;

  transition: var(--transition-smooth);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  box-shadow: var(--shadow-gold);

}



.btn-taj-gold:hover {

  background: #b28a1c;

  border-color: #b28a1c;

  transform: translateY(-2px);

}



.btn-taj-outline {

  background: transparent;

  color: var(--taj-text-dark) !important;

  border: 1.5px solid var(--taj-text-dark);

  padding: 12px 28px;

  font-weight: 600;

  border-radius: var(--radius-pill);

  font-size: 0.95rem;

  transition: var(--transition-smooth);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

}



.btn-taj-outline:hover {

  background: var(--taj-text-dark);

  color: #ffffff !important;

  transform: translateY(-2px);

}



/* Luxury WhatsApp Action Buttons (Refined & Tasteful) */

.btn-taj-whatsapp {

  background: #25D366;

  color: #ffffff !important;

  border: none;

  padding: 12px 24px;

  font-weight: 600;

  border-radius: var(--radius-pill);

  font-size: 0.92rem;

  transition: var(--transition-smooth);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.28);

}



.btn-taj-whatsapp:hover {

  background: #1eb956;

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.38);

}



.btn-taj-nav-cta {

  background: var(--taj-maroon);

  color: #ffffff !important;

  border: 1px solid rgba(197, 155, 39, 0.35);

  padding: 8px 18px;

  font-weight: 600;

  border-radius: var(--radius-pill);

  font-size: 0.85rem;

  transition: var(--transition-smooth);

  display: inline-flex;

  align-items: center;

  gap: 6px;

  box-shadow: 0 2px 10px rgba(104, 13, 50, 0.18);

  white-space: nowrap !important;

  flex-shrink: 0;

}



.btn-taj-nav-cta:hover {

  background: var(--taj-maroon-dark);

  border-color: var(--taj-gold);

  transform: translateY(-1px);

}



/* --- Top Utility Bar --- */

.top-announcement-bar {

  background: var(--taj-maroon-deep);

  color: #f6eedb;

  font-size: 0.8rem;

  padding: 7px 0;

  border-bottom: 1px solid rgba(197, 155, 39, 0.22);

  position: relative;

  z-index: 1040;

}



.top-announcement-bar a {

  color: #fbf6e6;

}



.top-announcement-bar a:hover {

  color: var(--taj-gold-light);

}



/* --- Sticky Enterprise Navbar --- */

.taj-navbar {

  background: rgba(251, 249, 246, 0.95);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border-bottom: 1px solid var(--taj-border-subtle);

  transition: var(--transition-smooth);

  padding: 10px 0;

  position: sticky;

  top: 0;

  z-index: 1030;

}



.taj-navbar > .container {

  max-width: 1460px !important;

  width: 100%;

  padding-left: 20px;

  padding-right: 20px;

}



.taj-navbar nav {

  flex-shrink: 0;

  white-space: nowrap;

}



.taj-navbar.scrolled {

  padding: 7px 0;

  box-shadow: 0 10px 30px rgba(30, 2, 15, 0.06);

  background: rgba(255, 255, 255, 0.98);

}



.navbar-brand-img {

  height: 54px;

  width: auto;

  object-fit: contain;

  transition: var(--transition-smooth);

  flex-shrink: 0;

}



.taj-navbar.scrolled .navbar-brand-img {

  height: 44px;

}



.nav-link-custom {

  font-size: 0.88rem;

  font-weight: 500;

  color: var(--taj-text-dark);

  padding: 8px 10px !important;

  position: relative;

  transition: var(--transition-smooth);

  white-space: nowrap !important;

  flex-shrink: 0;

  display: inline-flex;

  align-items: center;

}



.nav-link-custom::after {

  content: "";

  position: absolute;

  bottom: 0px;

  left: 13px;

  right: 13px;

  height: 2px;

  background: var(--taj-maroon);

  transform: scaleX(0);

  transform-origin: right;

  transition: transform 0.25s ease;

}



.nav-link-custom:hover::after,

.nav-link-custom.active::after {

  transform: scaleX(1);

  transform-origin: left;

}



.nav-link-custom:hover,

.nav-link-custom.active {

  color: var(--taj-maroon);

}



.nav-action-btn {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: var(--taj-text-dark);

  background: #ffffff;

  border: 1px solid var(--taj-border-light);

  transition: var(--transition-smooth);

  position: relative;

  cursor: pointer;

}



.nav-action-btn:hover {

  background: var(--taj-maroon-soft);

  color: var(--taj-maroon);

  border-color: var(--taj-maroon);

}



.cart-count-badge {

  position: absolute;

  top: -4px;

  right: -4px;

  background: var(--taj-maroon);

  color: #ffffff;

  font-size: 0.7rem;

  font-weight: 700;

  width: 19px;

  height: 19px;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border: 2px solid #ffffff;

}



/* ==========================================================================

   HERO SECTION (High-Impact Editorial Luxury)

   ========================================================================== */

.hero-section {

  position: relative;

  background: radial-gradient(circle at 80% 20%, rgba(197, 155, 39, 0.08) 0%, transparent 50%),

              radial-gradient(circle at 10% 90%, rgba(104, 13, 50, 0.05) 0%, transparent 45%),

              var(--taj-bg-cream);

  padding: 70px 0 55px;

  overflow: hidden;

}



.hero-pill-badge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 6px 16px;

  background: rgba(197, 155, 39, 0.12);

  border: 1px solid rgba(197, 155, 39, 0.35);

  border-radius: var(--radius-pill);

  font-size: 0.82rem;

  font-weight: 600;

  color: var(--taj-maroon-dark);

  margin-bottom: 1.25rem;

  letter-spacing: 0.02em;

  text-transform: none;

}



.hero-title {

  font-family: var(--font-heading);

  font-size: clamp(2.5rem, 5vw, 3.8rem);

  font-weight: 800;

  line-height: 1.12;

  letter-spacing: -0.04em;

  color: var(--taj-text-dark);

  margin-bottom: 1.25rem;

}



.hero-title span.text-gradient {

  background: linear-gradient(120deg, #680d32, #c59b27);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}



.hero-lead {

  font-size: 1.12rem;

  color: var(--taj-text-body);

  margin-bottom: 2rem;

  line-height: 1.65;

  max-width: 540px;

}



.hero-stats-row {

  display: flex;

  gap: 28px;

  margin-top: 2rem;

  padding-top: 1.6rem;

  border-top: 1px solid var(--taj-border-light);

}



.hero-stat-item {

  padding-right: 20px;

  border-right: 1px solid var(--taj-border-light);

}



.hero-stat-item:last-child {

  border-right: none;

  padding-right: 0;

}



.hero-stat-item .stat-num {

  font-family: var(--font-heading);

  font-size: 1.75rem;

  font-weight: 800;

  color: var(--taj-maroon);

  line-height: 1;

}



.hero-stat-item .stat-label {

  font-size: 0.78rem;

  color: var(--taj-text-muted);

  font-weight: 600;

  margin-top: 4px;

}



/* Hero Visual Showcase */

.hero-visual-wrapper {

  position: relative;

}



.hero-visual-card {

  position: relative;

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: 0 25px 60px -15px rgba(35, 5, 18, 0.16);

  border: 1px solid rgba(255, 255, 255, 0.8);

  background: #ffffff;

}



.hero-visual-card img {

  width: 100%;

  height: 480px;

  object-fit: cover;

  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

}



.hero-visual-card:hover img {

  transform: scale(1.03);

}



.hero-floating-card-1 {

  position: absolute;

  top: 12%;

  left: -25px;

  background: rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(12px);

  padding: 12px 18px;

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-md);

  border: 1px solid var(--taj-border-subtle);

  display: flex;

  align-items: center;

  gap: 12px;

  animation: floatSlow 4s ease-in-out infinite alternate;

  z-index: 2;

}



.hero-floating-card-2 {

  position: absolute;

  bottom: 8%;

  right: -20px;

  background: var(--taj-maroon-dark);

  color: #ffffff;

  padding: 14px 20px;

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-lg);

  border: 1px solid rgba(197, 155, 39, 0.35);

  animation: floatSlow 5s ease-in-out infinite alternate-reverse;

  z-index: 2;

}



@keyframes floatSlow {

  0% { transform: translateY(0px); }

  100% { transform: translateY(-8px); }

}



@media (max-width: 991px) {

  .hero-floating-card-1,

  .hero-floating-card-2 {

    display: none;

  }

  .hero-visual-card img {

    height: 380px;

  }

}



/* ==========================================================================

   HERO INFINITE SMOOTH SCROLLING MARQUEE TICKER (Studio UX Style)

   ========================================================================== */

.hero-marquee-strip {

  background: #FAF5EC;

  color: var(--taj-maroon);

  padding: 14px 0;

  border-top: 1px solid rgba(176, 138, 62, 0.28);

  border-bottom: 1px solid rgba(176, 138, 62, 0.28);

  position: relative;

  overflow: hidden;

  white-space: nowrap;

  box-shadow: 0 2px 12px rgba(42, 26, 20, 0.05);

}



.marquee-inner {

  display: inline-flex;

  animation: marqueeScroll 34s linear infinite;

  gap: 36px;

  will-change: transform;

}



.hero-marquee-strip:hover .marquee-inner {

  animation-play-state: paused;

}



.marquee-item {

  display: inline-flex;

  align-items: center;

  gap: 14px;

  font-family: var(--font-heading);

  font-size: 0.88rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--taj-maroon);

  font-weight: 700;

}



.marquee-item .marquee-diamond {

  color: var(--taj-gold);

  font-size: 0.85rem;

}



@keyframes marqueeScroll {

  0% { transform: translateX(0); }

  100% { transform: translateX(-50%); }

}



/* ==========================================================================

   DISCIPLINE SHOWCASE CARDS (Editorial Mastercraft Layout)

   ========================================================================== */

.service-feature-card {

  background: #ffffff;

  border: 1px solid var(--taj-border-subtle);

  border-radius: var(--radius-md);

  padding: 30px 26px;

  transition: var(--transition-smooth);

  height: 100%;

  display: flex;

  flex-direction: column;

  position: relative;

  box-shadow: var(--shadow-sm);

}



.service-feature-card:hover {

  transform: translateY(-5px);

  border-color: var(--taj-border-gold);

  box-shadow: var(--shadow-md);

}



.service-card-num {

  position: absolute;

  top: 24px;

  right: 26px;

  font-family: var(--font-heading);

  font-size: 1.1rem;

  font-weight: 800;

  color: rgba(197, 155, 39, 0.45);

}



.service-icon-box {

  width: 54px;

  height: 54px;

  border-radius: var(--radius-sm);

  background: var(--taj-maroon-soft);

  color: var(--taj-maroon);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.5rem;

  margin-bottom: 20px;

  transition: var(--transition-smooth);

}



.service-feature-card:hover .service-icon-box {

  background: var(--taj-maroon);

  color: #ffffff;

}



.service-feature-card h4 {

  font-size: 1.15rem;

  font-weight: 700;

  margin-bottom: 8px;

}



/* ==========================================================================

   CURATED CATEGORY CARDS (Artociti & Studio UX Style)

   ========================================================================== */

.category-card {

  position: relative;

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow-card);

  height: 380px;

  transition: var(--transition-smooth);

  border: 1px solid var(--taj-border-subtle);

}



.category-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);

}



.category-card-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(20, 10, 15, 0.05) 0%, rgba(30, 4, 15, 0.88) 100%);

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 28px;

  transition: var(--transition-smooth);

}



.category-card:hover img {

  transform: scale(1.06);

}



.category-card:hover .category-card-overlay {

  background: linear-gradient(180deg, rgba(20, 10, 15, 0.15) 0%, rgba(70, 6, 32, 0.92) 100%);

}



.category-tag {

  background: rgba(197, 155, 39, 0.9);

  color: #1a1200;

  font-size: 0.72rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  padding: 4px 10px;

  border-radius: var(--radius-pill);

  display: inline-block;

  margin-bottom: 8px;

  width: fit-content;

}



.category-card-title {

  color: #ffffff;

  font-size: 1.45rem;

  font-weight: 700;

  margin-bottom: 6px;

}



.category-card-desc {

  color: rgba(255, 255, 255, 0.85);

  font-size: 0.86rem;

  margin-bottom: 10px;

}



/* ==========================================================================

   TRENDING CREATIONS & HANDCRAFTED PIECES (AWARD-WINNING PRODUCT GRID)

   Engineered for Millimeter Alignment, Zero Clumsiness, Pixel-Perfect Luxury

   ========================================================================== */



/* Filter Pills Group */

.catalog-filter-wrap {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 10px;

}



.filter-btn-pill {

  border: 1px solid var(--taj-border-light);

  background: #ffffff;

  color: var(--taj-text-dark);

  font-size: 0.86rem;

  font-weight: 600;

  padding: 8px 20px;

  border-radius: var(--radius-pill);

  transition: var(--transition-smooth);

  cursor: pointer;

  white-space: nowrap;

}



.filter-btn-pill:hover {

  background: #f4eee6;

  border-color: #d6cbbe;

  color: var(--taj-text-dark);

}



.filter-btn-pill.active {

  background: var(--taj-maroon);

  color: #ffffff;

  border-color: var(--taj-maroon);

  box-shadow: 0 4px 14px rgba(104, 13, 50, 0.22);

}



/* Product Card Component */

.product-card {

  background: #ffffff;

  border: 1px solid var(--taj-border-subtle);

  border-radius: var(--radius-md);

  overflow: hidden;

  transition: var(--transition-smooth);

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

  box-shadow: var(--shadow-sm);

  position: relative;

}



.product-card:hover {

  transform: translateY(-5px);

  border-color: var(--taj-border-gold);

  box-shadow: 0 14px 35px rgba(35, 5, 18, 0.09);

}



.product-card-badge {

  position: absolute;

  top: 12px;

  left: 12px;

  z-index: 3;

  background: var(--taj-maroon);

  color: #ffffff;

  font-size: 0.68rem;

  font-weight: 700;

  letter-spacing: 0.05em;

  text-transform: uppercase;

  padding: 4px 9px;

  border-radius: var(--radius-pill);

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

}



.product-card-img-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  padding: 6px;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}



.product-card:hover .product-card-img-wrap img {

  transform: scale(1.06);

}



/* Quick Action Hover Drawer */

.product-card-actions {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  padding: 10px;

  background: rgba(255, 255, 255, 0.96);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  display: flex;

  justify-content: center;

  gap: 8px;

  transform: translateY(105%);

  opacity: 0;

  pointer-events: none;

  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;

  z-index: 2;

}



.product-card:hover .product-card-actions {

  transform: translateY(0);

  opacity: 1;

  pointer-events: auto;

}



.product-card-body {

  padding: 18px;

  display: flex;

  flex-direction: column;

  flex-grow: 1;

}



.product-category-sub {

  font-size: 0.72rem;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--taj-gold);

  font-weight: 700;

  margin-bottom: 4px;

}



.product-card-title {

  font-size: 1.02rem;

  font-weight: 700;

  color: var(--taj-text-dark);

  margin-bottom: 6px;

  line-height: 1.35;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

  min-height: 2.7rem;

}



.product-card-title a {

  color: inherit;

}



.product-card-title a:hover {

  color: var(--taj-maroon);

}



.product-card-desc {

  font-size: 0.82rem;

  color: var(--taj-text-muted);

  line-height: 1.45;

  margin-bottom: 12px;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

  flex-grow: 1;

}



.product-price-row {

  display: flex;

  align-items: baseline;

  gap: 8px;

  margin-bottom: 14px;

  padding-top: 6px;

  border-top: 1px dashed var(--taj-border-light);

}



.current-price {

  font-family: var(--font-heading);

  font-size: 1.25rem;

  font-weight: 800;

  color: var(--taj-maroon);

}



.original-price {

  font-size: 0.88rem;

  color: #9e9399;

  text-decoration: line-through;

}



.product-btn-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8px;

}



.btn-card-bag {

  background: transparent;

  color: var(--taj-text-dark);

  border: 1px solid #d4c8ce;

  font-size: 0.84rem;

  font-weight: 600;

  border-radius: var(--radius-pill);

  padding: 7px 12px;

  transition: var(--transition-smooth);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

}



.btn-card-bag:hover {

  background: var(--taj-text-dark);

  color: #ffffff;

  border-color: var(--taj-text-dark);

}



.btn-card-wa {

  background: #25D366;

  color: #ffffff !important;

  border: 1px solid #25D366;

  font-size: 0.84rem;

  font-weight: 600;

  border-radius: var(--radius-pill);

  padding: 7px 12px;

  transition: var(--transition-smooth);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

}



.btn-card-wa:hover {

  background: #1eb956;

  border-color: #1eb956;

}



/* ==========================================================================

   WHO WE SERVE / AUDIENCE SOLUTION CARDS (B2B & Editorial Standard)

   ========================================================================== */

.solution-card {

  background: #ffffff;

  border-radius: var(--radius-lg);

  border: 1px solid var(--taj-border-subtle);

  overflow: hidden;

  height: 100%;

  display: flex;

  flex-direction: column;

  box-shadow: var(--shadow-sm);

  transition: var(--transition-smooth);

}



.solution-card:hover {

  transform: translateY(-5px);

  border-color: var(--taj-border-gold);

  box-shadow: var(--shadow-md);

}



.solution-card-img {

  height: 210px;

  width: 100%;

  object-fit: cover;

}



.solution-card-body {

  padding: 24px;

  display: flex;

  flex-direction: column;

  flex-grow: 1;

}



.solution-card-badge {

  color: var(--taj-gold);

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  margin-bottom: 6px;

}



.solution-card-title {

  font-size: 1.25rem;

  font-weight: 700;

  margin-bottom: 12px;

  color: var(--taj-text-dark);

}



.solution-feature-list {

  list-style: none;

  padding: 0;

  margin: 0 0 20px 0;

  flex-grow: 1;

}



.solution-feature-list li {

  font-size: 0.86rem;

  color: var(--taj-text-body);

  margin-bottom: 8px;

  display: flex;

  align-items: center;

  gap: 8px;

}



.solution-feature-list li i {

  color: var(--taj-gold);

  font-size: 0.9rem;

}



/* ==========================================================================

   PROCESS TIMELINE

   ========================================================================== */

.process-step-item {

  text-align: center;

  position: relative;

  padding: 0 12px;

}



.process-step-num {

  width: 60px;

  height: 60px;

  border-radius: 50%;

  background: var(--taj-maroon);

  color: #ffffff;

  font-family: var(--font-heading);

  font-size: 1.3rem;

  font-weight: 700;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 18px;

  border: 4px solid #f6f1e8;

  box-shadow: var(--shadow-md);

  position: relative;

  z-index: 2;

}



.process-step-title {

  font-size: 1.15rem;

  font-weight: 700;

  margin-bottom: 6px;

}



.process-step-desc {

  font-size: 0.86rem;

  color: var(--taj-text-muted);

}



/* --- Bespoke Consultation Banner --- */

.bespoke-cta-banner {

  background: var(--taj-maroon-gradient);

  border-radius: var(--radius-lg);

  padding: 55px 40px;

  color: #ffffff;

  position: relative;

  overflow: hidden;

  box-shadow: var(--shadow-lg);

  border: 1px solid rgba(197, 155, 39, 0.35);

}



.bespoke-cta-banner::before {

  content: "";

  position: absolute;

  top: -50%;

  right: -20%;

  width: 500px;

  height: 500px;

  background: radial-gradient(circle, rgba(197, 155, 39, 0.25) 0%, transparent 70%);

  pointer-events: none;

}



/* ==========================================================================

   OFFCANVAS CART DRAWER (Boutique Luxury Standard)

   ========================================================================== */

.offcanvas-cart {

  width: 440px !important;

  background: var(--taj-bg-cream);

  border-left: 1px solid var(--taj-border-light);

}



@media (max-width: 576px) {

  .offcanvas-cart {

    width: 100% !important;

  }

}



.offcanvas-cart .offcanvas-header {

  background: var(--taj-maroon-dark);

  color: #ffffff;

  border-bottom: 1px solid rgba(197, 155, 39, 0.25);

  padding: 16px 22px;

}



.offcanvas-cart .offcanvas-body {

  padding: 18px;

}



.cart-free-shipping-box {

  background: #ffffff;

  border: 1px solid var(--taj-border-light);

  border-radius: var(--radius-md);

  padding: 12px 14px;

  margin-bottom: 16px;

}



.cart-item-card {

  transition: var(--transition-smooth);

}



.cart-item-card:hover {

  border-color: var(--taj-border-gold);

}





/* ==========================================================================

   ROUND WHATSAPP BUTTON WITH CONTINUOUS RADAR WAVE EFFECT (ALL PAGES)

   ========================================================================== */

.floating-whatsapp-round,

.floating-whatsapp-widget {

  position: fixed;

  bottom: 28px;

  right: 28px;

  width: 62px;

  height: 62px;

  background: #25D366;

  color: #ffffff !important;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 32px;

  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);

  z-index: 9999;

  text-decoration: none !important;

  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;

  cursor: pointer;

  border: 2px solid rgba(255, 255, 255, 0.4);

}



.floating-whatsapp-round:hover,

.floating-whatsapp-widget:hover {

  transform: scale(1.12);

  box-shadow: 0 14px 35px rgba(37, 211, 102, 0.65);

  color: #ffffff !important;

}



/* Concentric Radar Waves */

.floating-whatsapp-round::before,

.floating-whatsapp-round::after,

.floating-whatsapp-widget::before,

.floating-whatsapp-widget::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background: rgba(37, 211, 102, 0.55);

  z-index: -1;

  pointer-events: none;

}



.floating-whatsapp-round::before,

.floating-whatsapp-widget::before {

  animation: waPulseWave 2.2s infinite ease-out;

}



.floating-whatsapp-round::after,

.floating-whatsapp-widget::after {

  animation: waPulseWave 2.2s infinite ease-out 0.85s;

}



@keyframes waPulseWave {

  0% {

    width: 62px;

    height: 62px;

    opacity: 0.9;

  }

  50% {

    opacity: 0.45;

  }

  100% {

    width: 125px;

    height: 125px;

    opacity: 0;

  }

}



/* Floating Tooltip Pill */

.floating-whatsapp-tooltip {

  position: absolute;

  right: 76px;

  background: #17020a;

  color: #ffffff;

  padding: 8px 16px;

  border-radius: var(--radius-pill);

  font-size: 0.82rem;

  font-weight: 600;

  white-space: nowrap;

  pointer-events: none;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);

  border: 1px solid rgba(197, 155, 39, 0.4);

  display: flex;

  align-items: center;

  gap: 8px;

  opacity: 0;

  transform: translateX(12px);

  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);

}



.floating-whatsapp-tooltip::after {

  content: "";

  position: absolute;

  right: -6px;

  top: 50%;

  transform: translateY(-50%);

  border-width: 6px 0 6px 6px;

  border-style: solid;

  border-color: transparent transparent transparent #17020a;

}



.floating-whatsapp-round:hover .floating-whatsapp-tooltip,

.floating-whatsapp-widget:hover .floating-whatsapp-tooltip {

  opacity: 1;

  transform: translateX(0);

}



@media (max-width: 768px) {

  .floating-whatsapp-round,

  .floating-whatsapp-widget {

    bottom: 20px;

    right: 20px;

    width: 54px;

    height: 54px;

    font-size: 28px;

  }

  .floating-whatsapp-tooltip {

    display: none;

  }

}



/* Micro-wave effect on Order on WhatsApp buttons */

.btn-taj-whatsapp,

.btn-card-wa {

  position: relative;

  overflow: hidden;

}



.btn-taj-whatsapp::after,

.btn-card-wa::after {

  content: "";

  position: absolute;

  top: -50%;

  left: -50%;

  width: 200%;

  height: 200%;

  background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 10%, transparent 60%);

  opacity: 0;

  transform: scale(0.5);

  transition: opacity 0.3s, transform 0.5s;

  pointer-events: none;

}



.btn-taj-whatsapp:hover::after,

.btn-card-wa:hover::after {

  opacity: 1;

  transform: scale(1);

}



/* ===+

   ENTERPRISE FOOTER

   ========================================================================== */

.taj-footer {

  background: var(--taj-maroon-deep);

  color: #d8c8cc;

  padding: 70px 0 25px;

  border-top: 2px solid var(--taj-gold);

  position: relative;

}



.footer-brand-title {

  color: #ffffff;

  font-size: 1.4rem;

  margin-bottom: 1rem;

}



.footer-desc {

  font-size: 0.88rem;

  line-height: 1.7;

  color: #c9b4bc;

  margin-bottom: 1.5rem;

}



.footer-social-links {

  display: flex;

  gap: 12px;

}



.footer-social-btn {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.08);

  color: #ffffff;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid rgba(197, 155, 39, 0.25);

  transition: var(--transition-smooth);

}



.footer-social-btn:hover {

  background: var(--taj-gold);

  color: #1a1200;

  transform: translateY(-3px);

}



.footer-heading {

  color: #ffffff;

  font-size: 1.02rem;

  margin-bottom: 1.3rem;

  position: relative;

  padding-bottom: 8px;

}



.footer-heading::after {

  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  width: 35px;

  height: 2px;

  background: var(--taj-gold);

}



.footer-links-list {

  list-style: none;

  padding: 0;

  margin: 0;

}



.footer-links-list li {

  margin-bottom: 10px;

}



.footer-links-list a {

  color: #d1bfc6;

  font-size: 0.86rem;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  transition: var(--transition-smooth);

}



.footer-links-list a:hover {

  color: var(--taj-gold-light);

  transform: translateX(4px);

}



.footer-contact-item {

  display: flex;

  gap: 14px;

  margin-bottom: 14px;

  font-size: 0.86rem;

  color: #d1bfc6;

}



.footer-contact-item i {

  color: var(--taj-gold);

  font-size: 1.1rem;

  margin-top: 2px;

}



.footer-bottom-bar {

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  padding-top: 25px;

  margin-top: 50px;

  font-size: 0.82rem;

  color: #a49198;

}



/* Product Detail Specifics */
.product-gallery-main {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--taj-border-subtle);
  width: 100%;
  height: auto !important;
  background: transparent;
  display: block;
  position: relative;
}

.product-gallery-main img {
  width: 100% !important;
  height: auto !important;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease, opacity 0.2s ease;
}



.product-thumb-item {

  width: 76px;

  height: 76px;

  border-radius: var(--radius-sm);

  overflow: hidden;

  border: 2px solid transparent;

  cursor: pointer;

  transition: var(--transition-smooth);

}



.product-thumb-item.active,

.product-thumb-item:hover {

  border-color: var(--taj-maroon);

}



.product-thumb-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.product-detail-spec-table th {

  font-family: var(--font-heading);

  font-size: 0.84rem;

  width: 35%;

  color: var(--taj-text-dark);

  background: var(--taj-bg-paper);

}



.product-detail-spec-table td {

  font-size: 0.88rem;

}





/* Sub-service premium micro-chips (No bullet points) */

.sub-service-stack {

  display: flex;

  flex-direction: column;

  gap: 8px;

  margin: 14px 0 20px;

  flex-grow: 1;

}



.sub-service-pill-item {

  background: #fbf9f6;

  border: 1px solid rgba(0, 0, 0, 0.05);

  border-radius: var(--radius-sm);

  padding: 10px 14px;

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 0.85rem;

  font-weight: 600;

  color: var(--taj-text-dark);

  transition: var(--transition-smooth);

}



.solution-card:hover .sub-service-pill-item {

  background: #ffffff;

  border-color: rgba(197, 155, 39, 0.35);

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

}



.sub-service-pill-item i {

  color: var(--taj-gold);

  font-size: 0.95rem;

  flex-shrink: 0;

}





/* ==========================================================================

   ENHANCED CREATIVE DISCIPLINE CARDS (6 Master Crafts with High-Res Images)

   ========================================================================== */

.discipline-creative-card {

  background: #ffffff;

  border: 1px solid var(--taj-border-subtle);

  border-radius: var(--radius-md);

  overflow: hidden;

  transition: var(--transition-smooth);

  height: 100%;

  display: flex;

  flex-direction: column;

  box-shadow: var(--shadow-sm);

  position: relative;

}



.discipline-creative-card:hover {

  transform: translateY(-7px);

  border-color: var(--taj-border-gold);

  box-shadow: 0 16px 40px rgba(35, 5, 18, 0.1);

}



.discipline-img-wrap {

  position: relative;

  height: 220px;

  overflow: hidden;

  background: #fbf9f6;

}



.discipline-img-wrap img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);

}



.discipline-creative-card:hover .discipline-img-wrap img {

  transform: scale(1.08);

}



.discipline-num-badge {

  position: absolute;

  top: 14px;

  right: 14px;

  background: rgba(20, 10, 15, 0.75);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  color: #f3e5ab;

  font-family: var(--font-heading);

  font-size: 0.85rem;

  font-weight: 800;

  padding: 4px 12px;

  border-radius: var(--radius-pill);

  border: 1px solid rgba(197, 155, 39, 0.4);

}



.discipline-category-tag {

  position: absolute;

  bottom: 12px;

  left: 14px;

  background: rgba(104, 13, 50, 0.9);

  color: #ffffff;

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  padding: 3px 10px;

  border-radius: var(--radius-pill);

}



.discipline-body {

  padding: 24px;

  display: flex;

  flex-direction: column;

  flex-grow: 1;

}



.discipline-title {

  font-size: 1.22rem;

  font-weight: 700;

  color: var(--taj-text-dark);

  margin-bottom: 8px;

}



.discipline-desc {

  font-size: 0.86rem;

  color: var(--taj-text-muted);

  line-height: 1.55;

  margin-bottom: 16px;

  flex-grow: 1;

}



.discipline-spec-pill {

  background: var(--taj-bg-cream);

  border: 1px solid rgba(0, 0, 0, 0.05);

  border-radius: var(--radius-xs);

  padding: 6px 12px;

  font-size: 0.78rem;

  font-weight: 600;

  color: var(--taj-maroon);

  margin-bottom: 16px;

  display: flex;

  align-items: center;

  gap: 6px;

}



.discipline-cta-link {

  font-size: 0.9rem;

  font-weight: 700;

  color: var(--taj-maroon);

  display: inline-flex;

  align-items: center;

  gap: 6px;

  transition: var(--transition-smooth);

}



.discipline-creative-card:hover .discipline-cta-link {

  color: var(--taj-gold);

  transform: translateX(4px);

}



/* ==========================================================================

   DESIGNED FOR YOUR SPECIAL MOMENTS & ENTERPRISES (Dedicated Sub-Service Grid)

   ========================================================================== */

.segment-tab-btn {

  background: #ffffff;

  border: 1px solid var(--taj-border-light);

  color: var(--taj-text-dark);

  font-weight: 600;

  font-size: 0.92rem;

  padding: 12px 24px;

  border-radius: var(--radius-pill);

  transition: var(--transition-smooth);

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 8px;

}



.segment-tab-btn:hover {

  background: #f4eee6;

  border-color: #d8cdbe;

}



.segment-tab-btn.active {

  background: var(--taj-maroon);

  color: #ffffff;

  border-color: var(--taj-maroon);

  box-shadow: 0 4px 16px rgba(104, 13, 50, 0.25);

}



.sub-service-card-dedicated {

  background: #ffffff;

  border: 1px solid var(--taj-border-subtle);

  border-radius: var(--radius-md);

  overflow: hidden;

  height: 100%;

  display: flex;

  flex-direction: column;

  transition: var(--transition-smooth);

  box-shadow: var(--shadow-sm);

}



.sub-service-card-dedicated:hover {

  transform: translateY(-6px);

  border-color: var(--taj-border-gold);

  box-shadow: 0 16px 35px rgba(35, 5, 18, 0.09);

}



.sub-service-thumb {

  height: 200px;

  position: relative;

  overflow: hidden;

  background: #fbf9f6;

}



.sub-service-thumb img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.sub-service-card-dedicated:hover .sub-service-thumb img {

  transform: scale(1.06);

}



.sub-service-body {

  padding: 22px;

  display: flex;

  flex-direction: column;

  flex-grow: 1;

}



.sub-service-tag {

  color: var(--taj-gold);

  font-size: 0.74rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  margin-bottom: 6px;

}



.sub-service-title {

  font-size: 1.18rem;

  font-weight: 700;

  color: var(--taj-text-dark);

  margin-bottom: 8px;

  line-height: 1.35;

}



.sub-service-desc {

  font-size: 0.85rem;

  color: var(--taj-text-muted);

  line-height: 1.5;

  margin-bottom: 14px;

}



.sub-service-spec-grid {

  background: var(--taj-bg-cream);

  border: 1px solid rgba(0, 0, 0, 0.04);

  border-radius: var(--radius-sm);

  padding: 12px 14px;

  margin-bottom: 16px;

  display: flex;

  flex-direction: column;

  gap: 6px;

  font-size: 0.8rem;

  color: var(--taj-text-body);

}



.sub-service-spec-grid span {

  display: flex;

  align-items: center;

  gap: 8px;

  font-weight: 500;

}



.sub-service-spec-grid span i {

  color: var(--taj-gold);

  font-size: 0.85rem;

}



/* ==========================================================================

   HANDCRAFTING JOURNEY (Interactive 3D Hover & Shimmer Effects)

   ========================================================================== */

.process-step-item {

  background: #ffffff;

  border: 1px solid var(--taj-border-subtle);

  border-radius: var(--radius-md);

  padding: 34px 22px;

  text-align: center;

  position: relative;

  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  box-shadow: var(--shadow-sm);

  height: 100%;

}



.process-step-item:hover {

  transform: translateY(-10px) scale(1.02);

  border-color: var(--taj-gold);

  box-shadow: 0 20px 45px rgba(104, 13, 50, 0.12), 0 0 20px rgba(197, 155, 39, 0.2);

}



.process-step-num {

  width: 64px;

  height: 64px;

  border-radius: 50%;

  background: var(--taj-maroon);

  color: #ffffff;

  font-family: var(--font-heading);

  font-size: 1.35rem;

  font-weight: 800;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 20px;

  border: 3px solid #f6f1e8;

  box-shadow: var(--shadow-md);

  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);

}



.process-step-item:hover .process-step-num {

  transform: scale(1.18) rotate(8deg);

  background: linear-gradient(135deg, #680d32, #c59b27);

  box-shadow: 0 0 22px rgba(197, 155, 39, 0.6);

  border-color: #ffffff;

}



.process-step-title {

  font-size: 1.18rem;

  font-weight: 700;

  margin-bottom: 8px;

  color: var(--taj-text-dark);

  transition: color 0.3s ease;

}



.process-step-item:hover .process-step-title {

  color: var(--taj-maroon);

}



.process-step-desc {

  font-size: 0.86rem;

  color: var(--taj-text-muted);

  line-height: 1.55;

  margin-bottom: 0;

}





/* ==========================================================================

   Artociti-Style Circular Master Crafts Showcase (User Screenshot Reference)

   ========================================================================== */

.circle-craft-card {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-decoration: none;

  padding: 10px 6px;

  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);

}



.circle-craft-img-wrap {

  width: 172px;

  height: 172px;

  max-width: 100%;

  aspect-ratio: 1 / 1;

  border-radius: 50%;

  margin: 0 auto 16px;

  overflow: hidden;

  background: #ffffff;

  border: 7px solid #ffffff;

  box-shadow: 0 10px 28px rgba(28, 16, 10, 0.09);

  transition: all 0.38s cubic-bezier(0.16, 1, 0.3, 1);

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

}



.circle-craft-img-wrap img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 50%;

  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;

}



.circle-craft-card:hover {

  transform: translateY(-8px);

}



.circle-craft-card:hover .circle-craft-img-wrap {

  border-color: #ffffff;

  box-shadow: 0 18px 38px rgba(104, 13, 50, 0.22), 0 0 0 3.5px var(--taj-gold);

}



.circle-craft-card:hover .circle-craft-img-wrap img {

  transform: scale(1.12);

}



.circle-craft-title {

  font-family: var(--font-body);

  font-size: 1.05rem;

  font-weight: 600;

  color: #241d19;

  margin-bottom: 4px;

  text-align: center;

  transition: color 0.3s ease;

}



.circle-craft-card:hover .circle-craft-title {

  color: var(--taj-maroon);

}



.circle-craft-sub {

  display: block;

  font-size: 0.8rem;

  color: var(--taj-text-muted);

  font-weight: 400;

  text-align: center;

  transition: color 0.3s ease;

}



.circle-craft-card:hover .circle-craft-sub {

  color: var(--taj-gold);

}



@media (max-width: 1199px) {

  .circle-craft-img-wrap {

    width: 145px;

    height: 145px;

    border-width: 6px;

    margin-bottom: 12px;

  }

  .circle-craft-title {

    font-size: 0.96rem;

  }

}



@media (max-width: 767px) {

  .circle-craft-img-wrap {

    width: 135px;

    height: 135px;

    border-width: 5px;

  }

  .circle-craft-title {

    font-size: 0.92rem;

  }

  .circle-craft-sub {

    font-size: 0.76rem;

  }

}



@media (max-width: 420px) {

  .circle-craft-img-wrap {

    width: 118px;

    height: 118px;

    border-width: 4px;

  }

  .circle-craft-title {

    font-size: 0.86rem;

  }

}





/* ==========================================================================

   ENTERPRISE NAVBAR DROPDOWN FIX (Smooth Hover, Zero Sticking, Auto-Close)

   ========================================================================== */

.taj-navbar .dropdown {

  position: relative;

}



.taj-navbar .dropdown-menu {

  margin-top: 8px !important;

  border: 1px solid rgba(197, 155, 39, 0.25) !important;

  border-radius: 14px !important;

  box-shadow: 0 20px 45px rgba(45, 10, 25, 0.14), 0 0 1px rgba(0, 0, 0, 0.08) !important;

  background: #ffffff !important;

  padding: 10px !important;

  min-width: 275px;

  z-index: 1060;

}



.taj-navbar .dropdown-item {

  font-size: 0.9rem;

  font-weight: 500;

  color: var(--taj-text-dark);

  padding: 10px 14px !important;

  border-radius: 8px !important;

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  display: flex;

  align-items: center;

}



.taj-navbar .dropdown-item:hover,

.taj-navbar .dropdown-item:focus {

  background: #fcf8f2 !important;

  color: var(--taj-maroon) !important;

  transform: translateX(4px);

}



.taj-navbar .dropdown-item i {

  font-size: 1.05rem;

  transition: transform 0.2s ease;

}



.taj-navbar .dropdown-item:hover i {

  transform: scale(1.18);

}



@media (min-width: 992px) {

  /* On desktop: smooth hover reveal, instant clean close on mouseleave */

  .taj-navbar .dropdown > .dropdown-menu {

    display: block !important;

    opacity: 0 !important;

    visibility: hidden !important;

    transform: translateY(12px) !important;

    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s !important;

    pointer-events: none !important;

  }



  .taj-navbar .dropdown:hover > .dropdown-menu,

  .taj-navbar .dropdown.hover-active > .dropdown-menu {

    opacity: 1 !important;

    visibility: visible !important;

    transform: translateY(0) !important;

    pointer-events: auto !important;

  }

}



/* Corporate Shop Enhancements */

.shop-hero-banner {

  background: linear-gradient(135deg, #fdfbf7 0%, #f7f1e7 100%);

  border-bottom: 1px solid var(--taj-border-subtle);

  padding: 48px 0 36px;

  position: relative;

}



.shop-filter-bar {

  background: #ffffff;

  border: 1px solid var(--taj-border-subtle);

  border-radius: 16px;

  box-shadow: 0 8px 30px rgba(45, 10, 25, 0.04);

  padding: 24px;

  margin-bottom: 32px;

}



.shop-stat-pill {

  background: #ffffff;

  border: 1px solid var(--taj-border-light);

  border-radius: var(--radius-pill);

  padding: 6px 16px;

  font-size: 0.84rem;

  font-weight: 500;

  color: var(--taj-text-dark);

  display: inline-flex;

  align-items: center;

  gap: 8px;

  box-shadow: var(--shadow-2xs);

}



.corporate-trust-pillar {

  background: #ffffff;

  border: 1px solid var(--taj-border-subtle);

  border-radius: 14px;

  padding: 28px 20px;

  height: 100%;

  transition: var(--transition-smooth);

  text-align: center;

}



.corporate-trust-pillar:hover {

  transform: translateY(-5px);

  border-color: var(--taj-gold);

  box-shadow: var(--shadow-md);

}



.corporate-trust-icon {

  width: 58px;

  height: 58px;

  border-radius: 50%;

  background: var(--taj-maroon-soft);

  color: var(--taj-maroon);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 1.5rem;

  margin-bottom: 16px;

  transition: transform 0.3s ease;

}



.corporate-trust-pillar:hover .corporate-trust-icon {

  transform: scale(1.15) rotate(6deg);

  background: var(--taj-maroon);

  color: #ffffff;

}





/* ==========================================================================

   INTERACTIVE WHATSAPP INQUIRY WIZARD (Orbiz-Style Live Message Builder)

   ========================================================================== */

.wizard-section {

  background: #0f1822;

  color: #ffffff;

  padding: 85px 0;

  position: relative;

  overflow: hidden;

}



.wizard-section::before {

  content: "";

  position: absolute;

  top: 0; left: 0; right: 0; height: 1px;

  background: linear-gradient(90deg, transparent, rgba(197, 155, 39, 0.4), transparent);

}



.wizard-lead-title {

  font-family: var(--font-heading);

  font-size: 2.6rem;

  font-weight: 700;

  line-height: 1.15;

  color: #ffffff;

  margin-bottom: 16px;

}



.wizard-lead-title em {

  font-style: italic;

  color: var(--taj-gold);

}



.wizard-contact-item {

  display: flex;

  align-items: flex-start;

  gap: 14px;

  margin-bottom: 22px;

}



.wizard-contact-item i {

  color: var(--taj-gold);

  font-size: 1.25rem;

  margin-top: 2px;

}



.wizard-contact-item h6 {

  color: #ffffff;

  font-weight: 600;

  margin-bottom: 2px;

  font-size: 0.95rem;

}



.wizard-contact-item p {

  color: #94a3b8;

  font-size: 0.82rem;

  margin-bottom: 0;

  line-height: 1.45;

}



.wizard-form-card {

  background: #ffffff;

  border-radius: 20px;

  padding: 34px 28px;

  color: #1e293b;

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);

}



.wizard-step-label {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.88rem;

  font-weight: 700;

  color: #1e293b;

  margin-bottom: 10px;

}



.wizard-step-badge {

  width: 20px;

  height: 20px;

  border-radius: 50%;

  background: #eab308;

  color: #000000;

  font-size: 0.72rem;

  font-weight: 800;

  display: inline-flex;

  align-items: center;

  justify-content: center;

}



.wizard-pill-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-bottom: 20px;

}



.wizard-pill-btn {

  background: #ffffff;

  border: 1px solid #cbd5e1;

  color: #334155;

  font-size: 0.82rem;

  font-weight: 500;

  padding: 6px 12px;

  border-radius: 6px;

  cursor: pointer;

  transition: all 0.2s ease;

  user-select: none;

}



.wizard-pill-btn:hover {

  background: #f1f5f9;

  border-color: #94a3b8;

}



.wizard-pill-btn.active {

  background: #0f172a !important;

  border-color: #0f172a !important;

  color: #ffffff !important;

  font-weight: 600;

  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);

}



.wizard-input-field {

  background: #ffffff;

  border: 1px solid #cbd5e1;

  border-radius: 6px;

  padding: 9px 12px;

  font-size: 0.86rem;

  color: #1e293b;

  width: 100%;

  transition: border-color 0.2s;

}



.wizard-input-field:focus {

  border-color: #0f172a;

  outline: none;

  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.1);

}



/* WhatsApp Live Preview Box */

.whatsapp-preview-box {

  background: #ffffff;

  border-radius: 20px;

  overflow: hidden;

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);

  display: flex;

  flex-direction: column;

  height: 100%;

}



.whatsapp-box-header {

  background: #075e54;

  color: #ffffff;

  padding: 14px 18px;

  display: flex;

  align-items: center;

  gap: 12px;

}



.whatsapp-box-avatar {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: #eab308;

  color: #075e54;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 800;

  font-size: 1.15rem;

  border: 2px solid rgba(255, 255, 255, 0.4);

}



.whatsapp-box-body {

  background: #efeae2;

  padding: 18px;

  flex-grow: 1;

  display: flex;

  flex-direction: column;

  min-height: 290px;

}



.whatsapp-msg-bubble {

  background: #dcf8c6;

  border-radius: 10px 10px 10px 0px;

  padding: 14px 16px;

  color: #111b21;

  font-size: 0.85rem;

  line-height: 1.55;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);

  white-space: pre-wrap;

  word-break: break-word;

  font-family: system-ui, -apple-system, sans-serif;

}



.whatsapp-ready-status {

  text-align: right;

  font-size: 0.72rem;

  color: #0284c7;

  font-weight: 600;

  margin-top: 10px;

}



.whatsapp-box-footer {

  background: #ffffff;

  padding: 16px 18px;

  border-top: 1px solid #e2e8f0;

}



.btn-continue-whatsapp {

  background: #eab308;

  color: #000000;

  border: none;

  border-radius: 8px;

  font-weight: 700;

  font-size: 0.96rem;

  padding: 13px 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  width: 100%;

  cursor: pointer;

  transition: all 0.25s ease;

}



.btn-continue-whatsapp:hover {

  background: #ca8a04;

  transform: translateY(-1px);

}





/* Responsive Navigation Spacing for Medium-Large Displays (Prevents Word Wrapping) */

@media (min-width: 992px) and (max-width: 1320px) {

  .nav-link-custom {

    font-size: 0.81rem;

    padding: 6px 7px !important;

  }

  .navbar-brand-img {

    height: 42px;

  }

  .btn-taj-nav-cta {

    padding: 6px 12px;

    font-size: 0.78rem;

  }

  .nav-action-btn {

    width: 36px;

    height: 36px;

  }

}





/* ==========================================================================

   LUXURY ROYAL SHOP HERO BANNER (Visually Stunning & Master Craft Collage)

   ========================================================================== */

.shop-hero-royal {

  background: linear-gradient(135deg, #240310 0%, #150209 50%, #290815 100%);

  position: relative;

  overflow: hidden;

  padding: 64px 0 54px;

  border-bottom: 3px solid var(--taj-gold);

}



.shop-hero-royal::before {

  content: "";

  position: absolute;

  top: 0; left: 0; right: 0; bottom: 0;

  background: radial-gradient(circle at 80% 20%, rgba(197, 155, 39, 0.18) 0%, transparent 60%);

  pointer-events: none;

}



.shop-hero-badge {

  background: linear-gradient(135deg, #c59b27, #e2be58);

  color: #17020a;

  font-weight: 700;

  font-size: 0.82rem;

  padding: 7px 18px;

  border-radius: var(--radius-pill);

  display: inline-flex;

  align-items: center;

  gap: 6px;

  box-shadow: 0 4px 15px rgba(197, 155, 39, 0.35);

  margin-bottom: 18px;

}



.shop-hero-title {

  font-family: var(--font-heading);

  font-size: 2.85rem;

  font-weight: 800;

  line-height: 1.18;

  color: #ffffff;

  margin-bottom: 16px;

}



.shop-hero-title .text-gold-accent {

  background: linear-gradient(135deg, #f8df97 0%, #c59b27 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}



.shop-trust-pill {

  background: rgba(255, 255, 255, 0.95);

  color: #1f1a17;

  font-size: 0.82rem;

  font-weight: 600;

  padding: 7px 15px;

  border-radius: var(--radius-pill);

  display: inline-flex;

  align-items: center;

  gap: 6px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

}



.shop-craft-collage-card {

  background: #ffffff;

  border: 2px solid rgba(197, 155, 39, 0.4);

  border-radius: 20px;

  padding: 16px;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);

}



.shop-collage-grid {

  display: grid;

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

  gap: 10px;

  border-radius: 14px;

  overflow: hidden;

  margin-bottom: 14px;

}



.shop-collage-grid img {

  width: 100%;

  height: 120px;

  object-fit: cover;

  border-radius: 8px;

  transition: transform 0.4s ease;

}



.shop-collage-grid img:hover {

  transform: scale(1.06);

}



.shop-cat-shortcut-pill {

  background: rgba(255, 255, 255, 0.1);

  color: #f7eed8;

  border: 1px solid rgba(255, 255, 255, 0.2);

  padding: 4px 12px;

  border-radius: var(--radius-pill);

  font-size: 0.78rem;

  font-weight: 500;

  text-decoration: none;

  transition: all 0.2s ease;

}



.shop-cat-shortcut-pill:hover {

  background: var(--taj-gold);

  color: #17020a;

  border-color: var(--taj-gold);

}



@media (max-width: 991px) {

  .shop-hero-title {

    font-size: 2.1rem;

  }

}





/* ==========================================================================

   ATELIER EDITORIAL & SEO AUTHORITY HUB

   Google E-E-A-T & AI Search Optimized Layout (H2, H3, Semantic Formatting)

   ========================================================================== */

.seo-editorial-block {

  background: #ffffff;

  border-top: 1px solid rgba(197, 155, 39, 0.25);

  border-bottom: 1px solid rgba(197, 155, 39, 0.25);

  padding: 64px 0 54px;

  position: relative;

}



.seo-editorial-block::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 4px;

  background: linear-gradient(90deg, transparent, var(--taj-gold), transparent);

}



.seo-editorial-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: rgba(197, 155, 39, 0.12);

  color: var(--taj-maroon);

  border: 1px solid rgba(197, 155, 39, 0.35);

  padding: 5px 14px;

  border-radius: var(--radius-pill);

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.8px;

  text-transform: uppercase;

  margin-bottom: 16px;

}



.seo-editorial-h2 {

  font-family: var(--font-heading);

  font-size: 1.95rem;

  font-weight: 700;

  color: var(--taj-maroon);

  line-height: 1.35;

  margin-bottom: 18px;

  letter-spacing: -0.3px;

}



.seo-editorial-intro {

  font-size: 1.02rem;

  color: #4b5563;

  line-height: 1.8;

  margin-bottom: 36px;

  max-width: 980px;

}



.seo-editorial-grid {

  display: grid;

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

  gap: 24px;

  margin-bottom: 32px;

}



@media (max-width: 768px) {

  .seo-editorial-grid {

    grid-template-columns: 1fr;

  }

  .seo-editorial-h2 {

    font-size: 1.55rem;

  }

}



.seo-editorial-card {

  background: #fdfbf7;

  border: 1px solid #e9e3d5;

  border-radius: 14px;

  padding: 24px 22px;

  transition: all 0.25s ease;

}



.seo-editorial-card:hover {

  background: #ffffff;

  border-color: var(--taj-gold);

  box-shadow: 0 10px 24px rgba(36, 3, 16, 0.06);

  transform: translateY(-2px);

}



.seo-editorial-h3 {

  font-family: var(--font-heading);

  font-size: 1.15rem;

  font-weight: 600;

  color: var(--taj-maroon);

  margin-bottom: 10px;

  display: flex;

  align-items: center;

  gap: 8px;

}



.seo-editorial-h3 i {

  color: var(--taj-gold);

  font-size: 1rem;

}



.seo-editorial-card p {

  font-size: 0.91rem;

  color: #4b5563;

  line-height: 1.7;

  margin-bottom: 0;

}



.seo-editorial-links {

  background: #f8f6f0;

  border-radius: 12px;

  padding: 16px 20px;

  border: 1px dashed rgba(197, 155, 39, 0.4);

  font-size: 0.88rem;

  color: #4b5563;

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 10px;

}



.seo-editorial-link-pill {

  color: var(--taj-maroon);

  font-weight: 600;

  text-decoration: none;

  background: #ffffff;

  border: 1px solid #ded6c4;

  padding: 4px 12px;

  border-radius: var(--radius-pill);

  font-size: 0.82rem;

  transition: all 0.2s ease;

}



.seo-editorial-link-pill:hover {

  background: var(--taj-maroon);

  color: #ffffff;

  border-color: var(--taj-maroon);

}





/* WhatsApp Round Icon Micro-Styling */

.btn-card-wa i {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 22px;

  height: 22px;

  background: rgba(255, 255, 255, 0.25);

  border-radius: 50%;

  font-size: 0.82rem;

  transition: transform 0.3s ease, background-color 0.3s ease;

}



.btn-card-wa:hover i {

  transform: scale(1.15);

  background: rgba(255, 255, 255, 0.38);

}



.btn-taj-whatsapp i.bi-whatsapp {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 26px;

  height: 26px;

  background: rgba(255, 255, 255, 0.22);

  border-radius: 50%;

  font-size: 1rem;

  transition: transform 0.3s ease;

}



.btn-taj-whatsapp:hover i.bi-whatsapp {

  transform: scale(1.18);

  background: rgba(255, 255, 255, 0.35);

}





/* ==========================================================================

   MOBILE RESPONSIVE ENHANCEMENTS (Viewport < 576px)

   ========================================================================== */

@media (max-width: 576px) {

  .top-announcement-bar {

    font-size: 0.73rem;

    padding: 6px 0;

  }

  .top-announcement-bar .container {

    padding-left: 12px;

    padding-right: 12px;

  }

  .hero-pill-badge {

    font-size: 0.72rem;

    letter-spacing: 0.02em;

    padding: 5px 12px;

    line-height: 1.4;

    white-space: normal;

    text-align: left;

    max-width: 100%;

    margin-bottom: 1rem;

  }

  .hero-title {

    font-size: 2.15rem;

    line-height: 1.18;

    margin-bottom: 1rem;

  }

  .hero-lead {

    font-size: 0.95rem;

    line-height: 1.55;

    margin-bottom: 1.4rem;

  }

  .btn-taj-primary,

  .btn-taj-whatsapp {

    font-size: 0.86rem;

    padding: 10px 18px;

    gap: 7px;

  }

  .hero-stats-row {

    gap: 16px;

    padding-top: 1.2rem;

    margin-top: 1.4rem;

  }

  .hero-stat-item {

    padding-right: 14px;

  }

  .hero-stat-item .stat-num {

    font-size: 1.35rem;

  }

  .hero-stat-item .stat-label {

    font-size: 0.72rem;

  }

}





/* ==========================================================================

   ENTERPRISE & HUMAN-CENTRIC HERO STYLES

   ========================================================================== */

.hero-trust-grid {

  display: grid;

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

  gap: 12px 20px;

  margin-top: 1.5rem;

  padding-top: 1.25rem;

  border-top: 1px solid rgba(197, 155, 39, 0.22);

}



.hero-trust-item {

  display: flex;

  align-items: flex-start;

  gap: 10px;

}



.hero-trust-item i {

  color: var(--taj-gold);

  font-size: 1.15rem;

  line-height: 1.25;

  flex-shrink: 0;

}



.hero-trust-item .trust-text {

  line-height: 1.35;

}



.hero-trust-item strong {

  display: block;

  font-size: 0.85rem;

  color: var(--taj-maroon-dark);

  font-weight: 700;

}



.hero-trust-item span {

  display: block;

  font-size: 0.77rem;

  color: #555555;

}



.hero-spec-card {

  position: absolute;

  bottom: 0;

  left: 0;

  margin: 14px;

  padding: 12px 18px;

  background: rgba(255, 255, 255, 0.98);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border-radius: var(--radius-md);

  border: 1px solid rgba(197, 155, 39, 0.35);

  box-shadow: 0 10px 28px rgba(36, 3, 16, 0.12);

  max-width: calc(100% - 28px);

  z-index: 2;

}



.hero-spec-card-title {

  font-size: 0.88rem;

  font-weight: 700;

  color: var(--taj-maroon);

  margin-bottom: 3px;

  display: flex;

  align-items: center;

  gap: 7px;

}



.hero-spec-card-title i {

  color: var(--taj-gold);

  font-size: 1.1rem;

}



.hero-spec-card-desc {

  font-size: 0.76rem;

  color: #555555;

  line-height: 1.45;

  margin-bottom: 0;

}



@media (max-width: 576px) {

  .hero-trust-grid {

    grid-template-columns: 1fr;

    gap: 10px;

    margin-top: 1.25rem;

    padding-top: 1rem;

  }

  .hero-spec-card {

    position: relative;

    margin: 12px 0 0 0;

    max-width: 100%;

    box-shadow: 0 4px 14px rgba(36, 3, 16, 0.06);

  }

}





/* ==========================================================================

   AUTHENTIC HUMAN-CENTRIC ATELIER HERO SYSTEM (WORLD-CLASS CRAFTSMANSHIP)

   ========================================================================== */



/* --- Homepage Grand Atelier Hero --- */

.atelier-home-hero {

  position: relative;

  background: linear-gradient(135deg, #1f030d 0%, #2e0516 50%, #17020a 100%);

  color: #ffffff;

  padding: 70px 0 60px;

  overflow: hidden;

  border-bottom: 3px solid var(--taj-gold);

}



.atelier-home-hero::before {

  content: "";

  position: absolute;

  top: 0; left: 0; right: 0; bottom: 0;

  background: radial-gradient(circle at 20% 30%, rgba(197, 155, 39, 0.16) 0%, transparent 60%),

              radial-gradient(circle at 85% 70%, rgba(104, 13, 50, 0.35) 0%, transparent 50%);

  pointer-events: none;

}



.atelier-provenance-tag {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 5px 14px;

  background: rgba(197, 155, 39, 0.16);

  border: 1px solid rgba(197, 155, 39, 0.45);

  border-radius: var(--radius-pill);

  font-size: 0.82rem;

  font-weight: 600;

  color: #f3e5ab;

  margin-bottom: 1rem;

}



.atelier-home-title {

  font-family: var(--font-heading);

  font-size: clamp(2.3rem, 4.5vw, 3.6rem);

  font-weight: 800;

  line-height: 1.15;

  color: #ffffff;

  margin-bottom: 1.2rem;

  letter-spacing: -0.02em;

}



.atelier-home-title .highlight-gold {

  color: var(--taj-gold-light);

  background: linear-gradient(120deg, #fce997, #c59b27);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}



.atelier-home-desc {

  font-size: 1.05rem;

  line-height: 1.65;

  color: #e5d8c8;

  max-width: 580px;

  margin-bottom: 1.5rem;

}



.atelier-live-status-pill {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: rgba(37, 211, 102, 0.12);

  border: 1px solid rgba(37, 211, 102, 0.35);

  padding: 6px 14px;

  border-radius: var(--radius-pill);

  font-size: 0.8rem;

  color: #8ef7b5;

  margin-bottom: 1.5rem;

}



.atelier-live-status-pill .status-pulse {

  width: 8px;

  height: 8px;

  background: #25d366;

  border-radius: 50%;

  box-shadow: 0 0 8px #25d366;

  animation: pulseGreen 2s infinite;

}



@keyframes pulseGreen {

  0% { transform: scale(0.9); opacity: 0.8; }

  50% { transform: scale(1.3); opacity: 1; }

  100% { transform: scale(0.9); opacity: 0.8; }

}



/* Dual Visual Collage */

.atelier-visual-collage {

  position: relative;

  display: flex;

  gap: 16px;

  align-items: center;

}



.collage-img-main {

  width: 65%;

  height: 440px;

  object-fit: cover;

  border-radius: 16px;

  border: 2px solid rgba(197, 155, 39, 0.4);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);

}



.collage-img-sub {

  width: 42%;

  height: 330px;

  object-fit: cover;

  border-radius: 16px;

  border: 2px solid rgba(197, 155, 39, 0.5);

  margin-left: -24px;

  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.6);

}



.collage-seal-badge {

  position: absolute;

  bottom: -15px;

  left: 20px;

  background: #140209;

  border: 1px solid var(--taj-gold);

  padding: 10px 16px;

  border-radius: 10px;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);

  color: #f6eedb;

  font-size: 0.78rem;

  display: flex;

  align-items: center;

  gap: 10px;

  z-index: 3;

}



/* --- Internal Pages Atelier Banner --- */

.internal-atelier-hero {

  position: relative;

  background: linear-gradient(135deg, #240310 0%, #3a081e 60%, #1f020d 100%);

  color: #ffffff;

  padding: 50px 0 35px;

  border-bottom: 2px solid rgba(197, 155, 39, 0.4);

  overflow: hidden;

}



.internal-atelier-hero::before {

  content: "";

  position: absolute;

  top: 0; left: 0; right: 0; bottom: 0;

  background: radial-gradient(circle at 80% 30%, rgba(197, 155, 39, 0.14) 0%, transparent 60%);

  pointer-events: none;

}



.internal-hero-breadcrumb {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.82rem;

  color: rgba(255, 255, 255, 0.7);

  margin-bottom: 12px;

}



.internal-hero-breadcrumb a {

  color: #f3e5ab;

  text-decoration: none;

}



.internal-hero-breadcrumb a:hover {

  text-decoration: underline;

}



.internal-hero-title {

  font-family: var(--font-heading);

  font-size: clamp(2rem, 3.8vw, 3rem);

  font-weight: 800;

  color: #ffffff;

  line-height: 1.18;

  margin-bottom: 10px;

}



.internal-hero-subtitle {

  font-size: 1.05rem;

  font-weight: 600;

  color: #f5df9a;

  margin-bottom: 12px;

}



.internal-hero-desc {

  font-size: 0.94rem;

  color: #e8dcd0;

  line-height: 1.65;

  max-width: 650px;

  margin-bottom: 20px;

}



.internal-hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  align-items: center;

  margin-bottom: 22px;

}



/* Category Quick Jump Pills */

.hero-quick-filter-strip {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  align-items: center;

  padding-top: 16px;

  border-top: 1px solid rgba(255, 255, 255, 0.15);

}



.hero-filter-pill-label {

  font-size: 0.76rem;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  color: rgba(255, 255, 255, 0.6);

  font-weight: 700;

  margin-right: 4px;

}



.hero-quick-pill {

  background: rgba(255, 255, 255, 0.09);

  border: 1px solid rgba(197, 155, 39, 0.35);

  color: #f3e5ab;

  padding: 4px 14px;

  border-radius: var(--radius-pill);

  font-size: 0.8rem;

  font-weight: 500;

  text-decoration: none;

  transition: all 0.2s ease;

}



.hero-quick-pill:hover {

  background: var(--taj-gold);

  color: #1a0209;

  border-color: var(--taj-gold);

}



/* Right Side Showcase in Internal Pages */

.internal-hero-visual-box {

  position: relative;

  border-radius: 16px;

  overflow: hidden;

  border: 2px solid rgba(197, 155, 39, 0.4);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);

}



.internal-hero-visual-box img {

  width: 100%;

  height: 350px;

  object-fit: cover;

  display: block;

}



.internal-hero-visual-overlay {

  position: absolute;

  bottom: 0; left: 0; right: 0;

  background: linear-gradient(to top, rgba(20, 2, 9, 0.96) 0%, rgba(20, 2, 9, 0.75) 65%, transparent 100%);

  padding: 20px 22px 16px;

  color: #ffffff;

}



.internal-hero-visual-overlay h6 {

  font-family: var(--font-heading);

  font-size: 0.95rem;

  font-weight: 700;

  color: #f5df9a;

  margin-bottom: 4px;

}



.internal-hero-visual-overlay p {

  font-size: 0.78rem;

  color: #ddd0c0;

  line-height: 1.4;

  margin-bottom: 0;

}



/* Bottom Trust Bar across internal heroes */

.internal-hero-bottom-bar {

  background: #160209;

  border-bottom: 1px solid rgba(197, 155, 39, 0.25);

  padding: 12px 0;

  color: #ddd0c0;

  font-size: 0.82rem;

}



.internal-hero-bottom-bar .container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

}



.internal-trust-item {

  display: flex;

  align-items: center;

  gap: 7px;

  font-weight: 500;

}



.internal-trust-item i {

  color: var(--taj-gold);

  font-size: 1rem;

}



@media (max-width: 991px) {

  .atelier-visual-collage {

    margin-top: 2rem;

  }

  .collage-img-main {

    width: 60%;

    height: 320px;

  }

  .collage-img-sub {

    width: 45%;

    height: 250px;

  }

  .internal-hero-visual-box {

    margin-top: 1.5rem;

  }

}



@media (max-width: 576px) {

  .atelier-home-hero {

    padding: 40px 0 35px;

  }

  .internal-atelier-hero {

    padding: 35px 0 25px;

  }

  .collage-img-main {

    width: 65%;

    height: 240px;

  }

  .collage-img-sub {

    width: 45%;

    height: 180px;

    margin-left: -15px;

  }

  .internal-hero-visual-box img {

    height: 240px;

  }

  .internal-hero-bottom-bar .container {

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

  }

}





/* ==========================================================================

   FULL-WIDTH PHOTOGRAPHIC HERO SYSTEM (CINEMATIC LUXURY ATELIER)

   ========================================================================== */

.fullwidth-hero-banner {

  position: relative;

  background-position: center center;

  background-size: cover;

  background-repeat: no-repeat;

  color: #ffffff;

  padding: 100px 0 85px;

  overflow: hidden;

  border-bottom: 3px solid var(--taj-gold);

}



/* Luxury photographic scrim overlay */

.fullwidth-hero-banner::before {

  content: "";

  position: absolute;

  top: 0; left: 0; right: 0; bottom: 0;

  background: linear-gradient(

    135deg,

    rgba(18, 2, 9, 0.88) 0%,

    rgba(28, 3, 14, 0.82) 50%,

    rgba(14, 1, 7, 0.92) 100%

  );

  z-index: 1;

}



.fullwidth-hero-content {

  position: relative;

  z-index: 2;

  max-width: 840px;

}



.fullwidth-hero-tag {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 6px 16px;

  background: rgba(197, 155, 39, 0.2);

  border: 1px solid rgba(197, 155, 39, 0.5);

  border-radius: var(--radius-pill);

  font-size: 0.82rem;

  font-weight: 600;

  color: #fce89f;

  margin-bottom: 1.1rem;

  backdrop-filter: blur(8px);

}



.fullwidth-hero-title {

  font-family: var(--font-heading);

  font-size: clamp(2.3rem, 4.8vw, 3.8rem);

  font-weight: 800;

  line-height: 1.15;

  color: #ffffff;

  margin-bottom: 1.1rem;

  letter-spacing: -0.02em;

  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);

}



.fullwidth-hero-title .highlight-gold {

  color: #f7e089;

  background: linear-gradient(120deg, #fff2b2, #d8ac34);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}



.fullwidth-hero-subtitle {

  font-size: 1.15rem;

  font-weight: 600;

  color: #f7df96;

  margin-bottom: 1rem;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

}



.fullwidth-hero-desc {

  font-size: 1.02rem;

  line-height: 1.7;

  color: #f0e6dc;

  margin-bottom: 1.8rem;

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

}



.fullwidth-hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  align-items: center;

  margin-bottom: 1.8rem;

}



/* Category Quick Jump Pills over Full-Width Hero */

.fullwidth-hero-quick-filter {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  align-items: center;

  padding-top: 1.25rem;

  border-top: 1px solid rgba(255, 255, 255, 0.2);

}



.fullwidth-filter-label {

  font-size: 0.78rem;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  color: rgba(255, 255, 255, 0.7);

  font-weight: 700;

  margin-right: 6px;

}



.fullwidth-quick-pill {

  background: rgba(255, 255, 255, 0.14);

  border: 1px solid rgba(197, 155, 39, 0.45);

  color: #ffffff;

  padding: 5px 14px;

  border-radius: var(--radius-pill);

  font-size: 0.82rem;

  font-weight: 500;

  text-decoration: none;

  backdrop-filter: blur(6px);

  transition: all 0.25s ease;

}



.fullwidth-quick-pill:hover {

  background: var(--taj-gold);

  color: #160209;

  border-color: var(--taj-gold);

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(197, 155, 39, 0.4);

}



/* Breadcrumb over full-width image */

.fullwidth-hero-breadcrumb {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.84rem;

  color: rgba(255, 255, 255, 0.75);

  margin-bottom: 14px;

}



.fullwidth-hero-breadcrumb a {

  color: #f7df96;

  text-decoration: none;

  font-weight: 500;

}



.fullwidth-hero-breadcrumb a:hover {

  text-decoration: underline;

}



/* Reassurance Bottom Strip below the hero */

.fullwidth-hero-trust-bar {

  background: #140107;

  border-bottom: 1px solid rgba(197, 155, 39, 0.3);

  padding: 14px 0;

  color: #e5dacd;

  font-size: 0.86rem;

}



.fullwidth-hero-trust-bar .container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  align-items: center;

  gap: 16px;

}



.fullwidth-trust-item {

  display: flex;

  align-items: center;

  gap: 8px;

  font-weight: 600;

}



.fullwidth-trust-item i {

  color: var(--taj-gold);

  font-size: 1.1rem;

}



@media (max-width: 768px) {

  .fullwidth-hero-banner {

    padding: 60px 0 50px;

  }

  .fullwidth-hero-trust-bar .container {

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

  }

}



/* ==========================================================================

   MINIMALIST & HIGH-EFFECTIVENESS HERO ARCHITECTURE

   Full-width background image, left or center aligned, single clear CTA

   ========================================================================== */

.minimal-hero {

  position: relative;

  background-position: center center;

  background-size: cover;

  background-repeat: no-repeat;

  color: #FFFFFF;

  padding: 100px 0 90px;

  border-bottom: 2px solid var(--gold-line);

}



.minimal-hero::before {

  content: "";

  position: absolute;

  top: 0; left: 0; right: 0; bottom: 0;

  background: linear-gradient(135deg, rgba(26, 8, 14, 0.82) 0%, rgba(42, 10, 20, 0.78) 100%);

  z-index: 1;

}



.minimal-hero .container {

  position: relative;

  z-index: 2;

}



.minimal-hero-inner {

  max-width: 760px;

}



.minimal-hero-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  font-size: 0.82rem;

  font-weight: 600;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: #FCE89F;

  margin-bottom: 14px;

  padding: 4px 12px;

  background: rgba(176, 138, 62, 0.22);

  border: 1px solid rgba(176, 138, 62, 0.55);

  border-radius: var(--radius-pill);

}



.minimal-hero h1 {

  font-family: var(--font-display);

  font-size: clamp(2.4rem, 5vw, 4rem);

  font-weight: 600;

  line-height: 1.15;

  color: #FFFFFF;

  margin-bottom: 16px;

  letter-spacing: -0.01em;

}



.minimal-hero h1 .text-gold-light {

  color: #FCE89F;

}



.minimal-hero-lead {

  font-size: 1.05rem;

  line-height: 1.65;

  color: #F0E6D3;

  margin-bottom: 28px;

  max-width: 680px;

}



.minimal-hero-cta {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  background: var(--maroon);

  color: #FFFFFF !important;

  font-weight: 600;

  font-size: 0.95rem;

  padding: 13px 32px;

  border-radius: var(--radius-sm);

  border: 1px solid rgba(176, 138, 62, 0.4);

  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);

  transition: var(--transition-smooth);

}



.minimal-hero-cta:hover {

  background: #892837;

  color: #FFFFFF !important;

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);

}



.minimal-hero-cta.btn-wa {

  background: var(--whatsapp);

  border-color: rgba(255, 255, 255, 0.25);

}



.minimal-hero-cta.btn-wa:hover {

  background: #17633d;

}



/* Breadcrumb in minimal hero */

.minimal-hero-breadcrumb {

  font-size: 0.82rem;

  color: rgba(255, 255, 255, 0.7);

  margin-bottom: 12px;

}



.minimal-hero-breadcrumb a {

  color: #FCE89F;

  text-decoration: none;

}



.minimal-hero-breadcrumb a:hover {

  text-decoration: underline;

}



/* Minimalist Guarantee Strip */

.minimal-hero-strip {

  background: #1C0A10;

  border-bottom: 1px solid rgba(176, 138, 62, 0.3);

  padding: 11px 0;

  color: #E8DCD0;

  font-size: 0.82rem;

}



.minimal-hero-strip .container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

}



.minimal-strip-item {

  display: flex;

  align-items: center;

  gap: 7px;

  font-weight: 500;

}



.minimal-strip-item i {

  color: var(--gold-line);

  font-size: 0.95rem;

}



/* Sticky Mobile CTA Bar (< 768px) */

.sticky-mobile-cta {

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  background: var(--ivory);

  border-top: 1px solid var(--gold-line);

  padding: 8px 12px;

  z-index: 1045;

  box-shadow: 0 -4px 16px rgba(42, 26, 20, 0.12);

}



.btn-sticky-call {

  background: var(--maroon);

  color: #FFFFFF !important;

  font-weight: 600;

  font-size: 0.86rem;

  padding: 10px;

  border-radius: var(--radius-sm);

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

}



.btn-sticky-wa {

  background: var(--whatsapp);

  color: #FFFFFF !important;

  font-weight: 600;

  font-size: 0.86rem;

  padding: 10px;

  border-radius: var(--radius-sm);

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

}



/* Human-Written Collapsed FAQ Accordion */

.atelier-faq-section {

  padding: 80px 0;

  background-color: var(--ivory);

  border-top: 1px solid var(--taj-border-light);

}



.atelier-accordion .accordion-item {

  background-color: #FFFFFF;

  border: 1px solid var(--taj-border-light);

  border-radius: var(--radius-sm) !important;

  margin-bottom: 12px;

  overflow: hidden;

}



.atelier-accordion .accordion-button {

  font-family: var(--font-display);

  font-size: 1.15rem;

  font-weight: 600;

  color: var(--maroon);

  background-color: #FFFFFF;

  padding: 18px 22px;

  box-shadow: none !important;

}



.atelier-accordion .accordion-button:not(.collapsed) {

  background-color: var(--sand);

  color: var(--maroon);

}



.atelier-accordion .accordion-body {

  font-size: 0.92rem;

  line-height: 1.7;

  color: var(--ink);

  padding: 18px 22px;

  background-color: #FFFFFF;

}



/* Focus Visible Accessibility */

:focus-visible {

  outline: 2px solid var(--gold-line) !important;

  outline-offset: 2px !important;

}



/* Tap target minimum 44px */

.btn, .nav-link, .dropdown-item, .accordion-button {

  min-height: 44px;

}



/* Reduced motion preference */

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;

  }

}





/* ==========================================================================

   COMPREHENSIVE MOBILE & TABLET RESPONSIVENESS SUITE (All Viewports)

   ========================================================================== */



/* 1. TABLET BREAKPOINT (768px - 991.98px) */

@media (min-width: 768px) and (max-width: 991.98px) {

  .minimal-hero {

    padding: 72px 0 60px;

  }

  .minimal-hero h1 {

    font-size: 2.5rem;

    line-height: 1.2;

  }

  .minimal-hero-lead {

    font-size: 1rem;

    line-height: 1.6;

    max-width: 600px;

  }

  .section-padding {

    padding: 68px 0;

  }

  .container {

    padding-left: 20px;

    padding-right: 20px;

  }

  .minimal-hero-strip .container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px 16px;

  }

  .sticky-mobile-cta {

    display: none !important;

  }

  .shop-filter-bar {

    padding: 20px;

  }

}



/* 2. MOBILE BREAKPOINT (< 768px) */

@media (max-width: 767.98px) {

  /* Prevent sticky bottom action bar from covering footer content */

  body {

    padding-bottom: 68px !important;

  }



  /* Hide round floating button on mobile - the sticky bar has Call & WhatsApp direct */

  .floating-whatsapp-round {

    display: none !important;

  }



  /* Sticky Mobile Action Bar */

  .sticky-mobile-cta {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background: var(--ivory);

    border-top: 1px solid var(--gold-line);

    padding: 8px 12px;

    z-index: 1045;

    box-shadow: 0 -4px 16px rgba(42, 26, 20, 0.14);

  }



  .btn-sticky-call {

    background: var(--maroon);

    color: #FFFFFF !important;

    font-weight: 600;

    font-size: 0.84rem;

    padding: 10px;

    border-radius: var(--radius-sm);

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    box-shadow: 0 2px 8px rgba(107, 31, 42, 0.25);

  }



  .btn-sticky-wa {

    background: var(--whatsapp);

    color: #FFFFFF !important;

    font-weight: 600;

    font-size: 0.84rem;

    padding: 10px;

    border-radius: var(--radius-sm);

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    box-shadow: 0 2px 8px rgba(31, 122, 77, 0.25);

  }



  /* Minimalist Hero Mobile Layout */

  .minimal-hero {

    padding: 50px 0 42px;

  }

  .minimal-hero-inner {

    text-align: left;

  }

  .minimal-hero-eyebrow {

    font-size: 0.72rem;

    padding: 3px 10px;

    letter-spacing: 0.04em;

    margin-bottom: 12px;

  }

  .minimal-hero h1 {

    font-size: clamp(1.75rem, 6.2vw, 2.25rem);

    line-height: 1.22;

    margin-bottom: 12px;

  }

  .minimal-hero-lead {

    font-size: 0.92rem;

    line-height: 1.55;

    margin-bottom: 22px;

  }

  .minimal-hero-cta {

    display: flex;

    width: 100%;

    justify-content: center;

    text-align: center;

    padding: 12px 20px;

    font-size: 0.92rem;

  }



  /* Minimal Guarantee Strip Mobile Grid */

  .minimal-hero-strip {

    padding: 10px 0;

  }

  .minimal-hero-strip .container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px 12px;

  }

  .minimal-strip-item {

    font-size: 0.75rem;

    line-height: 1.35;

  }

  .minimal-strip-item i {

    font-size: 0.88rem;

    flex-shrink: 0;

  }



  /* General Section Spacing */

  .section-padding {

    padding: 48px 0;

  }

  .section-title {

    font-size: 1.72rem;

    line-height: 1.25;

  }

  .section-subtitle {

    font-size: 0.74rem;

  }

  .section-desc {

    font-size: 0.92rem;

    line-height: 1.55;

  }



  /* Fluid Image heights on mobile */

  .object-fit-cover[style*="height: 420px"],

  .object-fit-cover[style*="height: 480px"] {

    height: 250px !important;

  }



  /* Tables Mobile Touch Scroll & Padding */

  .table-responsive {

    -webkit-overflow-scrolling: touch;

    margin-bottom: 1rem;

    border-radius: var(--radius-sm);

  }

  .table {

    font-size: 0.82rem;

    margin-bottom: 0;

  }

  .table th, .table td {

    padding: 8px 10px;

    white-space: nowrap;

  }



  /* FAQ Accordion Mobile Padding */

  .atelier-faq-section {

    padding: 52px 0;

  }

  .atelier-accordion .accordion-button {

    font-size: 1.02rem;

    padding: 14px 16px;

  }

  .atelier-accordion .accordion-body {

    font-size: 0.88rem;

    padding: 14px 16px;

    line-height: 1.6;

  }



  /* Interactive Wizard Mobile Polish */

  .wizard-section {

    padding: 55px 0;

  }

  .wizard-lead-title {

    font-size: 1.85rem;

    line-height: 1.2;

    margin-bottom: 12px;

  }

  .wizard-form-card {

    padding: 20px 14px;

    border-radius: 14px;

  }

  .wizard-pill-grid {

    gap: 6px;

    margin-bottom: 16px;

  }

  .wizard-pill-btn {

    padding: 6px 10px;

    font-size: 0.78rem;

  }



  /* Offcanvas Cart on Mobile */

  .offcanvas-cart {

    width: 100% !important;

  }

  .offcanvas-cart .offcanvas-header {

    padding: 12px 16px;

  }

  .offcanvas-cart .offcanvas-body {

    padding: 14px;

  }



  /* Offcanvas Mobile Navigation Menu */

  #mobileMenuOffcanvas {

    width: 310px;

    max-width: 86vw;

    background: var(--ivory);

    border-right: 1px solid var(--gold-line);

  }

  #mobileMenuOffcanvas .offcanvas-header {

    background: var(--maroon);

    color: #FFFFFF;

    padding: 14px 18px;

    border-bottom: 1px solid var(--gold-line);

  }

  #mobileMenuOffcanvas .nav-link {

    font-family: var(--font-body);

    font-size: 1rem;

    padding: 10px 0;

  }

  #mobileMenuOffcanvas .collapse a {

    font-size: 0.88rem;

    color: #5A4033 !important;

    padding: 8px 0;

  }



  /* Footer Mobile Stacking */

  .taj-footer {

    padding: 48px 0 20px;

  }

  .footer-logo {

    max-height: 40px !important;

  }

  .footer-desc {

    font-size: 0.86rem;

    line-height: 1.6;

  }

  .footer-heading {

    font-size: 1.05rem;

    margin-bottom: 14px;

  }

  .footer-contact-item {

    font-size: 0.85rem;

  }

  .footer-bottom-bar {

    flex-direction: column;

    text-align: center;

    gap: 12px;

  }



  /* Shop Filters */

  .shop-filter-bar {

    padding: 16px 12px;

  }

  .filter-btn-pill {

    padding: 6px 14px;

    font-size: 0.8rem;

  }

}



/* 3. EXTRA SMALL PHONES (< 400px) */

@media (max-width: 399.98px) {

  .minimal-hero-strip .container {

    grid-template-columns: 1fr;

    gap: 6px;

  }

  .btn-sticky-call, .btn-sticky-wa {

    font-size: 0.78rem;

    padding: 8px 4px;

  }

  .navbar-brand-img {

    height: 44px;

  }

  .top-announcement-bar {

    font-size: 0.74rem;

  }

}







/* ==========================================================================

   HUMAN-CENTRIC ENTERPRISE ATELIER DESIGN SYSTEM (Anti-AI Generated UI/UX)

   Bespoke Typography: Playfair Display (Editorial Serif) + Plus Jakarta Sans (Enterprise Sans)

   Engineered for:

   1. Home Women & Decor Connoisseurs

   2. Wedding Bulk Return Gifts (Thamboolam)

   3. Corporate Custom Bulk Orders

   ========================================================================== */



@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');



:root {

  /* Editorial Palette: Warm, Tactile, High-Contrast Luxury */

  --ivory: #FAF6EE;

  --sand: #F3EBDD;

  --ink: #1F1916;

  --maroon: #681723;

  --maroon-deep: #440E16;

  --gold-text: #8C6A24;

  --gold-line: #B58F42;

  --gold-light: #F7E7B8;

  --whatsapp: #1E7B4E;

  --whatsapp-hover: #16623D;



  --font-display: 'Manrope', -apple-system, sans-serif;

  --font-heading: 'Manrope', -apple-system, sans-serif;

  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

}



body {

  font-family: var(--font-body);

  background-color: var(--ivory);

  color: var(--ink);

  -webkit-font-smoothing: antialiased;

}



h1, h2, h3, h4, .font-heading {

  font-family: var(--font-heading);

  letter-spacing: -0.01em;

}



.title-italic-accent,

.hero-title-serif-italic {

  font-family: var(--font-display);

  font-style: italic;

  font-weight: 500;

  color: #F8E8BA;

}



/* ==========================================================================

   HOMEPAGE ENTERPRISE HERO (Warm Atelier Lighting, Non-AI Aesthetic)

   ========================================================================== */

.atelier-hero {

  position: relative;

  background-position: center right;

  background-size: cover;

  background-repeat: no-repeat;

  color: #FFFFFF;

  padding: 105px 0 95px;

  border-bottom: 2px solid var(--gold-line);

  overflow: hidden;

}



/* Natural Editorial Scrim: Preserves artisan hands & texture on the right */

.atelier-hero::before {

  content: "";

  position: absolute;

  top: 0; left: 0; right: 0; bottom: 0;

  background: linear-gradient(90deg, 

    rgba(22, 8, 12, 0.94) 0%, 

    rgba(32, 12, 18, 0.88) 42%, 

    rgba(32, 12, 18, 0.58) 75%, 

    rgba(32, 12, 18, 0.35) 100%

  );

  z-index: 1;

}



.atelier-hero .container {

  position: relative;

  z-index: 2;

}



.atelier-hero-inner {

  max-width: 1080px;

}



.hero-atelier-origin {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: 0.76rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: #F6E2A8;

  margin-bottom: 16px;

  padding: 5px 14px;

  background: rgba(181, 143, 66, 0.18);

  border: 1px solid rgba(181, 143, 66, 0.45);

  border-radius: 4px;

}



.origin-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #25D366;

  display: inline-block;

  box-shadow: 0 0 6px rgba(37, 211, 102, 0.8);

}



.hero-master-title {

  font-family: var(--font-display);

  font-size: clamp(2.3rem, 5.2vw, 4.1rem);

  font-weight: 600;

  line-height: 1.15;

  color: #FFFFFF;

  margin-bottom: 18px;

  letter-spacing: -0.015em;

  max-width: 950px;

}



.hero-master-lead {

  font-size: 1.08rem;

  line-height: 1.7;

  color: #F2E8DC;

  margin-bottom: 34px;

  max-width: 820px;

}



/* ==========================================================================

   THE 3-AUDIENCE PORTAL (Home Women • Weddings • Corporate Orders)

   ========================================================================== */

.hero-icp-grid {

  display: grid;

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

  gap: 16px;

  margin-bottom: 36px;

}



.hero-icp-card {

  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(247, 231, 184, 0.22);

  border-radius: 8px;

  padding: 18px 20px;

  text-decoration: none !important;

  color: #FFFFFF !important;

  display: flex;

  flex-direction: column;

  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;

  overflow: hidden;

}



.hero-icp-card:hover {

  background: rgba(255, 255, 255, 0.15);

  border-color: rgba(247, 231, 184, 0.7);

  transform: translateY(-4px);

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);

}



.hero-icp-card.featured-wedding {

  border-color: rgba(247, 231, 184, 0.45);

  background: rgba(104, 23, 35, 0.35);

}



.hero-icp-target {

  font-size: 0.72rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: #F8E8BA;

  margin-bottom: 6px;

  display: block;

}



.hero-icp-name {

  font-family: var(--font-heading);

  font-size: 1.25rem;

  font-weight: 600;

  color: #FFFFFF;

  margin-bottom: 6px;

  line-height: 1.25;

}



.hero-icp-desc {

  font-size: 0.82rem;

  line-height: 1.45;

  color: #E6D8CC;

  margin-bottom: 12px;

  flex-grow: 1;

}



.hero-icp-link {

  font-size: 0.78rem;

  font-weight: 700;

  color: #F8E8BA;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  transition: transform 0.2s ease;

}



.hero-icp-card:hover .hero-icp-link {

  transform: translateX(4px);

  color: #FFFFFF;

}



/* Hero Action Bar & Social Proof */

.hero-action-row {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 20px;

}



.hero-btn-primary {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  background: var(--whatsapp);

  color: #FFFFFF !important;

  font-weight: 700;

  font-size: 0.96rem;

  padding: 14px 34px;

  border-radius: 4px;

  text-decoration: none !important;

  border: 1px solid rgba(255, 255, 255, 0.2);

  box-shadow: 0 4px 18px rgba(30, 123, 78, 0.4);

  transition: all 0.25s ease;

}



.hero-btn-primary:hover {

  background: var(--whatsapp-hover);

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(30, 123, 78, 0.55);

}



.hero-btn-secondary {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: transparent;

  color: #FFFFFF !important;

  font-weight: 600;

  font-size: 0.94rem;

  padding: 13px 26px;

  border-radius: 4px;

  text-decoration: none !important;

  border: 1px solid rgba(255, 255, 255, 0.4);

  transition: all 0.25s ease;

}



.hero-btn-secondary:hover {

  background: rgba(255, 255, 255, 0.12);

  border-color: #FFFFFF;

  transform: translateY(-2px);

}



.hero-patron-proof {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 0.85rem;

  color: #E8DCD0;

}



.proof-stars {

  color: #F8B84E;

  display: inline-flex;

  gap: 2px;

}



/* ==========================================================================

   CATEGORY & SERVICE PAGES ENTERPRISE HERO

   ========================================================================== */

.category-hero {

  position: relative;

  background-position: center right;

  background-size: cover;

  background-repeat: no-repeat;

  color: #FFFFFF;

  padding: 85px 0 75px;

  border-bottom: 2px solid var(--gold-line);

  overflow: hidden;

}



.category-hero::before {

  content: "";

  position: absolute;

  top: 0; left: 0; right: 0; bottom: 0;

  background: linear-gradient(90deg, 

    rgba(22, 8, 12, 0.94) 0%, 

    rgba(32, 12, 18, 0.88) 45%, 

    rgba(32, 12, 18, 0.6) 80%, 

    rgba(32, 12, 18, 0.35) 100%

  );

  z-index: 1;

}



.category-hero .container {

  position: relative;

  z-index: 2;

}



.category-hero-inner {

  max-width: 860px;

}



.category-breadcrumb {

  font-size: 0.78rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  font-weight: 600;

  color: rgba(255, 255, 255, 0.65);

  margin-bottom: 14px;

}



.category-breadcrumb a {

  color: #F8E8BA;

  text-decoration: none;

}



.category-breadcrumb a:hover {

  text-decoration: underline;

}



.category-buyer-hook {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  font-size: 0.74rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: #F6E2A8;

  padding: 4px 12px;

  background: rgba(181, 143, 66, 0.2);

  border: 1px solid rgba(181, 143, 66, 0.5);

  border-radius: 4px;

  margin-bottom: 14px;

}



.category-hero-title {

  font-family: var(--font-display);

  font-size: clamp(2.1rem, 4.8vw, 3.4rem);

  font-weight: 600;

  line-height: 1.18;

  color: #FFFFFF;

  margin-bottom: 16px;

  letter-spacing: -0.015em;

}



.category-hero-lead {

  font-size: 1.02rem;

  line-height: 1.68;

  color: #F2E8DC;

  margin-bottom: 24px;

  max-width: 760px;

}



/* Concrete Craft Spec Chips */

.craft-specs-row {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 28px;

}



.craft-spec-chip {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: rgba(255, 255, 255, 0.1);

  border: 1px solid rgba(248, 232, 186, 0.25);

  border-radius: 4px;

  padding: 5px 12px;

  font-size: 0.78rem;

  font-weight: 600;

  color: #F7EBDD;

}



.craft-spec-chip i {

  color: #F8E8BA;

}



/* ==========================================================================

   RESPONSIVE OVERRIDES FOR ATELIER HERO SUITE

   ========================================================================== */

@media (max-width: 991.98px) {

  .atelier-hero {

    padding: 70px 0 60px;

  }

  .category-hero {

    padding: 60px 0 52px;

  }

  .hero-icp-grid {

    grid-template-columns: 1fr;

    gap: 12px;

  }

  .hero-action-row {

    flex-direction: column;

    align-items: stretch;

  }

  .hero-btn-primary, .hero-btn-secondary {

    width: 100%;

    justify-content: center;

    text-align: center;

  }

  .craft-specs-row {

    gap: 6px;

  }

}



@media (max-width: 575.98px) {

  .atelier-hero {

    padding: 48px 0 40px;

  }

  .category-hero {

    padding: 44px 0 38px;

  }

  .hero-master-title {

    font-size: 1.85rem;

    line-height: 1.22;

  }

  .hero-master-lead {

    font-size: 0.92rem;

    line-height: 1.55;

    margin-bottom: 22px;

  }

  .category-hero-title {

    font-size: 1.75rem;

    line-height: 1.22;

  }

  .category-hero-lead {

    font-size: 0.9rem;

    line-height: 1.55;

    margin-bottom: 20px;

  }

  .craft-spec-chip {

    font-size: 0.72rem;

    padding: 4px 8px;

  }

  .hero-patron-proof {

    font-size: 0.78rem;

    flex-direction: column;

    align-items: flex-start;

    gap: 4px;

  }

}







/* ==========================================================================

   AWARD-WINNING MINIMALIST ATELIER HERO (Ultra-Clean, High-Fashion Enterprise)

   Bespoke Typography: Manrope (Architectural Sans) + Plus Jakarta Sans (Enterprise UI)

   ========================================================================== */

.atelier-minimal-hero {

  position: relative;

  min-height: 520px;

  display: flex;

  align-items: center;

  background-position: center right;

  background-size: cover;

  background-repeat: no-repeat;

  color: #FFFFFF;

  padding: 100px 0 85px;

  border-bottom: 1px solid rgba(181, 143, 66, 0.35);

  overflow: hidden;

}



/* Cinematic Directional Lighting (Warm, High-Contrast, Crystal Clear Text) */

.atelier-minimal-hero::before {

  content: "";

  position: absolute;

  top: 0; left: 0; right: 0; bottom: 0;

  background: linear-gradient(

    90deg, 

    rgba(15, 6, 9, 0.94) 0%, 

    rgba(22, 9, 13, 0.88) 45%, 

    rgba(22, 9, 13, 0.58) 78%, 

    rgba(22, 9, 13, 0.32) 100%

  );

  z-index: 1;

}



.atelier-minimal-hero .container {

  position: relative;

  z-index: 2;

}



.atelier-minimal-hero-inner {

  max-width: 840px;

}



/* Clean Architectural Eyebrow */

.hero-clean-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  font-family: var(--font-heading);

  font-size: 0.76rem;

  font-weight: 700;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: #F8E8BA;

  margin-bottom: 18px;

}



.hero-clean-eyebrow::before {

  content: "";

  display: inline-block;

  width: 22px;

  height: 1.5px;

  background: var(--gold-line);

}



/* Clean Breadcrumb Navigation */

.hero-clean-breadcrumb {

  display: flex;

  align-items: center;

  gap: 8px;

  font-family: var(--font-heading);

  font-size: 0.76rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.6);

  margin-bottom: 16px;

}



.hero-clean-breadcrumb a {

  color: #F8E8BA;

  text-decoration: none;

}



.hero-clean-breadcrumb a:hover {

  text-decoration: underline;

}



/* Bold, Modern, High-Fashion Architectural Headline */

.hero-clean-title {

  font-family: var(--font-heading);

  font-size: clamp(2.3rem, 5vw, 4rem);

  font-weight: 800;

  line-height: 1.14;

  color: #FFFFFF;

  letter-spacing: -0.03em;

  margin-bottom: 20px;

}



.hero-clean-title .gold-accent {

  color: #F8E8BA;

  font-weight: 800;

}



/* Crisp, Articulate Value Proposition */

.hero-clean-lead {

  font-family: var(--font-body);

  font-size: clamp(0.98rem, 1.25vw, 1.12rem);

  line-height: 1.7;

  color: #EFE4D6;

  font-weight: 400;

  margin-bottom: 32px;

  max-width: 700px;

}



/* Single Focused Luxury CTA Button */

.hero-clean-cta {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  background: var(--maroon);

  color: #FFFFFF !important;

  font-family: var(--font-heading);

  font-weight: 700;

  font-size: 0.95rem;

  letter-spacing: 0.02em;

  padding: 15px 36px;

  border-radius: 4px;

  border: 1px solid rgba(181, 143, 66, 0.45);

  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);

  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);

  text-decoration: none !important;

}



.hero-clean-cta:hover {

  background: #801C2B;

  transform: translateY(-2px);

  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);

  border-color: #F8E8BA;

  color: #FFFFFF !important;

}



.hero-clean-cta.btn-wa-style {

  background: var(--whatsapp);

  border-color: rgba(255, 255, 255, 0.25);

  box-shadow: 0 8px 26px rgba(30, 123, 78, 0.38);

}



.hero-clean-cta.btn-wa-style:hover {

  background: var(--whatsapp-hover);

  box-shadow: 0 14px 34px rgba(30, 123, 78, 0.52);

}



/* Clean, Architectural Micro-Trust Strip */

.hero-clean-strip {

  background: #13080B;

  border-bottom: 1px solid rgba(181, 143, 66, 0.25);

  padding: 13px 0;

  font-family: var(--font-body);

  font-size: 0.82rem;

  font-weight: 500;

  color: #DFD4C8;

  letter-spacing: 0.02em;

}



.hero-clean-strip .container {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: 14px 44px;

}



.clean-strip-point {

  display: inline-flex;

  align-items: center;

  gap: 8px;

}



.clean-strip-point i {

  color: var(--gold-line);

  font-size: 0.88rem;

}



/* Responsive Overrides */

@media (max-width: 991.98px) {

  .atelier-minimal-hero {

    min-height: auto;

    padding: 75px 0 65px;

  }

  .hero-clean-title {

    font-size: 2.5rem;

    line-height: 1.18;

  }

  .hero-clean-lead {

    font-size: 0.98rem;

    line-height: 1.6;

  }

  .hero-clean-strip .container {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 10px 24px;

  }

}



@media (max-width: 575.98px) {

  .atelier-minimal-hero {

    padding: 52px 0 44px;

  }

  .hero-clean-eyebrow {

    font-size: 0.72rem;

    letter-spacing: 0.1em;

    margin-bottom: 14px;

  }

  .hero-clean-title {

    font-size: 1.85rem;

    line-height: 1.22;

    margin-bottom: 14px;

  }

  .hero-clean-lead {

    font-size: 0.92rem;

    line-height: 1.55;

    margin-bottom: 24px;

  }

  .hero-clean-cta {

    width: 100%;

    justify-content: center;

    padding: 13px 22px;

    font-size: 0.92rem;

  }

}



@media (max-width: 399.98px) {

  .hero-clean-strip .container {

    grid-template-columns: 1fr;

    gap: 6px;

  }

}





/* ==========================================================================

   SPEC FEATURE BOXES & LUXURY PATRON REVIEWS

   ========================================================================== */

.spec-feature-box {

  display: flex;

  align-items: center;

  gap: 10px;

  background: #FAF5EC;

  border: 1px solid rgba(176, 138, 62, 0.24);

  border-radius: 6px;

  padding: 9px 13px;

  font-size: 0.84rem;

  font-weight: 500;

  color: #2A1A14;

  margin-bottom: 8px;

  transition: all 0.25s ease;

  line-height: 1.4;

}



.spec-feature-box:hover {

  background: #ffffff;

  border-color: var(--taj-gold);

  box-shadow: 0 4px 12px rgba(104, 13, 50, 0.08);

  transform: translateX(3px);

}



.spec-feature-box i {

  color: var(--taj-maroon);

  font-size: 1.05rem;

  flex-shrink: 0;

}



.patron-review-card {

  background: #ffffff;

  border: 1px solid rgba(176, 138, 62, 0.2);

  border-radius: 12px;

  padding: 28px;

  box-shadow: 0 4px 20px rgba(42, 26, 20, 0.04);

  height: 100%;

  display: flex;

  flex-direction: column;

  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

}



.patron-review-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 12px 32px rgba(104, 13, 50, 0.08);

  border-color: rgba(176, 138, 62, 0.45);

}



.patron-avatar {

  width: 46px !important;

  height: 46px !important;

  min-width: 46px !important;

  min-height: 46px !important;

  max-width: 46px !important;

  max-height: 46px !important;

  flex-shrink: 0 !important;

  border-radius: 50% !important;

  background: var(--taj-maroon) !important;

  color: #FAF5EC !important;

  font-weight: 700;

  font-size: 0.95rem;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  aspect-ratio: 1/1 !important;

  box-shadow: 0 2px 8px rgba(104, 13, 50, 0.2);

}





/* ==========================================================================

   ATELIER CATALOG CONSOLE (Award-Winning Shop Controls & Alignment)

   ========================================================================== */

.atelier-catalog-console {

  background: #ffffff;

  border: 1px solid rgba(176, 138, 62, 0.22);

  border-radius: 16px;

  padding: 24px;

  box-shadow: 0 8px 30px rgba(42, 26, 20, 0.04);

}



.catalog-category-bar {

  width: 100%;

}



.catalog-filter-pill {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: #FAF5EC;

  color: #2A1A14;

  border: 1px solid rgba(176, 138, 62, 0.25);

  padding: 9px 18px;

  border-radius: 999px;

  font-size: 0.88rem;

  font-weight: 600;

  transition: all 0.25s ease;

  cursor: pointer;

}



.catalog-filter-pill:hover {

  background: #ffffff;

  border-color: var(--taj-gold);

  color: var(--taj-maroon);

  box-shadow: 0 4px 14px rgba(104, 13, 50, 0.08);

  transform: translateY(-1px);

}



.catalog-filter-pill.active {

  background: var(--taj-maroon) !important;

  color: #ffffff !important;

  border-color: var(--taj-maroon) !important;

  box-shadow: 0 6px 18px rgba(104, 13, 50, 0.22) !important;

}



.catalog-filter-pill.active .filter-count-badge {

  background: rgba(255, 255, 255, 0.22);

  color: #ffffff;

}



.filter-count-badge {

  background: rgba(176, 138, 62, 0.18);

  color: var(--taj-maroon);

  font-size: 0.72rem;

  padding: 2px 7px;

  border-radius: 999px;

  font-weight: 700;

}



.catalog-console-divider {

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(176, 138, 62, 0.22), transparent);

  margin: 14px 0 8px;

}



.catalog-results-counter {

  font-size: 0.88rem;

  font-weight: 600;

  color: #2A1A14;

}



.catalog-trust-tag {

  background: #FAF5EC;

  border: 1px solid rgba(176, 138, 62, 0.18);

  padding: 4px 10px;

  border-radius: 6px;

  font-size: 0.78rem;

}



.catalog-search-wrap {

  position: relative;

  display: flex;

  align-items: center;

}



.catalog-search-wrap .search-icon {

  position: absolute;

  left: 12px;

  font-size: 0.95rem;

  pointer-events: none;

}



.catalog-search-input {

  width: 100%;

  background: #FAF5EC;

  border: 1px solid rgba(176, 138, 62, 0.25);

  border-radius: 10px;

  padding: 8px 14px 8px 36px;

  font-size: 0.88rem;

  color: #2A1A14;

  transition: all 0.25s ease;

}



.catalog-search-input:focus {

  background: #ffffff;

  border-color: var(--taj-gold);

  box-shadow: 0 0 0 3px rgba(181, 143, 66, 0.18);

  outline: none;

}



.catalog-sort-select {

  background: #FAF5EC;

  border: 1px solid rgba(176, 138, 62, 0.25);

  border-radius: 10px;

  padding: 8px 32px 8px 12px;

  font-size: 0.88rem;

  font-weight: 600;

  color: #2A1A14;

  cursor: pointer;

  transition: all 0.25s ease;

  appearance: none;

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238A6A24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

  background-repeat: no-repeat;

  background-position: right 10px center;

  background-size: 12px 10px;

}



.catalog-sort-select:focus {

  background-color: #ffffff;

  border-color: var(--taj-gold);

  box-shadow: 0 0 0 3px rgba(181, 143, 66, 0.18);

  outline: none;

}



/* ==========================================================================

   AWARD-WINNING ATELIER MEGA DROPDOWN & HEADER

   ========================================================================== */

.nav-chevron {

  font-size: 0.72rem;

  transition: transform 0.25s ease;

}



.taj-nav-dropdown:hover .nav-chevron,

.taj-nav-dropdown.show .nav-chevron {

  transform: rotate(180deg);

}



.atelier-mega-dropdown {

  min-width: 380px !important;

  background: rgba(255, 253, 249, 0.98) !important;

  backdrop-filter: blur(24px) !important;

  -webkit-backdrop-filter: blur(24px) !important;

  border: 1px solid rgba(176, 138, 62, 0.25) !important;

  border-radius: 14px !important;

  box-shadow: 0 20px 48px rgba(42, 26, 20, 0.12), 0 4px 12px rgba(104, 13, 50, 0.05) !important;

  padding: 14px !important;

  margin-top: 10px !important;

  animation: dropdownSlideFade 0.24s cubic-bezier(0.16, 1, 0.3, 1);

}



@keyframes dropdownSlideFade {

  from {

    opacity: 0;

    transform: translateY(8px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.atelier-dropdown-card {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 10px 12px;

  border-radius: 10px;

  text-decoration: none;

  transition: all 0.2s ease;

  margin-bottom: 4px;

}



.atelier-dropdown-card:hover {

  background: #FAF5EC;

  transform: translateX(3px);

}



.atelier-dropdown-icon {

  width: 40px;

  height: 40px;

  min-width: 40px;

  border-radius: 10px;

  background: #FAF5EC;

  border: 1px solid rgba(176, 138, 62, 0.25);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--taj-maroon);

  font-size: 1.15rem;

  transition: all 0.2s ease;

  flex-shrink: 0;

}



.atelier-dropdown-card:hover .atelier-dropdown-icon {

  background: var(--taj-maroon);

  color: #ffffff;

  border-color: var(--taj-maroon);

  box-shadow: 0 4px 12px rgba(104, 13, 50, 0.2);

}



.atelier-dropdown-content {

  flex-grow: 1;

}



.atelier-dropdown-title {

  font-family: var(--font-heading);

  font-size: 0.92rem;

  font-weight: 700;

  color: #2A1A14;

  line-height: 1.3;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.atelier-dropdown-title .arrow-slide {

  opacity: 0;

  transform: translateX(-4px);

  transition: all 0.2s ease;

  color: var(--taj-gold);

  font-size: 1.1rem;

}



.atelier-dropdown-card:hover .atelier-dropdown-title .arrow-slide {

  opacity: 1;

  transform: translateX(0);

}



.atelier-dropdown-desc {

  font-size: 0.77rem;

  color: #6C5E57;

  line-height: 1.35;

  margin-top: 2px;

}