/* ==========================================================================
   1. CORE TOKENS, CSS VARIABLES & BASE RESETS
   ========================================================================== */

/* ============================================================
   MG JWELLERS — VISUAL REFRESH LAYER
   Palette: deep emerald + antique gold-foil shimmer + wine accent
   on warm ivory. Signature element: the animated gold-foil sweep
   on every section title, echoing light catching hallmark gold.
   Section names, ids and markup are untouched — styling only.
   ============================================================ */

:root {
  --mg-ivory: #fbf6ec;
  --mg-ivory-deep: #f3e9d6;
  --mg-emerald: #70afc2;
  --mg-emerald-deep: #70afc2;
  --mg-emerald-soft: #70afc2;
  --mg-wine: #70afc2;
  --mg-wine-soft: #70afc2;
  --mg-gold-1: #a8802a;
  --mg-gold-1-rgb: 168, 128, 42;
  --mg-gold-2: #d4af37;
  --mg-gold-2-rgb: 212, 175, 55;
  --mg-gold-3: #f2dd9a;
  --mg-gold-3-rgb: 242, 221, 154;
  --mg-gold-4: #b8912b;
  --mg-gold-4-rgb: 184, 145, 43;
  --mg-gold-champagne: #d9b566;
  --mg-gold-champagne-rgb: 217, 181, 102;
  --mg-ink: #2b2118;
  --mg-blue-light: #dceefb;
  --mg-blue-soft: #bee3fb;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  background: var(--mg-ivory);
}


/* ---------- Hero carousel: remove Bootstrap col padding gap ---------- */
.col-md-12:has(#header-carousel) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ---------- Tighter rhythm between sections ---------- */
.offer.pt-5,
#home_category_shop.pt-5,
#shop_by_gender.pt-5,
#shop_by_metal.pt-5,
#home_collection_shop.pt-5 {
  padding-top: 2rem !important;
}

#catelog_area.my-5 {
  margin-top: 1.75rem !important;
  margin-bottom: 1.75rem !important;
}

#catelog_area.pt-2 {
  padding-top: 0.4rem !important;
}

.text-center.mb-4 {
  margin-bottom: 1.1rem !important;
}

#catelog_area .text-center.mb-2.pb-2 {
  margin-bottom: 0.5rem !important;
  padding-bottom: 0.4rem !important;
}

#home_category_shop .row.py-5,
#home_collection_shop .row.py-5 {
  padding-top: 0.5rem !important;
  padding-bottom: 1rem !important;
}

#shop_by_metal .row.p-5 {
  padding: 1.25rem 1.5rem !important;
}

#catelog_area .home_about.py-5 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.scheme-container .pb-4 {
  padding-bottom: 1.1rem !important;
}


/* ================================================================
   MOBILE RESPONSIVENESS ENHANCEMENTS (320px - 767.98px)
   Strictly targets existing classes and IDs without modifying names.
   ================================================================ */

/* 1. Viewport & Overflow containment */
html,
body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  position: relative;
}


/* ==========================================================================
   2. GLOBAL UTILITIES, TYPOGRAPHY & ANIMATIONS
   (Signature gold shimmer section titles, keyframes, scroll reveal system)
   ========================================================================== */

/* ---------- Signature: gold-foil shimmer section titles ---------- */
.cstm-section-title {
  position: relative;
  font-family: "Cormorant Garamond", "Poppins", serif;
  font-weight: 700;
  font-style: italic;
  font-size: 2.5rem;
  letter-spacing: 0.5px;
  display: inline-block;
  padding: 0 0.5em;
}

.cstm-section-title span {
  position: relative;
  background: linear-gradient(100deg,
      var(--mg-gold-1) 0%,
      var(--mg-gold-2) 22%,
      var(--mg-gold-3) 45%,
      var(--mg-gold-2) 68%,
      var(--mg-gold-1) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--mg-gold-1);
  animation: mg-shimmer 5.5s ease-in-out infinite;
}

.cstm-section-title::before,
.cstm-section-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 34px;
  height: 10px;
  background: black;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transform: translateY(-50%);
  opacity: 0.85;
}

.cstm-section-title::before {
  left: -46px;
}

.cstm-section-title::after {
  right: -46px;
}

@keyframes mg-shimmer {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}


/* ---------- Scroll reveal (JS toggles .mg-in) ---------- */
.mg-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.9, 0.32, 1),
    transform 0.7s cubic-bezier(0.22, 0.9, 0.32, 1);
}

.mg-reveal.mg-in {
  opacity: 1;
  transform: translateY(0);
}

/* Generic opt-in reveal — same effect as .mg-reveal, for any page
           to use directly without needing a page-specific JS selector */
.mg-reveal-auto {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.9, 0.32, 1),
    transform 0.7s cubic-bezier(0.22, 0.9, 0.32, 1);
}

.mg-reveal-auto.mg-in {
  opacity: 1;
  transform: translateY(0);
}

/* Section titles: soft zoom + fade as they enter view */
.mg-reveal-title {
  opacity: 0;
  transform: scale(0.88);
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.9, 0.32, 1),
    transform 0.8s cubic-bezier(0.22, 0.9, 0.32, 1);
}

.mg-reveal-title.mg-in {
  opacity: 1;
  transform: scale(1);
}

/* Slide in from the left */
.mg-reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition:
    opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mg-reveal-left.mg-in {
  opacity: 1;
  transform: translateX(0);
}

/* Slide in from the right */
.mg-reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition:
    opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mg-reveal-right.mg-in {
  opacity: 1;
  transform: translateX(0);
}


/* ==========================================================================
   3. DESKTOP HEADER, TOPBAR & MEGA-MENU
   (Topbar, action icons, nav menu, categories flyout, customer dropdown)
   ========================================================================== */

/* ---------- Customer Menu Dropdown (Desktop & Mobile Luxury Card) ---------- */
#custo_menu_sub,
#mob_custo_menu_sub {
  list-style: none !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 290px !important;
  background: #ffffff !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  z-index: 999999 !important;
  text-align: left !important;
  overflow: hidden !important;
  display: none;
}

#custo_menu_sub > li:not(.custo-dropdown-header),
#mob_custo_menu_sub > li:not(.custo-dropdown-header) {
  list-style: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#custo_menu_sub > li:not(.custo-dropdown-header) > a,
#mob_custo_menu_sub > li:not(.custo-dropdown-header) > a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 9px 16px !important;
  color: #334155 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.18s ease !important;
  width: 100% !important;
  background: transparent !important;
}

#custo_menu_sub > li > a i,
#mob_custo_menu_sub > li > a i {
  width: 18px !important;
  font-size: 14px !important;
  text-align: center !important;
  color: #b45309 !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

#custo_menu_sub > li:hover > a,
#mob_custo_menu_sub > li:hover > a {
  background: #fdfaf3 !important;
  color: #b45309 !important;
  padding-left: 20px !important;
}

#custo_menu_sub > li:hover > a i,
#mob_custo_menu_sub > li:hover > a i {
  transform: scale(1.15) !important;
  color: #d4af37 !important;
}

#custo_menu_sub hr,
#mob_custo_menu_sub hr {
  display: block !important;
  border: none !important;
  border-top: 1px solid #f1f5f9 !important;
  margin: 4px 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

#custo_menu_sub > li:last-child > a,
#mob_custo_menu_sub > li:last-child > a {
  color: #ef4444 !important;
  font-weight: 600 !important;
}

#custo_menu_sub > li:last-child:hover > a,
#mob_custo_menu_sub > li:last-child:hover > a {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

#custo_menu_sub > li:last-child > a i,
#mob_custo_menu_sub > li:last-child > a i {
  color: #ef4444 !important;
}


/*-----raw ticker and cursoel jump problem----- */

@media (max-width: 767.98px) {

  .mg-rate-ticker,
  #header-carousel {
    overflow-anchor: none;
  }
}

@media (max-width: 767.98px) {
  .mg-rate-ticker {
    position: relative;
    z-index: 1;
  }
}


/* ---------- Rate ticker (below the nav bar) ---------- */


/* ---------- Rate Ticker (rebuilt) ---------- */
.mg-rate-ticker {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  background: var(--mg-gold-2);
  border-bottom: 1px solid rgba(var(--mg-gold-champagne-rgb), 0.4);
  box-sizing: border-box;
}

.mg-ticker-row {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  height: 28px;
  display: flex;
  align-items: center;
}

.mg-ticker-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: "Poppins", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--mg-ink);
  animation: mg-ticker-rtl 25s linear infinite;
  will-change: transform;
}


.mg-ticker-track b,
.mg-ticker-track strong {
  color: #ffffff;
  font-weight: 700;
}

.mg-ticker-track .mg-ticker-sep {
  color: var(--mg-ink);
  margin: 0 14px;
  opacity: 0.6;
}

.mg-rate-ticker:hover .mg-ticker-track {
  animation-play-state: paused;
}

@keyframes mg-ticker-rtl {
  from {
    transform: translateX(0);
  }

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

@media (prefers-reduced-motion: reduce) {
  .mg-ticker-track {
    animation: none !important;
    padding-left: 0;
    white-space: normal;
  }
}

.mg-rate-float-widget {
  position: fixed;
  top: 160px;
  right: 0;
  z-index: 1030;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.mg-rate-updated {
  flex-basis: 100%;
  text-align: center;
  padding-top: 10px;
  border-top: 1px dashed rgba(var(--mg-gold-2-rgb), 0.3);
}

.mg-rate-updated i {
  display: inline-block;
  font-style: normal;
  background: black;
  color: #ffffff !important;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
}

.mg-rate-float-btn {
  background: linear-gradient(150deg, var(--mg-gold-2), var(--mg-gold-1));
  color: white;
  border: none;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  padding: 10px 16px;
  border-radius: 30px 0 0 30px;
  box-shadow: 0 8px 18px rgba(14, 25, 50, 0.25);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.mg-rate-chevron {
  transition: transform 0.3s ease;
}

.mg-rate-float-btn[aria-expanded="true"] .mg-rate-chevron {
  transform: rotate(180deg);
}

.mg-rate-float-widget .mg-rate-panel {
  margin-top: 8px;
  width: 260px;
  background: linear-gradient(160deg, #fff 0%, var(--mg-ivory) 100%);
  border: 1px solid rgba(var(--mg-gold-2-rgb), 0.4);
  border-radius: 14px 0 0 14px;
  box-shadow: 0 16px 30px rgba(14, 25, 50, 0.2);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 18px;
  flex-direction: column;
  display: flex;
  gap: 14px;
  transition:
    max-height 0.35s ease,
    opacity 0.3s ease,
    padding 0.35s ease;
}

.mg-rate-float-widget .mg-rate-panel.mg-rate-open {
  max-height: 340px;
  opacity: 1;
  padding: 18px;
}

@keyframes mg-ticker-rtl {
  from {
    transform: translateX(100vw);
  }

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

@keyframes mg-ticker-ltr {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mg-ticker-track {
    animation: none !important;
    position: static;
    white-space: normal;
  }
}

#help-widget .help-icon {
  background: var(--mg-gold-2);
  animation: mg-pulse 2.4s ease-in-out infinite;
}

@keyframes mg-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(var(--mg-gold-2-rgb), 0.45);
  }

  50% {
    box-shadow: 0 0 0 10px rgba(var(--mg-gold-2-rgb), 0);
  }
}

.back-to-top {
  background: linear-gradient(120deg,
      var(--mg-gold-2),
      var(--mg-gold-1)) !important;
  border: none !important;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  z-index: 999 !important;
  pointer-events: auto !important;
}

.back-to-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25);
}

@media (min-width: 768px) {
  .back-to-top {
    position: fixed !important;
    right: 30px !important;
    bottom: 30px !important;
    z-index: 1050 !important;
  }

  #help-widget {
    z-index: 1040 !important;
  }
}


/* ================================================================
           HEADER / TOP NAVBAR / CATEGORIES — visual layer only
           ================================================================ */

/* ---------- Topbar (logo / search / wishlist-cart) ---------- */


#head_search_bar {
  background: var(--mg-ivory);
  transition:
    box-shadow 0.3s ease,
    background 0.3s ease;
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
}

@media (min-width: 768px) {
  #head_search_bar.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1031;
    background: rgba(251, 246, 236, 0.96) !important;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 18px rgba(14, 25, 50, 0.12);
  }
}

@media (max-width: 767.98px) {
  #head_search_bar {
    margin-bottom: 0 !important;
    border-bottom: none !important;
  }

  .mg-rate-ticker {
    border-top: none !important;
    max-height: 60px;
    overflow: hidden;
    opacity: 1;
    position: relative;
    z-index: 1;
  }

}

.logo_image {
  max-height: 60px;
  width: auto;
  border-radius: 10px;
  transition: transform 0.35s ease;
}

.logo_image:hover {
  transform: scale(1.04);
}

.mg-search-wrap {
  position: relative;
}

#top-search-field {
  position: relative;
  z-index: 495;
}

.mg-search-suggestions {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(var(--mg-gold-2-rgb), 0.3);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(14, 25, 50, 0.18);
  padding: 20px 24px;
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s;
}

.mg-search-suggestions.mg-search-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 991.98px) {
  #mob_search_bar {
    position: relative;
  }

  .mg-search-suggestions-mobile {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 500;
    max-height: 260px;
    overflow-y: auto;
    padding: 14px 16px;
  }

  .mg-search-suggestions-mobile .mg-suggest-chips a {
    font-size: 0.78rem;
    padding: 5px 12px;
  }
}

.mg-suggest-none {
  display: block;
  color: var(--mg-ink);
  opacity: 0.6;
  font-size: 0.85rem;
  padding: 4px 0;
}

.mg-suggest-section+.mg-suggest-section {
  margin-top: 1px;
  padding-top: 1px;
  border-top: 1px dashed rgba(var(--mg-gold-2-rgb), 0.25);
}

.mg-suggest-section h6 {
  font-family: "Poppins", sans-serif;
  font-size: 0.95rem;
  color: #577e89;
  margin-bottom: 10px;
  font-weight: 400;
}

.mg-suggest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mg-suggest-chips a {
  padding: 6px 14px;
  border-radius: 20px;
  color: var(--mg-gold-4);
  font-size: 0.82rem;
  text-decoration: none;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}

.mg-suggest-chips a:hover {
  background: linear-gradient(120deg, var(--mg-gold-2), var(--mg-gold-3));
  color: #577e89;
}

.mg-suggest-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mg-suggest-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mg-ink);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.25s ease;
}

.mg-suggest-links a:hover {
  color: var(--mg-wine-soft);
}

.mg-suggest-links a i {
  color: var(--mg-gold-1);
  width: 18px;
}

.mg-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 25, 50, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 490;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s;
}

@media (max-width: 991.98px) {
  #mob_search_overlay {
    top: 100px;
    right: 0;
    bottom: 0;
    left: 0;
    filter: blur(2px);
  }
}

.mg-search-overlay.mg-search-open {
  opacity: 1;
  visibility: visible;
}

#top-search-field .mg-search-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 8px;
}

.mg-search-icon-btn {
  background: none;
  border: none;
  color: #70afc2;
  font-size: 0.95rem;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}

.mg-search-icon-btn:hover {
  background: rgba(179, 121, 138, 0.12);
  color: var(--mg-gold-2);
}

#top-search-field {
  border-radius: 30px !important;
  overflow: hidden;
  border: 1.5px solid rgba(14, 25, 50, 0.18) !important;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  background: #fff;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
}

#top-search-field .form-control {
  padding: 14px;
  font-size: 1rem;
}

#top-search-field:focus-within {
  border-color: var(--mg-gold-2) !important;
  box-shadow: 0 0 0 4px rgba(var(--mg-gold-champagne-rgb), 0.22);
}

#top-search-field input {
  background: transparent !important;
  border: none !important;
}

#top-search-field #btn-top-search {
  background: transparent;
  width: 50px;
  color: var(--mg-gold-2) !important;
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

#top-search-field #btn-top-search:hover {
  color: var(--mg-gold-2) !important;
  transform: scale(1.1);
}

#top-search-field .input-group-append,
#top-search-field .input-group-text,
#top-search-field #btn-top-search {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#btn-top-search {
  color: #577e89;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}

#btn-top-search:hover {
  background: rgba(var(--mg-gold-champagne-rgb), 0.15) !important;
  color: var(--mg-wine-soft);
}

#head_shop_list li:nth-child(2) {
  border-left: none !important;
}

#head_shop_list li:nth-child(1) {
  border-right: none !important;
}

#head_shop_list .card-wish {
  position: relative;
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mg-gold-2);
  margin-left: 0px;
  transition:
    transform 0.3s cubic-bezier(0.22, 0.9, 0.32, 1),
    background 0.3s ease,
    box-shadow 0.3s ease;
}

#head_shop_list {
  border-radius: 26px !important;
}

#head_shop_list .card-wish:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(179, 121, 216, 0.25);
}

#head_shop_list .card-wish i {
  color: white !important;
}

#head_shop_list .card-wish:hover i {
  color: var(--mg-gold-3) !important;
}

#head_shop_list .card-wish .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: linear-gradient(135deg, black);
  color: #fff;
  border-radius: 50%;
  font-size: 0.65rem;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--mg-ivory);
}

@media (max-width: 480px) {
  #head_shop_list .card-wish {
    width: 34px;
    height: 34px;
    margin-left: 4px;
  }

  #head_shop_list .card-wish i {
    font-size: 0.85rem;
  }

  #head_shop_list .card-wish .badge {
    min-width: 15px;
    height: 15px;
    font-size: 0.55rem;
  }
}

#head_shop_list {
  gap: 12px !important;
  border-radius: 20px !important;
  border: hidden;
}

#head_shop_list > li:not(.nav-item-custo),
#head_shop_list > li:not(.nav-item-custo) > a {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
}

#head_shop_list li a i {
  font-size: 0.8rem !important;
}

#head_shop_list .badge {
  min-width: 14px !important;
  height: 14px !important;
  font-size: 0.5rem !important;
  top: -3px !important;
  right: -3px !important;
}


/* ---------- Top menu bar strip ---------- */
.top_header,
.top_menue_bar,
.top_menue_bar .nav-link,
.btn-menu,
.btn-menu h6 {
  line-height: 0 !important;
}

.top_header {
  background: linear-gradient(180deg,
      var(--mg-ivory) 0%,
      var(--mg-ivory-deep) 100%);
  border-top-color: rgba(var(--mg-gold-champagne-rgb), 0.4) !important;
  border-bottom: none !important;
  transition: box-shadow 0.3s ease;
}

@media (min-width: 768px) {
  .top_header.fixed {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1030;
    box-shadow: 0 6px 16px #93cee5;
  }
}

.top_menue_bar {
  background: transparent !important;
}

/* "Categories" trigger button */
.btn-menu {
  background: #70afc2 !important;
  height: 100%;
  min-height: 48px;
}

a.btn-menu {
  border-radius: 18px !important;
}

.btn-menu:hover {
  box-shadow: 0 10px 20px #70afc2;
}

.btn-menu h6 {
  color: #fff !important;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.btn-menu i {
  color: #fff !important;
  transition: transform 0.3s ease;
}

.btn-menu[aria-expanded="true"] i,
.btn-menu.collapsed~* i {
  transform: rotate(180deg);
}

