:root {
  --bg: #fffaf0;
  --surface: #fffdf8;
  --soft: #fff4d9;
  --gold: #b8872d;
  --gold2: #d8b45f;
  --gold3: #f7dc91;
  --bronze: #8a5f1b;
  --text: #4d3615;
  --muted: #7d653f;
  --border: rgba(184, 135, 45, 0.26);
  --shadow: 0 22px 60px rgba(176, 126, 35, 0.14);
  --radius: 28px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: Manrope, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(
      circle at top left,
      rgba(247, 220, 145, 0.55),
      transparent 24%
    ),
    linear-gradient(180deg, #fffefa, #fff6df 48%, #fffaf0);
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  max-width: 100%;
  display: block;
}
.container {
  width: min(1220px, calc(100% - 32px));
  margin: auto;
}
.section {
  padding: 25px 0;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 250, 240, 0.92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}
.nav {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.brand {
  font-weight: 900;
  letter-spacing: 0.08em;
  font-size: 1.1rem;
}
.brand small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav-links {
  display: flex;
  gap: 15px;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
  flex-wrap: wrap;
}
.cart-pill,
.btn.primary {
  background: linear-gradient(135deg, var(--gold), #e7c66e);
  color: #fff;
  border: 0;
}
.cart-pill {
  padding: 10px 15px;
  border-radius: 999px;
  font-weight: 900;
}
.hero-banner {
  margin-top: 28px;
  border-radius: 34px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  background: #fff;
}
.hero-copy {
  text-align: center;
  padding: 42px 0 20px;
}
.eyebrow {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff7e6;
  color: var(--bronze);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.7rem, 6vw, 5.4rem);
  line-height: 0.92;
  margin: 18px 0px 14px;
  max-width: 920px;
}
.section-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 1;
  margin: 0 0 14px;
}
.lede {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 760px;
}
#foot{
      left: 154%;
    position: relative;
}

#userProfileBox{
    line-height:27px;
}
.btn-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 12px 20px;
  cursor: pointer;
  background: #fff8e8;
  color: var(--text);
  font-weight: 900;
  transition: 0.2s;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.split-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
.product-grid,
.grid-3,
.grid-4 {
  display: grid;
  gap: 22px;
}
.product-grid,
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.product-card,
.soft-card,
.testimonial,
.login-card,
.admin-card,
.policy-card,
.blog-card {
  background: rgba(255, 253, 248, 0.96);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.product-media {
  aspect-ratio: 1.04/1;
  background: linear-gradient(135deg, #fff8e6, #f4d78b);
  overflow: hidden;
}
.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-body,
.soft-card,
.testimonial,
.login-card,
.admin-card,
.policy-card,
.blog-card {
  padding: 22px;
}
.badge-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.badge {
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff1c5;
  border: 1px solid var(--border);
  font-size: 12px;
  color: #8a641a;
  font-weight: 900;
}
h3 {
  margin: 0 0 10px;
  font-size: 1.15rem;
}
.muted {
  color: var(--muted);
}
.pack {
  color: var(--bronze);
  background: #fff6df;
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 800;
}
.price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.price strong {
  font-size: 1.35rem;
  color: var(--gold);
}
.ingredient-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.ingredient-pill-list span {
  background: #fff7e6;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 12px;
  color: var(--bronze);
  font-weight: 800;
  font-size: 0.9rem;
}
.footer {
  padding: 34px 0 48px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  text-align: center;
}
.luxury-cta-shell {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 58px 28px;
  border: 1px solid rgba(184, 135, 45, 0.3);
  border-radius: 38px;
  background:
    radial-gradient(
      circle at 16% 18%,
      rgba(247, 220, 145, 0.52),
      transparent 24%
    ),
    linear-gradient(135deg, #fffdf8 0%, #fff5d8 48%, #fffaf0 100%);
  box-shadow: 0 28px 70px rgba(176, 126, 35, 0.18);
}
.cta-highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 760px;
  margin: 28px auto 6px;
}
.cta-highlight-grid div {
  background: rgba(255, 253, 248, 0.82);
  border: 1px solid rgba(184, 135, 45, 0.24);
  border-radius: 22px;
  padding: 18px 12px;
}
.cta-highlight-grid strong {
  display: block;
  font-size: 2rem;
  color: var(--gold);
  line-height: 1;
}
.product-detail {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 32px;
  align-items: start;
}
.product-detail-img {
  background: linear-gradient(135deg, #fff7df, #f5dd9d);
  border: 1px solid var(--border);
  border-radius: 32px;
  padding: 18px;
  box-shadow: var(--shadow);
}
.meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0;
}
.detail-block {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(255, 248, 232, 0.78);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.field {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff9ea;
  padding: 12px 14px;
  color: var(--text);
}
textarea.field {
  min-height: 110px;
}
.table-wrap {
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  background: #fffdf8;
  border-radius: 18px;
  overflow: hidden;
}
th,
td {
  border-bottom: 1px solid var(--border);
  padding: 12px;
  text-align: left;
  vertical-align: top;
}
th {
  background: #fff3cf;
  color: var(--bronze);
}
.mobile-menu {
  display: none;
}
.notice {
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff1c5;
  border: 1px solid var(--border);
  color: var(--bronze);
  font-weight: 800;
}
.hidden {
  display: none !important;
}
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.highlight-men {
  outline: 2px solid rgba(184, 135, 45, 0.35);
}
@media (max-width: 980px) {
  .product-grid,
  .grid-3,
  .grid-4,
  .form-grid,
  .product-detail,
  .meta-grid,
  .cta-highlight-grid {
    grid-template-columns: 1fr;
  }
  .nav-links {
    display: none;
  }
  .mobile-menu {
    display: inline-flex;
  }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: #fffaf0;
    padding: 18px;
    justify-content: center;
    border-bottom: 1px solid var(--border);
  }
}
@media (max-width: 680px) {
  .section {
    padding: 54px 0;
  }
  .split-head {
    display: block;
  }
}

/* Expanded premium home page */
.premium-hero-copy {
  padding-bottom: 42px;
}
.home-intro-section {
  padding-top: 34px;
}
.intro-luxury-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.75fr 0.75fr;
  gap: 22px;
}
.intro-card-large {
  background: linear-gradient(135deg, #fffdf8, #fff3cf);
}
.concern-card {
  display: block;
  transition: 0.2s;
}
.concern-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.concern-card span {
  font-size: 2rem;
  display: inline-block;
  margin-bottom: 10px;
}
.men-feature-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  background: linear-gradient(135deg, #fffdf8, #fff0c7 58%, #fffaf0);
  border: 1px solid var(--border);
  border-radius: 38px;
  padding: 34px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.men-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.men-mini-grid img {
  border-radius: 28px;
  border: 1px solid var(--border);
  background: #fff8e8;
  box-shadow: 0 18px 44px rgba(176, 126, 35, 0.14);
}
.ingredient-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}
.ingredient-showcase div {
  background: #fffdf8;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 22px;
  box-shadow: var(--shadow);
}
.ingredient-showcase strong {
  display: block;
  color: var(--bronze);
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.ingredient-showcase span {
  display: block;
  color: var(--muted);
  font-weight: 700;
}
.process-card span {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  color: #fff;
  font-weight: 900;
  margin-bottom: 14px;
}
.comparison-table {
  margin-top: 24px;
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.section-heading-visible {
  background: linear-gradient(135deg, #fff1c5, #fffdf8);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 26px;
  margin-bottom: 24px;
  text-align: center;
}
@media (max-width: 980px) {
  .intro-luxury-grid,
  .men-feature-shell,
  .ingredient-showcase {
    grid-template-columns: 1fr;
  }
  .men-mini-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 680px) {
  .men-mini-grid {
    grid-template-columns: 1fr;
  }
  .premium-hero-copy {
    padding-bottom: 24px;
  }
}

/* Premium Founder Page */
.founder-hero-section {
  position: relative;
  padding: 90px 0 78px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 8% 16%,
      rgba(247, 220, 145, 0.65),
      transparent 24%
    ),
    radial-gradient(
      circle at 88% 20%,
      rgba(184, 135, 45, 0.22),
      transparent 28%
    ),
    linear-gradient(135deg, #fffdf8 0%, #fff1c5 52%, #fffaf0 100%);
  border-bottom: 1px solid var(--border);
}
.founder-hero-section:before {
  content: "";
  position: absolute;
  inset: 34px;
  border: 1px solid rgba(184, 135, 45, 0.18);
  border-radius: 44px;
  pointer-events: none;
}
.founder-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 44px;
  align-items: center;
}
.founder-hero-lede {
  font-size: 1.16rem;
  color: var(--muted);
  max-width: 650px;
  line-height: 1.75;
  margin: 0;
}
.founder-btn-row {
  justify-content: flex-start;
}
.founder-profile-card {
  position: relative;
  background: rgba(255, 253, 248, 0.84);
  border: 1px solid rgba(184, 135, 45, 0.32);
  border-radius: 42px;
  padding: 30px;
  box-shadow: 0 30px 80px rgba(138, 95, 27, 0.18);
  overflow: hidden;
}
.founder-profile-card:before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  right: -80px;
  top: -80px;
  background: radial-gradient(
    circle,
    rgba(216, 180, 95, 0.44),
    transparent 65%
  );
}
.founder-photo-placeholder {
  position: relative;
  min-height: 360px;
  border-radius: 34px;
  background: linear-gradient(145deg, #7a4b13 0%, #b8872d 45%, #f7dc91 100%);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.founder-photo-placeholder:before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 28px;
}
.founder-photo-placeholder span {
  position: relative;
  font-family: "Cormorant Garamond", serif;
  font-size: 6rem;
  font-weight: 700;
  color: #fff8e8;
  text-shadow: 0 10px 30px rgba(77, 54, 21, 0.28);
}
.founder-profile-content {
  position: relative;
  text-align: center;
  padding: 24px 10px 6px;
}
.founder-profile-content h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.5rem;
  line-height: 1;
  margin: 8px 0 6px;
}
.founder-profile-content p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}
.mini-eyebrow {
  font-size: 10px;
  padding: 7px 12px;
}
.founder-signature {
  margin: 18px auto 0;
  display: inline-flex;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff1c5;
  border: 1px solid var(--border);
  color: var(--bronze);
  font-weight: 900;
}
.founder-story-section {
  background: linear-gradient(180deg, #fffaf0, #fff7e6);
}
.founder-story-layout {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 28px;
  align-items: start;
}
.founder-side-panel,
.founder-story-card,
.timeline-card,
.value-card {
  background: rgba(255, 253, 248, 0.94);
  border: 1px solid var(--border);
  border-radius: 32px;
  box-shadow: var(--shadow);
}
.founder-side-panel {
  position: sticky;
  top: 104px;
  padding: 28px;
  background: linear-gradient(145deg, #fffdf8, #fff1c5);
}
.founder-side-panel h2,
.founder-story-card h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.5rem;
  line-height: 1;
  margin: 14px 0;
}
.founder-side-panel p,
.founder-story-card p {
  color: var(--muted);
  line-height: 1.82;
}
.meaning-badge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}
.meaning-badge-grid span {
  padding: 12px;
  border-radius: 16px;
  background: #fff8e8;
  border: 1px solid rgba(184, 135, 45, 0.24);
  font-weight: 900;
  color: var(--bronze);
  text-align: center;
}
.founder-story-card {
  padding: 38px;
}
.story-highlight {
  font-size: 1.12rem;
  background: linear-gradient(135deg, #fff3cf, #fffdf8);
  border-left: 5px solid var(--gold);
  border-radius: 0 22px 22px 0;
  padding: 20px;
  margin: 22px 0;
}
.founder-question-box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  margin: 28px 0;
  padding: 26px;
  border-radius: 28px;
  background: linear-gradient(135deg, #8a5f1b, #c49335);
  color: #fff;
  box-shadow: 0 22px 54px rgba(138, 95, 27, 0.22);
}
.founder-question-box span {
  font-family: "Cormorant Garamond", serif;
  font-size: 5rem;
  line-height: 0.8;
  color: #fff4d9;
}
.founder-question-box p {
  margin: 0;
  color: #fff;
  font-family: "Cormorant Garamond", serif;
  font-size: 2rem;
  line-height: 1.1;
}
.founder-timeline-section {
  background:
    radial-gradient(
      circle at top right,
      rgba(247, 220, 145, 0.42),
      transparent 30%
    ),
    #fffaf0;
}
.founder-timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.timeline-card {
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.timeline-card:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--gold), var(--gold3));
}
.timeline-card span {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  color: #fff;
  font-weight: 900;
  margin-bottom: 18px;
}
.timeline-card p,
.value-card p {
  color: var(--muted);
  line-height: 1.65;
}
.founder-quote-section {
  padding-top: 46px;
  padding-bottom: 46px;
}
.founder-quote-shell {
  position: relative;
  text-align: center;
  max-width: 980px;
  padding: 56px 42px;
  border-radius: 42px;
  background: linear-gradient(135deg, #4d3615, #8a5f1b 55%, #b8872d);
  color: #fff;
  box-shadow: 0 34px 90px rgba(77, 54, 21, 0.28);
  overflow: hidden;
}
.founder-quote-shell:before {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(247, 220, 145, 0.18);
}
.quote-mark {
  font-family: "Cormorant Garamond", serif;
  font-size: 7rem;
  line-height: 0.6;
  color: #f7dc91;
}
.founder-quote-shell p {
  position: relative;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.22;
  margin: 8px auto 26px;
  max-width: 820px;
}
.founder-quote-shell h3 {
  font-size: 1.25rem;
  margin-bottom: 4px;
}
.founder-quote-shell span {
  color: #fff4d9;
  font-weight: 800;
}
.founder-values-section {
  background: #fff7e6;
}
.founder-value-grid .value-card {
  padding: 26px;
  text-align: center;
  transition: 0.2s;
}
.founder-value-grid .value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 70px rgba(176, 126, 35, 0.22);
}
.value-card span {
  font-size: 2.4rem;
  display: inline-grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #fff1c5;
  margin-bottom: 16px;
}
.founder-final-cta {
  background:
    radial-gradient(
      circle at 16% 18%,
      rgba(247, 220, 145, 0.7),
      transparent 24%
    ),
    linear-gradient(135deg, #fffdf8 0%, #fff0c7 48%, #fffaf0 100%);
}
@media (max-width: 980px) {
  .founder-hero-grid,
  .founder-story-layout,
  .founder-timeline-grid {
    grid-template-columns: 1fr;
  }
  .founder-side-panel {
    position: relative;
    top: auto;
  }
  .founder-btn-row {
    justify-content: center;
  }
  .founder-hero-content {
    text-align: center;
  }
  .founder-hero-lede {
    margin: auto;
  }
  .founder-photo-placeholder {
    min-height: 300px;
  }
  .founder-hero-section:before {
    inset: 16px;
  }
}
@media (max-width: 680px) {
  .founder-hero-section {
    padding: 64px 0 54px;
  }
  .founder-profile-card,
  .founder-story-card,
  .founder-side-panel {
    border-radius: 26px;
    padding: 22px;
  }
  .founder-photo-placeholder {
    min-height: 230px;
    border-radius: 24px;
  }
  .founder-photo-placeholder span {
    font-size: 4.5rem;
  }
  .founder-question-box {
    grid-template-columns: 1fr;
  }
  .founder-question-box p {
    font-size: 1.55rem;
  }
  .founder-quote-shell {
    padding: 42px 24px;
    border-radius: 30px;
  }
  .meaning-badge-grid {
    grid-template-columns: 1fr;
  }
  .founder-profile-content h2,
  .founder-side-panel h2,
  .founder-story-card h2 {
    font-size: 2rem;
  }
}

/* Premium Product Collection + Product Detail Redesign */
.product-collection-hero {
  position: relative;
  overflow: hidden;
  padding: 86px 0 72px;
  background:
    radial-gradient(
      circle at 8% 18%,
      rgba(156, 190, 120, 0.28),
      transparent 24%
    ),
    radial-gradient(
      circle at 84% 18%,
      rgba(237, 142, 133, 0.22),
      transparent 28%
    ),
    linear-gradient(135deg, #fffdf8 0%, #fff1c5 45%, #fff7e6 100%);
  border-bottom: 1px solid var(--border);
}
.collection-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 42px;
  align-items: center;
}
.collection-lede {
  margin-left: 0;
  line-height: 1.75;
}
.collection-btn-row {
  justify-content: flex-start;
}
.collection-hero-card {
  position: relative;
  background: rgba(255, 253, 248, 0.88);
  border: 1px solid rgba(184, 135, 45, 0.3);
  border-radius: 42px;
  padding: 18px;
  box-shadow: 0 30px 80px rgba(138, 95, 27, 0.18);
  overflow: hidden;
}
.collection-hero-card img {
  border-radius: 32px;
  width: 100%;
  aspect-ratio: 1.1/1;
  object-fit: cover;
}
.hero-stat-grid {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.hero-stat-grid div {
  padding: 16px 10px;
  border-radius: 20px;
  background: rgba(255, 253, 248, 0.88);
  border: 1px solid rgba(184, 135, 45, 0.25);
  text-align: center;
  backdrop-filter: blur(14px);
}
.hero-stat-grid strong {
  display: block;
  font-size: 1.8rem;
  color: var(--gold);
  line-height: 1;
}
.hero-stat-grid span {
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--bronze);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.product-benefit-strip {
  padding-top: 42px;
  padding-bottom: 42px;
  background: #fff7e6;
}
.benefit-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.benefit-strip-grid div {
  background: rgba(255, 253, 248, 0.9);
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 22px;
  box-shadow: 0 18px 44px rgba(176, 126, 35, 0.1);
}
.benefit-strip-grid span {
  font-size: 2rem;
  display: block;
  margin-bottom: 10px;
}
.benefit-strip-grid strong {
  display: block;
  color: var(--text);
  margin-bottom: 8px;
}
.benefit-strip-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.premium-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.premium-product-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(184, 135, 45, 0.25);
  border-radius: 34px;
  background: #fffdf8;
  box-shadow: 0 22px 60px rgba(176, 126, 35, 0.14);
  transition: 0.25s;
}
.premium-product-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 30px 80px rgba(138, 95, 27, 0.2);
}
.product-image-wrap {
  position: relative;
  display: block;
  padding: 18px;
  background: linear-gradient(145deg, #fff8e8, #fff1c5);
  overflow: hidden;
}
.product-image-wrap:after {
  content: "";
  position: absolute;
  inset: auto -40px -70px -40px;
  height: 130px;
  background: rgba(255, 255, 255, 0.44);
  filter: blur(18px);
}
.product-image-wrap img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 26px;
  transition: 0.25s;
}
.premium-product-card:hover img {
  transform: scale(1.035);
}
.floating-label {
  position: absolute;
  z-index: 2;
  top: 28px;
  left: 28px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(77, 54, 21, 0.82);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.05em;
}
.premium-product-body {
  padding: 24px;
}
.premium-product-body h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.75rem;
  line-height: 1;
  margin-bottom: 8px;
}
.product-mini-points {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0 4px;
}
.product-mini-points span {
  font-size: 12px;
  font-weight: 900;
  color: var(--bronze);
  background: #fff7e6;
  border: 1px solid rgba(184, 135, 45, 0.2);
  border-radius: 999px;
  padding: 8px 10px;
}
.product-btn-row {
  justify-content: flex-start;
}
.product-theme-green .product-image-wrap,
.product-theme-green.product-detail-hero {
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(117, 162, 91, 0.34),
      transparent 30%
    ),
    linear-gradient(135deg, #f8fff0, #e9f7d9 50%, #fffaf0);
}
.product-theme-rose .product-image-wrap,
.product-theme-rose.product-detail-hero {
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(219, 104, 122, 0.24),
      transparent 30%
    ),
    linear-gradient(135deg, #fff6f7, #ffe4e8 52%, #fffaf0);
}
.product-theme-oat .product-image-wrap,
.product-theme-oat.product-detail-hero {
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(214, 179, 117, 0.3),
      transparent 30%
    ),
    linear-gradient(135deg, #fffdf8, #f6ead4 52%, #fffaf0);
}
.product-theme-saffron .product-image-wrap,
.product-theme-saffron.product-detail-hero {
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(239, 159, 46, 0.3),
      transparent 30%
    ),
    linear-gradient(135deg, #fff7dc, #ffe3a3 52%, #fffaf0);
}
.product-theme-coffee .product-image-wrap,
.product-theme-coffee.product-detail-hero {
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(111, 68, 38, 0.26),
      transparent 30%
    ),
    linear-gradient(135deg, #fff6ea, #d8b58c 52%, #fffaf0);
}
.product-theme-charcoal .product-image-wrap,
.product-theme-charcoal.product-detail-hero {
  background:
    radial-gradient(circle at 18% 18%, rgba(63, 63, 63, 0.22), transparent 30%),
    linear-gradient(135deg, #fffdf8, #d7d2c8 52%, #fffaf0);
}
.ritual-section {
  background:
    radial-gradient(
      circle at top right,
      rgba(247, 220, 145, 0.4),
      transparent 32%
    ),
    #fffaf0;
}
.ritual-shell {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 28px;
  align-items: center;
  background: rgba(255, 253, 248, 0.92);
  border: 1px solid var(--border);
  border-radius: 38px;
  padding: 34px;
  box-shadow: var(--shadow);
}
.ritual-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.ritual-steps div {
  background: #fff7e6;
  border: 1px solid rgba(184, 135, 45, 0.22);
  border-radius: 24px;
  padding: 18px;
}
.ritual-steps strong {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  color: #fff;
  margin-bottom: 14px;
}
.ritual-steps span {
  display: block;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 6px;
}
.ritual-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.product-detail-hero {
  padding: 78px 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.premium-detail-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 44px;
  align-items: center;
}
.premium-detail-image {
  position: relative;
  background: rgba(255, 253, 248, 0.75);
  border: 1px solid rgba(184, 135, 45, 0.28);
  border-radius: 42px;
  padding: 22px;
  box-shadow: 0 30px 80px rgba(138, 95, 27, 0.18);
}
.premium-detail-image img {
  width: 100%;
  border-radius: 32px;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.premium-detail-content .title {
  margin-left: 0;
}
.detail-price-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0;
}
.detail-price-row strong,
.detail-price-row span {
  padding: 13px 16px;
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.88);
  border: 1px solid rgba(184, 135, 45, 0.24);
  font-weight: 900;
  color: var(--bronze);
}
.detail-price-row strong {
  font-size: 1.5rem;
  color: var(--gold);
}
.quick-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.quick-trust-grid div {
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 253, 248, 0.82);
  border: 1px solid rgba(184, 135, 45, 0.22);
  font-weight: 900;
  color: var(--bronze);
}
.quick-trust-grid b {
  display: block;
  color: var(--text);
  margin-top: 6px;
}
.detail-info-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 24px;
  align-items: start;
}
.detail-story-card,
.premium-ingredients {
  background: rgba(255, 253, 248, 0.94);
  border: 1px solid var(--border);
  border-radius: 32px;
  padding: 30px;
  box-shadow: var(--shadow);
}
.detail-story-card p {
  color: var(--muted);
  line-height: 1.8;
}
.skin-badge {
  margin-top: 22px;
  padding: 15px 18px;
  border-radius: 18px;
  background: #fff1c5;
  border: 1px solid var(--border);
  color: var(--bronze);
  font-weight: 900;
}
.three-only {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) {
  .collection-hero-grid,
  .benefit-strip-grid,
  .premium-product-grid,
  .ritual-shell,
  .ritual-steps,
  .premium-detail-grid,
  .quick-trust-grid,
  .detail-info-grid,
  .three-only {
    grid-template-columns: 1fr;
  }
  .collection-btn-row {
    justify-content: center;
  }
  .collection-hero-grid {
    text-align: center;
  }
  .collection-lede {
    margin: auto;
  }
  .hero-stat-grid {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 14px;
  }
  .premium-detail-content {
    text-align: center;
  }
  .premium-detail-content .title {
    margin-left: auto;
  }
  .product-btn-row {
    justify-content: center;
  }
}
@media (max-width: 680px) {
  .product-collection-hero,
  .product-detail-hero {
    padding: 58px 0;
  }
  .premium-product-card,
  .collection-hero-card,
  .premium-detail-image,
  .ritual-shell {
    border-radius: 26px;
  }
  .premium-product-body,
  .ritual-shell,
  .detail-story-card,
  .premium-ingredients {
    padding: 22px;
  }
  .hero-stat-grid,
  .ritual-steps {
    grid-template-columns: 1fr;
  }
  .benefit-strip-grid div {
    padding: 18px;
  }
}