.top_header .row {
  align-items: stretch;
}

.top_header .col-lg-3 {
  display: flex;
  width: 100%;
  position: relative;
}

.top_header .col-lg-3 .btn-menu {
  width: 100% !important;
}

.top_header .col-lg-9 {
  display: flex;
  align-items: stretch;
}

.top_menue_bar {
  min-height: 48px;
  display: flex;
  align-items: center;
  width: 100%;
}

.top_menue_bar>.navbar-nav>.nav-link,
.top_menue_bar .navbar-nav>.nav-item>.nav-link {
  position: relative;
  color: var(--mg-ink) !important;
  font-weight: 500;
  padding: 0.7rem 0.9rem !important;
  transition: color 0.25s ease;
}

.top_menue_bar .nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mg-gold-1), var(--mg-gold-3));
  transition:
    width 0.3s ease,
    left 0.3s ease;
}

.top_menue_bar .nav-link:hover {
  color: var(--mg-gold-2) !important;
  text-shadow: 0 2px 8px rgba(var(--mg-gold-2-rgb), 0.55);
}


/* ---------- Desktop "Categories" flyout panel ---------- */

.category_dropdown .navbar-nav>a.nav-link {
  line-height: 1.35 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}


/* ==========================================================================
   3. LUXURY JEWELLERY DESKTOP MEGA MENU
   ========================================================================== */

#top_menu_bar_container {
  position: relative !important;
}

.mg-mega-trigger-col {
  position: static !important;
}

.mg-mega-chevron {
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.mg-mega-trigger-col.is-open .mg-mega-chevron {
  transform: rotate(180deg);
}

/* Dim backdrop for luxury focus */
.mg-mega-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(14, 25, 45, 0.38);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  pointer-events: none;
}

.mg-mega-backdrop.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Luxury Mega Menu Panel */
.mg-luxury-megamenu {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(1280px, calc(100% - 40px)) !important;
  max-width: 1280px !important;
  height: auto !important;
  max-height: none !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  box-shadow: 0 24px 60px -15px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 1045 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px) !important;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease !important;
  overflow: hidden !important;
  display: block !important;
}

.mg-luxury-megamenu.mg-mega-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

.mg-mega-container {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  height: 520px !important;
  background: #ffffff;
}

/* --- Left Sidebar: Curated Collections --- */
.mg-mega-sidebar {
  width: 290px;
  min-width: 290px;
  background: linear-gradient(180deg, #0e1927 0%, #070e17 100%);
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(212, 175, 55, 0.18);
  position: relative;
}

.mg-mega-sidebar-header {
  padding: 22px 22px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mg-mega-sidebar-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  letter-spacing: 2px;
  font-weight: 700;
  color: #e5b95c;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.mg-mega-sidebar-title {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  font-family: 'Playfair Display', serif, sans-serif;
  letter-spacing: 0.3px;
}

.mg-mega-sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 14px;
}

.mg-mega-coll-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  margin-bottom: 6px !important;
  border-radius: 10px !important;
  color: #cbd5e1 !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease !important;
  min-width: 0 !important;
  position: relative !important;
}

.mg-mega-coll-item::before {
  display: none !important;
  content: none !important;
}

.mg-mega-coll-item:hover {
  background: rgba(212, 175, 55, 0.14) !important;
  color: #fce7b0 !important;
  border-color: rgba(212, 175, 55, 0.35) !important;
  transform: translateX(4px) !important;
}

.mg-coll-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.15);
  color: #e5b95c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.mg-mega-coll-item:hover .mg-coll-icon {
  transform: scale(1.1);
  background: linear-gradient(135deg, #e5b95c, #b8860b);
  color: #0e1927;
}

.mg-coll-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: inline-block !important;
  color: #cbd5e1 !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.mg-mega-coll-item:hover .mg-coll-text {
  color: #fce7b0 !important;
}

.mg-coll-chevron {
  font-size: 0.75rem;
  opacity: 0.4;
  color: #cbd5e1;
  transition: transform 0.2s, opacity 0.2s;
  flex-shrink: 0;
  margin-left: auto;
}

.mg-mega-coll-item:hover .mg-coll-chevron {
  opacity: 1;
  transform: translateX(3px);
  color: #e5b95c;
}

.mg-mega-coll-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 0.82rem;
  color: #94a3b8;
}

.mg-mega-sidebar-footer {
  padding: 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.2);
}

.mg-mega-explore-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.12);
  color: #f3d085;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid rgba(212, 175, 55, 0.25);
}

.mg-mega-explore-all:hover {
  background: linear-gradient(135deg, #e5b95c, #c99326);
  color: #0e1927;
  text-decoration: none;
  border-color: transparent;
}

/* --- Main Content: Jewellery Vault Categories --- */
.mg-mega-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #ffffff;
}

/* Topbar with instant filter */
.mg-mega-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px 14px;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
  gap: 20px;
}

.mg-mega-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: #b8860b;
  text-transform: uppercase;
}

.mg-mega-gem-icon {
  font-size: 0.75rem;
}

.mg-mega-title {
  color: #0f172a;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Playfair Display', serif, sans-serif;
}

.mg-mega-count-pill {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
}

/* Filter Input */
.mg-mega-filter-box {
  position: relative;
  width: 310px;
}

.mg-mega-filter-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.82rem;
  pointer-events: none;
}

.mg-mega-filter-input {
  width: 100%;
  height: 38px;
  padding: 6px 36px 6px 36px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 0.84rem;
  color: #0f172a;
  outline: none;
  transition: all 0.2s ease;
}

.mg-mega-filter-input:focus {
  border-color: #d4af37;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.mg-mega-filter-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.15rem;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px 6px;
  transition: color 0.2s;
}

.mg-mega-filter-clear:hover {
  color: #ef4444;
}

/* Grid Scroll Container - Strictly Vertical Scroll ONLY */
.mg-mega-grid-wrap {
  flex: 1;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 16px 26px;
  position: relative;
}

.mg-mega-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px 14px !important;
  align-content: start;
}

.mg-mega-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  color: #1e293b !important;
  text-decoration: none !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: all 0.18s ease !important;
  min-height: 38px;
  min-width: 0 !important;
  position: relative !important;
}

.mg-mega-item::before {
  display: none !important;
  content: none !important;
}

.mg-mega-item:hover {
  background: #fbf9f2 !important;
  color: #b8860b !important;
  border-color: rgba(212, 175, 55, 0.3) !important;
  transform: translateX(3px) !important;
}

.mg-item-bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d4af37;
  opacity: 0.35;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.mg-mega-item:hover .mg-item-bullet {
  opacity: 1;
  transform: scale(1.4);
  background: #b8860b;
  box-shadow: 0 0 6px rgba(184, 134, 11, 0.4);
}

.mg-item-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: inline-block !important;
  color: #1e293b !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.mg-mega-item:hover .mg-item-name {
  color: #b8860b !important;
  font-weight: 600 !important;
}

.mg-item-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 19px !important;
  min-height: 19px !important;
  max-height: 19px !important;
  padding: 0 6px !important;
  border-radius: 4px !important;
  background: rgba(212, 175, 55, 0.16) !important;
  color: #996515 !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.4px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.18s ease !important;
}

.mg-mega-item:hover .mg-item-badge {
  background: rgba(212, 175, 55, 0.28) !important;
  color: #78350f !important;
  border-color: rgba(212, 175, 55, 0.55) !important;
}

/* Empty State */
.mg-mega-empty-state {
  padding: 40px 20px;
  text-align: center;
}

.mg-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 12px;
}

.mg-mega-empty-state h6 {
  color: #334155;
  font-weight: 600;
  margin-bottom: 4px;
}

.mg-mega-empty-state p {
  color: #94a3b8;
  font-size: 0.82rem;
  margin-bottom: 14px;
}

.mg-empty-btn {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 20px;
  padding: 6px 16px;
  transition: all 0.2s;
}

.mg-empty-btn:hover {
  background: #d4af37;
  color: #0e1927;
  border-color: #d4af37;
}

/* Main Bottom Highlights Bar */
.mg-mega-main-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 28px !important;
  border-top: 1px solid #f1f5f9 !important;
  background: #fafaf9 !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
}

.mg-mega-bottom-highlights {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.mg-bottom-label {
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  margin-right: 4px !important;
}

.mg-bottom-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 13px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  gap: 6px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.mg-bottom-pill i {
  font-size: 0.75rem !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.mg-pill-bullet {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d4af37;
  opacity: 0.65;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.mg-bottom-pill:hover {
  background: #fdfaf3 !important;
  border-color: #d4af37 !important;
  color: #b8860b !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(212, 175, 55, 0.18) !important;
}

.mg-bottom-pill:hover .mg-pill-bullet {
  opacity: 1;
  background: #b8860b;
  transform: scale(1.2);
}

.mg-esc-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 0.76rem !important;
  color: #64748b !important;
  cursor: pointer !important;
  padding: 3px 6px !important;
  border-radius: 6px !important;
  line-height: 1 !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
}

.mg-esc-badge:hover {
  color: #0f172a !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

.mg-esc-badge kbd,
kbd.mg-kbd {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 0 8px !important;
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  border-bottom: 2px solid #94a3b8 !important;
  border-radius: 5px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  line-height: 1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  letter-spacing: 0.5px !important;
  box-sizing: border-box !important;
}

.mg-esc-badge:hover kbd,
.mg-esc-badge:hover kbd.mg-kbd {
  border-color: #d4af37 !important;
  border-bottom-color: #b8860b !important;
  color: #b8860b !important;
}

/* Custom Scrollbar for Mega Menu */
.mg-luxury-megamenu .custom-scroll::-webkit-scrollbar {
  width: 6px;
}
.mg-luxury-megamenu .custom-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.mg-luxury-megamenu .custom-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}
.mg-luxury-megamenu .custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
.mg-mega-sidebar .custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}
.mg-mega-sidebar .custom-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 55, 0.4);
}


/* ==========================================================================
   4. DESKTOP HERO & HOMEPAGE SECTIONS
   (Hero Carousel, Schemes, Categories, Materials, Video Reels, Look-Book)
   ========================================================================== */

/* ---------- Hero carousel ---------- */
#header-carousel {
  position: relative;
}

#header-carousel,
#header-carousel .carousel-inner,
#header-carousel .carousel-item {
  height: 620px;
}

#header-carousel .carousel-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
  animation: mg-kenburns 12s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes mg-kenburns {
  from {
    transform: scale(1) translate(0, 0);
  }

  to {
    transform: scale(1.12) translate(-2%, -1%);
  }
}

#header-carousel .carousel-item img {
  height: 650px;
  object-fit: cover;
  width: 100%;
}

#header-carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(30, 20, 5, 0.05) 0%,
      rgba(30, 20, 5, 0.55) 100%),
    radial-gradient(circle at 75% 40%,
      rgba(var(--mg-gold-2-rgb), 0.18),
      transparent 60%);
  pointer-events: none;
}

#header-carousel {
  position: relative;
  z-index: 0;
}

#header-carousel .carousel-caption h4 {
  letter-spacing: 4px;
  opacity: 0;
  animation:
    mg-fade-up 1.3s cubic-bezier(0.19, 1, 0.22, 1) 0.5s forwards,
    mg-shimmer 6s ease-in-out 1.8s infinite;
}

#header-carousel .carousel-caption h3 {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  background: linear-gradient(100deg,
      var(--mg-gold-3),
      var(--mg-gold-2) 40%,
      #fff 55%,
      var(--mg-gold-2) 70%,
      var(--mg-gold-3));
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    mg-fade-up 1.3s cubic-bezier(0.19, 1, 0.22, 1) 0.5s forwards,
    mg-shimmer 6s ease-in-out 1.8s infinite;
  opacity: 0;
}

#header-carousel .carousel-caption .btn-light {
  opacity: 0;
  animation: mg-fade-up 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0.95s forwards;
  background: linear-gradient(120deg, var(--mg-gold-3), var(--mg-gold-2));
  border: none;
  color: var(--mg-ink);
  font-weight: 600;
  letter-spacing: 0.5px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

#header-carousel .carousel-caption .btn-light:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

@keyframes mg-fade-up {
  from {
    opacity: 0;
    transform: translateY(36px) scale(0.97);
    filter: blur(4px);
  }

  60% {
    filter: blur(0);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.carousel-control-prev .btn-dark,
.carousel-control-next .btn-dark {
  background: #70afc2 !important;
  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

.carousel-control-prev:hover .btn-dark,
.carousel-control-next:hover .btn-dark {
  background: var(--mg-wine-soft) !important;
  transform: scale(1.08);
}


/* ---------- Scheme cards ---------- */
.scheme-container .scheme-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(150deg, #fff 0%, rgba(var(--mg-gold-3-rgb), 0.45) 100%);
  box-shadow: var(--mg-shadow);
  transition:
    transform 0.4s cubic-bezier(0.22, 0.9, 0.32, 1),
    box-shadow 0.4s ease;
  border: 1px solid rgba(var(--mg-gold-champagne-rgb), 0.35);
}

.scheme-container .scheme-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg,
      transparent,
      rgba(255, 255, 255, 0.18),
      transparent);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
}

.scheme-container .scheme-card:hover::before {
  left: 130%;
}

.scheme-container .scheme-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 36px rgba(252, 252, 252, 0);
}

.scheme-card .scheme-content {
  padding: 28px 24px 18px;
}

.scheme-card .scheme-content h4 {
  color: var(--mg-gold-1);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  font-weight: 600;
}

.scheme-card .scheme-content h2 {
  font-family: "Cormorant Garamond", serif;
  color: black;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

.scheme-detail-block {
  padding: 0 24px 22px;
}

.scheme-container .scheme-btn-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 0 24px 22px;
}

.scheme-detail-block .explore,
.scheme-container .scheme-btn-group .explore {
  display: inline-block;
  padding: 8px 22px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.scheme-detail-block .explore:hover,
.scheme-container .scheme-btn-group .explore:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 18px rgba(var(--mg-gold-2-rgb), 0.45);
  color: var(white);
}


/* ---------- Product / category cards (Shop By Category, Our Collection) ---------- */
#home_category_shop .product-item,
#home_collection_shop .product-item {
  border-radius: 12px;
  overflow: hidden;
  border-color: rgba(190, 227, 251, 0.5) !important;
  transition:
    transform 0.4s cubic-bezier(0.22, 0.9, 0.32, 1),
    box-shadow 0.4s ease;
  background: linear-gradient(160deg, var(--mg-gold-champagne) 0%, #f5f1eb 100%);
}

#home_collection_shop .product-item {
  animation: mg-collection-float 4.5s ease-in-out infinite;
}

#home_collection_shop .row.content>div:nth-child(2) .product-item {
  animation-delay: 0.5s;
}

#home_collection_shop .row.content>div:nth-child(3) .product-item {
  animation-delay: 1.5s;
}

#home_collection_shop .row.content>div:nth-child(4) .product-item {
  animation-delay: 2s;
}

@keyframes mg-collection-float {

  0%,
  100% {
    transform: translateY(0);
  }

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

#shop_by_metal .row.p-5.content {
  position: relative;
  padding-top: 2.5rem !important;
}

#shop_by_metal .row.p-5.content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      rgba(var(--mg-gold-2-rgb), 0.4),
      transparent);
}

#home_collection_shop .product-item:hover {
  animation-play-state: paused;
}

#home_category_shop .product-item:hover,
#home_collection_shop .product-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 34px rgba(var(--mg-gold-2-rgb), 0.25);
}

#home_category_shop .product-img,
#home_collection_shop .product-img {
  overflow: hidden;
  height: 220px;
}

#home_category_shop .product-img img,
#home_collection_shop .product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#home_category_shop .product-img img,
#home_collection_shop .product-img img {
  transition: transform 0.6s cubic-bezier(0.22, 0.9, 0.32, 1);
}

#home_category_shop .product-item:hover .product-img img,
#home_collection_shop .product-item:hover .product-img img {
  transform: scale(1.08) rotate(0.3deg);
}

#home_category_shop .card-body h4,
#home_collection_shop .card-body h6 {
  transition: color 0.3s ease;
}

#home_category_shop .card-body,
#home_collection_shop .card-body {
  padding: 12px 8px !important;
  min-height: 0 !important;
}

#home_category_shop .card-body h4,
#home_collection_shop .card-body h6 {
  margin: 0 !important;
  line-height: 1.3;
}

#home_category_shop .product-item:hover h4,
#home_collection_shop .product-item:hover h6 {
  color: var(--mg-wine-soft);
}

.btn-default-alt {
  position: relative;
  overflow: hidden;
  color: var(--mg-gold-2) !important;
  font-weight: 600;
  transition: color 0.35s ease;
  z-index: 1;
}

.btn-default-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--mg-emerald), var(--mg-wine-soft));
  transform: translateY(101%);
  transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.32, 1);
  z-index: -1;
}

.btn-default-alt:hover {
  color: var(--mg-gold-3) !important;
}

.btn-default-alt:hover::before {
  transform: translateY(0);
}

/* ---------- Colored hover animation: Shop By Category ---------- */
#home_category_shop .product-item {
  position: relative;
  z-index: 1;
}

#home_category_shop .product-item::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  background: linear-gradient(120deg,
      var(--mg-gold-2),
      var(--mg-blue-light),
      var(--mg-gold-2));
  background-size: 300% 100%;
  filter: blur(14px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s ease;
}

#home_category_shop .product-item:hover::before {
  opacity: 0.55;
  animation: mg-shimmer 3.5s ease-in-out infinite;
}

#home_category_shop .product-img {
  position: relative;
}

#home_category_shop .product-item:hover .product-img::after {
  opacity: 1;
  animation: mg-color-sweep 1s ease forwards;
}

@keyframes mg-color-sweep {
  from {
    background-position: -60% -60%;
  }

  to {
    background-position: 160% 160%;
  }
}

/* ---------- Colored hover animation: Our Collection ---------- */
#home_collection_shop .product-item {
  position: relative;
  z-index: 1;
}

#home_collection_shop .product-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 2px;
  background: conic-gradient(from 0deg,
      var(--mg-gold-2),
      var(--mg-blue-light),
      var(--mg-gold-2));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

@keyframes mg-spin {
  to {
    transform: rotate(360deg);
  }
}


/* ---------- Shop by Material ---------- */

@media (min-width: 992px) {
  #shop_by_metal .row.content>.col-lg-3:not(:last-child) {
    border-right: 5px solid rgba(var(--mg-gold-2-rgb), 0.35);
  }
}

#shop_by_metal .matterial_block {
  transition:
    transform 0.7s cubic-bezier(0.22, 0.9, 0.32, 1),
    opacity 0.7s ease,
    filter 0.7s ease;
}

#shop_by_metal .matterial_block.mg-mat-active {
  transform: scale(1.05);
  opacity: 1;
  filter: none;
  
}

#shop_by_metal .matterial_block.mg-mat-adjacent {
  opacity: 0.5;
  filter: blur(0.3px);
  z-index: 1;
}

#shop_by_metal .matterial_block.mg-mat-far {
  opacity: 0.5;
  filter: blur(0.3px);
}