/* Premium About, Blog and FAQ Redesign */
.page-glow {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(
      circle at 8% 18%,
      rgba(247, 220, 145, 0.62),
      transparent 24%
    ),
    radial-gradient(
      circle at 88% 12%,
      rgba(156, 190, 120, 0.22),
      transparent 28%
    ),
    linear-gradient(135deg, #fffdf8 0%, #fff0c7 50%, #fffaf0 100%);
}
.about-premium-hero,
.faq-premium-hero,
.blog-premium-hero {
  padding: 86px 0 72px;
}
.about-hero-grid,
.blog-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 42px;
  align-items: center;
}
.about-orbit-card,
.journal-card {
  position: relative;
  background: rgba(255, 253, 248, 0.86);
  border: 1px solid rgba(184, 135, 45, 0.28);
  border-radius: 42px;
  padding: 22px;
  box-shadow: 0 30px 80px rgba(138, 95, 27, 0.18);
  overflow: hidden;
}
.about-orbit-card img {
  border-radius: 32px;
  width: 100%;
  aspect-ratio: 1.05/1;
  object-fit: cover;
}
.orbit-badge {
  position: absolute;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.9);
  border: 1px solid rgba(184, 135, 45, 0.25);
  font-weight: 900;
  color: var(--bronze);
  box-shadow: 0 12px 34px rgba(138, 95, 27, 0.14);
}
.orbit-one {
  top: 32px;
  left: 32px;
}
.orbit-two {
  right: 28px;
  top: 45%;
}
.orbit-three {
  left: 40px;
  bottom: 34px;
}
.brand-belief-section {
  background: #fff7e6;
}
.gradient-card {
  position: relative;
  overflow: hidden;
  transition: 0.25s;
}
.gradient-card:hover,
.premium-blog-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 30px 80px rgba(138, 95, 27, 0.2);
}
.gradient-card span {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-size: 2rem;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.66);
}
.gradient-card.green {
  background: linear-gradient(135deg, #f8fff0, #fffdf8);
}
.gradient-card.rose {
  background: linear-gradient(135deg, #fff0f2, #fffdf8);
}
.gradient-card.gold {
  background: linear-gradient(135deg, #fff1c5, #fffdf8);
}
.gradient-card.charcoal {
  background: linear-gradient(135deg, #f3f0e9, #fffdf8);
}
.story-river {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 34px;
  align-items: start;
}
.river-copy {
  position: sticky;
  top: 105px;
  background: rgba(255, 253, 248, 0.92);
  border: 1px solid var(--border);
  border-radius: 34px;
  padding: 32px;
  box-shadow: var(--shadow);
}
.river-copy p,
.featured-blog-card p,
.article-panel p {
  color: var(--muted);
  line-height: 1.8;
}
.river-timeline {
  display: grid;
  gap: 18px;
}
.river-timeline div {
  position: relative;
  background: rgba(255, 253, 248, 0.94);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 26px 26px 26px 90px;
  box-shadow: var(--shadow);
}
.river-timeline b {
  position: absolute;
  left: 24px;
  top: 24px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  color: #fff;
}
.about-stats-section {
  background:
    radial-gradient(
      circle at top right,
      rgba(247, 220, 145, 0.42),
      transparent 30%
    ),
    #fffaf0;
}
.stats-glass-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.stats-glass-grid div {
  background: rgba(255, 253, 248, 0.84);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 28px;
  text-align: center;
  box-shadow: var(--shadow);
}
.stats-glass-grid strong {
  display: block;
  font-size: 2.8rem;
  color: var(--gold);
  line-height: 1;
}
.stats-glass-grid span {
  font-weight: 900;
  color: var(--bronze);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
.why-shell {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 28px;
  align-items: center;
  background: linear-gradient(135deg, #fffdf8, #fff1c5);
  border: 1px solid var(--border);
  border-radius: 38px;
  padding: 36px;
  box-shadow: var(--shadow);
}
.why-list {
  display: grid;
  gap: 14px;
}
.why-list p {
  margin: 0;
  background: rgba(255, 253, 248, 0.78);
  border: 1px solid rgba(184, 135, 45, 0.22);
  border-radius: 20px;
  padding: 18px;
  color: var(--muted);
  line-height: 1.65;
}
.why-list b {
  color: var(--text);
}
.faq-hero-wrap {
  text-align: center;
}
.faq-search-card {
  margin: 26px auto 0;
  max-width: 760px;
  background: rgba(255, 253, 248, 0.84);
  border: 1px solid rgba(184, 135, 45, 0.28);
  border-radius: 999px;
  padding: 18px 24px;
  box-shadow: var(--shadow);
  font-weight: 900;
  color: var(--bronze);
}
.faq-tabs-section {
  padding: 34px 0;
  background: #fff7e6;
}
.faq-category-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.faq-category-grid a {
  display: block;
  text-align: center;
  background: rgba(255, 253, 248, 0.9);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 14px 16px;
  font-weight: 900;
  color: var(--bronze);
  box-shadow: 0 12px 30px rgba(176, 126, 35, 0.1);
}
.faq-layout {
  display: grid;
  grid-template-columns: 0.36fr 0.64fr;
  gap: 28px;
  align-items: start;
}
.faq-layout.reverse {
  grid-template-columns: 0.64fr 0.36fr;
}
.faq-layout.reverse .faq-side {
  order: 2;
}
.faq-side {
  position: sticky;
  top: 105px;
  border: 1px solid var(--border);
  border-radius: 34px;
  padding: 30px;
  background: linear-gradient(135deg, #fffdf8, #fff1c5);
  box-shadow: var(--shadow);
}
.faq-side.accent {
  background: linear-gradient(135deg, #fff5db, #fffdf8);
}
.faq-side.ingredient {
  background: linear-gradient(135deg, #f8fff0, #fffdf8);
}
.faq-side.skin {
  background: linear-gradient(135deg, #fff0f2, #fffdf8);
}
.faq-side.order {
  background: linear-gradient(135deg, #eef5ff, #fffdf8);
}
.faq-side h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.4rem;
  line-height: 1;
  margin: 14px 0;
}
.faq-side p {
  color: var(--muted);
  line-height: 1.7;
}
.faq-accordion {
  display: grid;
  gap: 14px;
}
.faq-accordion details {
  background: rgba(255, 253, 248, 0.94);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 0;
  box-shadow: 0 16px 42px rgba(176, 126, 35, 0.1);
  overflow: hidden;
}
.faq-accordion summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 24px;
  font-weight: 900;
  color: var(--text);
  position: relative;
}
.faq-accordion summary::-webkit-details-marker {
  display: none;
}
.faq-accordion summary:after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff1c5;
  color: var(--bronze);
}
.faq-accordion details[open] summary:after {
  content: "–";
}
.faq-accordion p {
  margin: 0;
  padding: 0 24px 22px;
  color: var(--muted);
  line-height: 1.75;
}
.blog-category-section {
  padding: 34px 0;
  background: #fff7e6;
}
.journal-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(
      circle at 20% 16%,
      rgba(255, 255, 255, 0.66),
      transparent 30%
    ),
    linear-gradient(135deg, #8a5f1b, #d8b45f 55%, #fff1c5);
  color: #fff;
}
.journal-card span {
  font-size: 4rem;
  line-height: 1;
}
.journal-card h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 3rem;
  line-height: 0.95;
  margin: 16px 0;
}
.journal-card p {
  color: #fff9e8;
  font-weight: 700;
  line-height: 1.7;
}
.blog-chip-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.blog-chip-row span {
  background: rgba(255, 253, 248, 0.9);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 900;
  color: var(--bronze);
  box-shadow: 0 12px 30px rgba(176, 126, 35, 0.1);
}
.featured-blog-card {
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: 30px;
  align-items: center;
  background: linear-gradient(135deg, #fffdf8, #fff1c5);
  border: 1px solid var(--border);
  border-radius: 40px;
  padding: 34px;
  box-shadow: var(--shadow);
}
.featured-blog-card img {
  border-radius: 32px;
  aspect-ratio: 1.05/1;
  object-fit: cover;
}
.premium-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.premium-blog-card {
  border: 1px solid rgba(184, 135, 45, 0.24);
  border-radius: 34px;
  padding: 26px;
  background: #fffdf8;
  box-shadow: var(--shadow);
  transition: 0.25s;
}
.premium-blog-card .blog-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 22px;
  font-size: 2rem;
  margin-bottom: 18px;
  background: #fff1c5;
}
.premium-blog-card h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.9rem;
  line-height: 1.05;
}
.premium-blog-card p {
  color: var(--muted);
  line-height: 1.7;
}
.premium-blog-card.green {
  background: linear-gradient(135deg, #f8fff0, #fffdf8);
}
.premium-blog-card.rose {
  background: linear-gradient(135deg, #fff0f2, #fffdf8);
}
.premium-blog-card.oat {
  background: linear-gradient(135deg, #fff7ec, #fffdf8);
}
.premium-blog-card.saffron {
  background: linear-gradient(135deg, #fff1c5, #fffdf8);
}
.premium-blog-card.coffee {
  background: linear-gradient(135deg, #f4e0c8, #fffdf8);
}
.premium-blog-card.charcoal {
  background: linear-gradient(135deg, #efede8, #fffdf8);
}
.blog-detail-section {
  background: #fff7e6;
}
.article-stack {
  display: grid;
  gap: 18px;
}
.article-panel {
  background: rgba(255, 253, 248, 0.94);
  border: 1px solid var(--border);
  border-radius: 32px;
  padding: 30px;
  box-shadow: var(--shadow);
}
.article-panel h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.3rem;
  line-height: 1;
  margin: 12px 0;
}
.newsletter-shell {
  text-align: center;
  background:
    radial-gradient(
      circle at 16% 18%,
      rgba(247, 220, 145, 0.55),
      transparent 24%
    ),
    linear-gradient(135deg, #fffdf8, #fff1c5);
  border: 1px solid var(--border);
  border-radius: 40px;
  padding: 46px 28px;
  box-shadow: var(--shadow);
}
.newsletter-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  max-width: 620px;
  margin: 26px auto 0;
}
@media (max-width: 980px) {
  .about-hero-grid,
  .blog-hero-grid,
  .story-river,
  .stats-glass-grid,
  .why-shell,
  .faq-layout,
  .faq-layout.reverse,
  .faq-category-grid,
  .featured-blog-card,
  .premium-blog-grid {
    grid-template-columns: 1fr;
  }
  .river-copy,
  .faq-side {
    position: relative;
    top: auto;
  }
  .faq-layout.reverse .faq-side {
    order: 0;
  }
  .about-premium-hero,
  .faq-premium-hero,
  .blog-premium-hero {
    text-align: center;
  }
  .collection-btn-row {
    justify-content: center;
  }
  .faq-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 680px) {
  .about-premium-hero,
  .faq-premium-hero,
  .blog-premium-hero {
    padding: 58px 0;
  }
  .about-orbit-card,
  .journal-card,
  .featured-blog-card,
  .why-shell,
  .newsletter-shell {
    border-radius: 28px;
    padding: 22px;
  }
  .orbit-badge {
    position: static;
    display: inline-block;
    margin: 10px 4px 0;
  }
  .river-timeline div {
    padding: 24px;
  }
  .river-timeline b {
    position: static;
    margin-bottom: 14px;
  }
  .faq-category-grid,
  .newsletter-form {
    grid-template-columns: 1fr;
  }
  .faq-search-card {
    border-radius: 24px;
  }
  .premium-blog-card,
  .article-panel {
    border-radius: 26px;
    padding: 22px;
  }
}

/* Unique Contact, Login and Admin Page Designs */
.light {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}
.light-text {
  color: rgba(255, 255, 255, 0.86);
}
.contact-canvas {
  background: #fff8ed;
}
.contact-aurora-hero {
  position: relative;
  overflow: hidden;
  padding: 92px 0;
  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(255, 217, 120, 0.55),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 14%,
      rgba(124, 190, 143, 0.34),
      transparent 26%
    ),
    linear-gradient(135deg, #7b431f 0%, #c9783f 46%, #f2c36d 100%);
  color: #fff;
}
.contact-aurora-hero:before,
.contact-aurora-hero:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
  opacity: 0.32;
}
.contact-aurora-hero:before {
  width: 280px;
  height: 280px;
  background: #fff;
  left: -90px;
  bottom: -130px;
}
.contact-aurora-hero:after {
  width: 360px;
  height: 360px;
  background: #5f8f5c;
  right: -160px;
  top: 70px;
}
.contact-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 40px;
  align-items: center;
}
.contact-copy .title {
  margin-left: 0;
}
.contact-mini-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 30px;
}
.contact-mini-row div {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 22px;
  padding: 18px;
  backdrop-filter: blur(14px);
}
.contact-mini-row strong {
  display: block;
  font-size: 1.6rem;
}
.contact-mini-row span {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.82);
}
.contact-floating-card {
  background: rgba(255, 253, 248, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 42px;
  padding: 34px;
  box-shadow: 0 36px 90px rgba(75, 39, 12, 0.28);
  color: var(--text);
  backdrop-filter: blur(18px);
}
.contact-icon {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 24px;
  background: linear-gradient(135deg, #f2c36d, #c9783f);
  color: #fff;
  font-size: 2rem;
  margin-bottom: 18px;
}
.contact-floating-card h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.6rem;
  margin: 0 0 8px;
}
.contact-floating-card p {
  color: var(--muted);
  line-height: 1.7;
}
.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.contact-form-grid textarea {
  grid-column: 1/-1;
  min-height: 122px;
}
.contact-field {
  background: #fffaf0;
  border-color: rgba(201, 120, 63, 0.24);
}
.contact-btn {
  background: linear-gradient(135deg, #7f4b2b, #e09b4e);
  color: #fff;
  border: 0;
}
.contact-info-section {
  background: linear-gradient(180deg, #fff8ed, #fffdf8);
}
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.contact-info-card {
  border-radius: 34px;
  padding: 30px;
  border: 1px solid rgba(184, 135, 45, 0.24);
  box-shadow: var(--shadow);
  min-height: 230px;
}
.contact-info-card span {
  font-size: 2.2rem;
}
.contact-info-card h3 {
  font-size: 1.35rem;
  margin: 18px 0 8px;
}
.contact-info-card p {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--text);
}
.contact-info-card small {
  color: var(--muted);
  line-height: 1.7;
}
.contact-info-card.sunrise {
  background: linear-gradient(135deg, #fff2d2, #fffdf8);
}
.contact-info-card.leaf {
  background: linear-gradient(135deg, #effbe9, #fffdf8);
}
.contact-info-card.blush {
  background: linear-gradient(135deg, #fff0ef, #fffdf8);
}
.contact-strip-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(135deg, #fffdf8, #fff2d2);
  border: 1px solid var(--border);
  border-radius: 36px;
  padding: 34px;
  box-shadow: var(--shadow);
}
.login-cosmos-page {
  min-height: calc(100vh - 76px);
  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(210, 169, 255, 0.36),
      transparent 27%
    ),
    radial-gradient(
      circle at 84% 25%,
      rgba(255, 204, 143, 0.36),
      transparent 28%
    ),
    linear-gradient(135deg, #f7f0ff, #fff7ee 56%, #fffdf8);
  overflow: hidden;
}
.login-cosmos-shell {
  position: relative;
  padding: 90px 0;
}
.login-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.4;
}
.orb-one {
  width: 340px;
  height: 340px;
  background: #d7b7ff;
  left: -120px;
  top: 80px;
}
.orb-two {
  width: 260px;
  height: 260px;
  background: #f5b56d;
  right: -100px;
  bottom: 40px;
}
.login-split-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.85fr;
  gap: 42px;
  align-items: center;
}
.login-story-panel {
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(138, 95, 27, 0.12);
  border-radius: 44px;
  padding: 42px;
  box-shadow: 0 30px 80px rgba(108, 74, 151, 0.13);
  backdrop-filter: blur(18px);
}
.lavender {
  background: #f0e5ff;
  color: #7b4aad;
  border-color: rgba(123, 74, 173, 0.22);
}
.login-benefit-list {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}
.login-benefit-list p {
  margin: 0;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(123, 74, 173, 0.13);
  border-radius: 22px;
  padding: 17px;
  color: var(--muted);
  line-height: 1.6;
}
.login-benefit-list b {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7b4aad, #d7b7ff);
  color: #fff;
  margin-right: 10px;
}
.login-glass-card {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(123, 74, 173, 0.16);
  border-radius: 42px;
  padding: 36px;
  box-shadow: 0 34px 90px rgba(108, 74, 151, 0.16);
  backdrop-filter: blur(20px);
}
.login-mark {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 26px;
  background: linear-gradient(135deg, #7b4aad, #f5b56d);
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
}
.login-glass-card h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.8rem;
  line-height: 1;
  margin: 12px 0 22px;
}
.login-glass-card label {
  display: block;
  margin: 16px 0 8px;
  font-size: 0.85rem;
  font-weight: 900;
  color: #7b4aad;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.login-field {
  background: #fff;
  border-color: rgba(123, 74, 173, 0.18);
}
.login-gradient-btn {
  width: 100%;
  margin-top: 20px;
  background: linear-gradient(135deg, #7b4aad, #e6a151);
  color: #fff;
  border: 0;
}
.login-footer-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
  text-align: center;
}
.admin-vault-page,
.admin-dashboard-canvas {
  background: #11100d;
  color: #fff;
}
.admin-vault-hero {
  position: relative;
  overflow: hidden;
  padding: 92px 0;
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(216, 180, 95, 0.28),
      transparent 26%
    ),
    radial-gradient(
      circle at 90% 20%,
      rgba(120, 85, 255, 0.24),
      transparent 28%
    ),
    linear-gradient(135deg, #11100d, #2b2116 55%, #4a3219);
}
.dark {
  background: rgba(255, 255, 255, 0.08);
  color: #f7dc91;
  border-color: rgba(247, 220, 145, 0.2);
}
.dark-text {
  color: rgba(255, 255, 255, 0.76);
}
.admin-vault-grid {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 42px;
  align-items: center;
}
.admin-vault-copy .title {
  margin-left: 0;
  color: #fff;
}
.vault-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 30px;
}
.vault-metrics div {
  border: 1px solid rgba(247, 220, 145, 0.18);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 22px;
  padding: 18px;
  backdrop-filter: blur(14px);
}
.vault-metrics strong {
  display: block;
  color: #f7dc91;
  font-size: 1.2rem;
}
.vault-metrics span {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 900;
}
.admin-secure-stack {
  display: grid;
  gap: 18px;
}
.admin-vault-card,
.admin-recovery-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(247, 220, 145, 0.18);
  border-radius: 38px;
  padding: 32px;
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(18px);
}
.vault-lock {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 24px;
  background: linear-gradient(135deg, #d8b45f, #7855ff);
  font-size: 2rem;
  margin-bottom: 18px;
}
.admin-vault-card h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.7rem;
  margin: 0 0 8px;
  color: #fff;
}
.admin-vault-card p,
.admin-recovery-card p {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
}
.admin-field {
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(247, 220, 145, 0.22);
  color: #fff;
}
.admin-field::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.admin-vault-btn {
  width: 100%;
  margin-top: 18px;
  background: linear-gradient(135deg, #d8b45f, #7855ff);
  border: 0;
  color: #fff;
}
.recovery-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}
.admin-dashboard-hero {
  padding: 48px 0;
  background: linear-gradient(135deg, #11100d, #362615);
}
.admin-dash-head {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(247, 220, 145, 0.18);
  border-radius: 34px;
  padding: 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
}
.admin-dash-head .section-title {
  color: #fff;
}
.admin-outline {
  background: transparent;
  color: #f7dc91;
  border-color: rgba(247, 220, 145, 0.28);
}
.admin-dashboard-body {
  background: #17130f;
}
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}
.admin-stat-grid .admin-card,
.admin-stat-grid > div {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.045)
  );
  border: 1px solid rgba(247, 220, 145, 0.17);
  border-radius: 28px;
  color: #fff;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22);
}
.admin-panel-block {
  margin-top: 28px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(247, 220, 145, 0.15);
  border-radius: 34px;
  padding: 26px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.22);
}
.admin-panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.admin-panel-head h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.4rem;
  margin: 0;
  color: #fff;
}
.admin-panel-head span {
  color: #f7dc91;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
.admin-table-wrap {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(247, 220, 145, 0.12);
}
.admin-table-wrap table {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}
.admin-table-wrap th {
  background: rgba(216, 180, 95, 0.18);
  color: #f7dc91;
}
.admin-table-wrap td {
  border-color: rgba(247, 220, 145, 0.1);
  color: rgba(255, 255, 255, 0.78);
}
@media (max-width: 980px) {
  .contact-hero-grid,
  .login-split-layout,
  .admin-vault-grid,
  .contact-info-grid,
  .contact-mini-row,
  .vault-metrics,
  .admin-stat-grid {
    grid-template-columns: 1fr;
  }
  .contact-copy,
  .login-story-panel,
  .admin-vault-copy {
    text-align: center;
  }
  .contact-copy .title,
  .admin-vault-copy .title {
    margin-left: auto;
  }
  .contact-strip-shell {
    flex-direction: column;
    text-align: center;
  }
  .contact-form-grid {
    grid-template-columns: 1fr;
  }
  .recovery-row {
    grid-template-columns: 1fr;
  }
  .admin-panel-head {
    display: block;
  }
  .login-benefit-list p {
    text-align: left;
  }
}
@media (max-width: 680px) {
  .contact-aurora-hero,
  .login-cosmos-shell,
  .admin-vault-hero {
    padding: 58px 0;
  }
  .contact-floating-card,
  .login-story-panel,
  .login-glass-card,
  .admin-vault-card,
  .admin-recovery-card,
  .admin-dash-head,
  .admin-panel-block {
    border-radius: 28px;
    padding: 22px;
  }
  .contact-info-card {
    border-radius: 26px;
  }
  .login-glass-card h2,
  .admin-vault-card h2 {
    font-size: 2.2rem;
  }
}

/* Premium working auth pages */
.auth-lux-page {
  background: linear-gradient(
    135deg,
    #fff8ed 0%,
    #ffe0d0 34%,
    #f2fff1 70%,
    #fff 100%
  );
  overflow: hidden;
}
.auth-lux-hero {
  position: relative;
  padding: 72px 0 86px;
  min-height: calc(100vh - 140px);
}
.auth-blob {
  position: absolute;
  border-radius: 999px;
  filter: blur(2px);
  opacity: 0.72;
  animation: floatSoft 7s ease-in-out infinite;
}
.auth-blob-a {
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, #ff9f6e, #ffeadf);
  top: 60px;
  left: -70px;
}
.auth-blob-b {
  width: 310px;
  height: 310px;
  background: radial-gradient(circle, #a9d77f, #f5ffe8);
  right: -120px;
  top: 110px;
}
.auth-blob-c {
  width: 170px;
  height: 170px;
  background: radial-gradient(circle, #c48b53, #fff3d9);
  bottom: 30px;
  left: 42%;
}
@keyframes floatSoft {
  50% {
    transform: translateY(-18px) scale(1.03);
  }
}
.auth-lux-grid {
  display: grid;
  grid-template-columns: 1fr 470px;
  gap: 46px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.auth-lux-copy {
  padding: 36px;
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 28px 70px rgba(99, 55, 26, 0.12);
}
.auth-feature-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0;
}
.auth-feature-ribbon span {
  padding: 10px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #f3d0ba;
  color: #7d4423;
  font-weight: 800;
  font-size: 13px;
}
.auth-owner-box {
  margin-top: 28px;
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(135deg, #2d1b13, #8b4d28);
  color: #fff;
}
.auth-owner-box p {
  color: #ffe8d9;
}
.soft-auth-btn {
  background: #fff;
  color: #6d351a;
  border: none;
}
.auth-magic-card {
  position: relative;
  padding: 24px;
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 30px 90px rgba(66, 35, 18, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px);
}
.auth-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 8px;
  background: #fff5ee;
  border-radius: 22px;
  margin-bottom: 22px;
}
.auth-tabs button {
  border: 0;
  border-radius: 16px;
  padding: 11px 6px;
  background: transparent;
  font-weight: 900;
  color: #86502c;
  cursor: pointer;
}
.auth-tabs button.active {
  background: linear-gradient(135deg, #ff8c55, #b96a35);
  color: #fff;
  box-shadow: 0 10px 24px rgba(186, 94, 41, 0.25);
}
.auth-panel {
  display: none;
}
.auth-panel.active {
  display: block;
  animation: fadeLift 0.35s ease;
}
.auth-panel h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 34px;
  margin: 8px 0;
}
.auth-panel p {
  color: #6b5b4f;
}
.auth-field,
.owner-field {
  margin: 7px 0 14px;
  border: 1px solid #efd1bd;
  background: #fff;
  border-radius: 16px;
  padding: 14px;
}
.auth-gradient-btn {
  width: 100%;
  justify-content: center;
  background: linear-gradient(135deg, #ff7f50, #b56a31);
  border: none;
  color: #fff;
  box-shadow: 0 14px 28px rgba(183, 92, 36, 0.25);
}
.owner-gradient-btn {
  width: 100%;
  justify-content: center;
  background: linear-gradient(135deg, #1d4030, #82b26d);
  border: none;
  color: #fff;
  box-shadow: 0 14px 28px rgba(38, 91, 62, 0.25);
}
.link-btn {
  border: 0;
  background: transparent;
  color: #914f25;
  font-weight: 900;
  margin-top: 13px;
  cursor: pointer;
}
.auth-result {
  margin-top: 15px;
  padding: 13px 15px;
  border-radius: 16px;
  background: #fff7ee;
  color: #6b351b;
  border: 1px dashed #d9a579;
  display: none;
}
.auth-result.show {
  display: block;
}
.login-mark {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: linear-gradient(135deg, #2b150f, #c87941);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
@keyframes fadeLift {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.user-dash-page {
  background: linear-gradient(135deg, #f7fff2, #fff3e6 55%, #ffe5d7);
  padding: 70px 0;
}
.user-dash-shell {
  min-height: 72vh;
}
.user-welcome-card {
  padding: 38px;
  border-radius: 34px;
  background: linear-gradient(135deg, #2c3b21, #9f6b38);
  color: #fff;
  box-shadow: 0 25px 70px rgba(77, 51, 29, 0.18);
}
.user-welcome-card .lede {
  color: #fff4e9;
}
.user-dash-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 26px;
}
.user-dash-card {
  padding: 26px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(80, 53, 28, 0.12);
  border: 1px solid #f0dfcf;
}
.user-dash-card b {
  display: block;
  font-size: 22px;
  margin-bottom: 8px;
  color: #5c321c;
}
.vault-link {
  color: #ffe9d9;
}
.admin-recovery-card .auth-result {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
@media (max-width: 900px) {
  .auth-lux-grid {
    grid-template-columns: 1fr;
  }
  .auth-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
  .user-dash-grid {
    grid-template-columns: 1fr;
  }
  .auth-lux-copy {
    padding: 25px;
  }
  .auth-magic-card {
    padding: 18px;
  }
}

/* Skin Match Analyzer - Home Page */
.skin-analyzer-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(
    circle at top left,
    #ffe9c9 0,
    #fff7ec 28%,
    #f4efe4 58%,
    #e6f3dc 100%
  );
}
.skin-analyzer-section:before,
.skin-analyzer-section:after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(4px);
  opacity: 0.55;
  pointer-events: none;
}
.skin-analyzer-section:before {
  width: 280px;
  height: 280px;
  background: linear-gradient(135deg, #f6aa42, #d86f45);
  left: -80px;
  top: 30px;
}
.skin-analyzer-section:after {
  width: 340px;
  height: 340px;
  background: linear-gradient(135deg, #8fb15e, #f2d06b);
  right: -120px;
  bottom: -70px;
}
.skin-analyzer-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.9fr 1.25fr;
  gap: 34px;
  align-items: center;
}
.skin-analyzer-copy {
  padding: 18px;
}
.skin-analyzer-copy .section-title {
  max-width: 620px;
  color: #432512;
}
.analyzer-note {
  margin: 18px 0;
  padding: 14px 16px;
  border-left: 4px solid #b66a2f;
  background: rgba(255, 255, 255, 0.64);
  border-radius: 14px;
  color: #5b3b22;
  font-weight: 700;
  box-shadow: 0 16px 40px rgba(74, 45, 15, 0.08);
}
.analyzer-mini-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.analyzer-mini-points span {
  background: #fff;
  border: 1px solid rgba(99, 62, 27, 0.14);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  color: #5d3518;
  box-shadow: 0 14px 28px rgba(87, 50, 18, 0.08);
}
.skin-analyzer-card {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 34px;
  padding: 22px;
  box-shadow: 0 28px 80px rgba(88, 58, 24, 0.18);
}
.analyzer-upload-box {
  position: relative;
  min-height: 300px;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(135deg, #382011, #8b542b 48%, #d49652);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.analyzer-upload-box video,
.analyzer-upload-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.upload-placeholder {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: 24px;
  border: 1px dashed rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.16);
}
.upload-placeholder strong {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  margin-bottom: 8px;
}
.upload-placeholder span {
  display: block;
  opacity: 0.88;
}
.analyzer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}
.upload-btn {
  cursor: pointer;
}
.skin-quiz {
  background: #fffaf2;
  border-radius: 26px;
  padding: 18px;
  border: 1px solid rgba(93, 53, 24, 0.1);
}
.quiz-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.quiz-grid label {
  font-weight: 800;
  color: #543019;
  font-size: 14px;
}
.quiz-grid select {
  width: 100%;
  margin-top: 7px;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid #e4c9a7;
  background: #fff;
  color: #432512;
  font-weight: 700;
  outline: none;
}
.quiz-grid select:focus {
  border-color: #b66a2f;
  box-shadow: 0 0 0 4px rgba(182, 106, 47, 0.12);
}
.analyzer-submit {
  width: 100%;
  margin-top: 14px;
  justify-content: center;
}
.skin-report {
  display: none;
  margin-top: 18px;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(135deg, #fff, #fff8ea 55%, #eff8e4);
  border: 1px solid rgba(100, 60, 22, 0.12);
  box-shadow: 0 18px 40px rgba(88, 52, 18, 0.12);
}
.skin-report.show {
  display: block;
}
.report-topline {
  padding: 14px 18px;
  background: linear-gradient(90deg, #2f1c10, #8b542b, #c28a3c);
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
}
.report-content {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  padding: 20px;
  align-items: center;
}
.report-content img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(79, 45, 18, 0.12);
}
.report-content h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 30px;
  color: #3e2412;
}
.match-score {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #173b23;
  color: #fff;
  font-weight: 900;
}
.report-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.report-tags span {
  padding: 8px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(80, 48, 20, 0.12);
  font-weight: 800;
  color: #5b351b;
}
.report-disclaimer {
  padding: 0 20px 20px;
  color: #6f5848;
  font-size: 13px;
}
.report-cta {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 900px) {
  .skin-analyzer-shell {
    grid-template-columns: 1fr;
  }
  .quiz-grid {
    grid-template-columns: 1fr;
  }
  .report-content {
    grid-template-columns: 1fr;
  }
  .report-content img {
    width: 180px;
    height: 180px;
  }
  .analyzer-upload-box {
    min-height: 240px;
  }
}

/* Customer details and admin users update */
.location-capture-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.mini-location-btn {
  white-space: nowrap;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7a4b22, #d59a47);
  color: #fff;
  border: 0;
}
.location-note {
  display: block;
  color: #7a5d48;
  margin: 6px 0 12px;
  font-size: 12px;
  line-height: 1.5;
}
.customer-admin-panel {
  background: linear-gradient(
    135deg,
    rgba(255, 248, 232, 0.96),
    rgba(245, 226, 255, 0.92)
  );
  border: 1px solid rgba(122, 75, 34, 0.16);
  box-shadow: 0 24px 70px rgba(86, 45, 18, 0.12);
}
.admin-customer-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.small-admin-btn {
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
}
#customerRows td {
  vertical-align: top;
  min-width: 120px;
}
#customerRows a {
  color: #7a4b22;
  font-weight: 800;
  text-decoration: none;
}
#customerRows small {
  color: #7a5d48;
}
@media (max-width: 700px) {
  .location-capture-row {
    grid-template-columns: 1fr;
  }
  .mini-location-btn {
    width: 100%;
  }
}

/* === Admin customer table visibility fix === */
.customer-admin-panel {
  background: linear-gradient(
    135deg,
    #fff9ec 0%,
    #f7efe8 45%,
    #f4e3ff 100%
  ) !important;
  border: 1px solid rgba(122, 75, 34, 0.18) !important;
  box-shadow: 0 26px 80px rgba(55, 28, 8, 0.16) !important;
  color: #2b2118 !important;
}
.customer-admin-panel .admin-panel-head h2 {
  color: #3d2816 !important;
  text-shadow: none !important;
}
.customer-admin-panel .admin-panel-head span {
  color: #8a5a21 !important;
  letter-spacing: 0.09em;
}
.customer-admin-panel .admin-customer-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 8px 0 22px;
}
.customer-admin-panel .small-admin-btn {
  color: #5f3b13 !important;
  border-color: rgba(138, 90, 33, 0.22) !important;
  background: rgba(255, 255, 255, 0.55) !important;
  font-weight: 900;
}
.customer-admin-panel .admin-table-wrap {
  background: #fffaf3 !important;
  border: 1px solid rgba(122, 75, 34, 0.12) !important;
  box-shadow: 0 18px 45px rgba(67, 38, 16, 0.08) !important;
}
.customer-admin-panel .admin-table-wrap table {
  background: #fffaf3 !important;
  color: #2b2118 !important;
}
.customer-admin-panel .admin-table-wrap thead th {
  background: linear-gradient(135deg, #f3dfbd, #ead4cf, #eadcff) !important;
  color: #6b4118 !important;
  font-weight: 900 !important;
  font-size: 1rem;
  border-bottom: 1px solid rgba(122, 75, 34, 0.14) !important;
}
.customer-admin-panel .admin-table-wrap tbody td,
.customer-admin-panel #customerRows td {
  background: rgba(255, 255, 255, 0.72) !important;
  color: #2b2118 !important;
  font-weight: 700 !important;
  border-color: rgba(122, 75, 34, 0.1) !important;
  line-height: 1.5;
}
.customer-admin-panel #customerRows tr:nth-child(even) td {
  background: #fff6e9 !important;
}
.customer-admin-panel #customerRows tr:hover td {
  background: #fff1d9 !important;
}
.customer-admin-panel #customerRows b {
  color: #3d2816 !important;
  font-weight: 900 !important;
}
.customer-admin-panel #customerRows a {
  color: #7a3f05 !important;
  font-weight: 900 !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.customer-admin-panel #customerRows small {
  color: #5f4939 !important;
  font-weight: 700 !important;
}
.customer-admin-panel .empty-customer-note {
  color: #5f4939 !important;
  font-weight: 800 !important;
  text-align: center;
  padding: 26px !important;
}
@media (max-width: 780px) {
  .customer-admin-panel .admin-table-wrap {
    overflow-x: auto;
  }
  .customer-admin-panel .admin-table-wrap table {
    min-width: 850px;
  }
}

/* MittiAura Customization Panel */
.cms-announcement {
  background: linear-gradient(90deg, #5c2a12, #d6a94a, #8f3f1d);
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1000;
}
.customizer-page {
  min-height: 100vh;
  background: radial-gradient(
    circle at top left,
    #fff0c7 0,
    #fff7ea 28%,
    #f5ddff 58%,
    #f2fff5 100%
  );
  color: #2d1b11;
}
.customizer-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 30px;
}
.customizer-login-card {
  max-width: 520px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 34px;
  padding: 42px;
  box-shadow: 0 28px 80px rgba(66, 35, 11, 0.18);
  backdrop-filter: blur(18px);
}
.customizer-login-card h1,
.customizer-top h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: 54px;
  line-height: 1;
  margin: 10px 0;
}
.customizer-app {
  display: grid;
  grid-template-columns: 290px 1fr;
  min-height: 100vh;
}
.customizer-sidebar {
  background: linear-gradient(160deg, #1f120b, #552b14 50%, #b9812d);
  padding: 28px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.customizer-sidebar .brand {
  color: #fff;
  margin-bottom: 18px;
}
.custom-tab {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  text-align: left;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.custom-tab.active,
.custom-tab:hover {
  background: #fff;
  color: #653511;
}
.custom-tab.danger {
  margin-top: auto;
  background: rgba(255, 76, 76, 0.18);
}
.customizer-main {
  padding: 34px;
  overflow: auto;
}
.customizer-top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  background: linear-gradient(135deg, #fff, #fff5dc, #f5ddff);
  border-radius: 32px;
  padding: 30px;
  box-shadow: 0 18px 45px rgba(80, 46, 13, 0.1);
  margin-bottom: 24px;
}
.custom-section {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 30px;
  padding: 28px;
  box-shadow: 0 15px 38px rgba(88, 48, 15, 0.11);
  display: none;
}
.custom-section.show {
  display: block;
}
.custom-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}
.custom-panel-head h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 38px;
  margin: 0;
}
.custom-panel-head span {
  color: #9b6b26;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.custom-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.custom-form-grid.two {
  grid-template-columns: 1fr;
}
.custom-form-grid label {
  font-weight: 800;
  color: #4f321d;
}
.custom-form-grid .field,
.customizer-page .field {
  width: 100%;
  margin-top: 8px;
  border: 1px solid #ead7bd;
  border-radius: 16px;
  padding: 14px;
  background: #fff;
  color: #2d1b11;
  font: inherit;
}
.blog-builder {
  background: linear-gradient(135deg, #fff8e7, #fff, #f6e9ff);
  padding: 22px;
  border-radius: 24px;
  margin-bottom: 22px;
}
.cms-list {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}
.cms-item {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  background: #fff;
  border: 1px solid #f0dcc1;
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 10px 26px rgba(80, 46, 13, 0.06);
}
.cms-item small {
  display: block;
  color: #a46b21;
  margin: 5px 0;
  font-weight: 800;
}
.danger-btn {
  background: #fff0f0 !important;
  color: #a92b22 !important;
  border-color: #ffd0d0 !important;
}
.backup-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.cms-live-blog img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 14px;
}
.cms-live-blog details {
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  padding: 12px;
}
.cms-live-blog summary {
  cursor: pointer;
  font-weight: 800;
  color: #7a4018;
}
@media (max-width: 900px) {
  .customizer-app {
    grid-template-columns: 1fr;
  }
  .customizer-sidebar {
    position: relative;
    height: auto;
  }
  .customizer-top,
  .custom-panel-head {
    display: block;
  }
  .custom-form-grid {
    grid-template-columns: 1fr;
  }
  .customizer-login-card h1,
  .customizer-top h1 {
    font-size: 38px;
  }
}

/* === MittiAura CMS Dashboard Upgrade === */
.cms-dashboard-page {
  background: radial-gradient(
    circle at 8% 5%,
    #fff0b9 0,
    #fff8e8 24%,
    #ffe3ef 48%,
    #e8fff3 72%,
    #f4eaff 100%
  );
}
.cms-login-hero {
  background:
    linear-gradient(135deg, rgba(57, 26, 12, 0.08), rgba(255, 255, 255, 0.2)),
    radial-gradient(circle at right, #ffe0a3, transparent 35%);
}
.cms-login-card {
  border: 1px solid rgba(255, 255, 255, 0.82);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.86),
    rgba(255, 248, 229, 0.76),
    rgba(248, 226, 255, 0.7)
  );
  position: relative;
  overflow: hidden;
}
.cms-login-card:before {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0a23a, #ffdf7b);
  opacity: 0.28;
}
.cms-login-card > * {
  position: relative;
  z-index: 1;
}
.cms-shell {
  grid-template-columns: 310px 1fr;
}
.cms-sidebar {
  background: linear-gradient(
    180deg,
    #180d08,
    #3f1c0d 48%,
    #8a4a18 78%,
    #d6a94a
  );
  box-shadow: 16px 0 45px rgba(55, 25, 7, 0.2);
}
.cms-main {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.32),
    rgba(255, 246, 223, 0.18)
  );
}
.cms-topbar {
  background: linear-gradient(135deg, #fff, #fff6df 52%, #f6deff);
  border: 1px solid rgba(255, 255, 255, 0.88);
}
.cms-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 22px;
}
.cms-stat-card {
  border-radius: 26px;
  padding: 24px;
  background: linear-gradient(135deg, #32170b, #8c4d1f, #d4a64e);
  color: #fff;
  box-shadow: 0 20px 44px rgba(91, 45, 13, 0.18);
  position: relative;
  overflow: hidden;
}
.cms-stat-card:nth-child(2) {
  background: linear-gradient(135deg, #173b23, #4f8a43, #d7ba52);
}
.cms-stat-card:nth-child(3) {
  background: linear-gradient(135deg, #33204b, #8055b5, #f4b2d5);
}
.cms-stat-card:nth-child(4) {
  background: linear-gradient(135deg, #1f3944, #508ca0, #c9e8d5);
}
.cms-stat-card:after {
  content: "";
  position: absolute;
  right: -36px;
  top: -36px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.cms-stat-card b {
  display: block;
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
}
.cms-stat-card span {
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0.92;
}
.cms-guide-card {
  border-radius: 30px;
  padding: 28px;
  background: linear-gradient(135deg, #fffaf0, #fff, #f2ffe9);
  border: 1px solid rgba(130, 76, 25, 0.12);
  box-shadow: 0 16px 40px rgba(88, 47, 13, 0.09);
}
.cms-guide-card h3 {
  font-family: var(--serif);
  font-size: 34px;
  margin: 8px 0;
  color: #3d2614;
}
.cms-mini-steps {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.cms-mini-steps span {
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(127, 75, 24, 0.14);
  font-weight: 900;
  color: #754416;
}
.seo-template-banner {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: center;
  border-radius: 28px;
  padding: 24px;
  margin-bottom: 22px;
  background: linear-gradient(135deg, #2b160d, #87491f, #f0bd5d);
  color: #fff;
  box-shadow: 0 20px 50px rgba(89, 45, 13, 0.18);
}
.seo-template-banner h3 {
  font-family: var(--serif);
  font-size: 34px;
  margin: 4px 0;
}
.seo-template-banner p {
  margin: 0;
  opacity: 0.9;
}
.seo-template-banner .eyebrow {
  color: #ffeebc;
}
.seo-template-banner .btn {
  background: #fff;
  color: #633512;
  border-color: #fff;
}
.custom-form-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.seo-blog-builder {
  background: linear-gradient(135deg, #fffdf7, #fff7df, #fae8ff, #edfff4);
  border: 1px solid rgba(132, 82, 30, 0.12);
}
.seo-content-grid {
  margin-top: 18px;
}
.seo-score-box {
  margin: 20px 0 0;
  padding: 16px 18px;
  border-radius: 18px;
  background: #fff4e4;
  color: #6a4218;
  border: 1px solid rgba(138, 85, 25, 0.14);
  font-weight: 900;
}
.seo-score-box small {
  display: block;
  margin-top: 8px;
  color: #715340;
  font-weight: 700;
  line-height: 1.5;
}
.seo-score-box.good {
  background: #eaffef;
  color: #185b2d;
}
.seo-score-box.medium {
  background: #fff7d8;
  color: #7b5315;
}
.seo-score-box.low {
  background: #fff0ee;
  color: #8d2d21;
}
.cms-action-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.cms-blog-preview {
  margin: 24px 0;
}
.cms-blog-preview h3 {
  font-family: var(--serif);
  font-size: 32px;
  color: #3d2614;
}
.seo-article-card {
  background: #fff;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(128, 75, 24, 0.12);
  box-shadow: 0 24px 70px rgba(65, 36, 12, 0.14);
}
.seo-article-hero {
  padding: 34px;
  background:
    radial-gradient(circle at top right, #ffdf91, transparent 38%),
    linear-gradient(135deg, #fff8e8, #fff, #f1ffe9);
}
.seo-article-hero h1 {
  font-family: var(--serif);
  font-size: 48px;
  line-height: 1.02;
  margin: 8px 0;
  color: #332012;
}
.seo-article-hero p {
  font-size: 18px;
  color: #6c4a33;
  max-width: 760px;
}
.seo-article-hero img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 26px;
  margin-top: 18px;
  background: #fff;
}
.seo-article-body {
  padding: 34px;
  color: #3f2a1a;
}
.seo-article-body h2 {
  font-family: var(--serif);
  font-size: 34px;
  margin: 22px 0 8px;
  color: #462612;
}
.seo-article-body p {
  line-height: 1.8;
  color: #604735;
}
.seo-faq-box {
  margin: 24px 0;
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff8e9, #f5fff0);
}
.seo-faq-box details {
  background: #fff;
  border-radius: 16px;
  margin: 10px 0;
  padding: 14px;
  border: 1px solid rgba(124, 72, 23, 0.12);
}
.seo-faq-box summary {
  font-weight: 900;
  color: #653813;
  cursor: pointer;
}
.seo-cms-item {
  align-items: stretch;
}
.cms-item-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.cms-live-article h4 {
  font-family: var(--serif);
  font-size: 24px;
  color: #4b2a14;
  margin: 16px 0 6px;
}
.cms-live-article b {
  display: block;
  margin-top: 12px;
  color: #5e3314;
}
.cms-live-blog-section {
  background: linear-gradient(135deg, #fffaf0, #f4ffe9);
}
@media (max-width: 1100px) {
  .cms-stat-grid,
  .custom-form-grid.three {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 900px) {
  .cms-shell {
    grid-template-columns: 1fr;
  }
  .cms-stat-grid,
  .custom-form-grid.three {
    grid-template-columns: 1fr;
  }
  .seo-template-banner {
    display: block;
  }
  .seo-template-banner .btn {
    margin-top: 16px;
  }
  .seo-article-hero h1 {
    font-size: 34px;
  }
}

/* === Mitti Aura uploaded brand logo integration === */
.brand-with-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0.06em;
  min-width: max-content;
}
.brand-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 14px;
  filter: drop-shadow(0 8px 18px rgba(91, 57, 18, 0.18));
}
.brand-text {
  display: block;
  line-height: 1.05;
}
.brand-text small {
  margin-top: 4px;
}
.footer-brand-logo {
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin: 0 auto 10px;
  filter: drop-shadow(0 10px 22px rgba(91, 57, 18, 0.16));
}
.product-media {
  position: relative;
}

.cms-brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff !important;
}
.cms-brand-logo img {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #000;
  object-fit: contain;
}
.cms-brand-logo span {
  display: block;
}
.cms-brand-logo small {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 4px;
}
@media (max-width: 680px) {
  .brand-logo {
    width: 46px;
    height: 46px;
  }
  .brand-with-logo {
    gap: 8px;
  }
  .brand-text {
    font-size: 0.9rem;
  }
  .brand-text small {
    font-size: 9px;
  }
}

/* Final image update: premium logo/header + new product imagery */
.brand-with-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0;
}
.brand-logo {
  width: 186px !important;
  height: 62px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 8px 18px rgba(91, 57, 18, 0.16));
}
.brand-text {
  display: none !important;
}
.hero-banner {
  margin-top: 0;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.home-hero {
  padding-top: 0;
  background: #fffaf0;
}
.home-hero .container {
  width: 100%;
  max-width: none;
}
.hero-banner img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.premium-hero-copy {
  max-width: 1100px;
  margin: 0 auto;
  padding: 42px 16px 28px;
}
.product-media img,
.product-image-wrap img,
.product-detail-img img,
.men-mini-grid img,
.collection-hero-card img {
  object-fit: cover;
  object-position: center;
}
.footer-brand-logo {
  width: 120px !important;
  height: 120px !important;
  object-fit: contain !important;
}
@media (max-width: 680px) {
  .brand-logo {
    width: 132px !important;
    height: 50px !important;
  }
  .nav {
    min-height: 70px;
  }
  .hero-banner img {
    min-height: 320px;
    object-fit: cover;
    object-position: center;
  }
}

/* Final Mitti Aura header logo and favicon update */
.brand-with-logo {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-decoration: none !important;
}
.brand-logo {
  width: 220px !important;
  height: 78px !important;
  max-width: 220px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
  filter: drop-shadow(0 8px 18px rgba(91, 57, 18, 0.16)) !important;
}
.brand-text {
  display: none !important;
}
.footer-brand-logo {
  width: 150px !important;
  height: auto !important;
  max-height: 120px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.cms-brand-logo img {
  object-fit: contain !important;
  background: transparent !important;
}
@media (max-width: 768px) {
  .brand-logo {
    width: 160px !important;
    height: 58px !important;
    max-width: 160px !important;
  }
  .nav {
    min-height: 76px !important;
  }
}
@media (max-width: 480px) {
  .brand-logo {
    width: 132px !important;
    height: 50px !important;
    max-width: 132px !important;
  }
}

/* ===== Mitti Aura Cart + Razorpay Checkout ===== */
.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: #8b5d11;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.cart-hero {
  padding: 74px 16px 42px;
  text-align: center;
  background: linear-gradient(135deg, #fff8ea, #f4dfb2);
}
.cart-hero h1 {
  margin: 8px 0 10px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(38px, 5vw, 64px);
  color: #432b1d;
}
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
  gap: 28px;
  align-items: start;
}
.cart-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(200, 154, 53, 0.24);
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 18px 55px rgba(70, 42, 14, 0.12);
  margin-bottom: 22px;
}
.cart-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.cart-card h2 {
  margin: 0 0 14px;
  font-family: "Cormorant Garamond", serif;
  color: #432b1d;
  font-size: 30px;
}
.ma-cart-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(134, 89, 15, 0.18);
}
.ma-cart-item:last-child {
  border-bottom: 0;
}
.ma-cart-item img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  border-radius: 18px;
  background: #fff8ea;
  border: 1px solid rgba(200, 154, 53, 0.22);
}
.ma-cart-info h3 {
  margin: 0 0 6px;
  color: #432b1d;
}
.ma-cart-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ma-cart-actions input {
  width: 74px;
  padding: 8px 10px;
  border: 1px solid rgba(134, 89, 15, 0.24);
  border-radius: 10px;
}
.ma-cart-actions button,
.danger-btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: #fff1dc;
  color: #7d4212;
  font-weight: 800;
  cursor: pointer;
}
.checkout-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.checkout-form-grid label {
  font-weight: 800;
  color: #432b1d;
}
.checkout-form-grid label:nth-child(4) {
  grid-column: 1/-1;
}
.checkout-form-grid .field {
  width: 100%;
  margin-top: 7px;
}
.sticky-cart-summary {
  position: sticky;
  top: 100px;
}
.cart-summary-lines div,
.cart-total-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(134, 89, 15, 0.16);
}
.cart-total-line {
  font-size: 22px;
  border-bottom: 0;
  margin: 8px 0 18px;
}
.full-btn {
  width: 100%;
  text-align: center;
  justify-content: center;
  margin-bottom: 10px;
}
.secure-note {
  color: #5b4535;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.ma-empty-cart {
  text-align: center;
  padding: 34px 12px;
}
.ma-empty-cart h2 {
  margin-bottom: 8px;
}
@media (max-width: 900px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }
  .sticky-cart-summary {
    position: static;
  }
}
@media (max-width: 560px) {
  .ma-cart-item {
    grid-template-columns: 72px 1fr;
  }
  .ma-cart-item > strong {
    grid-column: 2;
  }
  .ma-cart-item img {
    width: 72px;
    height: 72px;
  }
  .checkout-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Mitti Aura 2026 Update: Hero, Cart Icon, Visual Story, Analyzer ===== */
.ma-cart-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #183012, #835514, #d5a33e);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(105, 67, 17, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.38);
}
.ma-cart-icon .cart-bag {
  font-size: 20px;
  line-height: 1;
}
.ma-cart-icon .cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff8ea;
  color: #432b1d;
  border: 1px solid rgba(200, 154, 53, 0.55);
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.ma-admin-link {
  display: none !important;
}
.ma-full-hero {
  position: relative;
  width: 100%;
  background: #f7ead3;
  overflow: hidden;
}
.ma-full-hero img {
  width: 100%;
  height: auto;
  display: block;
}
.ma-hero-actions-live {
  position: absolute;
  left: clamp(20px, 6vw, 110px);
  bottom: clamp(18px, 7vw, 92px);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.ma-hero-actions-live .btn {
  backdrop-filter: blur(6px);
}
.ma-brand-visual-story {
  background: linear-gradient(180deg, #fffaf0, #f8ead0);
}
.ma-visual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.ma-visual-grid figure {
  margin: 0;
  border-radius: 28px;
  overflow: hidden;
  background: #fff9ec;
  border: 1px solid rgba(184, 135, 45, 0.22);
  box-shadow: 0 24px 70px rgba(105, 67, 17, 0.13);
}
.ma-visual-grid figure.wide {
  grid-column: 1/-1;
}
.ma-visual-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ma-visual-grid figcaption {
  padding: 14px 18px;
  font-weight: 800;
  color: #4d3615;
  background: rgba(255, 250, 240, 0.88);
}
.auto-analysis-note {
  margin: 12px 0 14px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 248, 234, 0.88);
  border: 1px solid rgba(200, 154, 53, 0.24);
  color: #6d5231;
  font-size: 13px;
  font-weight: 700;
}
.skin-tone-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 8px 8px 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff8ea;
  border: 1px solid rgba(200, 154, 53, 0.35);
  font-weight: 800;
  color: #4d3615;
}
.auto-detect-box {
  margin: 12px 0;
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff8ea, #f2ddaf);
  border: 1px solid rgba(200, 154, 53, 0.3);
}
@media (max-width: 980px) {
  .ma-hero-actions-live {
    position: static;
    padding: 16px;
    justify-content: center;
    background: #fff8ea;
  }
  .ma-visual-grid {
    grid-template-columns: 1fr;
  }
  body.ma-menu-open .ma-actions {
    top: calc(100% + 330px);
  }
}

/* ===== Mitti Aura SEO Blog + Gen-Z Luxury Footer Upgrade ===== */
.ma-ritual-footer {
  background: radial-gradient(
    circle at top left,
    #fff4cf 0,
    #fff8ea 32%,
    #2b1a10 33%,
    #1b100a 100%
  );
  color: #fff8ea;
  padding: 70px 0 24px;
  margin-top: 30px;
  position: relative;
  overflow: hidden;
}
.ma-ritual-footer:before {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(200, 154, 53, 0.14),
    transparent
  );
  transform: rotate(10deg);
}
.ma-footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.25fr 2fr;
  gap: 42px;
  align-items: start;
}
.ma-footer-brand img {
  width: 170px;
  max-width: 70%;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.25));
}
.ma-footer-brand p {
  color: #ead8b5;
  line-height: 1.8;
  margin: 16px 0 22px;
  max-width: 430px;
}
.ma-footer-pill {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(232, 193, 105, 0.35);
  border-radius: 999px;
  padding: 10px 14px;
  color: #f7db94;
  background: rgba(255, 255, 255, 0.06);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ma-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}