#shop_by_metal .matterial_block {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: none !important;
  background: transparent !important;
  padding: 10px 14px;
  box-shadow: none !important;
}

#shop_by_metal .matterial_block:hover {
  opacity: 0.9;
}

#shop_by_metal .cat-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 35% 30%,
      var(--mg-gold-3),
      var(--mg-gold-2) 45%,
      var(--mg-gold-1) 100%);
  transition: transform 0.5s cubic-bezier(0.22, 0.9, 0.32, 1);
  margin: 0 auto 14px !important;
}

#shop_by_metal .cat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

#shop_by_metal .matterial_block:hover .cat-img {
  transform: rotate(5deg) scale(1.06);
}

@media (max-width: 575.98px) {
  
	
  #shop_by_metal .cat-img {
    width: 68px;
    height: 68px;
    margin-bottom: 10px !important;
  }

  #shop_by_metal h5 {
    font-size: 1.05rem;
  }

  #shop_by_metal .row.content>.col-lg-3:nth-child(1) .matterial_block::after,
  #shop_by_metal .row.content>.col-lg-3:nth-child(2) .matterial_block::after,
  #shop_by_metal .row.content>.col-lg-3:nth-child(3) .matterial_block::after,
  #shop_by_metal .row.content>.col-lg-3:nth-child(4) .matterial_block::after {
    font-size: 0.72rem;
    display: block;
    margin-top: 4px;
    max-width: 220px;
    font-family: "Poppins", sans-serif;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--mg-ink);
    opacity: 0.75;
    text-align: center;
    min-width: 0;
    overflow-wrap: break-word;
  }
}

#shop_by_metal .row.content>.col-lg-3:nth-child(1) .matterial_block::after {
  content: "Certified hallmark gold, crafted for everyday elegance.";
}

#shop_by_metal .row.content>.col-lg-3:nth-child(2) .matterial_block::after {
  content: "Sterling silver pieces with a bright, lasting polish.";
}

#shop_by_metal .row.content>.col-lg-3:nth-child(3) .matterial_block::after {
  content: "Stylish imitation jewellery for everyday glamour.";
}

#shop_by_metal .row.content>.col-lg-3:nth-child(4) .matterial_block::after {
  content: "Natural gemstones, chosen for clarity and colour.";
}


/* ---------- Shop By Gender Section ---------- */
#shop_by_gender {
  padding-top: 2rem !important;
}

.mg-gender-subtitle {
  color: var(--mg-ink);
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  margin-top: -0.25rem;
}

.mg-gender-divider {
  max-width: 320px;
  margin: 0 auto 1.5rem auto;
  gap: 12px;
}

.mg-gender-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mg-gold-2), transparent);
}

.mg-gender-flourish {
  display: inline-flex;
  align-items: center;
  color: var(--mg-gold-2);
}

.mg-gender-card {
  background: #ffffff;
  border: 1px solid rgba(var(--mg-gold-2-rgb), 0.3);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.32, 1), box-shadow 0.35s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mg-gender-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 26px rgba(var(--mg-gold-2-rgb), 0.22);
  border-color: rgba(var(--mg-gold-2-rgb), 0.55);
}

.mg-gender-img-wrap {
  width: 100%;
  aspect-ratio: 7 / 5;
  overflow: hidden;
  background: var(--mg-ivory);
  position: relative;
}

.mg-gender-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 0.9, 0.32, 1);
}

.mg-gender-card:hover .mg-gender-img-wrap img {
  transform: scale(1.05);
}

.mg-gender-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #ffffff;
  border-top: 1px solid rgba(var(--mg-gold-2-rgb), 0.22);
}

.mg-gender-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--mg-gold-1);
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.mg-gender-explore {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mg-ink);
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.2px;
}

.mg-gender-explore i {
  font-size: 0.75rem;
  color: var(--mg-ink);
  transition: transform 0.2s ease;
}

.mg-gender-card:hover .mg-gender-explore i {
  transform: translateX(3px);
}


/* videos css */

#home_videos_shop .mg-video-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 9 / 11;
  max-: 420px;
  margin: 0 auto;
  background: #577e89;
  box-shadow: 0 12px 28px rgba(14, 25, 50, 0.2);
  transition:
    transform 0.4s cubic-bezier(0.22, 0.9, 0.32, 1),
    box-shadow 0.4s ease;
}

#home_videos_shop .mg-video-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 40px rgba(var(--mg-gold-2-rgb), 0.28);
}

#home_videos_shop .mg-video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#home_videos_shop .mg-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;
  background: linear-gradient(180deg,
      transparent 50%,
      rgba(10, 18, 35, 0.75) 100%);
  pointer-events: none;
}

#home_videos_shop .mg-video-overlay span {
  color: #fff;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 14px;
}

#home_videos_shop .mg-video-play {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--mg-gold-4);
  color: #577e89;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
}

#home_videos_shop .mg-video-play:hover {
  transform: scale(1.1);
}

#home_videos_shop .mg-video-card.mg-video-playing .mg-video-play i:before {
  content: "\f04c";
}

@media (max-width: 767.98px) {
  #home_videos_shop {
    padding-top: 2rem !important;
  }

  #home_videos_shop .mg-video-card {
    aspect-ratio: 9 / 13;
  }

  #home_videos_shop .mg-video-overlay span {
    font-size: 1rem;
  }

  #home_videos_shop .mg-video-play {
    width: 44px;
    height: 44px;
    font-size: 0.95rem;
  }
}

.mg-video-slider-wrap {
  position: relative;
}

.mg-video-arrow {
  display: none;
}

@media (max-width: 767.98px) {
  .mg-video-slider-wrap {
    overflow: hidden;
    padding: 0 8px;
  }

  #mg_video_track {
    display: flex !important;
    flex-wrap: nowrap !important;
    transition: transform 0.5s cubic-bezier(0.22, 0.9, 0.32, 1);
    will-change: transform;
  }

  #mg_video_track>div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .mg-video-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(120deg,
        var(--mg-emerald),
        var(--mg-emerald-soft));
    color: var(--mg-gold-3) !important;
    font-size: 1rem;
    z-index: 5;
    box-shadow: 0 8px 16px rgba(14, 25, 50, 0.25);
    text-decoration: none !important;
  }

  .mg-video-arrow-left {
    left: 4px;
  }

  .mg-video-arrow-right {
    right: 4px;
  }

  .mg-video-arrow:hover {
    background: linear-gradient(120deg, var(--mg-wine-soft), var(--mg-wine));
    color: #fff !important;
  }
}

@media (min-width: 768px) {
  #home_videos_shop .row.content {
    position: relative;
    align-items: center;
  }

  #home_videos_shop .col-lg-4:nth-child(1),
  #home_videos_shop .col-lg-4:nth-child(3) {
    transform: scale(0.88);
    opacity: 0.85;
    filter: blur(1.5px);
    z-index: 1;
    transition:
      transform 0.4s ease,
      opacity 0.4s ease,
      filter 0.4s ease;
  }

  #home_videos_shop .col-lg-4:nth-child(2) {
    z-index: 2;
    position: relative;
  }

  #home_videos_shop .col-lg-4:nth-child(1) {
    margin-right: -40px;
  }

  #home_videos_shop .col-lg-4:nth-child(3) {
    margin-left: -40px;
  }

  #home_videos_shop .col-lg-4:nth-child(1):hover,
  #home_videos_shop .col-lg-4:nth-child(3):hover {
    transform: scale(0.92);
    opacity: 1;
    filter: blur(0px);
  }
}


/* ---------- Catalogue: framed look-book panel ---------- */
#catelog_area {
  background: linear-gradient(180deg,
      transparent,
      rgba(14, 25, 50, 0.05) 40%,
      transparent);
}

#catelog_area .catalog.slideshow-container {
  position: relative;
  background: linear-gradient(160deg, var(--mg-gold-champagne) 0%, #e5dac4 100%);
  border: 1px solid rgba(var(--mg-gold-champagne-rgb), 0.35);
  border-radius: 18px;
  padding: 26px 58px;
  box-shadow: var(--mg-shadow);
}

#catelog_area .catalog.slideshow-container::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(var(--mg-gold-champagne-rgb), 0.45);
  border-radius: 12px;
  pointer-events: none;
}

#catelog_area .catalog.slides {
  padding: 4px 46px !important;
  gap: 22px;
  transition: transform 0.6s cubic-bezier(0.22, 0.9, 0.32, 1);
  will-change: transform;
}

#catelog_area .catalog.slide {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 7px;
  box-shadow: 0 6px 14px rgba(14, 25, 50, 0.1);
  transition:
    transform 0.4s cubic-bezier(0.22, 0.9, 0.32, 1),
    box-shadow 0.4s ease;
  animation: mg-catalogue-float 4.5s ease-in-out infinite;
}

#catelog_area .catalog.slide:nth-child(2) {
  animation-delay: 0.6s;
}

#catelog_area .catalog.slide:nth-child(3) {
  animation-delay: 1.2s;
}

#catelog_area .catalog.slide:nth-child(4) {
  animation-delay: 1.8s;
}

@keyframes mg-catalogue-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

#catelog_area .catalog.slide:hover {
  animation-play-state: paused;
  transform: translateY(-6px);
  box-shadow: 0 20px 34px rgba(14, 25, 50, 0.22);
}

#catelog_area .catalog.slide img {
  border-radius: 9px;
  border-color: rgba(var(--mg-gold-champagne-rgb), 0.5) !important;
  transition:
    transform 0.5s cubic-bezier(0.22, 0.9, 0.32, 1),
    filter 0.4s ease;
  box-shadow: none;
}

#catelog_area .catalog.slide:hover img {
  transform: scale(1.04);
}

#catelog_area .catalog.slide::after {
  content: "\f00e";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%) scale(0.5);
  border-radius: 50%;
  background: linear-gradient(120deg, var(--mg-gold-3), var(--mg-gold-2));
  color: #577e89;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  pointer-events: none;
}

#catelog_area .catalog.slide:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

#catelog_area #catalog-slide-left,
#catelog_area #catalog-slide-right {
  position: absolute;
  top: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(white);
  color: var(--mg-gold-3) !important;
  font-size: 1.15rem;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(14, 25, 50, 0.25);
  transform: translateY(-50%);
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
  z-index: 3;
  text-decoration: none !important;
}

#catelog_area #catalog-slide-left {
  left: 8px;
}

#catelog_area #catalog-slide-right {
  right: 8px;
}

#catelog_area #catalog-slide-left:hover,
#catelog_area #catalog-slide-right:hover {
  background: linear-gradient(120deg, var(--mg-wine-soft), var(--mg-wine));
  color: #fff !important;
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.3);
}

#catelog_area .btn-outline-primary {
  margin-top: 5px;
  border-color: var(--mg-gold-2);
  color: var(--mg-gold-2);
  font-weight: 500;
  border-radius: 30px;
  transition: all 0.35s ease;
}

#catelog_area .btn-outline-primary:hover {
  background: linear-gradient(120deg,
      var(--mg-emerald),
      var(--mg-emerald-soft));
  border-color: var(--mg-emerald);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(14, 25, 50, 0.25);
}

/* our collection svg */
.mg-card-svg {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 32px;
  height: 32px;
  z-index: 2;
  color: var(--mg-gold-2);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.22, 0.9, 0.32, 1);
}

#home_collection_shop .product-item:hover .mg-card-svg {
  transform: rotate(15deg) scale(1.1);
}


/* ==========================================================================
   5. PRODUCT CARDS, GRIDS & STOREWIDE COMPONENTS
   (Storewide components, login/skip-nav, profile/guest mode, help widget, footer)
   ========================================================================== */

/* ---------- Login & Skip Navigation Styling ---------- */
.mg-skip-btn {
  background: var(--mg-ivory-deep, #f3e9d6) !important;
  color: var(--mg-ink, #2b2118) !important;
  border: 1px solid var(--mg-gold-3, #f2dd9a) !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mg-skip-btn:hover {
  background: var(--mg-gold-2, #d4af37) !important;
  color: #ffffff !important;
  border-color: var(--mg-gold-1, #a8802a) !important;
  text-decoration: none !important;
  transform: translateX(2px);
}

.mg-skip-link {
  color: var(--mg-gold-1, #a8802a) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
}

.mg-skip-link:hover {
  color: var(--mg-gold-2, #d4af37) !important;
  text-decoration: underline !important;
}

.mg-guest-link {
  color: #6c757d !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.mg-guest-link:hover {
  color: var(--mg-gold-2, #d4af37) !important;
  text-decoration: underline !important;
}


/* ---------- Profile Page & Guest Mode Components ---------- */
.mg-profile-card {
  background: #ffffff !important;
  border: 1px solid rgba(var(--mg-gold-2-rgb), 0.25) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}

.mg-profile-guest-card {
  background: linear-gradient(135deg, #ffffff 0%, var(--mg-ivory, #fbf6ec) 100%) !important;
  border: 1px solid var(--mg-gold-3, #f2dd9a) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 24px rgba(var(--mg-gold-2-rgb), 0.12) !important;
}

.mg-profile-avatar-wrap {
  width: 84px;
  height: 84px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mg-gold-3, #f2dd9a), var(--mg-gold-2, #d4af37));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 2.25rem;
  box-shadow: 0 4px 14px rgba(var(--mg-gold-1-rgb), 0.25);
}

.mg-profile-stat-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  background: var(--mg-ivory-deep, #f3e9d6);
  color: var(--mg-ink, #2b2118);
  font-size: 0.8rem;
  font-weight: 600;
}

.mg-profile-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #f4f4f4;
  color: var(--mg-ink, #2b2118);
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.mg-profile-nav-item:last-child {
  border-bottom: none;
}

.mg-profile-nav-item:hover {
  background: var(--mg-ivory, #fbf6ec);
  color: var(--mg-gold-1, #a8802a);
  padding-left: 22px;
}

.mg-profile-nav-item i.mg-icon-left {
  width: 28px;
  color: var(--mg-gold-2, #d4af37);
  font-size: 1.1rem;
}


/* ---------- Help widget: reliable click/tap open (works even without :hover) ---------- */
#help-widget .help-options {
  display: none;
  flex-direction: column;
  gap: 8px;
}

#help-widget.mg-help-open .help-options {
  display: flex !important;
}


/* ---------- Footer ---------- */
.bg-secondary h5.text-dark {
  color: var(--mg-gold-3) !important;
}

.bg-secondary p.text-dark,
.bg-secondary p.text-dark a {
  color: var(--mg-gold-3) !important;
}

.bg-secondary p.text-dark a:hover {
  color: var(--mg-gold-2) !important;
  text-decoration: underline;
}

.bg-secondary {
  background: linear-gradient(160deg,
      #577e89 0%,
      #70afc2 55%,
      #11271e 100%) !important;
  position: relative;
  overflow: hidden;
}

.bg-secondary::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #577e89;
  background-size: cover;
  background-position: center 50%;
  background-repeat: no-repeat;
  filter: blur(3px);
  z-index: 0;
  pointer-events: none;
}

.bg-secondary>.row {
  position: relative;
  z-index: 1;
}

.bg-secondary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
      transparent,
      var(--mg-gold-2),
      var(--mg-gold-3),
      var(--mg-gold-2),
      transparent);
  background-size: 200% 100%;
  animation: mg-shimmer 6s linear infinite;
  z-index: 2;
}

.bg-secondary a.text-white {
  transition:
    color 0.25s ease,
    padding-left 0.25s ease;
}

.bg-secondary a.text-white:hover {
  color: var(--mg-gold-3) !important;
  padding-left: 4px;
}

.footer_info_sec a.text-white:hover {
  color: var(--mg-gold-3) !important;
}


/* ==========================================================================
   6. BRAND COLOR OVERRIDES (SINGLE SOURCE OF TRUTH)
   ========================================================================== */

/* ================================================================
   BRAND COLOR OVERRIDE — single source of truth for "primary" color
   site-wide. This block controls primary buttons, links, and badges.

   TO RE-THEME THE WHOLE SITE: change the value of --mg-gold-2 in the
   :root block near the top of this file. Every rule below reads from
   that one variable, so every page updates together.
   ================================================================ */
.btn-primary,
.bg-primary,
.badge-primary,
.page-item.active .page-link {
  background-color: var(--mg-gold-2) !important;
  border-color: var(--mg-gold-2) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
  background-color: var(--mg-gold-1) !important;
  border-color: var(--mg-gold-1) !important;
}

.btn-outline-primary {
  color: var(--mg-gold-2) !important;
  border-color: var(--mg-gold-2) !important;
}

.btn-outline-primary:hover {
  background-color: var(--mg-gold-2) !important;
  color: #fff !important;
}

.text-primary,
a.text-primary:hover,
a.text-primary:focus {
  color: var(--mg-gold-2) !important;
}

.border-primary {
  border-color: var(--mg-gold-2) !important;
}

.custom-control-input:checked~.custom-control-label::before {
  border-color: var(--mg-gold-2) !important;
  background-color: var(--mg-gold-2) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  background-color: var(--mg-gold-2) !important;
}

/* ---------- Top header gradient styling ---------- */
.top_header {
  background: linear-gradient(180deg,
      var(--mg-ivory) 0%,
      var(--mg-ivory-deep) 100%) !important;
}


/* ==========================================================================
   7. MOBILE APP EXPERIENCE (@media max-width: 991.98px)
   - 7.1 Fixed Header, Search Bar & Quick Search Pill
   - 7.2 Native App Mobile Styling & Floating Rate Pill
   - 7.3 Persistent Bottom Navigation Bar & Floating LiveChat
   - 7.4 Slide-In App Drawer & Mobile Menu System
   - 7.5 Mobile Quick Category Scroll & 2x2 Campaign Grid
   - 7.6 Mobile Collections & Shop by Material Grid
   - 7.7 Split Category Cards & Sticky Filter/Sort Bar
   - 7.8 Mobile Responsive Layout & Table Overrides
   ========================================================================== */

/* ---------- 7.1 Mobile Header, Margin Resets & Responsive Enhancements ---------- */
@media (max-width: 767.98px) {

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  body>.container-fluid:first-child {
    margin-top: 0 !important;
  }

  #head_search_bar {
    margin-top: 0 !important;
  }
}


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

  .top_header,
  .top_menue_bar {
    background: #fff !important;
  }

  #mob_custo_menu_sub hr {
    display: none;
  }

  #mob_custo_menu_sub {
    right: 0 !important;
    left: auto !important;
    min-width: 200px !important;
    max-width: 85vw !important;
  }

  .navbar ul {
    margin-top: auto;
  }
}


/* 2. Section titles on mobile screens (< 576px) */
@media (max-width: 575.98px) {
  .cstm-section-title {
    font-size: 1.45rem !important;
    padding: 0 0.25em !important;
    max-width: 90% !important;
    word-break: break-word;
  }

  .cstm-section-title::before,
  .cstm-section-title::after {
    display: none !important;
    /* Hide protruding diamond tips on narrow screens to prevent horizontal overflow */
  }
}

/* 3. Mobile Header & Action Icons (< 992px) */
@media (max-width: 991.98px) {
  .top_header {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .top_menue_bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 6px 0 !important;
  }

  .mob-header-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  .top_menue_bar .hamburger {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .top_menue_bar .logo_image {
    max-width: 110px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  #head_shop_list.mbl {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #head_shop_list.mbl li {
    position: relative !important;
  }

  #head_shop_list.mbl .card-wish-mbl {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    position: relative !important;
  }

  #head_shop_list.mbl .badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    font-size: 10px !important;
    padding: 2px 4px !important;
    border-radius: 10px !important;
    min-width: 16px !important;
    line-height: 1 !important;
  }

  #mob_search_bar {
    width: 100% !important;
    margin-top: 6px !important;
  }

  /* Mobile Header Search Toggle Button (Touch-first, permanent gold circle, no hover needed) */
  #head_shop_list.mbl #mob_search_toggle_btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: var(--mg-gold-2) !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: background 0.25s ease, transform 0.2s ease !important;
  }

  #head_shop_list.mbl #mob_search_toggle_btn #mob_search_toggle_icon {
    color: #ffffff !important;
    font-size: 13px !important;
    display: inline-block !important;
    line-height: 1 !important;
  }

  #head_shop_list.mbl #mob_search_toggle_btn.mg-search-active {
    background: var(--mg-ink) !important;
  }

  #head_shop_list.mbl #mob_search_toggle_btn.mg-search-active #mob_search_toggle_icon {
    color: #ffffff !important;
  }
}

/* 4. Hero Carousel text scaling on small screens */
@media (max-width: 575.98px) {
  #header-carousel .carousel-caption {
    padding: 10px !important;
    bottom: 10% !important;
  }

  #header-carousel .carousel-caption h4 {
    font-size: 0.85rem !important;
    margin-bottom: 4px !important;
    letter-spacing: 1px !important;
  }

  #header-carousel .carousel-caption h3 {
    font-size: 1.35rem !important;
    margin-bottom: 10px !important;
    line-height: 1.25 !important;
  }

  #header-carousel .carousel-caption .btn {
    padding: 6px 14px !important;
    font-size: 0.8rem !important;
  }
}