.ma-footer-col h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #e6bd5d;
  margin: 0 0 16px;
}
.ma-footer-col a {
  display: block;
  color: #fff4dd;
  text-decoration: none;
  margin: 10px 0;
  font-weight: 650;
  opacity: 0.9;
}
.ma-footer-col a:hover {
  color: #f4c75d;
  transform: translateX(3px);
}
.ma-footer-bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 42px;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: #e9d7bc;
  font-size: 13px;
}
.ma-footer-social {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ma-footer-social a {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 9px 12px;
  color: #fff;
  text-decoration: none;
}
.ma-water-badge {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 520px;
}
.ma-water-badge div {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 14px;
  text-align: center;
}
.ma-water-badge strong {
  display: block;
  color: #f4c75d;
  font-size: 22px;
}
.ma-blog-hero {
  padding: 80px 0 42px;
  background: linear-gradient(135deg, #fff8ea, #fff1d4 55%, #f8e6bd);
  border-bottom: 1px solid #ead7aa;
}
.ma-blog-hero h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(42px, 6vw, 78px);
  line-height: 0.95;
  color: #432b1d;
  margin: 0 0 18px;
}
.ma-blog-hero p {
  max-width: 760px;
  color: #6b4a2f;
  font-size: 18px;
  line-height: 1.8;
}
.ma-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 34px;
}
.ma-blog-card {
  background: #fffdf7;
  border: 1px solid #ead7aa;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(67, 43, 29, 0.08);
  display: flex;
  flex-direction: column;
}
.ma-blog-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.ma-blog-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.ma-blog-card .tag {
  color: #a87413;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 800;
}
.ma-blog-card h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 30px;
  line-height: 1.05;
  margin: 0;
  color: #432b1d;
}
.ma-blog-card p {
  color: #6d5645;
  line-height: 1.7;
}
.ma-readmore {
  margin-top: auto;
  color: #432b1d;
  font-weight: 900;
  text-decoration: none;
}
.ma-article-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 38px;
  align-items: start;
}
.ma-toc {
  position: sticky;
  top: 100px;
  background: #fffaf0;
  border: 1px solid #ead7aa;
  border-radius: 24px;
  padding: 22px;
}
.ma-toc h3 {
  margin: 0 0 12px;
  color: #432b1d;
}
.ma-toc a {
  display: block;
  color: #6c4b2d;
  text-decoration: none;
  margin: 12px 0;
  line-height: 1.4;
}
.ma-article {
  background: #fffdf8;
  border: 1px solid #ecd9b0;
  border-radius: 34px;
  padding: clamp(26px, 5vw, 62px);
  box-shadow: 0 24px 70px rgba(67, 43, 29, 0.08);
}
.ma-article h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 0.98;
  color: #432b1d;
  margin: 0 0 18px;
}
.ma-article h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 36px;
  color: #432b1d;
  margin-top: 34px;
}
.ma-article p,
.ma-article li {
  font-size: 18px;
  line-height: 1.85;
  color: #3f3027;
}
.ma-article img {
  width: 100%;
  border-radius: 28px;
  margin: 24px 0;
  box-shadow: 0 18px 50px rgba(67, 43, 29, 0.12);
}
.ma-article-cta {
  background: linear-gradient(135deg, #432b1d, #8a5c16);
  color: #fff8ea;
  border-radius: 28px;
  padding: 28px;
  margin: 34px 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.ma-article-cta h3 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 32px;
}
.ma-article-cta a {
  background: #fff8ea;
  color: #432b1d;
  text-decoration: none;
  border-radius: 999px;
  padding: 13px 20px;
  font-weight: 900;
}
.ma-faq-box {
  border: 1px solid #ead7aa;
  background: #fffaf0;
  border-radius: 24px;
  padding: 20px;
  margin: 18px 0;
}
@media (max-width: 900px) {
  .ma-footer-inner,
  .ma-article-layout {
    grid-template-columns: 1fr;
  }
  .ma-footer-grid,
  .ma-blog-grid {
    grid-template-columns: 1fr;
  }
  .ma-toc {
    position: relative;
    top: auto;
  }
  .ma-water-badge {
    grid-template-columns: 1fr;
  }
}

/* Final compact announcement + marquee height */
.ma-topbar {
  padding: 8px 14px !important;
  min-height: auto !important;
  line-height: 1.25 !important;
  font-size: 16px !important;
}
.ma-topbar-track {
  padding: 8px 0 !important;
  min-height: auto !important;
  line-height: 1.2 !important;
  font-size: 16px !important;
}
.ma-topbar-track span {
  line-height: 1.2 !important;
}
@media (max-width: 900px) {
  .ma-topbar {
    font-size: 14px !important;
    padding: 7px 10px !important;
  }
  .ma-topbar-track {
    font-size: 13px !important;
    padding: 7px 0 !important;
  }
}

/* FINAL BLOG NAVBAR FIX - same compact navbar on all blog pages */
.ma-topbar {
  background: linear-gradient(90deg, #743613, #d8a640, #78340f) !important;
  color: #fff !important;
  text-align: center !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  padding: 8px 14px !important;
  line-height: 1.25 !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 16px !important;
}
.ma-topbar-track {
  background: #303908 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  display: flex !important;
  justify-content: space-around !important;
  gap: 28px !important;
  padding: 8px 0 !important;
  line-height: 1.2 !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 16px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.ma-topbar-track span {
  line-height: 1.2 !important;
}
.ma-navbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 22px !important;
  padding: 18px 5vw !important;
  background: linear-gradient(90deg, #fff8ea, #fff3d6, #fff8ea) !important;
  border-bottom: 1px solid #ead7ad !important;
  font-family: Manrope, Arial, sans-serif !important;
  min-height: auto !important;
}
.ma-logo {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-decoration: none !important;
  color: #3e271c !important;
  min-width: 220px !important;
}
.ma-logo img {
  width: 150px !important;
  height: auto !important;
  max-height: 70px !important;
  object-fit: contain !important;
  display: block !important;
}
.ma-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: rgba(255, 253, 247, 0.88) !important;
  border: 1px solid #ead7ad !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  box-shadow: 0 12px 38px rgba(80, 55, 20, 0.08) !important;
}
.ma-menu a {
  color: #3e271c !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
}
.ma-menu a:hover,
.ma-menu a.active {
  background: linear-gradient(135deg, #4b350b, #a87513) !important;
  color: #fff !important;
}
.ma-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.ma-actions a {
  color: #3e271c !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  background: #fffaf0 !important;
  border: 1px solid #ead7ad !important;
  border-radius: 999px !important;
  padding: 14px 22px !important;
  line-height: 1 !important;
}
.ma-actions .shop {
  background: linear-gradient(135deg, #583808, #b07a14) !important;
  color: #fff !important;
}
.ma-cart {
  position: relative !important;
  border-radius: 50% !important;
  width: 58px !important;
  height: 58px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  background: linear-gradient(135deg, #583808, #d0a23c) !important;
  color: #fff !important;
}
.ma-cart-count {
  position: absolute !important;
  right: -7px !important;
  top: -8px !important;
  background: #d0a23c !important;
  color: #fff !important;
  border-radius: 999px !important;
  min-width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}
@media (max-width: 900px) {
  .ma-navbar {
    flex-direction: column !important;
    align-items: center !important;
    padding: 16px !important;
  }
  .ma-menu {
    flex-wrap: wrap !important;
    border-radius: 24px !important;
  }
  .ma-menu a {
    font-size: 15px !important;
    padding: 9px 12px !important;
  }
  .ma-actions {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .ma-topbar {
    font-size: 14px !important;
    padding: 7px 10px !important;
  }
  .ma-topbar-track {
    font-size: 13px !important;
    padding: 7px 0 !important;
  }
  .ma-logo {
    min-width: auto !important;
  }
  .ma-logo img {
    width: 130px !important;
  }
}

/* Mitti Aura platform dashboard */
.platform-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 42px 5vw;
  color: #3e271c;
  font-family: Manrope, Arial, sans-serif;
}
.platform-hero h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 1;
  margin: 8px 0;
}
.platform-card {
  background: rgba(255, 253, 247, 0.94);
  border: 1px solid #ead7ad;
  border-radius: 24px;
  padding: 26px;
  margin: 22px 0;
  box-shadow: 0 18px 55px rgba(80, 55, 20, 0.08);
}
.platform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.platform-table {
  width: 100%;
  border-collapse: collapse;
  background: #fffdf8;
  border-radius: 18px;
  overflow: hidden;
}
.platform-table th,
.platform-table td {
  padding: 14px;
  border-bottom: 1px solid #ead7ad;
  text-align: left;
  vertical-align: top;
}
.platform-table th {
  background: #fff3d5;
  color: #5b3a18;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.platform-btn {
  border: 1px solid #d8c29a;
  border-radius: 999px;
  background: #fffdf8;
  padding: 10px 15px;
  font-weight: 900;
  cursor: pointer;
  color: #3e271c;
  text-decoration: none;
  display: inline-block;
}
.platform-btn.primary {
  background: linear-gradient(135deg, #183012, #835514, #d5a33e);
  color: #fff;
  border: 0;
}
.platform-btn.danger {
  background: #6f1d1b;
  color: #fff;
  border: 0;
}
.platform-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d8c29a;
  border-radius: 12px;
  background: #fffdf8;
  font: inherit;
  box-sizing: border-box;
}
.platform-status {
  padding: 12px 16px;
  border-radius: 14px;
  background: #fff4d7;
  border: 1px solid #ead7ad;
  margin: 14px 0;
  display: none;
}
@media (max-width: 900px) {
  .platform-grid {
    grid-template-columns: 1fr;
  }
  .platform-table {
    font-size: 13px;
  }
}

/* FINAL COMPACT NAVBAR + DUPLICATE TOPBAR FIX */
.ma-topbar {
  padding: 6px 12px !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.2 !important;
  font-size: 15px !important;
}
.ma-topbar-track {
  padding: 6px 0 !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.1 !important;
  font-size: 15px !important;
}
.ma-topbar-track span {
  line-height: 1.1 !important;
}
.ma-navbar {
  padding: 14px 4vw !important;
  min-height: 0 !important;
  height: auto !important;
}
.ma-logo img {
  width: 120px !important;
  max-height: 54px !important;
  object-fit: contain !important;
}
.ma-menu {
  padding: 7px 14px !important;
}
.ma-menu a {
  padding: 10px 15px !important;
  font-size: 16px !important;
}
.ma-actions a {
  padding: 12px 18px !important;
  font-size: 16px !important;
}
.ma-cart {
  width: 50px !important;
  height: 50px !important;
}
@media (max-width: 900px) {
  .ma-topbar {
    font-size: 13px !important;
    padding: 6px 8px !important;
  }
  .ma-topbar-track {
    font-size: 12px !important;
    padding: 6px 0 !important;
  }
  .ma-navbar {
    padding: 12px 14px !important;
  }
  .ma-logo img {
    width: 105px !important;
    max-height: 48px !important;
  }
  .ma-menu a {
    font-size: 14px !important;
    padding: 8px 10px !important;
  }
  .ma-actions a {
    font-size: 14px !important;
    padding: 10px 14px !important;
  }
}

/* Mitti Aura checkout modal */
.ma-checkout-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 10, 0.62);
  z-index: 99999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 30px 14px;
  overflow: auto;
}
.ma-checkout-modal {
  width: min(620px, 100%);
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  font-family: Manrope, Arial, sans-serif;
  color: #332015;
}
.ma-checkout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: #fffdf7;
  border-bottom: 1px solid #ead7ad;
}
.ma-checkout-brand {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 28px;
  font-weight: 800;
  color: #3d281b;
}
.ma-checkout-close {
  border: 0;
  background: #fff4da;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  font-size: 24px;
  cursor: pointer;
}
.ma-offer-bar {
  background: #f7b7d9;
  color: #111;
  text-align: center;
  font-weight: 900;
  padding: 10px 14px;
}
.ma-checkout-body {
  padding: 18px;
}
.ma-summary-card,
.ma-section-card {
  border: 1px solid #ead7ad;
  border-radius: 18px;
  background: #fffdf8;
  margin-bottom: 14px;
  padding: 16px;
}
.ma-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 7px 0;
}
.ma-summary-row.total {
  font-size: 22px;
  font-weight: 900;
  border-top: 1px solid #ead7ad;
  padding-top: 12px;
  margin-top: 12px;
}
.ma-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ma-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ma-field label {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7b5420;
}
.ma-field input,
.ma-field textarea,
.ma-field select {
  border: 1px solid #dec89e;
  border-radius: 12px;
  padding: 12px;
  font: inherit;
  background: #fff;
  color: #332015;
  box-sizing: border-box;
  width: 100%;
}
.ma-field textarea {
  min-height: 72px;
  resize: vertical;
}
.ma-payment-options {
  display: grid;
  gap: 10px;
}
.ma-pay-option {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1.5px solid #bdf3bf;
  border-radius: 18px;
  padding: 15px;
  cursor: pointer;
  background: #fff;
}
.ma-pay-option.active {
  border-color: #b07a14;
  background: #fff7e1;
}
.ma-pay-icon {
  font-size: 26px;
  width: 38px;
  text-align: center;
}
.ma-pay-main {
  flex: 1;
}
.ma-pay-title {
  font-size: 18px;
  font-weight: 900;
}
.ma-pay-sub {
  font-size: 14px;
  color: #777;
  margin-top: 2px;
}
.ma-pay-price {
  font-size: 18px;
  font-weight: 900;
}
.ma-checkout-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 18px;
  background: #fffdf7;
  border-top: 1px solid #ead7ad;
}
.ma-place-btn {
  flex: 1;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #263109, #9a660f, #d7a847);
  color: #fff;
  padding: 16px 22px;
  font-weight: 900;
  font-size: 18px;
  cursor: pointer;
}
.ma-sec-btn {
  border: 1px solid #dec89e;
  border-radius: 999px;
  background: #fff;
  padding: 14px 18px;
  font-weight: 900;
  cursor: pointer;
}
.ma-checkout-msg {
  display: none;
  margin: 12px 18px;
  padding: 12px;
  border-radius: 14px;
  background: #fff4d7;
  border: 1px solid #ead7ad;
}
@media (max-width: 680px) {
  .ma-field-grid {
    grid-template-columns: 1fr;
  }
  .ma-checkout-modal {
    border-radius: 20px;
  }
  .ma-pay-title {
    font-size: 16px;
  }
}

/* FINAL HEADER CLEANUP: single top banner + full-width marquee */
.ma-topbar {
  padding: 7px 12px !important;
  line-height: 1.2 !important;
  font-size: 15px !important;
  min-height: 0 !important;
  height: auto !important;
}
.ma-topbar + .ma-topbar,
.ma-topbar-duplicate,
.announcement-duplicate {
  display: none !important;
}
.ma-topbar-track {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 7px 0 !important;
  line-height: 1.1 !important;
  font-size: 15px !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
.ma-topbar-track span {
  text-align: center !important;
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  line-height: 1.1 !important;
}
.ma-navbar {
  padding: 13px 4vw !important;
}
.ma-logo img {
  width: 118px !important;
  max-height: 52px !important;
}
.ma-menu a {
  font-size: 16px !important;
  padding: 10px 15px !important;
}
.ma-actions a {
  font-size: 16px !important;
  padding: 12px 18px !important;
}
.ma-cart {
  width: 50px !important;
  height: 50px !important;
}
@media (max-width: 900px) {
  .ma-topbar {
    font-size: 13px !important;
    padding: 6px 8px !important;
  }
  .ma-topbar-track {
    font-size: 12px !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ma-navbar {
    padding: 12px 14px !important;
  }
}