/* 5. Mobile Video Reels Track */
@media (max-width: 767.98px) {
  #home_videos_shop {
    overflow: hidden !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  #mg_video_track {
    margin: 0 auto !important;
    width: 100% !important;
  }

  #mg_video_track .col-lg-4 {
    padding: 0 6px !important;
  }

  #mg_video_track .col-lg-4:not(:first-child) {
    display: none !important;
    /* On mobile screen only show current active reel */
  }

  .mg-video-card {
    max-width: 320px !important;
    margin: 0 auto !important;
  }
}

/* 6. Product grid cards on mobile screens */
@media (max-width: 575.98px) {
  .product-item {
    margin-bottom: 14px !important;
  }

  .product-item .product-img img {
    height: 150px !important;
    object-fit: cover !important;
  }

  .product-item .card-body h6 {
    font-size: 0.82rem !important;
    line-height: 1.3 !important;
  }

  .product_action_div {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 4px !important;
  }

  .product_action_btn {
    width: 100% !important;
    font-size: 0.75rem !important;
    padding: 4px 6px !important;
    text-align: center !important;
  }
}

/* 7. Tables on mobile screens (Cart & Wishlist) */
@media (max-width: 767.98px) {
  .table-responsive {
    border: 0 !important;
    margin-bottom: 20px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #cart_section_page .table td,
  #wishlist_section_page .table td {
    padding: 8px 6px !important;
    font-size: 0.85rem !important;
  }

  #cart_section_page .quantity,
  #wishlist_section_page .quantity {
    width: 80px !important;
  }
}

/* 8. Scheme cards & teaser sections */
@media (max-width: 575.98px) {
  .scheme-card {
    margin-bottom: 15px !important;
    padding: 16px 14px !important;
  }

  .scheme-card h4 {
    font-size: 1rem !important;
  }

  .scheme-card h2 {
    font-size: 1.15rem !important;
  }

  .scheme-btn-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .scheme-btn-group a.explore {
    width: 100% !important;
    text-align: center !important;
    margin: 2px 0 !important;
  }
}

/* 9. Floating Help Widget Mobile Positioning */
@media (max-width: 575.98px) {
  #help-widget {
    bottom: 16px !important;
    right: 14px !important;
  }
}


/* ---------- 7.2 Native App Mobile Styling, Bottom Nav & LiveChat ---------- */
/* ============================================================
   NATIVE MOBILE APP STYLING (TANISHQ REFERENCE PATTERN)
   ============================================================ */

/* ---------- 1. Body Bottom Padding for Persistent Nav (Mobile Only) ---------- */
@media (max-width: 991.98px) {

  body,
  .mg-app-body {
    padding-bottom: 70px !important;
  }

  #header_seprator {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Fixed Mobile Header (Stays visible at top always, on all pages) */
  #top_menu_bar_container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1030 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .top_header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    z-index: 1030 !important;
    margin: 0 !important;
    border-top: none !important;
    border-bottom: none !important;
    background: transparent !important;
  }

  /* Rate Ticker: Normal flow, scrolls with the page, starts directly below fixed header */
  .mg-rate-ticker,
  #rate_ticker_area {
    position: relative !important;
    top: auto !important;
    margin-top: var(--mg-mobile-header-height, 52px) !important;
    margin-bottom: 0 !important;
    border-top: none !important;
    z-index: 1 !important;
    transition: margin-top 0.25s ease !important;
  }

  /* Floating Today's Rate Widget on Mobile (positioned on right side, sitting just below header/ticker) */
  /* Behavior: hidden while rate ticker row is in view; smoothly animates in when ticker scrolls out of view */
  #rate_ticker_toggle_area.mg-rate-float-widget,
  .mg-rate-float-widget {
    display: flex !important;
    position: fixed !important;
    top: calc(var(--mg-mobile-header-height, 62px) + 135px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 1025 !important;
    margin: 0 !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    /* Entrance & exit animation on mobile: hidden by default while rate ticker row is visible */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(110%) !important;
    pointer-events: none !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0.35s ease,
      top 0.25s ease !important;
  }

  /* When rate ticker row scrolls out of view, floating badge slides in smoothly with fade */
  #rate_ticker_toggle_area.mg-rate-float-widget.mg-rate-visible,
  .mg-rate-float-widget.mg-rate-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  #rate_ticker_toggle_area .mg-rate-float-btn,
  .mg-rate-float-btn {
    background: linear-gradient(150deg, var(--mg-gold-2, #d4af37), var(--mg-gold-1, #a8802a)) !important;
    color: #ffffff !important;
    border: none !important;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 0.72rem !important;
    padding: 7px 12px !important;
    border-radius: 20px 0 0 20px !important;
    box-shadow: 0 4px 14px rgba(14, 25, 50, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    transition: all 0.2s ease !important;
  }

  #rate_ticker_toggle_area .mg-rate-float-btn:hover,
  #rate_ticker_toggle_area .mg-rate-float-btn:active {
    box-shadow: 0 6px 18px rgba(var(--mg-gold-1-rgb), 0.4) !important;
  }

  #rate_ticker_toggle_area .mg-rate-chevron,
  .mg-rate-chevron {
    font-size: 0.72rem;
    transition: transform 0.3s ease;
  }

  #rate_ticker_toggle_area .mg-rate-float-btn[aria-expanded="true"] .mg-rate-chevron,
  .mg-rate-float-btn[aria-expanded="true"] .mg-rate-chevron {
    transform: rotate(180deg);
  }

  #rate_ticker_toggle_area .mg-rate-panel {
    margin-top: 6px !important;
    width: 250px !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 14px 0 0 14px !important;
    box-shadow: 0 12px 28px rgba(14, 25, 50, 0.25) !important;
  }

  #rate_ticker_toggle_area .mg-rate-panel.mg-rate-open {
    max-height: calc(100vh - 130px) !important;
    overflow-y: auto !important;
  }

  /* Mobile Search Toggle Button in Header */
  #mob_search_btn_item {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  #mob_search_toggle_btn {
    cursor: pointer;
    outline: none !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #mob_search_toggle_icon {
    font-size: 1.1rem !important;
    transition: transform 0.2s ease;
  }

  .mg-quick-cat-scroll-wrap {
    margin-top: 0px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .back-to-top {
    position: fixed !important;
    bottom: 76px !important;
    right: 16px !important;
    left: auto !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--mg-gold-1, #a8802a), var(--mg-gold-2, #d4af37)) !important;
    color: #ffffff !important;
    border: none !important;
    z-index: 1035 !important;
    line-height: 44px !important;
    text-align: center !important;
    padding: 0 !important;
    box-shadow: 0 4px 14px rgba(14, 25, 50, 0.25) !important;
    transition: transform 0.2s ease, opacity 0.25s ease !important;
    touch-action: manipulation !important;
  }

  .back-to-top:hover,
  .back-to-top:active {
    transform: scale(1.08) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(var(--mg-gold-1-rgb), 0.4) !important;
  }

  /* Drawer Active State: Completely hide bottom nav footer, floating chat, rate float widget, sticky filter bar & back-to-top across all pages */
  body.mg-drawer-open #mg_bottom_nav_bar,
  body.mg-drawer-open .mg-bottom-nav,
  body.mg-drawer-open #mg_floating_chat_wrap,
  body.mg-drawer-open .mg-floating-chat-wrap,
  body.mg-drawer-open #mg_chat_tooltip,
  body.mg-drawer-open #mg_docked_chat_tab,
  body.mg-drawer-open .mg-docked-chat-tab,
  body.mg-drawer-open .back-to-top,
  body.mg-drawer-open #back_to_top_btn,
  body.mg-drawer-open #rate_ticker_toggle_area,
  body.mg-drawer-open .mg-rate-float-widget,
  body.mg-drawer-open .mg-rate-panel,
  body.mg-drawer-open .mg-sticky-filter-sort-bar,
  body.mg-drawer-open #mg_sticky_filter_sort,
  body.mg-drawer-open .help-options,
  body.mg-drawer-open #msgpopupmodal,
  #mg_bottom_nav_bar.mg-hidden-by-drawer,
  .mg-bottom-nav.mg-hidden-by-drawer,
  #mg_floating_chat_wrap.mg-hidden-by-drawer,
  .mg-floating-chat-wrap.mg-hidden-by-drawer,
  #mg_chat_tooltip.mg-hidden-by-drawer,
  #mg_docked_chat_tab.mg-hidden-by-drawer,
  .mg-docked-chat-tab.mg-hidden-by-drawer,
  .back-to-top.mg-hidden-by-drawer,
  #back_to_top_btn.mg-hidden-by-drawer,
  #rate_ticker_toggle_area.mg-hidden-by-drawer,
  .mg-rate-float-widget.mg-hidden-by-drawer,
  .mg-rate-panel.mg-hidden-by-drawer,
  .mg-sticky-filter-sort-bar.mg-hidden-by-drawer,
  #mg_sticky_filter_sort.mg-hidden-by-drawer {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 991.98px) {

  /* ---------- 2. Persistent Bottom Navigation Bar (Mobile Only) ---------- */
  .mg-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important;
    background: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    z-index: 1040 !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06) !important;
    padding: 0 4px !important;
  }

  .mg-bottom-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    height: 100% !important;
    color: #757575 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    padding: 4px 2px !important;
    text-align: center !important;
  }

  .mg-bottom-nav-item:hover,
  .mg-bottom-nav-item:focus {
    color: var(--mg-gold-1, #a8802a) !important;
    text-decoration: none !important;
  }

  .mg-bottom-nav-icon {
    font-size: 1.15rem !important;
    line-height: 1 !important;
    margin-bottom: 3px !important;
    transition: transform 0.2s ease !important;
  }

  .mg-bottom-nav-label {
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  /* Active tab style matching Reference Image 1 & 5 */
  .mg-bottom-nav-item.active {
    color: var(--mg-gold-1, #a8802a) !important;
    position: relative !important;
  }

  .mg-bottom-nav-item.active::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 20% !important;
    right: 20% !important;
    height: 2.5px !important;
    background: var(--mg-gold-1, #a8802a) !important;
    border-radius: 2px !important;
  }

  .mg-bottom-nav-item.active .mg-bottom-nav-icon {
    transform: translateY(-2px) scale(1.08) !important;
    color: var(--mg-gold-1, #a8802a) !important;
  }

  .mg-bottom-nav-item.active .mg-bottom-nav-label {
    font-weight: 700 !important;
    color: var(--mg-gold-1, #a8802a) !important;
  }

  /* ---------- 3. Floating Chat Button & Tooltip Bubble ---------- */
  .mg-floating-chat-wrap {
    position: fixed !important;
    bottom: 74px !important;
    left: 10px !important;
    right: auto !important;
    z-index: 1045 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    pointer-events: none !important;
  }

  .mg-chat-tooltip {
    background: #ffffff !important;
    color: #212529 !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 18px !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    white-space: nowrap !important;
    position: relative !important;
    pointer-events: auto !important;
  }

  .mg-chat-tooltip::after {
    content: "" !important;
    position: absolute !important;
    bottom: -6px !important;
    left: 17px !important;
    right: auto !important;
    border-width: 6px 6px 0 !important;
    border-style: solid !important;
    border-color: #ffffff transparent !important;
    display: block !important;
    width: 0 !important;
  }

  .mg-chat-tooltip-close {
    background: none !important;
    border: none !important;
    color: #888888 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin-left: 6px !important;
    cursor: pointer !important;
    padding: 3px 6px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    border-radius: 50% !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease !important;
  }

  .mg-chat-tooltip-close:hover,
  .mg-chat-tooltip-close:active {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #222222 !important;
    transform: scale(0.92) !important;
  }

  .mg-app-help-widget .help-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--mg-gold-1, #a8802a), var(--mg-gold-2, #d4af37)) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    box-shadow: 0 6px 18px rgba(var(--mg-gold-1-rgb), 0.35) !important;
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
    pointer-events: auto !important;
  }

  .mg-app-help-widget .help-icon:hover {
    transform: scale(1.06) !important;
  }

  .mg-floating-chat-wrap {
    pointer-events: none !important;
  }

  .mg-floating-chat-wrap .help-icon,
  .mg-floating-chat-wrap .mg-chat-tooltip {
    pointer-events: auto !important;
  }

  .mg-app-help-widget {
    position: relative !important;
  }

  .mg-app-help-widget .help-options {
    display: none !important;
    pointer-events: none !important;
    position: absolute !important;
    bottom: 58px !important;
    left: 0 !important;
    right: auto !important;
    margin-bottom: 0 !important;
    z-index: 1050 !important;
  }

  .mg-app-help-widget .help-options.open {
    display: flex !important;
    pointer-events: auto !important;
    max-height: 500px !important;
    opacity: 1 !important;
  }
}

@media (min-width: 992px) {

  body,
  .mg-app-body {
    padding-bottom: 0 !important;
  }

  .mg-bottom-nav,
  .mg-floating-chat-wrap,
  .mg-docked-chat-tab,
  .mg-livechat-modal-backdrop,
  .mg-app-search-container,
  .mg-quick-cat-scroll-wrap,
  .mg-campaign-section,
  .mg-sticky-filter-sort-bar {
    display: none !important;
  }
}

/* ==========================================================================
   Tanishq Reference: Docked LiveChat Tab & Pre-Chat Form Modal (Mobile Only)
   ========================================================================== */
@media (max-width: 991.98px) {

  /* 1. Floating wrap smooth exit when docked */
  .mg-floating-chat-wrap.mg-chat-hidden {
    transform: translateY(24px) scale(0.8) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.35s ease, opacity 0.3s ease !important;
  }

  /* 2. Docked Vertical Tab on Screen Right Edge (Tanishq Image 1) */
  .mg-docked-chat-tab {
    position: fixed !important;
    right: 0 !important;
    top: 58% !important;
    transform: translateY(-50%) translateX(120%) !important;
    z-index: 1045 !important;
    background: linear-gradient(135deg, var(--mg-gold-1, #a8802a), var(--mg-gold-2, #d4af37)) !important;
    color: #ffffff !important;
    padding: 12px 7px 14px 7px !important;
    border-radius: 7px 0 0 7px !important;
    box-shadow: -3px 4px 18px rgba(var(--mg-gold-1-rgb), 0.42) !important;
    cursor: pointer !important;
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
    opacity: 0 !important;
    pointer-events: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-left: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  .mg-docked-chat-tab.mg-docked-active {
    transform: translateY(-50%) translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .mg-docked-chat-tab:active {
    transform: translateY(-50%) scale(0.96) !important;
  }

  .mg-docked-chat-tab-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
  }

  .mg-docked-chat-icon {
    font-size: 13px !important;
    color: #ffffff !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) !important;
  }

  .mg-docked-chat-label {
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    color: #ffffff !important;
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    transform: rotate(180deg) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    user-select: none !important;
  }

  /* 3. LiveChat Modal Backdrop (Tanishq Image 2) */
  .mg-livechat-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(14, 25, 50, 0.42) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 2000 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }

  .mg-livechat-modal-backdrop.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .mg-livechat-sheet {
    background: #ffffff !important;
    width: 100% !important;
    max-height: 94vh !important;
    border-radius: 22px 22px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 -12px 35px rgba(0, 0, 0, 0.22) !important;
    transform: translateY(100%) !important;
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    padding-bottom: env(safe-area-inset-bottom, 14px) !important;
  }

  .mg-livechat-modal-backdrop.open .mg-livechat-sheet {
    transform: translateY(0) !important;
  }

  /* Top Control Buttons */
  .mg-livechat-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px 4px 18px !important;
    background: #ffffff !important;
  }

  .mg-livechat-icon-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #f1f3f6 !important;
    border: none !important;
    color: #495057 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
  }

  .mg-livechat-icon-btn:active {
    background: #e2e6ea !important;
    transform: scale(0.94) !important;
  }

  .mg-livechat-top-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Floating Agent Badge Pill */
  .mg-livechat-agent-badge {
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #ffffff !important;
    padding: 6px 18px 6px 8px !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    margin-bottom: 12px !important;
  }

  .mg-livechat-agent-avatar {
    position: relative !important;
    display: flex !important;
  }

  .mg-livechat-avatar-circle {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--mg-gold-1, #a8802a), var(--mg-gold-2, #d4af37)) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    box-shadow: 0 2px 8px rgba(var(--mg-gold-1-rgb), 0.3) !important;
  }

  .mg-livechat-status-dot {
    position: absolute !important;
    top: -1px !important;
    right: -1px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #28a745 !important;
    border: 2px solid #ffffff !important;
  }

  .mg-livechat-agent-meta {
    display: flex !important;
    flex-direction: column !important;
  }

  .mg-livechat-agent-name {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    letter-spacing: 0.6px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  .mg-livechat-agent-title {
    font-size: 11px !important;
    color: #6c757d !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  /* Body & Form Card */
  .mg-livechat-body {
    overflow-y: auto !important;
    padding: 0 16px 14px 16px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .mg-livechat-card-wrap {
    position: relative !important;
    margin-top: 10px !important;
  }

  .mg-livechat-left-indicator {
    position: absolute !important;
    top: -10px !important;
    left: -4px !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: #8b2628 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    z-index: 2 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  }

  .mg-livechat-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 22px 18px 20px 18px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  }

  .mg-livechat-welcome {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    margin-bottom: 16px !important;
    font-weight: 500 !important;
  }

  .mg-livechat-form-group {
    margin-bottom: 12px !important;
  }

  .mg-livechat-label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #495057 !important;
    margin-bottom: 4px !important;
  }

  .mg-required-star {
    color: #dc3545 !important;
    font-weight: 700 !important;
  }

  .mg-livechat-input {
    width: 100% !important;
    padding: 10px 13px !important;
    font-size: 13.5px !important;
    background: #eceef1 !important;
    border: 1px solid #d5d9df !important;
    border-radius: 8px !important;
    color: #212529 !important;
    outline: none !important;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
  }

  .mg-livechat-input:focus {
    background: #ffffff !important;
    border-color: var(--mg-gold-1, #a8802a) !important;
    box-shadow: 0 0 0 3px rgba(var(--mg-gold-1-rgb), 0.18) !important;
  }

  .mg-livechat-submit-btn {
    width: 100% !important;
    margin-top: 14px !important;
    padding: 12px 16px !important;
    background: linear-gradient(135deg, var(--mg-gold-1, #a8802a), var(--mg-gold-2, #d4af37)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(var(--mg-gold-1-rgb), 0.32) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  .mg-livechat-submit-btn:active {
    transform: scale(0.98) !important;
  }

  .mg-livechat-submit-btn:disabled {
    opacity: 0.8 !important;
    cursor: not-allowed !important;
  }

  .mg-livechat-feedback {
    font-size: 12px !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    margin-bottom: 10px !important;
    animation: mg-chat-fade-in 0.2s ease forwards !important;
  }

  @keyframes mg-chat-fade-in {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .mg-livechat-feedback.error {
    background: #f8d7da !important;
    color: #721c24 !important;
    border: 1px solid #f5c6cb !important;
  }

  .mg-livechat-feedback.success {
    background: #d4edda !important;
    color: #155724 !important;
    border: 1px solid #c3e6cb !important;
  }

  /* Footer Note */
  .mg-livechat-footer {
    text-align: center !important;
    padding: 10px 16px 14px 16px !important;
    font-size: 11px !important;
    color: #868e96 !important;
    background: #ffffff !important;
  }

  .mg-livechat-brand-name {
    color: #343a40 !important;
    font-weight: 700 !important;
  }
}

/* Desktop View: Completely Hidden */
@media (min-width: 992px) {

  .mg-docked-chat-tab,
  .mg-livechat-modal-backdrop {
    display: none !important;
  }
}


/* ---------- 7.3 Slide-In App Drawer & Mobile Menu System ---------- */
/* ---------- Hamburger (mobile) ---------- */
.hamburger {
  color: var(white);
  border: none;
  border-radius: 10px;
  width: 42px;
  height: 40px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.hamburger:hover {
  box-shadow: 0 8px 16px rgba(14, 25, 50, 0.28);
}

.hamburger[aria-expanded="true"] {
  transform: rotate(90deg);
}

/* ---------- Mobile full-screen menu panel ---------- */

@media (max-width: 991.98px) {
  .mobile-menu {
    background: #ffffff !important;
  }

  .mobile-menu .menu-list>li>a i {
    color: var(--mg-gold-2) !important;
  }

  .mobile-menu .menu-list>li>a:hover,
  .mobile-menu .menu-list>li>a.active {
    color: var(--mg-gold-1) !important;
    background: rgba(var(--mg-gold-2-rgb), 0.12) !important;
  }

  .mob_cat {
    color: var(--mg-gold-2) !important;
  }

  .mobile-menu .menu-close {
    background: rgba(var(--mg-gold-2-rgb), 0.15) !important;
    color: var(--mg-gold-2) !important;
    border-color: rgba(var(--mg-gold-2-rgb), 0.4) !important;
  }
}

.mobile-menu .navbar-nav>a.nav-item.nav-link {
  display: block;
  color: var(--mg-ivory) !important;
  padding: 10px 22px;
  font-size: 0.88rem;
  border-bottom: 1px dashed rgba(var(--mg-gold-champagne-rgb), 0.12);
  transition:
    color 0.25s ease,
    padding-left 0.25s ease;
}

.mobile-menu .navbar-nav>a.nav-item.nav-link:hover,
.mobile-menu .navbar-nav>a.nav-item.nav-link:active {
  color: var(--mg-gold-3) !important;
  padding-left: 28px;
}

.menu-backdrop {
  z-index: 99990 !important;
}

.mobile-menu {
  z-index: 99999 !important;
  position: fixed;
}

.mobile-menu .menu-close {
  position: relative;
  z-index: 100000 !important;
}

.mobile-menu .menu-close {
  background: rgba(var(--mg-gold-champagne-rgb), 0.15);
  color: var(--mg-gold-3);
  border: 1px solid rgba(var(--mg-gold-champagne-rgb), 0.4);
  border-radius: 50%;
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.mobile-menu .menu-close:hover {
  background: var(--mg-wine-soft);
  color: #fff;
  transform: rotate(90deg);
}

.mobile-menu .menu-list {
  padding-left: 0;
}

.mobile-menu .menu-list>li {
  list-style: none;
}

.mobile-menu .menu-list>li>a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #000 !important;
  padding: 14px 22px;
  transition:
    background 0.25s ease,
    padding-left 0.25s ease,
    color 0.25s ease;
}

.mobile-menu .menu-list>li>a i {
  color: var(--mg-gold-2);
  width: 20px;
  text-align: center;
  transition: transform 0.25s ease;
}

@media (max-width: 991.98px) {
  .mobile-menu .menu-list>li>a.active {
    color: var(--mg-gold-2) !important;
    background: rgba(var(--mg-gold-2-rgb), 0.14) !important;
  }
}

@media (max-width: 991.98px) {
  #mobileCategories .navbar-nav.overflow-hidden {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 767.98px) {

  #home_category_shop .row.content,
  #home_collection_shop .row.content {
    align-items: flex-start !important;
  }

  #home_category_shop .row.content>div,
  #home_collection_shop .row.content>div {
    align-self: flex-start !important;
  }

  #home_category_shop .product-item,
  #home_collection_shop .product-item {
    display: block !important;
    height: auto !important;
  }

  #home_category_shop .product-img,
  #home_collection_shop .product-img {
    display: block !important;
    height: 160px !important;
  }

  #home_category_shop .card-body,
  #home_collection_shop .card-body {
    display: block !important;
    flex: none !important;
    padding: 10px 8px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #home_category_shop .card-body h4,
  #home_collection_shop .card-body h6 {
    display: block !important;
    margin: 0 !important;
    line-height: 1.3;
    font-size: 0.9rem;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

.mobile-menu .menu-list>li>a:hover {
  background: rgba(var(--mg-gold-champagne-rgb), 0.1);
  color: var(--mg-gold-3) !important;
  padding-left: 28px;
}

.mobile-menu .menu-list>li>a.mob_cat,
.mobile-menu .menu-list>li>a.mob_cat:hover {
  color: #000 !important;
}

.mobile-menu .menu-list>li>a.active {
  background: rgba(var(--mg-gold-2-rgb), 0.15);
  color: var(--mg-gold-2) !important;
  padding-left: 28px;
  font-weight: 600;
}

.mobile-menu .menu-list>li>a.active i {
  color: var(--mg-gold-2);
}

.mobile-menu .menu-list>li>a:hover i {
  transform: scale(1.15);
}

.mobile-menu.open .menu-list>li {
  opacity: 0;
  transform: translateX(26px);
  animation: mg-menu-in 0.5s cubic-bezier(0.22, 0.9, 0.32, 1) forwards;
}

.mobile-menu.open .menu-list>li:nth-child(1) {
  animation-delay: 0.04s;
}

.mobile-menu.open .menu-list>li:nth-child(2) {
  animation-delay: 0.08s;
}

.mobile-menu.open .menu-list>li:nth-child(3) {
  animation-delay: 0.12s;
}

.mobile-menu.open .menu-list>li:nth-child(4) {
  animation-delay: 0.16s;
}

.mobile-menu.open .menu-list>li:nth-child(5) {
  animation-delay: 0.2s;
}

.mobile-menu.open .menu-list>li:nth-child(6) {
  animation-delay: 0.24s;
}

.mobile-menu.open .menu-list>li:nth-child(7) {
  animation-delay: 0.28s;
}

.mobile-menu.open .menu-list>li:nth-child(n + 8) {
  animation-delay: 0.3s;
}

@keyframes mg-menu-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Mobile "Categories" collapse + submenu */

@media (max-width: 991.98px) {

  #mobileCategories .dropdown-item,
  #mobileCategories .nav-item.nav-link {
    margin-bottom: 12px;
    border-radius: 8px;
    display: right;
    align-items: center;
    gap: 10px;
  }

  #mobileCategories .dropdown-item::before,
  #mobileCategories .nav-item.nav-link::before {
    content: "\f3a5";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.7rem;
    color: var(--mg-gold-2);
    flex: 0 0 auto;
  }
}

@media (max-width: 991.98px) {

  #mobileCategories .dropdown-item,
  #mobileCategories .nav-item.nav-link {
    color: #6c757d !important;
  }

  #mobileCategories .dropdown-item:hover {
    color: var(--mg-gold-2) !important;
    background: rgba(var(--mg-gold-2-rgb), 0.1) !important;
  }

  #mobileCategories .nav-link[data-toggle="dropdown"] {
    color: var(black) !important;
  }
}


.mob_cat,
.mob_cat i {
  color: #000 !important;
  font-weight: 600;
}

.mob_cat.mg-cat-open {
  color: var(--mg-gold-2) !important;
}

#mobileCategories .dropdown-item {
  color: var(grey) !important;
  font-size: 0.86rem;
  padding: 8px 26px;
  border-bottom: 1px dashed rgba(var(--mg-gold-champagne-rgb), 0.1);
  transition:
    background 0.25s ease,
    color 0.25s ease,
    padding-left 0.25s ease;
}

#mobileCategories .dropdown-item:hover {
  background: rgba(var(--mg-gold-champagne-rgb), 0.12) !important;
  color: var(--mg-gold-3) !important;
  padding-left: 32px;
}

#mobileCategories .navbar-nav {
  padding-right: 6px;
}

#mobileCategories .navbar-nav::-webkit-scrollbar {
  width: 5px;
}

#mobileCategories .navbar-nav::-webkit-scrollbar-thumb {
  background: var(--mg-gold-2);
  border-radius: 10px;
}

/* Login / Register pills (desktop + mobile) */
.btn-secondary,
.top_menue_bar .nav-link.d-none.d-lg-block {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    color 0.3s ease;
}

#mob_user_sign .btn-secondary,
#navbarCollapse .btn-secondary,
.navbar-collapse .ml-auto .nav-link.d-none.d-lg-block {
  color: var(--mg-ink) !important;
  border: none !important;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.navbar-collapse .ml-auto .nav-link.d-none.d-lg-block {
  display: inline-block !important;
  padding: 8px 20px !important;
  border-radius: 30px;
  margin-left: 8px;
}

#mob_user_sign .btn-secondary:hover,
#navbarCollapse .btn-secondary:hover,
.navbar-collapse .ml-auto .nav-link.d-none.d-lg-block:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 5px rgba(32, 17, 94, 0.35);
  color: var(--mg-ink) !important;
}

.menu-backdrop {
  background: rgba(10, 18, 35, 0.55) !important;
  backdrop-filter: blur(2px);
}


/* ---------- 4. Native App Header & Search Pill ---------- */
.mg-app-search-container {
  display: none;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.mg-app-search-container.mg-search-expanded {
  display: block !important;
  animation: mg-search-expand 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes mg-search-expand {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mg-app-search-pill {
  background: var(--mg-ivory, #fbf6ec) !important;
  border: 1.5px solid rgba(var(--mg-gold-champagne-rgb), 0.45) !important;
  border-radius: 25px !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.mg-app-search-pill:focus-within {
  border-color: var(--mg-gold-1, #a8802a) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(var(--mg-gold-2-rgb), 0.2) !important;
}

.mg-app-search-pill input {
  font-size: 0.85rem !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--mg-ink, #2b2118) !important;
}

.mg-app-search-pill input::placeholder {
  color: #999999 !important;
  font-size: 0.82rem !important;
}

.mg-search-cam-btn,
.mg-search-mic-btn {
  color: var(--mg-gold-1, #a8802a) !important;
  font-size: 1rem !important;
  text-decoration: none !important;
}


/* ---------- 5. Slide-In App Drawer (Restructured & Premium Gold/Ivory) ---------- */
.mg-app-drawer {
  width: 320px !important;
  max-width: 88vw !important;
  background: var(--mg-ivory, #fbf6ec) !important;
  box-shadow: 6px 0 30px rgba(0, 0, 0, 0.2) !important;
}

.mg-drawer-header {
  background: linear-gradient(135deg, #ffffff 0%, #f7f1e4 100%) !important;
  border-bottom: 1px solid rgba(var(--mg-gold-1-rgb, 168, 128, 42), 0.22) !important;
}

.mg-drawer-avatar {
  font-size: 2.6rem !important;
  color: var(--mg-gold-1, #a8802a) !important;
  line-height: 1 !important;
  filter: drop-shadow(0 2px 4px rgba(var(--mg-gold-1-rgb, 168, 128, 42), 0.25));
}

.mg-drawer-user-info {
  display: flex !important;
  flex-direction: column !important;
}

.mg-drawer-name {
  font-family: 'Cormorant Garamond', 'Cinzel', serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--mg-ink, #2b2118) !important;
  line-height: 1.2 !important;
}

.mg-drawer-member-tag {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: var(--mg-gold-1, #a8802a) !important;
  margin-top: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.mg-drawer-close {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  color: var(--mg-ink, #2b2118) !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.mg-drawer-close:hover,
.mg-drawer-close:active {
  background: var(--mg-gold-1, #a8802a) !important;
  color: #ffffff !important;
  border-color: var(--mg-gold-1, #a8802a) !important;
  transform: rotate(90deg);
}

.mg-drawer-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-height: calc(100vh - 80px) !important;
  padding: 0 !important;
  background: #ffffff !important;
}

.mg-drawer-group-title {
  color: var(--mg-gold-1, #a8802a) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  margin: 0 !important;
  padding: 10px 18px 6px 18px !important;
  background: #faf7f2 !important;
  border-top: 1px solid #f1eae0 !important;
  border-bottom: 1px solid #f1eae0 !important;
  line-height: 1.3 !important;
}

.mg-drawer-group-title:first-child {
  border-top: none !important;
}

.mg-drawer-card,
.mg-drawer-list {
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.mg-drawer-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 11px 18px !important;
  min-height: 46px !important;
  border-bottom: 1px solid #f4ede3 !important;
  color: var(--mg-ink, #2b2118) !important;
  text-decoration: none !important;
  font-size: 13.5px !important;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease !important;
  cursor: pointer !important;
  background: #ffffff !important;
}

.mg-drawer-row:last-child {
  border-bottom: none !important;
}

.mg-drawer-row:hover,
.mg-drawer-row:active {
  background: #faf6ee !important;
  color: var(--mg-gold-1, #a8802a) !important;
  text-decoration: none !important;
  padding-left: 22px !important;
}

.mg-drawer-icon-wrap {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  background: rgba(var(--mg-gold-1-rgb, 168, 128, 42), 0.08) !important;
  color: var(--mg-gold-1, #a8802a) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12.5px !important;
  flex-shrink: 0 !important;
  margin-right: 12px !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

.mg-drawer-row:hover .mg-drawer-icon-wrap {
  background: var(--mg-gold-1, #a8802a) !important;
  color: #ffffff !important;
  transform: scale(1.05);
}

.mg-drawer-pill-count {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--mg-gold-1, #a8802a) !important;
  background: rgba(var(--mg-gold-1-rgb, 168, 128, 42), 0.12) !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  line-height: 1.2 !important;
  display: inline-block !important;
}

.mg-drawer-icon {
  width: 20px !important;
  text-align: center !important;
  font-size: 14px !important;
  color: var(--mg-gold-1, #a8802a) !important;
}

.mg-arrow-sm {
  font-size: 11px !important;
  opacity: 0.55 !important;
  transition: transform 0.2s ease !important;
}

.mg-drawer-row:hover .mg-arrow-sm {
  transform: translateX(3px);
  opacity: 1 !important;
  color: var(--mg-gold-1, #a8802a) !important;
}

/* Collapsible Dropdown & Chevron Animations */
.mg-drawer-row-toggle .mg-drawer-chevron {
  font-size: 11px !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mg-drawer-row-toggle.active {
  background: #f7f1e4 !important;
  color: var(--mg-gold-1, #a8802a) !important;
  border-bottom-color: rgba(var(--mg-gold-1-rgb, 168, 128, 42), 0.25) !important;
}

.mg-drawer-row-toggle.active .mg-drawer-chevron {
  transform: rotate(180deg) !important;
  color: var(--mg-gold-1, #a8802a) !important;
}

.mg-drawer-collapse-content {
  display: none;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  transition: none !important;
  opacity: 0;
  background: #fbf9f4 !important;
  border-bottom: 1px solid #ebd9b8 !important;
  border-top: 1px solid #f2e9dc !important;
}

.mg-drawer-collapse-content.show {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
}

.mg-drawer-subrow {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 9px 18px 9px 44px !important;
  font-size: 13px !important;
  color: #433930 !important;
  border-bottom: 1px solid #f3ece1 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  line-height: 1.35 !important;
}

.mg-drawer-subrow:last-child {
  border-bottom: none !important;
}

.mg-drawer-subrow:hover,
.mg-drawer-subrow:active {
  background: #f3efe6 !important;
  color: var(--mg-gold-1, #a8802a) !important;
  padding-left: 28px !important;
  text-decoration: none !important;
}

.mg-sub-bullet {
  font-size: 9px !important;
  width: 14px !important;
  opacity: 0.75 !important;
}

.mg-drawer-sub-count {
  font-size: 10.5px !important;
  color: #8c959f !important;
  font-weight: 500 !important;
}

/* Badges inside Drawer */
.mg-badge-new {
  background: var(--mg-gold-3, #f2dd9a) !important;
  color: var(--mg-ink, #2b2118) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 8px !important;
  letter-spacing: 0.5px !important;
}

.mg-badge-live {
  background: rgba(220, 53, 69, 0.12) !important;
  color: #dc3545 !important;
  border: 1px solid rgba(220, 53, 69, 0.25) !important;
  font-size: 9.5px !important;
  padding: 2px 7px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

.mg-badge-count {
  background: var(--mg-gold-1, #a8802a) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  text-align: center !important;
}

.mg-badge-chat-online {
  background: rgba(40, 167, 69, 0.12) !important;
  color: #28a745 !important;
  border: 1px solid rgba(40, 167, 69, 0.25) !important;
  font-size: 9.5px !important;
  padding: 2px 7px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}

.mg-badge-sub-pill {
  background: rgba(var(--mg-gold-1-rgb, 168, 128, 42), 0.12) !important;
  color: var(--mg-gold-1, #a8802a) !important;
  font-size: 9px !important;
  padding: 2px 6px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}


/* ---------- 7.4 Mobile Homepage Sections & Quick Category Scroll ---------- */
/* ---------- 6. Horizontal Quick Category Scroll (Image 1) ---------- */
.mg-quick-cat-scroll-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.mg-quick-cat-scroll-wrap::-webkit-scrollbar {
  display: none !important;
}

.mg-quick-cat-track {
  display: inline-flex !important;
  gap: 8px !important;
  padding: 0px 0 !important;
}

/* .mg-quick-cat-card {
  height: 150px !important;
  width: 95px !important;
  min-width: 76px !important;
  background: #ffffff !important;
  border: 1px solid rgba(var(--mg-gold-2-rgb), 0.2) !important;
  border-radius: 10px !important;
  padding: 6px 4px !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
} */


/* ===== Quick category card: 150px height mein image + naam fit ===== */

/* Card: size same */
.mg-quick-cat-card {
  height: 150px !important;
  width: 95px !important;
  min-width: 95px !important;
  flex: 0 0 95px !important;
  background: #ffffff !important;
  border: 1px solid rgba(var(--mg-gold-2-rgb), 0.2) !important;
  border-radius: 10px !important;
  padding: 6px !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.mg-quick-cat-card:active {
  transform: scale(0.97) !important;
}

/* Image box: naam ke baad jitni jagah bache, poori le lo */
.mg-quick-cat-img-box {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  /* zaroori: iske bina box card se bahar jata hai */
  width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin: 0 !important;
  background: rgba(var(--mg-gold-2-rgb), 0.08) !important;
}

.mg-quick-cat-img-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  /* image box bharegi, khinchegi nahi */
  display: block !important;
}

/* Naam: neeche fix jagah, 2 line tak */
.mg-quick-cat-title {
  flex: 0 0 auto !important;
  height: 30px !important;
  /* 2 line ki jagah hamesha reserve */
  margin-top: 6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 15px !important;
  color: var(--mg-gold-1, #B8912B) !important;
  word-break: break-word !important;
}

/* ===== Fix: image card ki poori width cover kare ===== */
.mg-quick-cat-scroll-wrap .mg-quick-cat-card .mg-quick-cat-img-box {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  align-self: stretch !important;
}

.mg-quick-cat-scroll-wrap .mg-quick-cat-card .mg-quick-cat-img-box img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}


.mg-quick-cat-card:hover {
  transform: translateY(-2px) !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(var(--mg-gold-2-rgb), 0.18) !important;
}

.mg-quick-cat-img-box {
  width: 54px !important;
  height: 54px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 5px !important;
  background: #fbfbfb !important;
}

.mg-quick-cat-img-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.mg-quick-cat-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--mg-gold-1, #a8802a) !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  width: 100% !important;
}


/* ---------- 8. 2x2 Campaign Grid (Image 3) ---------- */
.mg-campaign-2x2-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  border-radius: 12px 12px 0 0 !important;
  overflow: hidden !important;
}

/* ===== Campaign cards: premium look START ===== */

/* Card */
.mg-campaign-cell {
  height: 170px !important;
  overflow: hidden !important;
  position: relative !important;
  border-radius: 14px !important;
  display: block !important;
  text-decoration: none !important;
  background: rgba(var(--mg-gold-2-rgb), 0.1) !important;
  box-shadow:
    0 6px 16px rgba(27, 42, 65, 0.12),
    0 1px 3px rgba(27, 42, 65, 0.08) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  -webkit-tap-highlight-color: transparent;
}

.mg-campaign-cell:active {
  transform: scale(0.97) !important;
}

/* Image */
.mg-campaign-cell img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.6s ease !important;
}

.mg-campaign-cell:hover img,
.mg-campaign-cell:active img {
  transform: scale(1.06) !important;
}

/* Neeche dark shade: white naam saaf padhe */
.mg-campaign-cell::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top,
      rgba(17, 28, 46, 0.85) 0%,
      rgba(17, 28, 46, 0.35) 35%,
      transparent 60%) !important;
  pointer-events: none !important;
}

/* Andar patla gold frame */
.mg-campaign-cell::before {
  content: "" !important;
  position: absolute !important;
  inset: 6px !important;
  z-index: 2 !important;
  border: 1px solid rgba(var(--mg-gold-2-rgb), 0.45) !important;
  border-radius: 10px !important;
  pointer-events: none !important;
  transition: border-color 0.3s ease, inset 0.3s ease !important;
}

.mg-campaign-cell:hover::before,
.mg-campaign-cell:active::before {
  inset: 4px !important;
  border-color: var(--mg-gold-2) !important;
}

/* Naam: white serif + gold underline */
.mg-campaign-label {
  position: absolute !important;
  z-index: 3 !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 0 6px !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(var(--mg-gold-2-rgb), 0.7) !important;
  color: #ffffff !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.3px !important;
  text-align: left !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important;
}

/* Naam ke saath gold arrow */
.mg-campaign-label::after {
  content: "\203A" !important;
  /* › */
  flex: none !important;
  width: 20px !important;
  height: 20px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: var(--mg-gold-2) !important;
  color: #1B2A41 !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  padding-bottom: 2px !important;
  transition: transform 0.3s ease !important;
}

.mg-campaign-cell:hover .mg-campaign-label::after,
.mg-campaign-cell:active .mg-campaign-label::after {
  transform: translateX(3px) !important;
}

/* Bahut chhota phone */
@media (max-width: 359px) {
  .mg-campaign-cell {
    height: 150px !important;
  }

  .mg-campaign-label {
    font-size: 16px !important;
    left: 11px !important;
    right: 11px !important;
    bottom: 11px !important;
  }
}

/* ===== Campaign cards: premium look END ===== */

.mg-campaign-card {
  background: var(--mg-ivory, #fbf6ec) !important;
  border: 1px solid rgba(var(--mg-gold-2-rgb), 0.25) !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
}

.mg-campaign-italic {
  font-family: "Cormorant Garamond", serif !important;
  font-style: italic !important;
  font-size: 0.95rem !important;
  color: #666666 !important;
}

.mg-campaign-title {
  font-family: "Cormorant Garamond", serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  color: var(--mg-ink, #2b2118) !important;
}

.mg-campaign-subtitle {
  font-size: 0.8rem !important;
  letter-spacing: 0.5px !important;
}

.mg-campaign-explore-btn {
  background: var(--mg-gold-1, #a8802a) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  letter-spacing: 1px !important;
  padding: 6px 20px !important;
  border-radius: 4px !important;
}

/* from claude mg-camp */

/* ===== Shop By Categories slider START ===== */

/* Slider ka bahar wala dabba: grid jaise upar gol kone */
.mg-cat-slider {
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

/* Saari slides ek line mein, swipe se badlengi */
.mg-cat-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mg-cat-slider__track::-webkit-scrollbar {
  display: none;
}

/* Har slide = poori width ki 2x2 grid */
.mg-cat-slider .mg-cat-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* ek swipe = ek slide */
  box-sizing: border-box;
}

/* Dots */
.mg-cat-slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.mg-cat-slider__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(var(--mg-gold-2-rgb), 0.3);
  cursor: pointer;
  transition: width .25s, background .25s;
}

.mg-cat-slider__dots button.is-active {
  width: 22px;
  background: var(--mg-gold-2);
}

/* ===== Shop By Categories slider END ===== */


/* Shop by Gender: upar ki 2 images chhoti + gap kam */
@media (max-width: 991.98px) {

  /* Gap 6px se 4px */
  #shop_by_gender .mg-gender-grid {
    margin-left: -2px !important;
    margin-right: -2px !important;
  }

  #shop_by_gender .mg-gender-col {
    padding-left: 2px !important;
    padding-right: 2px !important;
    margin-bottom: 4px !important;
  }

  /* Upar ki 2 images: lambi (4:5) se square (1:1) */
  #shop_by_gender .mg-gender-col:not(.mg-gender-col-women) .mg-gender-img-wrap {
    aspect-ratio: 1 / 1 !important;
  }
}

/* ==========================================================================
   FIX 1: Full-Bleed "Our Catalogue" Section (Mobile Only)
   ========================================================================== */
@media (max-width: 991.98px) {
  #catelog_area {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  #catelog_area>.content {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #catelog_area .home_about {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 24px !important;
  }

  #catelog_area .catalog.slideshow-container {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 24px 16px !important;
    box-shadow: none !important;
  }

  #catelog_area .catalog.slideshow-container::before {
    display: none !important;
  }

  #catelog_area .catalog.slides {
    padding: 4px 0 !important;
    gap: 0 !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  #catelog_area .catalog.slide {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 10px !important;
    box-shadow: 0 6px 18px rgba(14, 25, 50, 0.12) !important;
    box-sizing: border-box !important;
  }

  #catelog_area .catalog.slide img {
    border-radius: 10px !important;
    height: auto !important;
    max-height: 280px !important;
    object-fit: contain !important;
  }

  #catelog_area #catalog-slide-left,
  #catelog_area #catalog-slide-right {
    display: none !important;
  }

  /* ==========================================================================
     FIX 2: Shop By Material - Tanishq-Style 2x2 Grid (Mobile Only)
     ========================================================================== */
  #shop_by_metal {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    background: linear-gradient(180deg, #fdfbf7 0%, #f6efe2 50%, #fdfbf7 100%) !important;
  }

  #shop_by_metal .row.content {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    position: relative !important;
  }

  #shop_by_metal .row.content::before {
    display: none !important;
  }

  #shop_by_metal .row.content>[class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
  }

  #shop_by_metal .cat-item.matterial_block,
  #shop_by_metal div.matterial_block,
  #shop_by_metal a.matterial_block {
    position: relative !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    aspect-ratio: 4 / 5 !important;
    width: 100% !important;
    min-height: 190px !important;
    background: #eae5dc !important;
    border: 1px solid rgba(var(--mg-gold-2-rgb), 0.28) !important;
    box-shadow: 0 8px 22px rgba(14, 25, 50, 0.12) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    text-decoration: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  #shop_by_metal .cat-item.matterial_block:active {
    transform: scale(0.97) !important;
  }

  /* Remove Fleur-de-lis corner ornament on mobile */
  #shop_by_metal .matterial_block:before,
  #shop_by_metal .matterial_block::before {
    display: none !important;
    content: none !important;
  }

  /* Remove description paragraphs on mobile */
  #shop_by_metal .matterial_block::after,
  #shop_by_metal .matterial_block:after,
  #shop_by_metal .row.content>[class*="col-"] .matterial_block::after,
  #shop_by_metal .row.content>.col-lg-3:nth-child(n) .matterial_block::after {
    display: none !important;
    content: none !important;
  }

  /* Full-bleed edge-to-edge image covering the entire tile */
  #shop_by_metal .cat-img {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
    background: transparent !important;
    border-radius: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: block !important;
  }

  #shop_by_metal .cat-img img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: inherit !important;
    transform: none !important;
    transition: transform 0.4s ease !important;
  }

  /* Bottom dark gradient overlay and clean white text (Tanishq Image 3 style) */
  #shop_by_metal .mg-mat-overlay,
  #shop_by_metal .matterial_block>h5 {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: 38px 10px 14px 10px !important;
    background: linear-gradient(to top, rgba(14, 25, 50, 0.88) 0%, rgba(14, 25, 50, 0.35) 60%, transparent 100%) !important;
    text-align: center !important;
  }

  #shop_by_metal h5 {
    color: #ffffff !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
    margin: 0 !important;
  }
}

.mg-card-svg {
  width: 24px;
  height: 24px;
}

.cstm-section-title {
  font-size: 1.7rem;
}

.cstm-section-title::before,
.cstm-section-title::after {
  width: 22px;
  height: 7px;
}

.cstm-section-title::before {
  left: -30px;
}

.cstm-section-title::after {
  right: -30px;
}


/* ================================================================
           MOBILE RESPONSIVE OVERRIDES — layout/spacing only, no colors
           ================================================================ */
@media (max-width: 991.98px) {
  .hamburger[aria-expanded="true"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-width: 991.98px) {
  #mob_search_btn a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--mg-gold-2);
    color: white;
    margin-right: 6px;
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
  }

  #mob_search_btn a:active {
    transform: scale(0.94);
  }
}

@media (max-width: 991.98px) {
  #mob_search_bar {
    display: none;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(var(--mg-gold-champagne-rgb), 0.25) !important;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
  }

  #mob_search_bar.mg-search-expanded,
  #mob_search_bar.mob_appear {
    display: block !important;
    max-height: 120px !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    animation: mg-search-expand 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  #mob_search_bar.mob_disappear {
    display: none !important;
    max-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

#mob_search_bar.mg-suggest-active {
  overflow: visible !important;
  max-height: none !important;
}

@media (max-width: 991.98px) {
  #top-search-field {
    margin-left: 0;
    max-width: 100%;
  }

  #header-carousel,
  #header-carousel .carousel-inner,
  #header-carousel .carousel-item {
    height: 320px;
  }

  #header-carousel .carousel-item img {
    object-fit: cover !important;
    object-position: center 25%;
  }
}


/* ---------- 7.5 Split Category Cards & Sticky Filter/Sort Bar ---------- */
/* ---------- 9. Categories Tab Screen Split Cards (Image 5) ---------- */
.mg-pill-chips-scroll {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.mg-pill-chips-scroll::-webkit-scrollbar {
  display: none !important;
}

.mg-pill-chips-track {
  display: inline-flex !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.mg-pill-chip {
  border: 1px solid #dcdcdc !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  color: #444444 !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.mg-pill-chip.active,
.mg-pill-chip:hover {
  border-color: var(--mg-gold-1, #a8802a) !important;
  color: var(--mg-gold-1, #a8802a) !important;
  background: var(--mg-ivory, #fbf6ec) !important;
}

.mg-category-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.mg-split-card {
  display: flex !important;
  height: 125px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.2s ease !important;
}

.mg-split-card:hover {
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}

.mg-split-label-half {
  flex: 1.1 !important;
  background: var(--card-bg, #ecd9c6) !important;
  display: flex !important;
  align-items: center !important;
  padding: 16px 20px !important;
}

.mg-split-title {
  font-family: "Cormorant Garamond", serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #2b2118 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.mg-split-photo-half {
  flex: 0.9 !important;
  overflow: hidden !important;
}

.mg-split-photo-half img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}


/* Sticky Filter & Sort Bar (Tanishq Mobile App Navigation) */
.mg-sticky-filter-sort-bar {
  position: fixed !important;
  bottom: 60px !important;
  left: 0 !important;
  right: 0 !important;
  height: 42px !important;
  background: #ffffff !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  z-index: 1030 !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04) !important;
}


/* ==========================================================================
   8. MICRO-INTERACTIONS, RECENTLY VIEWED & SKELETON LOADERS
   ("Added to Cart" toast, badge pop, recently viewed carousel, skeleton loaders)
   ========================================================================== */

/* ==========================================================================
   Micro-interactions: "Added to Cart" Toast & Badge Pop (Mobile Scoped)
   ========================================================================== */
@media (max-width: 991.98px) {
  .mg-cart-toast {
    position: fixed !important;
    top: calc(var(--mg-mobile-header-height, 62px) + 12px) !important;
    left: 50% !important;
    transform: translate(-50%, -24px) scale(0.94) !important;
    background: var(--mg-ink, #0e1932) !important;
    border: 1px solid rgba(var(--mg-gold-2-rgb), 0.45) !important;
    border-radius: 30px !important;
    padding: 8px 16px 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 10px 30px rgba(14, 25, 50, 0.4) !important;
    z-index: 1065 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.3s ease,
      visibility 0.3s ease !important;
    max-width: calc(100vw - 32px) !important;
    white-space: nowrap !important;
  }

  .mg-cart-toast.mg-toast-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) scale(1) !important;
    pointer-events: auto !important;
  }

  .mg-cart-toast-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--mg-gold-2, #d4af37), var(--mg-gold-1, #a8802a)) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
  }

  .mg-cart-toast-content {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
  }

  .mg-cart-toast-title {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    font-family: "Poppins", sans-serif !important;
  }

  .mg-cart-toast-desc {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 11px !important;
    max-width: 210px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Header Badge Pop Effect */
  .mg-badge-pop {
    animation: mg-badge-bounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  }

  @keyframes mg-badge-bounce {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.4);
    }

    100% {
      transform: scale(1);
    }
  }

  /* Temporary Visual State on Add to Cart Button */
  .mg-btn-added-state {
    background: var(--mg-gold-1, #a8802a) !important;
    color: #ffffff !important;
    border-color: var(--mg-gold-1, #a8802a) !important;
    transform: scale(0.97) !important;
    transition: all 0.2s ease !important;
  }
}

/* ==========================================================================
   Recently Viewed Products (Desktop & Mobile Support - Shop Page)
   ========================================================================== */
.mg-recent-section {
  background: transparent;
}

.mg-recent-section .mg-section-heading {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--mg-ink, #0e1932) !important;
  font-family: "Poppins", sans-serif !important;
  letter-spacing: -0.2px;
}

.mg-clear-recent-btn {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--mg-gold-1, #a8802a) !important;
  text-decoration: none !important;
}

.mg-clear-recent-btn:hover {
  color: var(--mg-gold-2, #d4af37) !important;
  text-decoration: underline !important;
}

.mg-recent-scroll-track {
  display: flex !important;
  gap: 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 6px 4px 14px 4px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.mg-recent-scroll-track::-webkit-scrollbar {
  display: none !important;
}

.mg-recent-card {
  flex: 0 0 140px !important;
  width: 140px !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid rgba(var(--mg-gold-2-rgb), 0.25) !important;
  box-shadow: 0 4px 14px rgba(14, 25, 50, 0.07) !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

.mg-recent-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 18px rgba(14, 25, 50, 0.12) !important;
}

.mg-recent-card:active {
  transform: scale(0.97) !important;
}

.mg-recent-card-link {
  text-decoration: none !important;
  color: inherit !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.mg-recent-img-box {
  width: 100% !important;
  height: 125px !important;
  background: #fdfaf3 !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mg-recent-img-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.3s ease !important;
}

.mg-recent-card:hover .mg-recent-img-box img {
  transform: scale(1.05) !important;
}

.mg-recent-body {
  padding: 8px 10px 10px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  justify-content: space-between !important;
}

.mg-recent-title {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--mg-ink, #0e1932) !important;
  line-height: 1.3 !important;
  height: 30px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  margin-bottom: 4px !important;
}

.mg-recent-price {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--mg-gold-1, #a8802a) !important;
  font-family: "Poppins", sans-serif !important;
}

@media (max-width: 991.98px) {

  /* ==========================================================================
     PHASE 1: Product Grid & Listing Image Skeleton Loader (Mobile Only)
     ========================================================================== */
  @keyframes mgSkeletonShimmer {
    0% {
      background-position: -200% 0;
    }

    100% {
      background-position: 200% 0;
    }
  }

  /* Shimmer background container */
  .mg-skeleton-active {
    background: #eae8e3 !important;
    background-image: linear-gradient(90deg,
        #eae8e3 0%,
        #f8f7f4 50%,
        #eae8e3 100%) !important;
    background-size: 200% 100% !important;
    animation: mgSkeletonShimmer 1.4s infinite ease-in-out !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Preserve container aspect ratio / height during loading to prevent CLS */
  #shop_data .product-item .product-img.mg-skeleton-active,
  .card.product-item .product-img.mg-skeleton-active {
    min-height: 220px !important;
    aspect-ratio: 3 / 4 !important;
    width: 100% !important;
    display: block !important;
  }

  .mg-wishlist-thumb-wrap.mg-skeleton-active {
    min-width: 75px !important;
    min-height: 75px !important;
    display: block !important;
  }

  .mg-recent-img-box.mg-skeleton-active {
    min-height: 125px !important;
    width: 100% !important;
    display: block !important;
  }

  /* ==========================================================================
     PHASE 2: Product Detail Main Image & Gallery Skeleton Loader (Mobile Only)
     ========================================================================== */
  #product_detail_page #product-carousel .carousel-inner.mg-skeleton-active,
  #product_detail_page #product-carousel .carousel-item.mg-skeleton-active {
    min-height: 280px !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    display: block !important;
    background: #eae8e3 !important;
    background-image: linear-gradient(90deg,
        #eae8e3 0%,
        #f8f7f4 50%,
        #eae8e3 100%) !important;
    background-size: 200% 100% !important;
    animation: mgSkeletonShimmer 1.4s infinite ease-in-out !important;
    position: relative !important;
    overflow: hidden !important;
  }

  #product_detail_page #pd_thumbnails .pd-thumb.mg-skeleton-active {
    background: #eae8e3 !important;
    background-image: linear-gradient(90deg,
        #eae8e3 0%,
        #f8f7f4 50%,
        #eae8e3 100%) !important;
    background-size: 200% 100% !important;
    animation: mgSkeletonShimmer 1.4s infinite ease-in-out !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Images inside active skeletons start hidden and smoothly fade in when loaded */
  .mg-skeleton-active>img,
  .mg-skeleton-active img.img-fluid,
  .mg-skeleton-active img.mg-wishlist-thumb,
  #product_detail_page #product-carousel .carousel-item.mg-skeleton-active img,
  #product_detail_page #pd_thumbnails .pd-thumb.mg-skeleton-active img {
    opacity: 0 !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Loaded image state */
  img.mg-img-loaded {
    opacity: 1 !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
}

/* ==========================================================================
   CURATED LOOKBOOKS & CATALOGUES (cateloge.html)
   Scoped to mobile view (< 992px)
   ========================================================================== */
@media (max-width: 991.98px) {
  .mg-catalogue-screen {
    background-color: var(--mg-ivory, #fbf6ec);
    min-height: calc(100vh - 120px);
  }

  .mg-catalogue-header {
    border-bottom: 1px solid rgba(var(--mg-gold-1-rgb, 168, 128, 42), 0.15);
    margin-bottom: 8px;
  }

  .mg-catalogue-badge-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--mg-gold-1, #a8802a);
    background: rgba(var(--mg-gold-1-rgb, 168, 128, 42), 0.1);
    border: 1px solid rgba(var(--mg-gold-1-rgb, 168, 128, 42), 0.25);
    padding: 3px 10px;
    border-radius: 20px;
  }

  .mg-catalogue-main-title {
    font-family: 'Cormorant Garamond', 'Cinzel', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--mg-ink, #2b2118);
    line-height: 1.25;
  }

  .mg-catalogue-subtitle {
    font-size: 12px;
    color: #6c757d;
    line-height: 1.45;
  }

  .mg-catalogue-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 28px;
  }

  .mg-catalogue-card {
    background: #ffffff;
    border: 1px solid rgba(var(--mg-gold-1-rgb, 168, 128, 42), 0.2);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .mg-catalogue-card:hover,
  .mg-catalogue-card:active {
    transform: translateY(-2px);
    border-color: var(--mg-gold-1, #a8802a);
    box-shadow: 0 8px 24px rgba(var(--mg-gold-1-rgb, 168, 128, 42), 0.18);
  }

  .mg-catalogue-cover-box {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #11151c;
    overflow: hidden;
  }

  .mg-catalogue-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  .mg-catalogue-card:hover .mg-catalogue-cover-img {
    transform: scale(1.04);
  }

  .mg-catalogue-pill-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(18, 22, 28, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--mg-gold-2-rgb, 212, 175, 55), 0.5);
    color: var(--mg-gold-2, #d4af37);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 2;
  }

  .mg-catalogue-count-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 16px;
    z-index: 2;
  }

  .mg-catalogue-info {
    padding: 14px 16px 16px 16px;
  }

  .mg-catalogue-title {
    font-family: 'Cormorant Garamond', 'Cinzel', serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--mg-ink, #2b2118);
    margin-bottom: 5px;
    line-height: 1.3;
  }

  .mg-catalogue-desc {
    font-size: 12px;
    color: #555b62;
    line-height: 1.5;
    margin-bottom: 12px;
  }

  .mg-catalogue-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  .mg-catalogue-btn {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--mg-gold-1, #a8802a) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease, transform 0.2s ease;
  }

  .mg-catalogue-btn:hover {
    color: var(--mg-gold-2, #d4af37) !important;
    transform: translateX(2px);
  }

  .mg-catalogue-updated {
    font-size: 10.5px;
    color: #8c959f;
  }
}

/* ==========================================================================
   DOWNLOAD THE APP BADGES (Desktop Footer & Mobile Drawer)
   Strict adherence to theme tokens: --mg-gold-1, --mg-gold-2, --mg-gold-3, --mg-ink
   ========================================================================== */

/* ---------- A. Desktop Footer Google Play Style Badge (>= 992px) ---------- */
#footer_download_app_wrap {
  display: block;
}

.mg-app-download-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--mg-gold-1, #a8802a) !important;
}

.mg-app-download-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, #151310 0%, #241e17 100%);
  border: 1.5px solid var(--mg-gold-1, #a8802a);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.mg-app-download-badge:hover,
.mg-app-download-badge:focus {
  background: linear-gradient(135deg, #201a12 0%, #302619 100%);
  border-color: var(--mg-gold-2, #d4af37);
  box-shadow: 0 6px 18px rgba(var(--mg-gold-2-rgb, 212, 175, 55), 0.35);
  transform: translateY(-2px);
  text-decoration: none !important;
}

.mg-app-download-icon {
  margin-right: 12px;
  font-size: 22px;
  color: var(--mg-gold-2, #d4af37);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mg-app-download-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.15;
}

.mg-app-badge-subtitle {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.mg-app-badge-title {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Guard: Desktop badge never appears on mobile footer */
@media (max-width: 991.98px) {
  #footer_download_app_wrap {
    display: none !important;
  }
}

/* ---------- B. Mobile Side Menu Highlighted Tile (< 992px) ---------- */
.mg-drawer-app-tile-wrap {
  display: block;
}

.mg-drawer-app-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--mg-gold-3-rgb, 242, 221, 154), 0.26) 0%, rgba(var(--mg-gold-2-rgb, 212, 175, 55), 0.12) 100%);
  background-color: #fffdf8;
  border: 1.5px solid rgba(var(--mg-gold-2-rgb, 212, 175, 55), 0.45);
  box-shadow: 0 4px 14px rgba(var(--mg-gold-2-rgb, 212, 175, 55), 0.12);
  text-decoration: none !important;
  transition: all 0.25s ease;
  cursor: pointer;
}

.mg-drawer-app-tile:hover,
.mg-drawer-app-tile:active {
  background: linear-gradient(135deg, rgba(var(--mg-gold-3-rgb, 242, 221, 154), 0.38) 0%, rgba(var(--mg-gold-2-rgb, 212, 175, 55), 0.22) 100%);
  border-color: var(--mg-gold-2, #d4af37);
  box-shadow: 0 6px 18px rgba(var(--mg-gold-2-rgb, 212, 175, 55), 0.22);
  transform: translateY(-1px);
  text-decoration: none !important;
}

.mg-drawer-app-tile-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  margin-right: 12px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--mg-gold-1, #a8802a) 0%, var(--mg-gold-2, #d4af37) 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 3px 8px rgba(var(--mg-gold-2-rgb, 212, 175, 55), 0.35);
}

.mg-drawer-app-tile-text {
  flex-grow: 1;
  text-align: left;
}

.mg-drawer-app-badge-pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--mg-gold-4, #b8912b);
  background: rgba(var(--mg-gold-2-rgb, 212, 175, 55), 0.2);
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 2px;
  line-height: 1.2;
}

.mg-drawer-app-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mg-ink, #212529) !important;
  line-height: 1.2;
}

.mg-drawer-app-tile-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(var(--mg-gold-2-rgb, 212, 175, 55), 0.18);
  color: var(--mg-gold-1, #a8802a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  margin-left: 10px;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.mg-drawer-app-tile:hover .mg-drawer-app-tile-arrow,
.mg-drawer-app-tile:active .mg-drawer-app-tile-arrow {
  transform: translateX(3px);
  background: var(--mg-gold-2, #d4af37);
  color: #ffffff;
}

/* Guard: Mobile drawer tile hidden on desktop screens */
@media (min-width: 992px) {
  .mg-drawer-app-tile-wrap {
    display: none !important;
  }
}



/* =========================================================
   SHOP BY GENDER SECTION
   File: shop-by-gender.css
   - Saari styling .sbg ke andar scoped hai, app ki baaki
     styling par koi asar nahi.
   - Gold colour app ke --mg-gold-2 / --mg-gold-2-rgb variables
     se aata hai, isliye ?vendor= theme switch par ye section
     bhi badal jata hai. Variable na mile to fallback lagta hai.
   - Is file ko theme-style.css ke BAAD load karna hai.
   ========================================================= */

/* ---------- Section ke colours ---------- */
.sbg {
  --sbg-gold: var(--mg-gold-2, #D4AF37);
  /* main gold */
  --sbg-gold-rgb: var(--mg-gold-2-rgb, 212, 175, 55);
  /* halke border/glow ke liye */
  --sbg-navy: #1B2A41;
  /* heading/text (app ke navy variable se replace kar sakte hain) */
  --sbg-muted: #6B7280;
  /* subtitle grey */
  --sbg-ivory: #FBF7EF;
  /* card background */

  padding: 30px 16px 8px;
  font-family: "Poppins", sans-serif;
  color: var(--sbg-navy);
}

.sbg *,
.sbg *::before,
.sbg *::after {
  box-sizing: border-box;
}

/* ---------- Heading ---------- */
.sbg__head {
  text-align: center;
}

.sbg__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--sbg-navy);
}

.sbg__sub {
  margin: 6px auto 0;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sbg-muted);
}

/* ---------- Gold design line ---------- */
.sbg__flourish {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 260px;
  margin: 16px auto 20px;
}

.sbg__flourish span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sbg-gold));
}

.sbg__flourish span:last-child {
  background: linear-gradient(90deg, var(--sbg-gold), transparent);
}

.sbg__flourish svg {
  width: 56px;
  height: 14px;
  fill: none;
  stroke: var(--sbg-gold);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* ---------- Grid: mobile par Men + Kids upar, Women neeche full width ---------- */
.sbg__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sbg-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(var(--sbg-gold-rgb), .35);
  border-radius: 10px;
  overflow: hidden;
  background: var(--sbg-ivory);
  color: inherit;
  text-decoration: none;
  transition: border-color .25s, box-shadow .25s;
}

.sbg-card:hover {
  border-color: var(--sbg-gold);
  box-shadow: 0 6px 18px rgba(var(--sbg-gold-rgb), .18);
}

.sbg-card:focus-visible {
  outline: 2px solid var(--sbg-gold);
  outline-offset: 2px;
}

.sbg-card--wide {
  grid-column: 1 / -1;
}

/* ---------- Card image ---------- */
.sbg-card__img {
  aspect-ratio: 6 / 7;
  overflow: hidden;
  background: rgba(var(--sbg-gold-rgb), .12);
  border-bottom: 2px solid var(--sbg-gold);
}

.sbg-card--wide .sbg-card__img {
  aspect-ratio: 16 / 9;
}

.sbg-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.sbg-card:hover .sbg-card__img img {
  transform: scale(1.04);
}

/* Image load fail hone par (class JS lagata hai) */
.sbg-card__img img.sbg-img-fallback {
  visibility: hidden;
}

/* ---------- Card footer: naam + Explore ---------- */
.sbg-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 14px 16px 18px;
}

.sbg-card__name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--sbg-navy);
}

.sbg-card__link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}

.sbg-card__link svg {
  width: 22px;
  height: 22px;
  padding: 5px;
  border-radius: 50%;
  background: var(--sbg-gold);
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Chhota phone (<360px) ---------- */
@media (max-width: 359px) {
  .sbg-card__foot {
    padding: 12px 10px 14px 12px;
  }

  .sbg-card__name {
    font-size: 21px;
  }

  .sbg-card__link {
    font-size: 12px;
  }
}

/* ---------- Tablet / Desktop (>=768px): teeno cards ek line mein ---------- */
@media (min-width: 768px) {
  .sbg {
    padding: 56px 24px;
    max-width: 1100px;
    margin: 0 auto;
  }

  .sbg__title {
    font-size: 42px;
  }

  .sbg__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }

  .sbg-card--wide {
    grid-column: auto;
  }

  .sbg-card--wide .sbg-card__img {
    aspect-ratio: 6 / 7;
  }
}

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

  .sbg-card,
  .sbg-card__img img {
    transition: none;
  }
}



/* =========================================================
   GIFTING SECTION — MG theme
   File: gifting.css
   - Saari styling .gft ke andar scoped hai.
   - Gold colour --mg-gold-2 / --mg-gold-2-rgb se aata hai
     (vendor theme switch par apne aap badlega).
   - theme-style.css ke BAAD load karein.
   ========================================================= */

/* ---------- Section ke colours ---------- */
.gft {
  --gft-gold: var(--mg-gold-2, #D4AF37);
  --gft-gold-rgb: var(--mg-gold-2-rgb, 212, 175, 55);
  --gft-navy: #1B2A41;
  --gft-muted: #6B7280;
  --gft-ivory: #FBF7EF;
  --gft-dot: #E2DCCF;

  padding: 30px 0 8px;
  font-family: "Poppins", sans-serif;
  color: var(--gft-navy);
  overflow: hidden;
}

.gft *,
.gft *::before,
.gft *::after {
  box-sizing: border-box;
}

/* ---------- Heading ---------- */
.gft__head {
  text-align: center;
  padding: 0 16px;
}

.gft__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--gft-navy);
}

.gft__sub {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--gft-muted);
}

/* ---------- Gold design line ---------- */
.gft__flourish {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 260px;
  margin: 16px auto 20px;
}

.gft__flourish span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gft-gold));
}

.gft__flourish span:last-child {
  background: linear-gradient(90deg, var(--gft-gold), transparent);
}

.gft__flourish svg {
  width: 56px;
  height: 14px;
  fill: none;
  stroke: var(--gft-gold);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* ---------- Slider track ----------
   Mobile: ek card ~88% width, agla card side se thoda dikhta hai */
.gft__track {
  position: relative;
  /* JS card position isi ke hisaab se nikalta hai */
  display: flex;
  gap: 12px;
  padding: 0 16px 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Firefox: scrollbar chhupao */
}

.gft__track::-webkit-scrollbar {
  display: none;
}

/* Chrome/Safari */

/* ---------- Card ---------- */
.gft-card {
  flex: 0 0 88%;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  border: 1px solid rgba(var(--gft-gold-rgb), .35);
  border-radius: 10px;
  overflow: hidden;
  background: var(--gft-ivory);
  color: inherit;
  text-decoration: none;
  transition: border-color .25s, box-shadow .25s;
}

.gft-card:hover {
  border-color: var(--gft-gold);
  box-shadow: 0 6px 18px rgba(var(--gft-gold-rgb), .18);
}

.gft-card:focus-visible {
  outline: 2px solid var(--gft-gold);
  outline-offset: 2px;
}

/* Image */
.gft-card__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(var(--gft-gold-rgb), .12);
  border-bottom: 2px solid var(--gft-gold);
}

.gft-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.gft-card:hover .gft-card__img img {
  transform: scale(1.04);
}

.gft-card__img img.gft-img-fallback {
  visibility: hidden;
}

/* image fail ho to */

/* Footer: naam + Explore */
.gft-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 18px 20px;
}

.gft-card__name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--gft-navy);
}

.gft-card__link {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 13px;
  font-weight: 500;
}

.gft-card__link svg {
  width: 22px;
  height: 22px;
  padding: 5px;
  border-radius: 50%;
  background: var(--gft-gold);
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Dots ---------- */
.gft__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.gft__dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: var(--gft-dot);
  cursor: pointer;
  transition: width .25s, background .25s;
}

.gft__dots button.is-active {
  width: 22px;
  background: var(--gft-gold);
}

/* ---------- Chhota phone ---------- */
@media (max-width: 359px) {
  .gft-card__foot {
    padding: 12px 12px 14px 14px;
  }

  .gft-card__name {
    font-size: 20px;
  }
}

/* ---------- Tablet: 2 cards ---------- */
@media (min-width: 768px) {
  .gft {
    padding: 56px 0 16px;
  }

  .gft__title {
    font-size: 42px;
  }

  .gft__track {
    gap: 20px;
    padding: 0 24px 6px;
    scroll-padding: 0 24px;
  }

  .gft-card {
    flex-basis: calc(50% - 10px);
  }
}

/* ---------- Desktop: 3 cards ---------- */
@media (min-width: 1100px) {
  .gft {
    max-width: 1200px;
    margin: 0 auto;
  }

  .gft-card {
    flex-basis: calc(33.333% - 14px);
  }
}

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

  .gft-card,
  .gft-card__img img,
  .gft__dots button {
    transition: none;
  }
}


/* =========================================================
   PROMO BANNERS — MG theme  (Ring Size + Silver Idols)
   File: promo-banners.css
   - Saari styling .mgpb ke andar scoped hai.
   - Gold colour --mg-gold-2 / --mg-gold-2-rgb se aata hai.
   ========================================================= */
.mgpb {
  --mgpb-gold: var(--mg-gold-2, #D4AF37);
  --mgpb-gold-rgb: var(--mg-gold-2-rgb, 212, 175, 55);
  --mgpb-gold-light: #F1DE9C;
  --mgpb-navy: #1B2A41;
  --mgpb-navy-deep: #111C2E;
  --mgpb-ivory: #FBF7EF;

  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 0;
  font-family: "Poppins", sans-serif;
}

.mgpb *,
.mgpb *::before,
.mgpb *::after {
  box-sizing: border-box;
}

.mgpb img {
  display: block;
}

.mgpb img.mgpb-img-fallback {
  visibility: hidden;
}

/* image fail ho to */

/* ---------- Common button ---------- */
.mgpb-btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: transform .2s, box-shadow .2s, background .2s;
}

.mgpb-btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.mgpb-btn:focus-visible {
  outline: 2px solid var(--mgpb-gold);
  outline-offset: 3px;
}

.mgpb-btn--navy {
  background: var(--mgpb-navy);
  color: #fff;
}

.mgpb-btn--navy:hover {
  color: #fff;
  box-shadow: 0 6px 14px rgba(27, 42, 65, .25);
}

.mgpb-btn--gold {
  background: var(--mgpb-gold);
  color: var(--mgpb-navy-deep);
  font-weight: 600;
  letter-spacing: 3px;
  padding: 13px 40px;
}

.mgpb-btn--gold:hover {
  color: var(--mgpb-navy-deep);
  box-shadow: 0 6px 18px rgba(var(--mgpb-gold-rgb), .35);
}

/* =========================================================
   BANNER 1: Ring size
   ========================================================= */
.mgpb-ring {
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
  min-height: 210px;
  overflow: hidden;
  /* marble jaisa halka background */
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, .9), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(var(--mgpb-gold-rgb), .12), transparent 60%),
    linear-gradient(135deg, #F4EEE6 0%, #ECE3D7 50%, #F6F1EA 100%);
}

.mgpb-ring__img {
  height: 100%;
  min-height: 210px;
}

.mgpb-ring__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  /* image ko background mein ghulata hai */
}

.mgpb-ring__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 12px;
}

.mgpb-ring__mark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 54px;
  font-weight: 700;
  line-height: .9;
  letter-spacing: 2px;
  color: var(--mgpb-gold);
}

.mgpb-ring__brand {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--mgpb-navy);
  margin: 4px 0 16px;
}

.mgpb-ring .mgpb-btn {
  font-size: 12px;
  padding: 10px 14px;
  letter-spacing: 1px;
}

/* =========================================================
   BANNER 2: Silver idols
   ========================================================= */
.mgpb-silver {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px 32px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, .08), transparent 60%),
    linear-gradient(180deg, var(--mgpb-navy) 0%, var(--mgpb-navy-deep) 100%);
}

.mgpb-silver__eyebrow {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mgpb-gold-light);
  opacity: .85;
}

.mgpb-silver__title {
  margin: 22px 0 0;
  max-width: 14ch;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

.mgpb-silver__sub {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .8);
}

/* Podium stage */
.mgpb-silver__stage {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 260px;
  margin: 18px 0 22px;
}

.mgpb-podium {
  position: absolute;
  bottom: 0;
  border-radius: 50% 50% 0 0 / 22px 22px 0 0;
  /* upar gol, cylinder jaisa */
  background: linear-gradient(90deg, #22344F 0%, #2C4263 45%, #1A2940 100%);
  box-shadow: inset 0 10px 0 rgba(255, 255, 255, .06);
}

.mgpb-podium--left {
  left: -6%;
  width: 34%;
  height: 58%;
}

.mgpb-podium--right {
  right: -6%;
  width: 34%;
  height: 70%;
}

.mgpb-podium--center {
  left: 18%;
  width: 64%;
  height: 30%;
  z-index: 2;
  background: linear-gradient(90deg, #26395A 0%, #33507A 45%, #1D2D47 100%);
  border-top: 2px solid rgba(var(--mgpb-gold-rgb), .55);
  /* gold kinara */
}

/* Idol image: arch frame mein, centre podium par */
.mgpb-silver__frame {
  position: absolute;
  left: 50%;
  bottom: 24%;
  z-index: 1;
  width: 48%;
  aspect-ratio: 3 / 4;
  transform: translateX(-50%);
  border-radius: 999px 999px 8px 8px;
  overflow: hidden;
  border: 2px solid rgba(var(--mgpb-gold-rgb), .7);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 40px rgba(var(--mgpb-gold-rgb), .2);
}

.mgpb-silver__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.4) contrast(1.05) brightness(1.05);
  /* silver feel */
}

/* ---------- Chhota phone ---------- */
@media (max-width: 359px) {
  .mgpb-ring__mark {
    font-size: 44px;
  }

  .mgpb-ring__brand {
    font-size: 18px;
    letter-spacing: 3px;
  }

  .mgpb-silver__title {
    font-size: 30px;
  }
}

/* ---------- Tablet / Desktop: dono banner side by side ---------- */
@media (min-width: 992px) {
  .mgpb {
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px;
  }

  .mgpb-ring,
  .mgpb-silver {
    flex: 1;
    border-radius: 12px;
  }

  .mgpb-ring {
    min-height: 100%;
  }

  .mgpb-ring__mark {
    font-size: 72px;
  }

  .mgpb-ring__brand {
    font-size: 26px;
  }

  .mgpb-silver__title {
    font-size: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mgpb-btn {
    transition: none;
  }
}



/* ===== Shop by Gender: naam image ke andar, Explore hataya ===== */

/* Card ko overlay ke liye taiyar karo */
.sbg .sbg-card {
  position: relative;
}

/* Image ke neeche wali gold line hatao */
.sbg .sbg-card__img {
  border-bottom: 0;
}

/* Naam wala hissa image ke upar, neeche ki taraf */
.sbg .sbg-card__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 16px 14px;
  justify-content: flex-start;
  /* neeche halka kaala shade, taaki white naam saaf padhe */
  background: linear-gradient(to top, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .25) 60%, transparent 100%);
}

/* Naam white mein */
.sbg .sbg-card__name {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}

/* Explore hatao */
.sbg .sbg-card__link {
  display: none;
}



/* ===== Earrings Section (Stunning Every Ear) START ===== */
.mge {
  --mge-gold: var(--mg-gold-2, #D4AF37);
  --mge-gold-rgb: var(--mg-gold-2-rgb, 212, 175, 55);
  --mge-navy: #1B2A41;
  --mge-muted: #6B7280;
  padding: 30px 0 16px;
  font-family: "Poppins", sans-serif;
  color: var(--mge-navy);
  overflow: hidden;
}

.mge *,
.mge *::before,
.mge *::after {
  box-sizing: border-box;
}

/* ---------- Heading ---------- */
.mge__head {
  text-align: center;
  padding: 0 16px;
}

.mge__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--mge-navy);
}

.mge__sub {
  margin: 6px auto 0;
  max-width: 32ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mge-muted);
}

.mge__flourish {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 260px;
  margin: 16px auto 20px;
}

.mge__flourish span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mge-gold));
}

.mge__flourish span:last-child {
  background: linear-gradient(90deg, var(--mge-gold), transparent);
}

.mge__flourish svg {
  width: 56px;
  height: 14px;
  fill: none;
  stroke: var(--mge-gold);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* ---------- Badi banner (fix) ---------- */
.mge-banner {
  position: relative;
  display: block;
  margin: 0 16px 12px;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
}

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

/* Right side halka ivory shade, taaki text saaf dikhe */
.mge-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 35%, rgba(251, 247, 239, .85) 75%);
}

.mge-banner__copy {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 6%;
  transform: translateY(-50%);
  width: 46%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.mge-banner__brand {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mge-gold);
}

.mge-banner__line {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--mge-navy);
}

.mge-banner__line em {
  font-size: 30px;
  font-weight: 700;
  color: var(--mge-gold);
}

.mge-banner__btn {
  margin-top: 6px;
  padding: 6px 10px;
  border: 1px solid var(--mge-gold);
  border-radius: 3px;
  background: rgba(255, 255, 255, .6);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mge-navy);
}

/* ---------- Neeche ke slide hone wale cards ----------
   2 card poore + teesre ka ~25% dikhe:
   card width = (screen - 2 gap) / 2.25  */
.mge-track {
  display: flex;
  gap: 10px;
  padding: 0 16px 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mge-track::-webkit-scrollbar {
  display: none;
}

.mge-card {
  position: relative;
  flex: 0 0 calc((100% - 20px) / 2.25);
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  scroll-snap-align: start;
  background: rgba(var(--mge-gold-rgb), .1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  text-decoration: none;
}

.mge-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.mge-card:hover img {
  transform: scale(1.04);
}

/* Naam image ke andar neeche */
.mge-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(251, 247, 239, .9) 0%, transparent 40%);
}

.mge-card__name {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 10px;
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--mge-navy);
}

/* ---------- Tablet / Desktop: 4 card + thoda agla ---------- */
@media (min-width: 768px) {
  .mge {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 0 24px;
  }

  .mge__title {
    font-size: 42px;
  }

  .mge-banner {
    margin: 0 24px 16px;
    aspect-ratio: 21 / 8;
  }

  .mge-banner__copy {
    width: 38%;
  }

  .mge-banner__brand {
    font-size: 16px;
  }

  .mge-banner__line {
    font-size: 34px;
  }

  .mge-banner__line em {
    font-size: 46px;
  }

  .mge-banner__btn {
    font-size: 12px;
    padding: 9px 16px;
  }

  .mge-track {
    gap: 16px;
    padding: 0 24px 6px;
    scroll-padding: 0 24px;
  }

  .mge-card {
    flex-basis: calc((100% - 64px) / 4.25);
  }
}

/* ===== Earrings Section END ===== */



/* ===== Dream List Banner START ===== */
.mgdl {
  --mgdl-maroon: #7B2329;
  --mgdl-maroon-light: #94393F;
  --mgdl-ink: #1E1A17;
  --mgdl-heart: #E0383E;
  --mgdl-like: #1F9D55;

  container-type: inline-size;
  /* andar ke size screen ke hisaab se */
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 0 32px;
  overflow: hidden;
  text-align: center;
  font-family: "Poppins", sans-serif;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, .45), transparent 60%),
    linear-gradient(180deg, #EADFCB 0%, #DCC7A5 55%, #CFB48C 100%);
}

.mgdl *,
.mgdl *::before,
.mgdl *::after {
  box-sizing: border-box;
}

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

/* ---------- Upar brand ---------- */
.mgdl__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5cqw;
}

.mgdl__tag {
  font-size: clamp(10px, 2.6cqw, 14px);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mgdl-ink);
}

.mgdl__logo {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(26px, 8cqw, 48px);
  font-weight: 700;
  line-height: 1;
  color: var(--mgdl-ink);
}

/* ---------- Beech ka stage ---------- */
.mgdl__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.78;
}

/* ---------- Review card ---------- */
.mgdl-review {
  position: absolute;
  z-index: 3;
  left: 17%;
  top: 2%;
  width: 36%;
  padding: 3.4cqw 3.4cqw 4.4cqw;
  border-radius: 4.5cqw;
  background: #fff;
  text-align: left;
  transform: rotate(-8deg);
  box-shadow: 0 3cqw 6cqw rgba(60, 40, 20, .18);
}

.mgdl-review__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2cqw;
}

.mgdl-review__avatar {
  width: 7cqw;
  height: 7cqw;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #A9C6F2;
  color: #1E2A44;
  font-size: 3.4cqw;
  font-weight: 600;
}

.mgdl-review__chat {
  width: 7cqw;
  height: 7cqw;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #F1EFEC;
}

.mgdl-review__chat svg {
  width: 60%;
  height: 60%;
  fill: none;
  stroke: #8A857F;
  stroke-width: 1.6;
}

.mgdl-review p {
  margin: 0;
  font-size: 2.55cqw;
  line-height: 1.45;
  color: var(--mgdl-ink);
}

/* ---------- Model photo card ---------- */
.mgdl-photo {
  position: absolute;
  z-index: 2;
  left: 48%;
  top: 15%;
  width: 32%;
  aspect-ratio: 3 / 4.3;
  border-radius: 4cqw;
  overflow: visible;
  transform: rotate(4deg);
  box-shadow: 0 4cqw 8cqw rgba(60, 40, 20, .25);
}

.mgdl-photo img {
  border-radius: 4cqw;
}

.mgdl-photo::after {
  /* upar dark shade, label ke liye */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4cqw;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, transparent 35%);
}

.mgdl-photo__label {
  position: absolute;
  z-index: 1;
  top: 6%;
  left: 9%;
  right: 6%;
  text-align: left;
  font-size: 2.7cqw;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
}

/* ---------- Maroon folder ---------- */
.mgdl-folder {
  position: absolute;
  z-index: 3;
  left: 33%;
  top: 53%;
  width: 31%;
  aspect-ratio: 1.15 / 1;
  filter: drop-shadow(0 3cqw 4cqw rgba(60, 20, 20, .3));
}

.mgdl-folder__back {
  position: absolute;
  inset: 10% 0 0 0;
  border-radius: 2.4cqw;
  background: var(--mgdl-maroon);
}

.mgdl-folder__back::before {
  /* folder ka tab */
  content: "";
  position: absolute;
  left: 0;
  top: -11%;
  width: 40%;
  height: 16%;
  border-radius: 2cqw 2cqw 0 0;
  background: var(--mgdl-maroon);
}

.mgdl-folder__card {
  position: absolute;
  overflow: hidden;
  border-radius: 2cqw;
  border: .6cqw solid #fff;
  box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, .2);
}

.mgdl-folder__card--1 {
  left: 8%;
  top: 16%;
  width: 46%;
  height: 46%;
  transform: rotate(-6deg);
  background: #E9DCC8;
}

.mgdl-folder__card--2 {
  left: 42%;
  top: 20%;
  width: 50%;
  height: 44%;
  transform: rotate(5deg);
  background: #B9CBB1;
}

.mgdl-folder__front {
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: 0;
  height: 58%;
  border-radius: 2.6cqw;
  background: linear-gradient(180deg, var(--mgdl-maroon-light) 0%, var(--mgdl-maroon) 100%);
  transform: perspective(60cqw) rotateX(-14deg);
  transform-origin: bottom;
}

/* ---------- Heart / like bubbles ---------- */
.mgdl-bub {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 1.5cqw 3cqw rgba(60, 40, 20, .18);
  animation: mgdlFloat 4s ease-in-out infinite;
}

.mgdl-bub svg {
  width: 55%;
  height: 55%;
}

.mgdl-bub--heart svg {
  fill: var(--mgdl-heart);
}

.mgdl-bub--like svg {
  fill: var(--mgdl-like);
}

.mgdl-bub--a {
  left: 6%;
  top: 17%;
  width: 10cqw;
  height: 10cqw;
  background: rgba(240, 236, 230, .9);
}

.mgdl-bub--b {
  left: 60%;
  top: 9%;
  width: 4.5cqw;
  height: 4.5cqw;
  animation-delay: -1s;
}

.mgdl-bub--c {
  right: 8%;
  top: 28%;
  width: 5cqw;
  height: 5cqw;
  animation-delay: -2s;
}

.mgdl-bub--d {
  left: 16%;
  top: 60%;
  width: 6cqw;
  height: 6cqw;
  animation-delay: -1.5s;
}

.mgdl-bub--e {
  right: 12%;
  top: 68%;
  width: 9.5cqw;
  height: 9.5cqw;
  animation-delay: -3s;
}

.mgdl-bub--onreview {
  right: -3cqw;
  bottom: -3cqw;
  width: 7cqw;
  height: 7cqw;
  animation-delay: -.5s;
}

.mgdl-bub--onphoto {
  left: 20%;
  bottom: -4cqw;
  width: 8cqw;
  height: 8cqw;
  animation-delay: -2.5s;
}

@keyframes mgdlFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1.4cqw);
  }
}

/* ---------- Text + button ---------- */
.mgdl__title {
  margin: 2cqw 4cqw 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(22px, 6.6cqw, 44px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--mgdl-maroon);
}

.mgdl__sub {
  margin: 1.6cqw 4cqw 0;
  font-size: clamp(14px, 4cqw, 24px);
  font-weight: 500;
  color: var(--mgdl-ink);
}

.mgdl__btn {
  display: inline-block;
  margin-top: 6cqw;
  padding: 12px 34px;
  background: #fff;
  color: var(--mgdl-ink);
  font-size: clamp(12px, 3.3cqw, 16px);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(60, 40, 20, .12);
  transition: background .25s, color .25s, transform .25s;
}

.mgdl__btn:hover {
  background: var(--mgdl-maroon);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .mgdl-bub {
    animation: none;
  }
}

/* ===== Dream List Banner END ===== */

/* ========================================================
   CUSTOMER PORTAL SIDEBAR GLOBAL THEME
   ======================================================== */
.customer-sidebar-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    padding: 16px 14px;
}

.sidebar-user-brief {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    background: linear-gradient(135deg, #fdfbf7 0%, #fbf5e6 100%);
    border-radius: 14px;
}

.sb-avatar-ring {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #d4af37;
    box-shadow: 0 3px 10px rgba(212, 175, 55, 0.25);
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.sb-user-info {
    overflow: hidden;
}

.sb-name {
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.sb-badge {
    font-size: 11px;
    font-weight: 600;
    color: #92400e;
    background: rgba(212, 175, 55, 0.18);
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
}

ul.dashboard-side-nav,
#dashboard_side {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

ul.dashboard-side-nav > li,
#dashboard_side > li {
    list-style: none !important;
    margin-bottom: 5px !important;
    padding: 0 !important;
}

ul.dashboard-side-nav > li > a,
#dashboard_side > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 11px 16px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    border: 1px solid transparent !important;
}

ul.dashboard-side-nav > li > a i,
#dashboard_side > li > a i {
    width: 22px !important;
    margin-right: 12px !important;
    font-size: 15px !important;
    color: #b45309 !important;
    text-align: center !important;
    transition: transform 0.2s ease !important;
}

ul.dashboard-side-nav > li > a:hover,
#dashboard_side > li > a:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0.05) 100%) !important;
    color: #92400e !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
    transform: translateX(4px) !important;
}

ul.dashboard-side-nav > li > a:hover i,
#dashboard_side > li > a:hover i {
    transform: scale(1.15) !important;
}

ul.dashboard-side-nav > li.active,
#dashboard_side > li.active,
ul.dashboard-side-nav > li.active:hover,
#dashboard_side > li.active:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

ul.dashboard-side-nav > li.active > a,
#dashboard_side > li.active > a {
    background: linear-gradient(135deg, #d4af37 0%, #b8912b 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35) !important;
    border: none !important;
    border-radius: 12px !important;
}

ul.dashboard-side-nav > li.active > a i,
#dashboard_side > li.active > a i {
    color: #ffffff !important;
}

ul.dashboard-side-nav > li a.logout-link,
#dashboard_side > li a.logout-link {
    color: #ef4444 !important;
}
ul.dashboard-side-nav > li a.logout-link i,
#dashboard_side > li a.logout-link i {
    color: #ef4444 !important;
}
ul.dashboard-side-nav > li a.logout-link:hover,
#dashboard_side > li a.logout-link:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: #b91c1c !important;
}

.sidebar-divider {
    height: 1px !important;
    background: rgba(212, 175, 55, 0.2) !important;
    margin: 8px 12px !important;
    list-style: none !important;
}

/* ================================================================
   FLY TO HEADER BADGE & ANIMATION STYLES
   ================================================================ */
@keyframes mgHeaderBadgePulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.6) rotate(-14deg); filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.85)); }
    60% { transform: scale(1.25) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes mgCartBadgePulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.6) rotate(-14deg); filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.9)); }
    60% { transform: scale(1.25) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.mg-heart-pulse-target {
    display: inline-block !important;
    animation: mgHeaderBadgePulse 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.mg-heart-pulse-target i,
.mg-heart-pulse-target .fa-heart {
    color: #ef4444 !important;
    text-shadow: 0 0 12px rgba(239, 68, 68, 0.85) !important;
}

.mg-heart-pulse-target #wishlist_count {
    background: #ef4444 !important;
    color: #ffffff !important;
    transform: scale(1.3) !important;
}

.mg-cart-pulse-target {
    display: inline-block !important;
    animation: mgCartBadgePulse 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.mg-cart-pulse-target i,
.mg-cart-pulse-target .fa-shopping-cart {
    color: #d4af37 !important;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.85) !important;
}

.mg-cart-pulse-target #kart_count {
    background: #d4af37 !important;
    color: #000000 !important;
    transform: scale(1.3) !important;
}