:root {
  --navy: #204f6b;
  --navy-dark: #16384d;
  --gold: #d0a24a;
  --gold-light: #f0c96f;
  --wave-blue: #4f95bd;
  --cream: #f5fbff;
  --white: #fff;
  --text: #173547;
  --muted: #5f7385;
  --border: rgba(32, 79, 107, .14);
  --shadow: 0 14px 40px rgba(32, 79, 107, .12);
  --radius: 18px;
  --header-h: 108px;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif
}

/* Prevent the temporary blue tap overlay on clickable mobile grid items.
   Keyboard focus remains visible through the existing :focus-visible rules. */
a,
button,
[role="button"],
.product-image,
.detail-image,
.related-card,
.type-enquiry {
  -webkit-tap-highlight-color: transparent;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px)
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: #fff;
  line-height: 1.6;
  overflow-x: hidden
}

a {
  text-decoration: none;
  color: inherit
}

img {
  display: block;
  max-width: 100%
}

button,
input,
select,
textarea {
  font: inherit
}

button {
  border: 0;
  cursor: pointer
}

.container {
  width: min(100% - 32px, 1290px);
  margin-inline: auto
}

.section {
  padding: 35px 0
}

.section-light {
  background: linear-gradient(180deg, #fff, var(--cream))
}

.section-navy {
  background: linear-gradient(135deg, #e7f5fb 0%, #cfeaf4 35%, #add7e6 70%, #8fc6dc 100%) !important;
  color: var(--navy-dark) !important;
  border-top: 1px solid rgba(79, 149, 189, .16);
  border-bottom: 1px solid rgba(79, 149, 189, .16);
}

.site-header {
  position: relative;
  inset: 0 0 auto;
  z-index: 1000;
  height: var(--header-h);
  background: #fff;
  border-bottom: 1px solid rgba(185, 138, 35, .22);
  box-shadow: 0 8px 28px rgba(11, 35, 65, .08)
}

.site-header.scrolled {
  height: var(--header-h)
}

.nav-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px
}



.brand-logo {
  height: 100px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  background: #fff
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 1
}

.nav-link,
.nav-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 999px;
  color: var(--navy);
  font-weight: 800;
  font-size: .86rem;
  white-space: nowrap;
  background: transparent
}

.nav-link:hover,
.nav-dropdown.open>.dropdown-toggle {
  background: rgba(79, 149, 189, .14);
  color: var(--wave-blue)
}

.nav-whatsapp {
  background: #25D366;
  color: #fff;
  padding-inline: 18px
}

.nav-dropdown {
  position: relative
}

.arrow {
  font-size: .9rem
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 300px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: 16px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: .22s
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.open .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0)
}

.dropdown-menu a {
  display: block;
  padding: 11px 13px;
  border-radius: 11px;
  font-size: .94rem;
  font-weight: 700;
  color: var(--text)
}

.dropdown-menu a:hover {
  background: rgba(13, 90, 110, .08);
  color: var(--wave-blue)
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(12, 31, 63, .06);
  place-items: center
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2.4px;
  margin: 4px auto;
  background: var(--navy);
  border-radius: 99px;
  transition: .25s
}

.menu-toggle.active span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg)
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0
}

.menu-toggle.active span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg)
}

.hero {
  min-height: 720px;
  padding-top: var(--header-h);
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .55s ease;
  filter: brightness(.5);
}

.hero-slide.active {
  opacity: 1;
}


.home-hero-media {
  min-height: 390px;
  border-radius: 28px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(7, 23, 46, .88), rgba(13, 90, 110, .35))
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  max-width: 980px
}

.home-hero-banner {
  min-height: 760px;
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: 70px
}

.home-hero-banner .hero-content {
  max-width: 1240px
}

.home-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 50px;
  align-items: center
}

.home-hero-copy {
  text-align: left
}

.home-hero-copy .hero-actions {
  justify-content: flex-start
}

.home-hero-copy h1 {
  text-align: left;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased
}

.home-hero-copy p {
  margin-left: 0;
  margin-right: 0;
  line-height: 1.65;
  letter-spacing: 0.3px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased
}

.home-hero-media {
  min-height: 390px;
  border-radius: 28px;
  overflow: hidden;
  background-image: url('sujith/banners/business%20experience.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  transition: opacity .22s ease
}

.home-hero-copy {
  transition: opacity .22s ease
}

.home-hero-copy.is-fading,
.home-hero-media.is-fading {
  opacity: 0
}

.eyebrow,
.section-kicker {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 900;
  font-size: .99rem;
  margin-bottom: 12px
}

.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 5vw, 5.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 22px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased
}

.hero p {
  font-size: clamp(1rem, 2vw, 1.18rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, .92);
  max-width: 720px;
  margin: 0 auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px
}

.hero-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
  justify-content: flex-start
}

.hero-highlights span {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fefefe;
  font-size: .9rem;
  font-weight: 700;
  backdrop-filter: blur(8px)
}

.btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 900;
  transition: .22s
}

.btn:hover {
  transform: translateY(-2px)
}

.btn-primary {
  background: #091e3a;
  color: #fff;
  box-shadow: 0 12px 24px rgba(9, 30, 58, .22)
}

.btn-whatsapp {
  background: #25D366;
  color: #fff
}

.btn-outline-dark {
  border: 2px solid var(--navy);
  color: var(--navy);
  background: #fff
}

.hero-arrow {
  position: absolute;
  z-index: 3;
  top: 60%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: #16384d;
  font-size: 1.4rem;
  box-shadow: 0 12px 28px rgba(32, 79, 107, .22);
  border: 1px solid rgba(32, 79, 107, .16);
}

.hero-controls .hero-arrow {
  pointer-events: auto;
  display: grid;
  place-items: center;
}


.hero-prev {
  left: 22px
}

.hero-next {
  right: 22px
}

.hero-dots {
  position: absolute;
  z-index: 3;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  pointer-events: none
}

.hero-dots button {
  pointer-events: auto;
  border: 0;
  cursor: pointer
}

.hero-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5)
}

.hero-dots button.active {
  background: #6db3d1
}

.section-heading {
  text-align: center;
  max-width: 840px;
  margin: 0 auto 1px
}

.section-heading h2,
.contact h2 {
  font-family: var(--font-serif);
  color: var(--wave-blue);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
  margin-bottom: 14px
}

.section-heading p,
.contact p {
  color: var(--muted);
  font-size: 1.04rem
}

.section-heading.light h2 {
  color: #052a4a !important;
}

.section-heading.light p {
  color: var(--muted) !important;
}

.section-navy .section-kicker {
  color: var(--gold) !important;
}

.product-category {
  margin-top: 34px;
  padding: 28px;
  border-radius: 30px;
  border: 1px solid rgba(185, 138, 35, .18);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 18px 50px rgba(11, 35, 65, .08)
}

.product-category+.product-category {
  margin-top: 42px
}

.category-header {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(185, 138, 35, .18)
}

.category-header h3 {
  font-family: var(--font-serif);
  color: var(--wave-blue);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.05
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px
}

.baked-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.product-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(13, 90, 110, .13);
  background: linear-gradient(180deg, #fff, #fbf8f1);
  transition: .25s
}

.product-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow)
}

.product-image {
  display: block;
  height: 220px;
  background-size: cover;
  background-position: center;
  border-bottom: 4px solid rgba(185, 138, 35, .28)
}

.product-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1
}

.product-body span {
  width: max-content;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 99px;
  background: rgba(13, 90, 110, .09);
  color: var(--wave-blue);
  font-size: .75rem;
  font-weight: 900
}

.product-body h3 {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  color: var(--navy);
  line-height: 1.05;
  margin-bottom: 8px
}

.product-body h3 a:hover {
  color: var(--gold)
}

.product-body p {
  color: var(--muted);
  font-size: .98rem;
  flex: 1
}

.product-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 18px
}

.text-link {
  color: var(--gold);
  font-weight: 900;
  background: transparent
}

.text-link:after {
  content: " →"
}

.about-section {
  position: relative;
  overflow: hidden;
  background: #f5fbff;
  padding-top:100px;
  border: none;
}

.about-heading {
  margin-bottom: 28px;
}

.about-heading .section-kicker {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

.about-intro-text {
  margin-bottom: 56px;
}

.about-intro-text p {
  font-size: 0.99rem;
  line-height: 1.8;
  color: var(--text);
  margin: 0 0 13px 0;
  text-align: justify;
}

.about-grid {
  display: grid;
  gap: 34px;
  position: relative;
  z-index: 1
}

.about-intro-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%
}

.about-intro-block .section-kicker {
  margin-bottom: 10px
}

.about-intro-block h2 {
  margin-bottom: 14px;
  text-align: left
}

.about-story {
  display: grid;
  gap: 10px;
  max-width: 100%
}

.about-story p {
  margin: 0;
  color: var(--muted);
  line-height: 1.85;
  font-size: 1.02rem
}

.about-intro {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy)
}

.about-main-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px 64px;
  align-items: flex-start;
}

.about-visual {
  display: flex;
  justify-content: center;
}

.about-image-card {
  position: relative;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(32, 79, 107, 0.12);
  background: transparent;
}

.about-image-card img {
  width: 100%;
  height: auto;
  min-height: 380px;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 24px;
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.about-content p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
  margin: 0;
  text-align: justify;
}

.about-features-row {
  margin-top: 48px;
}

.about-features-row p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
  margin: 0;
  text-align: justify;
}

.about-badge {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background: rgba(255, 255, 255, .95);
  color: var(--navy);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .9rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12)
}

.about-content h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  line-height: 1.08;
  margin-bottom: 16px;
  color: var(--navy-dark)
}

.about-content h2 span {
  color: var(--gold)
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 13px
}

.about-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 24px
}

.about-highlights span {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(208, 162, 74, .14);
  color: var(--navy);
  font-weight: 800;
  font-size: .9rem;
  border: 1px solid rgba(208, 162, 74, .16)
}

.about-actions {
  display: none !important;
}

.btn-outline {
  border: 1px solid rgba(32, 79, 107, .16);
  background: #fff;
  color: var(--navy);
  box-shadow: 0 8px 24px rgba(11, 35, 65, .06)
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px
}

.feature-card {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(32, 79, 107, .08);
  box-shadow: 0 12px 28px rgba(11, 35, 65, .06);
  transition: transform .35s ease, box-shadow .35s ease
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(11, 35, 65, .12)
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(79, 149, 189, .16), rgba(208, 162, 74, .16));
  color: var(--navy)
}

.feature-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor
}

.feature-card h3 {
  font-size: 1rem;
  margin-bottom: 6px;
  color: var(--navy-dark)
}

.feature-card p {
  margin: 0;
  font-size: .95rem
}

.about-counters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
  position: relative;
  z-index: 1
}

.counter-card {
  padding: 22px 18px;
  text-align: center;
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(32, 79, 107, .08);
  box-shadow: 0 14px 32px rgba(11, 35, 65, .07)
}

.counter-card strong {
  display: block;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  color: var(--navy-dark);
  margin-bottom: 6px
}

.counter-card span {
  color: var(--muted);
  font-weight: 700;
  font-size: .95rem
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0)
}

/* ===== About (final override) =====
   Scoped strong overrides to ensure the About section uses the new premium layout
   and to neutralize any legacy rules elsewhere in the stylesheet. */
#about .about-heading { margin-bottom: 24px !important; }
#about .about-intro-text { margin-bottom: 42px !important; }

#about .about-main-grid { display: grid !important; grid-template-columns: 1fr 1.2fr !important; gap: 48px 64px !important; align-items: flex-start !important; }
#about .about-visual { order: 0 !important; }
#about .about-content { order: 1 !important; }

#about .about-image-card { box-shadow: 0 8px 24px rgba(32, 79, 107, 0.12) !important; background: transparent !important; border-radius: 24px !important; overflow: hidden !important; }
#about .about-image-card img { display: block !important; width: 100% !important; height: auto !important; min-height: 380px !important; object-fit: cover !important; object-position: center !important; border-radius: 24px !important; }

#about .about-actions { display: none !important; }

#about .feature-card { background: rgba(255,255,255,0.98) !important; border: 1px solid rgba(32,79,107,0.08) !important; box-shadow: 0 10px 28px rgba(11,35,65,0.06) !important; }

#about .about-counters { margin-top: 28px !important; }

/* Responsive: tablet and mobile stacks keep the requested content order */
@media (max-width: 980px) {
  #about .about-main-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  #about .about-image-card img { min-height: 340px !important; }
}

/* Adjustments: reduce left image size and align first two about paragraphs to right */
#about .about-image-card img { min-height: 220px !important; max-height: 420px !important; }
#about .about-story p.lead-top { text-align: right; }

@media (max-width: 640px) {
  #about .about-section { padding: 56px 0 !important; }
  /* Keep desired stacking: intro block first, then image, then remaining content */
  #about .about-main-grid { grid-template-columns: 1fr !important; }
  #about .about-visual { order: 0 !important; }
  #about .about-content { order: 1 !important; }
  #about .about-counters { grid-template-columns: 1fr !important; }
}

/* Accessibility and motion preference: reduce motion */
@media (prefers-reduced-motion: reduce) {
  #about .reveal-on-scroll { transition: none !important; }
}


@media (max-width: 980px) {
  .about-main-grid {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .about-visual {
    max-width: 680px;
    margin: 0 auto
  }

  .about-counters {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (max-width: 640px) {
  .about-section {
    padding: 76px 0
  }

  .about-image-card img {
    min-height: 320px
  }

  .about-actions {
    flex-direction: column;
    align-items: flex-start
  }

  .feature-grid,
  .about-counters {
    grid-template-columns: 1fr
  }

  .about-badge {
    left: 12px;
    right: 12px;
    bottom: 12px;
    text-align: center
  }
}

.serve-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px
}

.serve-grid div {
  text-align: center;
  padding: 24px 15px;
  border: 1px solid rgba(46, 111, 142, .16) !important;
  border-radius: 16px;
  background: rgba(255, 255, 255, .82) !important;
  color: var(--navy-dark) !important;
  font-weight: 900;
  box-shadow: 0 12px 32px rgba(11, 35, 65, .08);
}

.contact-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 42px;
  align-items: start
}

.contact-list {
  display: grid;
  gap: 11px;
  margin-top: 22px
}

.contact-list a {
  display: inline-flex;
  width: max-content;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--cream);
  color: var(--navy);
  font-weight: 800
}

.enquiry-form {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 26px;
  display: grid;
  gap: 16px
}

.enquiry-form label,
.otp-form label {
  display: grid;
  gap: 7px;
  color: var(--navy);
  font-weight: 900
}

.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea,
.otp-form input,
.otp-form select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 13px 14px;
  background: #fff;
  color: var(--text);
  outline: none
}

.detail-hero {
  padding-top: calc(var(--header-h) + 54px);
  padding-bottom: 70px;
  background: linear-gradient(135deg, #fff, #fbf8f1 58%, #eef8fb)
}

.detail-grid {
  display: grid;
  grid-template-columns: .9fr 1fr;
  gap: 42px;
  align-items: center
}

.detail-grid h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  line-height: .92;
  color: var(--wave-blue);
  margin-bottom: 20px
}

.detail-grid p:not(.section-kicker) {
  color: var(--muted);
  font-size: 1.12rem;
  margin-bottom: 24px
}

.detail-image {
  min-height: 430px;
  border-radius: 34px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 28px 80px rgba(11, 35, 65, .18);
  border: 8px solid #fff;
  display: block
}

.type-grid,
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.type-card,
.related-card {
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(180deg, #fff, #fbf8f1);
  border: 1px solid rgba(185, 138, 35, .2);
  box-shadow: 0 14px 34px rgba(11, 35, 65, .07)
}

.type-image,
.related-thumb {
  height: 210px;
  background-size: cover;
  background-position: center;
  border-bottom: 4px solid rgba(185, 138, 35, .26)
}

.type-card span {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--navy);
  font-weight: 900;
  margin: 20px 22px 12px
}

.type-card h3,
.related-card span {
  display: block;
  font-family: var(--font-serif);
  color: var(--wave-blue);
  font-size: 1.45rem;
  line-height: 1.05;
  margin: 0 22px 10px
}

.type-card p {
  color: var(--muted);
  margin: 0 22px 18px
}

.type-enquiry {
  width: max-content;
  margin: 0 22px 24px;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--navy);
  font-weight: 900
}

.related-card span {
  text-align: center;
  padding: 18px 10px;
  margin: 0
}

.footer {
  border-top: 1px solid var(--border);
  background: #fff;
  padding: 42px 0 0
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 2px
}

.footer img {
  height: 110px;
  width: auto;
  object-fit: contain
}

.footer h3 {
  font-family: var(--font-serif);
  color: var(--wave-blue);
  font-size: 1.45rem;
  margin-bottom: 12px
}

.footer a,
.footer p {
  display: block;
  color: var(--muted);
  font-weight: 700;
  text-align: left;
  margin-bottom: 8px;
}

.footer-social {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.footer-social a {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--navy)
}

.footer-bottom {
  text-align: center;
  margin-top: 28px;
  padding: 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-weight: 800
}

.floating-whatsapp {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1200;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25D366;
  color: #fff;
  font-size: 1.6rem;
  box-shadow: 0 14px 32px rgba(37, 211, 102, .35)
}

.order-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(6, 20, 43, .62);
  backdrop-filter: blur(5px)
}

.order-modal[hidden] {
  display: none !important
}

.order-box {
  position: relative;
  width: min(100%, 520px);
  max-height: 92dvh;
  overflow-y: auto;
  background: #fff;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .32)
}

.order-box h2 {
  font-family: var(--font-serif);
  color: var(--navy);
  font-size: 2.3rem;
  line-height: 1;
  margin-bottom: 10px
}

.modal-note {
  color: var(--muted);
  margin-bottom: 18px
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--navy);
  font-size: 1.8rem
}

.otp-form {
  display: grid;
  gap: 14px
}

.otp-display {
  padding: 12px 14px;
  border-radius: 13px;
  background: rgba(37, 211, 102, .12);
  color: var(--navy);
  font-weight: 900
}

@media (max-width:1120px) {

  .nav-link,
  .nav-whatsapp {
    font-size: .76rem;
    padding-inline: 8px
  }

  .brand {
    width: 160px
  }

  .brand-logo {
    height: 86px
  }

  .product-grid,
  .baked-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .serve-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width:900px) {
  :root {
    --header-h: 92px
  }

  .site-header {
    height: var(--header-h)
  }

  .brand {
    width: 150px
  }

  .brand-logo {
    height: 84px
  }

  .menu-toggle {
    display: block
  }

  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    height: calc(100dvh - var(--header-h));
    display: block;
    background: #fff;
    padding: 18px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .25s ease;
    border-top: 1px solid var(--border)
  }

  .main-nav.open {
    transform: translateX(0)
  }

  .nav-link,
  .nav-whatsapp {
    width: 100%;
    justify-content: space-between;
    border-radius: 12px;
    padding: 13px 14px;
    margin-bottom: 6px;
    min-height: 50px;
    font-size: .95rem
  }

  .nav-whatsapp {
    justify-content: center;
    margin-top: 12px
  }

  .nav-dropdown {
    width: 100%
  }

  .dropdown-menu {
    position: static;
    min-width: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border-radius: 12px;
    border: 1px solid rgba(12, 31, 63, .08);
    background: var(--cream);
    padding: 0;
    margin: 0 0 8px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease, padding .25s ease
  }

  .nav-dropdown.open .dropdown-menu {
    max-height: 520px;
    padding: 8px
  }

  .nav-dropdown:hover .dropdown-menu {
    transform: none
  }

  .hero {
    min-height: 620px
  }

  .hero-arrow {
    display: none
  }

  .about-grid,
  .contact-grid,
  .detail-grid {
    grid-template-columns: 1fr
  }

  .about-image {
    height: 360px
  }

  .detail-image {
    min-height: 340px
  }

  .type-grid,
  .related-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}
.manufacturing-section{
  position: relative;
  padding:20px 0 80px;
}
.manufacturing-heading{
  margin-bottom: 25px;
}
.manufacturing-intro-text{
  width:100%;
  margin-bottom: 40px;
  font-size: 0.99rem;
  text-align: justify;
}
.manufacturing-main-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
@media (max-width:640px) {
  .container {
    width: min(100% - 24px, 1220px)
  }

  .section {
    padding: 64px 0
  }

  .hero {
    min-height: 560px
  }

  .hero h1 {
    font-size: 2.25rem
  }

  .hero-actions {
    width: 100%;
    flex-direction: column
  }

  .btn {
    width: 100%
  }

  .product-grid,
  .baked-grid,
  .serve-grid,
  .type-grid,
  .related-grid,
  .footer-grid {
    grid-template-columns: 1fr
  }

  .product-image {
    height: 230px
  }

  .about-image {
    height: 300px
  }

  .footer {
    text-align: center
  }

  .footer img {
    margin: 0 auto
  }

  .footer-social {
    justify-content: center
  }

  .floating-whatsapp {
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px
  }
}
.center{
  text-align: center;
  margin-bottom: 15px;
}

/* ===== FINAL: Official WhatsApp + Instagram footer icons ===== */
.footer-social {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.footer-social .footer-social-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(11, 35, 65, .18) !important;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}

.footer-social .footer-social-icon svg {
  width: 26px !important;
  height: 26px !important;
  display: block !important;
  fill: currentColor !important;
}

.footer-social .footer-social-icon span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

.footer-whatsapp-icon {
  background: #25D366 !important;
}

.footer-instagram-icon {
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 12%, #fd5949 45%, #d6249f 68%, #285AEB 100%) !important;
}

.footer-social .footer-social-icon:hover {
  transform: translateY(-3px) scale(1.06) !important;
  box-shadow: 0 16px 34px rgba(11, 35, 65, .25) !important;
  filter: saturate(1.08) !important;
}

.floating-whatsapp svg {
  width: 31px !important;
  height: 31px !important;
  fill: #fff !important;
}

@media (max-width:640px) {
  .footer-social {
    justify-content: center !important;
  }

  .footer-social .footer-social-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
  }
}

/* ===== FINAL PREMIUM COLOR, FOOTER COPYRIGHT & RESPONSIVE ANIMATION FIX ===== */
:root {
  --premium-navy: #07172E;
  --premium-blue: #0B2341;
  --premium-teal: #0D5A6E;
  --premium-gold: #B98A23;
  --premium-gold-light: #D3AC56;
  --premium-cream: #FBF8F1;
  --premium-text: #10223B;
  --premium-muted: #596579;
}

body {
  color: var(--premium-text) !important;
  background: #fff !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.section-heading h2,
.about-content h2,
.contact h2,
.category-header h3,
.detail-grid h1,
.product-body h3,
.type-card h3,
.footer h3 {
  color: #091e3a !important;
  letter-spacing: -0.01em;
}

.section-kicker,
.eyebrow {
  color: var(--premium-gold) !important;
}

.product-body p,
.contact p,
.section-heading p,
.footer p,
.footer a {
  color: var(--text) !important;
}

.nav-link {
  color: var(--premium-blue) !important;
}

.nav-link:hover,
.nav-dropdown.open>.dropdown-toggle,
.product-body h3 a:hover,
.footer a:hover {
  color: var(--premium-gold) !important;
}

.btn-primary,
.type-enquiry {
  background: linear-gradient(135deg, var(--premium-gold-light), var(--premium-gold)) !important;
  color: var(--premium-navy) !important;
  box-shadow: 0 12px 28px rgba(185, 138, 35, .24) !important;
}

.btn-whatsapp,
.nav-whatsapp {
  background: #25D366 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(37, 211, 102, .20) !important;
}

.site-header {
  background: linear-gradient(180deg, #ffffff 0%, #fbf8f1 100%) !important;
}

.product-card,
.type-card,
.related-card,
.enquiry-form,
.product-category {
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
}

.product-card:hover,
.type-card:hover,
.related-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 18px 45px rgba(11, 35, 65, .14) !important;
  border-color: rgba(185, 138, 35, .32) !important;
}

.product-image,
.type-image,
.related-thumb {
  transition: transform .45s ease, filter .45s ease !important;
}

.product-card:hover .product-image,
.type-card:hover .type-image,
.related-card:hover .related-thumb {
  transform: scale(1.055) !important;
  filter: saturate(1.08) contrast(1.04) !important;
}

.product-card,
.type-card,
.related-card {
  animation: osunsFadeUp .72s ease both;
}

.product-card:nth-child(2),
.type-card:nth-child(2),
.related-card:nth-child(2) {
  animation-delay: .06s;
}

.product-card:nth-child(3),
.type-card:nth-child(3),
.related-card:nth-child(3) {
  animation-delay: .12s;
}

.product-card:nth-child(4),
.type-card:nth-child(4),
.related-card:nth-child(4) {
  animation-delay: .18s;
}

.product-card:nth-child(5),
.type-card:nth-child(5),
.related-card:nth-child(5) {
  animation-delay: .24s;
}

.product-card:nth-child(6),
.type-card:nth-child(6),
.related-card:nth-child(6) {
  animation-delay: .30s;
}

@keyframes osunsFadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

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

.footer {
  background: linear-gradient(180deg, #ffffff 0%, #fbf8f1 100%) !important;
  border-top: 1px solid rgba(185, 138, 35, .22) !important;
}

.footer-grid {
  align-items: start !important;
}

.footer h3 {
  font-family: var(--font-serif) !important;
  font-weight: 800 !important;
  color:#091e3a !important;
}

.footer a {
  transition: color .22s ease, transform .22s ease !important;
}

.footer a:hover {
  transform: translateX(3px) !important;
}

.footer-brand img,
.footer-logo {
  max-height: 118px !important;
  height: 118px !important;
  object-fit: contain !important;
  margin-bottom: 14px !important;
}

.footer-social {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
 
}

.footer-social .footer-social-icon {
  width: 48px !important;
  height: 45px !important;
  min-width: 48px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #fff !important;
  box-shadow: 0 13px 28px rgba(11, 35, 65, .18) !important;
  transition: transform .24s ease, box-shadow .24s ease, filter .24s ease !important;
}

.footer-social .footer-social-icon svg {
  width: 27px !important;
  height: 27px !important;
  display: block !important;
  fill: currentColor !important;
}

.footer-social .footer-social-icon span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

.footer-whatsapp-icon {
  background: #25D366 !important;
}

.footer-instagram-icon {
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 12%, #fd5949 45%, #d6249f 68%, #285AEB 100%) !important;
}

.footer-social .footer-social-icon:hover {
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow: 0 18px 36px rgba(11, 35, 65, .26) !important;
  filter: saturate(1.12) !important;
}

.footer-bottom {
  display: block !important;
  width: 100% !important;
  margin-top: 32px !important;
  padding: 18px 12px !important;
  text-align: center !important;
  background: linear-gradient(135deg, var(--premium-navy), var(--premium-blue)) !important;
  color: #fff !important;
  border-top: 2px solid var(--premium-gold) !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}

.floating-whatsapp {
  animation: osunsPulse 1.9s infinite !important;
}

.floating-whatsapp svg {
  width: 31px !important;
  height: 31px !important;
  fill: #fff !important;
}

@keyframes osunsPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, .42), 0 12px 28px rgba(37, 211, 102, .30);
  }

  70% {
    box-shadow: 0 0 0 16px rgba(37, 211, 102, 0), 0 12px 28px rgba(37, 211, 102, .30);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 12px 28px rgba(37, 211, 102, .30);
  }
}

@media (max-width:900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  .footer-brand {
    grid-column: 1 / -1 !important;
    text-align: center !important;
  }

  .footer-brand img,
  .footer-logo {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer-social {
    justify-content: center !important;
  }
}

@media (max-width:640px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .footer a:hover {
    transform: none !important;
  }

  .footer-social .footer-social-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
  }

  .footer-bottom {
    font-size: .9rem !important;
    padding: 16px 10px !important;
  }

  .product-card,
  .type-card,
  .related-card {
    animation: none !important;
  }
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ===== FINAL MOBILE HERO / HEADER BANNER FIT FIX ===== */
.hero,
.hero.hero-slider {
  width: 100% !important;
  overflow: hidden !important;
}

.hero .container,
.hero-grid,
.hero-single {
  position: relative !important;
  z-index: 2 !important;
  width: min(100% - 32px, 1233px) !important;
  margin-inline: auto !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
}

.hero-content {
  width: min(100%, 920px) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  animation: mobileHeroFade .75s ease both !important;
}

.hero h1 {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.hero-text,
.hero p.hero-text {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@keyframes mobileHeroFade {
  from {
    opacity: 0;
    transform: translateY(18px)
  }

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

@media (max-width:900px) {
  :root {
    --header-h: 92px !important;
  }

  .hero,
  .hero.hero-slider {
    min-height: calc(100svh - 0px) !important;
    height: auto !important;
    padding-top: var(--header-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-slide {
    background-position: center center !important;
    background-size: cover !important;
  }

  .hero::after {
    background: linear-gradient(135deg, rgba(7, 23, 46, .88), rgba(13, 90, 110, .48)) !important;
  }

  .hero-grid,
  .hero-single,
  .hero .container {
    min-height: calc(100svh - var(--header-h)) !important;
    padding: 42px 0 58px !important;
  }

  .hero-content {
    padding-top: 0 !important;
  }

  .eyebrow,
  .section-kicker {
    font-size: .72rem !important;
    letter-spacing: .12em !important;
    margin-bottom: 10px !important;
  }

  .hero h1 {
    font-size: clamp(2.05rem, 8vw, 3.15rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.02em !important;
    margin-bottom: 14px !important;
  }

  .hero-text,
  .hero p.hero-text {
    font-size: .98rem !important;
    line-height: 1.55 !important;
    max-width: 620px !important;
  }

  .hero-actions {
    margin-top: 22px !important;
    gap: 12px !important;
  }

  .hero-actions .btn {
    min-height: 46px !important;
    padding: 11px 18px !important;
    font-size: .95rem !important;
  }
}

@media (max-width:640px) {
  :root {
    --header-h: 88px !important;
  }

  .hero,
  .hero.hero-slider {
    min-height: calc(100svh - 0px) !important;
    padding-top: var(--header-h) !important;
  }

  .hero-slide {
    background-position: center top !important;
  }

  .hero-grid,
  .hero-single,
  .hero .container {
    width: min(100% - 26px, 1220px) !important;
    min-height: calc(100svh - var(--header-h)) !important;
    padding: 30px 0 54px !important;
  }

  .hero h1 {
    font-size: clamp(1.9rem, 9.8vw, 2.55rem) !important;
    line-height: 1.1 !important;
    max-width: 340px !important;
  }

  .hero-text,
  .hero p.hero-text {
    font-size: .93rem !important;
    line-height: 1.55 !important;
    max-width: 340px !important;
  }

  .hero-actions {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    max-width: 340px !important;
    margin-inline: auto !important;
  }

  .hero-dots {
    bottom: 18px !important;
  }
}

@media (max-width:380px) {
  .hero h1 {
    font-size: 1.72rem !important;
    max-width: 300px !important;
  }

  .hero-text,
  .hero p.hero-text {
    font-size: .88rem !important;
    max-width: 300px !important;
  }

  .hero-actions .btn {
    max-width: 300px !important;
    font-size: .88rem !important;
  }
}

/* ===== FINAL ABOUT IMAGE SIZE FIX ===== */
.about-grid {
  grid-template-columns: minmax(260px, 360px) 1fr !important;
  gap: 42px !important;
  align-items: center !important;
}

.about-image {
  width: 100% !important;
  height: 360px !important;
  max-width: 360px !important;
  margin: 0 auto !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 36px rgba(11, 35, 65, .14) !important;
  background: #fff !important;
}

.about-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  max-width: none !important;
  max-height: none !important;
}

@media (max-width:900px) {
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .about-image {
    height: 280px !important;
    max-width: 420px !important;
  }
}

@media (max-width:640px) {
  .about-image {
    height: 230px !important;
    max-width: 100% !important;
    border-radius: 18px !important;
  }
}

/* ===== PREMIUM FINAL ALIGNMENT UPDATE: LOGO, ABOUT, PRODUCTS, BANNER ===== */
.site-header {
  background: linear-gradient(180deg, #ffffff 0%, #fbf8f1 100%) !important;
}

.brand {
  align-items: center !important;
  justify-content: flex-start !important;
  background: transparent !important;
}

.brand-logo {
  background: transparent !important;
  mix-blend-mode: multiply;
  height: 92px !important;
  max-width: 170px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.hero,
.hero.hero-slider {
  min-height: 610px !important;
  height: auto !important;
  padding-top: var(--header-h) !important;
}

.hero-grid,
.hero-single,
.hero .container {
  min-height: calc(610px - var(--header-h)) !important;
  padding: 36px 0 46px !important;
  width: 100%;
}

.hero h1 {
  font-size: clamp(2.35rem, 4.4vw, 4.6rem) !important;
  line-height: 1.02 !important;
  color: var(--text) !important;
}

.hero-text,
.hero p.hero-text,
.hero p {
  font-size: clamp(.96rem, 1.5vw, 1.08rem) !important;
  line-height: 1.55 !important;
  color: var(--text) !important;
}

.hero-actions {
  margin-top: 24px !important;
}

.about-content h2 {
  font-size: clamp(2.25rem, 4vw, 3.45rem) !important;
}

.about-content p {
  font-size: 1.14rem !important;
  line-height: 1.78 !important;
  color: var(--text);
}

.about-points span {
  font-size: .98rem !important;
  padding: 10px 16px !important;
}

.product-category {
  padding: 24px !important;
}

.category-header {
  text-align: center !important;
  margin-bottom: 20px !important;
}

.category-header h3 {
  font-size: clamp(1.45rem, 2.4vw, 2rem) !important;
}

.product-grid,
.baked-grid {
  align-items: stretch !important;
}

.product-card {
  height: 100% !important;
  text-align: center !important;
}

.product-image {
  height: 195px !important;
}

.product-body {
  padding: 18px 18px 20px !important;
  align-items: center !important;
}

.product-body span {
  font-size: .66rem !important;
  padding: 4px 9px !important;
  margin-bottom: 9px !important;
}

.product-body h3 {
  font-size: 1.24rem !important;
  line-height: 1.1 !important;
  margin-bottom: 7px !important;
}

.product-body p {
  font-size: .89rem !important;
  line-height: 1.55 !important;
  max-width: 280px !important;
  margin-inline: auto !important;
}

.product-actions {
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 15px !important;
}

.text-link {
  font-size: .88rem !important;
}

@media (max-width:1120px) {
  .brand-logo {
    height: 82px !important;
    max-width: 155px !important;
  }

  .hero,
  .hero.hero-slider {
    min-height: 560px !important;
  }

  .hero-grid,
  .hero-single,
  .hero .container {
    min-height: calc(560px - var(--header-h)) !important;
  }
}

@media (max-width:900px) {
  .brand-logo {
    height: 78px !important;
    max-width: 145px !important;
  }

  .hero,
  .hero.hero-slider {
    min-height: 500px !important;
    display: flex !important;
    align-items: center !important;
  }

  .hero-grid,
  .hero-single,
  .hero .container {
    min-height: calc(500px - var(--header-h)) !important;
    padding: 28px 0 38px !important;
  }

  .hero h1 {
    font-size: clamp(2rem, 7vw, 2.85rem) !important;
  }

  .hero-text,
  .hero p.hero-text,
  .hero p {
    font-size: .94rem !important;
  }

  .about-content {
    text-align: center !important;
  }

  .about-content p {
    font-size: 1.08rem !important;
    line-height: 1.72 !important;
  }

  .about-points {
    justify-content: center !important;
  }
}

@media (max-width:640px) {
  .brand-logo {
    height: 72px !important;
    max-width: 136px !important;
  }

  .hero,
  .hero.hero-slider {
    min-height: 450px !important;
    padding-top: var(--header-h) !important;
  }

  .hero-grid,
  .hero-single,
  .hero .container {
    min-height: calc(450px - var(--header-h)) !important;
    padding: 22px 0 34px !important;
  }

  .hero h1 {
    font-size: clamp(1.72rem, 8.4vw, 2.22rem) !important;
    max-width: 340px !important;
  }

  .hero-text,
  .hero p.hero-text,
  .hero p {
    font-size: .88rem !important;
    max-width: 330px !important;
  }

  .hero-actions {
    margin-top: 18px !important;
  }

  .hero-actions .btn {
    min-height: 43px !important;
    font-size: .86rem !important;
  }

  .product-category {
    padding: 18px !important;
    border-radius: 24px !important;
  }

  .product-image {
    height: 185px !important;
  }

  .product-body h3 {
    font-size: 1.2rem !important;
  }

  .product-body p {
    font-size: .87rem !important;
  }

  .about-content h2 {
    font-size: 2.18rem !important;
  }

  .about-content p {
    font-size: 1.03rem !important;
  }
}

/* ===== OSUNS PREMIUM LOGO + PRODUCT CTA FINAL FIX ===== */
:root {
  --header-h: 118px;
}

.site-header {
  height: var(--header-h) !important;
}

.nav-wrap {
  gap: 20px !important;
}

.brand {
  width: 220px !important;
  min-width: 220px !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}

.brand-logo {
  height: 112px !important;
  max-width: 212px !important;
  width: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  padding: 0 !important;
  filter: drop-shadow(0 8px 18px rgba(11, 35, 65, .12));
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.footer .footer-brand img,
.footer img {
  height: 150px !important;
  max-width: 230px !important;
  width: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  filter: drop-shadow(0 10px 22px rgba(11, 35, 65, .12));
}

.product-card {
  position: relative !important;
  border-radius: 26px !important;
  border: 1px solid rgba(185, 138, 35, .24) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%) !important;
  box-shadow: 0 12px 34px rgba(11, 35, 65, .08) !important;
}

.product-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 24px 60px rgba(11, 35, 65, .16) !important;
  border-color: rgba(185, 138, 35, .48) !important;
}

.product-image {
  height: 205px !important;
  transition: transform .35s ease, filter .35s ease !important;
}

.product-card:hover .product-image {
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.04);
}

.product-body {
  padding: 20px 18px 22px !important;
  align-items: center !important;
  text-align: center !important;
}

.product-body>span {
  max-width: 100% !important;
  white-space: normal !important;
  text-align: center !important;
}

.product-body p {
  display: none !important;
}

.product-mini-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin: 8px 0 16px;
}

.product-mini-info em {
  font-style: normal;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
  padding: 7px 9px;
  border-radius: 999px;
  color: var(--navy);
  background: rgba(185, 138, 35, .13);
  border: 1px solid rgba(185, 138, 35, .18);
}

.product-actions {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: auto !important;
}

.product-actions .text-link {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  padding: 10px 12px !important;
  font-size: .84rem !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease !important;
}

.product-actions a.text-link {
  background: #091e3a !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(9, 30, 58, .18) !important;
}

.product-actions button.text-link {
  background: #091e3a !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(9, 30, 58, .18) !important;
}

.product-actions .text-link:after {
  content: "" !important;
}

.product-actions .text-link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 28px rgba(11, 35, 65, .22) !important;
}

.type-card {
  display: flex;
  flex-direction: column;
}

.type-card p {
  display: none !important;
}

.product-highlights {
  list-style: none;
  margin: 0 22px 18px;
  padding: 0;
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 800;
}

.product-highlights li {
  position: relative;
  padding-left: 18px;
}

.product-highlights li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 900;
}

.type-enquiry {
  margin-top: auto !important;
  box-shadow: 0 10px 22px rgba(185, 138, 35, .22);
}

@media (max-width:1120px) {
  :root {
    --header-h: 108px;
  }

  .brand {
    width: 190px !important;
    min-width: 190px !important;
  }

  .brand-logo {
    height: 102px !important;
    max-width: 190px !important;
  }

  .footer .footer-brand img,
  .footer img {
    height: 135px !important;
  }
}

@media (max-width:900px) {
  :root {
    --header-h: 98px;
  }

  .nav-wrap {
    align-items: center !important;
  }

  .brand {
    width: 178px !important;
    min-width: 178px !important;
  }

  .brand-logo {
    height: 94px !important;
    max-width: 176px !important;
  }

  .main-nav {
    top: var(--header-h) !important;
    height: calc(100dvh - var(--header-h)) !important;
  }

  .footer-brand {
    align-items: center !important;
  }

  .footer .footer-brand img,
  .footer img {
    height: 125px !important;
    margin-inline: auto !important;
  }
}

@media (max-width:640px) {
  :root {
    --header-h: 92px;
  }

  .brand {
    width: 158px !important;
    min-width: 158px !important;
  }

  .brand-logo {
    height: 86px !important;
    max-width: 158px !important;
  }

  .product-actions {
    grid-template-columns: 1fr !important;
  }

  .product-actions .text-link {
    min-height: 46px !important;
    font-size: .9rem !important;
  }

  .product-mini-info em {
    font-size: .7rem;
  }

  .footer .footer-brand img,
  .footer img {
    height: 118px !important;
  }
}


/* ===== FINAL USER REQUEST FIX: LOGO BACKGROUND, FOOTER ALIGNMENT, REMOVE PRODUCT WHATSAPP ENQUIRY ===== */
.site-header {
  background: #ffffff !important;
  background-image: none !important;
}

.nav-wrap {
  align-items: center !important;
}

.brand {
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.brand-logo {
  display: block !important;
  background: #ffffff !important;
  mix-blend-mode: normal !important;
  box-shadow: none !important;
  filter: none !important;
  border: 0 !important;
  object-fit: contain !important;
}

.footer {
  background: #ffffff !important;
}

.footer-grid {
  align-items: start !important;
}

.footer-brand {
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  width: 320px !important;
}

.footer .footer-brand img,
.footer-logo {
  display: block !important;
  margin: 0 auto 8px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  filter: none !important;
  object-fit: contain !important;
}

.footer-social {
  justify-content: center !important;
  width: 100% !important;
}

.product-mini-info {
  margin: 10px 0 18px !important;
}

.product-mini-info em {
  font-size: .72rem !important;
}

.product-actions {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-top: auto !important;
}

.product-actions button,
.product-actions .open-order {
  display: none !important;
}

  .product-actions a.text-link {
  width: 100% !important;
  min-height: 46px !important;
  border-radius: 999px !important;
  background: #091e3a !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(9, 30, 58, .18) !important;
}

.product-actions a.text-link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 34px rgba(11, 35, 65, .22) !important;
}

.type-enquiry,
.type-card button.open-order,
.detail-hero button.open-order {
  display: none !important;
}

.type-card {
  padding-bottom: 18px !important;
}

@media (max-width:900px) {
  .brand {
    justify-content: flex-start !important;
  }

  .footer-grid {
    text-align: center !important;
  }
}

@media (max-width:640px) {
  .brand-logo {
    height: 82px !important;
    max-width: 150px !important;
  }

  .product-actions a.text-link {
    min-height: 48px !important;
    font-size: .92rem !important;
  }
}


/* ===== FINAL MERGE FIX: larger consistent logo + alignment across all pages ===== */
:root {
  --header-h: 126px !important;
}

.site-header {
  height: var(--header-h) !important;
  background: #ffffff !important;
  background-image: none !important;
}

.nav-wrap {
  min-height: var(--header-h) !important;
  align-items: center !important;
}

.brand {
  width: 250px !important;
  min-width: 250px !important;
  height: var(--header-h) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: #ffffff !important;
  overflow: visible !important;
}

.brand-logo {
  height: 120px !important;
  max-width: 240px !important;
  width: auto !important;
  object-fit: contain !important;
  background: #ffffff !important;
  mix-blend-mode: normal !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.main-nav {
  align-items: center !important;
}

.footer-grid {
  align-items: flex-start !important;
}

.footer-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
}

.footer .footer-brand img,
.footer-logo {
  height: 150px !important;
  max-height: 140px !important;
  width: auto !important;
  max-width: 130px !important;
  display: block !important;
  object-fit: contain !important;
  margin: 0 auto 12px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  filter: none !important;
}

.footer-social {
  justify-content: center !important;
}

.detail-hero button.open-order,
.type-enquiry,
.type-card button.open-order {
  display: none !important;
}

.type-card p {
  font-size: .95rem !important;
  line-height: 1.55 !important;
}

@media (max-width:1120px) {
  :root {
    --header-h: 116px !important;
  }

  .brand {
    width: 215px !important;
    min-width: 215px !important;
    height: var(--header-h) !important;
  }

  .brand-logo {
    height: 108px !important;
    max-width: 210px !important;
  }

  .footer .footer-brand img,
  .footer-logo {
    height: 138px !important;
    max-height: 138px !important;
  }
}

@media (max-width:900px) {
  :root {
    --header-h: 104px !important;
  }

  .nav-wrap {
    min-height: var(--header-h) !important;
  }

  .brand {
    width: 190px !important;
    min-width: 190px !important;
    height: var(--header-h) !important;
    justify-content: flex-start !important;
  }

  .brand-logo {
    height: 98px !important;
    max-width: 185px !important;
  }

  .main-nav {
    top: var(--header-h) !important;
    height: calc(100dvh - var(--header-h)) !important;
  }

  .footer-grid {
    text-align: center !important;
  }

  .footer .footer-brand img,
  .footer-logo {
    height: 130px !important;
    max-height: 130px !important;
  }
}

@media (max-width:640px) {
  :root {
    --header-h: 96px !important;
  }

  .brand {
    width: 166px !important;
    min-width: 166px !important;
    height: var(--header-h) !important;
  }

  .brand-logo {
    height: 90px !important;
    max-width: 164px !important;
  }

  .footer .footer-brand img,
  .footer-logo {
    height: 120px !important;
    max-height: 120px !important;
  }
}

/* ===== OSUNS FINAL HEADER RESET: topbar left/right + bigger centered logo ===== */
:root {
  --topbar-h: 36px !important;
  --nav-h: 112px !important;
  --header-h: 148px !important;
}

.site-header {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 3000 !important;
  height: var(--header-h) !important;
  background: #fff !important;
  border-bottom: 1px solid rgba(185, 138, 35, .20) !important;
  box-shadow: 0 8px 24px rgba(11, 35, 65, .08) !important;
  overflow: visible !important;
}

.top-info-bar {
  height: var(--topbar-h) !important;
  background: #091e3a !important;
  color: #fff !important;
  font-size: .81rem !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  display: flex !important;
  align-items: center !important;
}

.top-info-inner {
  width: min(100% - 32px, 1220px) !important;
  height: 100% !important;
  margin-inline: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  white-space: nowrap !important;
}

.top-location {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: max-content !important;
}

.top-contact {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 22px !important;
  margin-left: auto !important;
}

.top-contact a,
.top-contact span {
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 800 !important;
}

.nav-wrap {
  position: relative !important;
  height: var(--nav-h) !important;
  min-height: var(--nav-h) !important;
  width: min(100% - 32px, 1220px) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 28px !important;
  padding: 0 !important;
  background: #fff !important;
}

.brand {
  width: 220px !important;
  min-width: 220px !important;
  height: var(--nav-h) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 220px !important;
}

.brand-logo {
  height: 104px !important;
  max-height: 104px !important;
  width: auto !important;
  max-width: 210px !important;
  display: block !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}

.main-nav {
  height: var(--nav-h) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 18px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  background: transparent !important;
}

.nav-link,
.nav-whatsapp {
  min-height: 42px !important;
  padding: 10px 8px !important;
  border-radius: 999px !important;
  font-size: .82rem !important;
  font-weight: 900 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #2d2d2d !important;
  background: transparent !important;
}

.nav-whatsapp {
  padding: 10px 18px !important;
  background: #2e8b57 !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(46, 139, 87, .20) !important;
  letter-spacing: .035em !important;
}

.nav-link:hover,
.nav-dropdown.open>.dropdown-toggle {
  background: rgba(185, 138, 35, .10) !important;
  color: var(--gold) !important;
}

.dropdown-menu {
  z-index: 4000 !important;
}

.hero {
  padding-top: var(--header-h) !important;
}

.detail-hero {
  padding-top: calc(var(--header-h) + 38px) !important;
}

.menu-toggle {
  z-index: 3100 !important;
}

@media (max-width:1120px) {
  :root {
    --nav-h: 104px !important;
    --header-h: 140px !important;
  }

  .nav-wrap {
    grid-template-columns: 190px minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .brand {
    width: 190px !important;
    min-width: 190px !important;
    height: var(--nav-h) !important;
  }

  .brand-logo {
    height: 98px !important;
    max-height: 98px !important;
    max-width: 185px !important;
  }

  .main-nav {
    gap: 9px !important;
  }

  .nav-link,
  .nav-whatsapp {
    font-size: .72rem !important;
    padding-inline: 6px !important;
    letter-spacing: .04em !important;
  }

  .nav-whatsapp {
    padding-inline: 12px !important;
  }
}

@media (max-width:900px) {
  :root {
    --topbar-h: 48px !important;
    --nav-h: 96px !important;
    --header-h: 144px !important;
  }

  .site-header {
    height: var(--header-h) !important;
  }

  .top-info-bar {
    height: var(--topbar-h) !important;
    font-size: .72rem !important;
    line-height: 1.25 !important;
  }

  .top-info-inner {
    width: min(100% - 18px, 1220px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 2px !important;
    padding: 5px 0 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .top-location {
    justify-content: center !important;
    min-width: 0 !important;
  }

  .top-contact {
    justify-content: center !important;
    margin: 0 !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  .nav-wrap {
    height: var(--nav-h) !important;
    min-height: var(--nav-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(100% - 22px, 1220px) !important;
  }

  .menu-toggle {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 48px !important;
    height: 48px !important;
  }

  .brand {
    width: 180px !important;
    min-width: 180px !important;
    height: var(--nav-h) !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }

  .brand-logo {
    height: 90px !important;
    max-height: 90px !important;
    max-width: 176px !important;
  }

  .main-nav {
    position: fixed !important;
    top: var(--header-h) !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(100dvh - var(--header-h)) !important;
    display: block !important;
    background: #fff !important;
    padding: 18px !important;
    overflow-y: auto !important;
    transform: translateX(100%) !important;
    transition: transform .25s ease !important;
    border-top: 1px solid var(--border) !important;
  }

  .main-nav.open {
    transform: translateX(0) !important;
  }

  .nav-link,
  .nav-whatsapp {
    width: 100% !important;
    justify-content: space-between !important;
    border-radius: 12px !important;
    padding: 13px 14px !important;
    margin-bottom: 6px !important;
    min-height: 50px !important;
    font-size: .95rem !important;
    letter-spacing: .03em !important;
  }

  .nav-whatsapp {
    justify-content: center !important;
    margin-top: 12px !important;
    background: #2e8b57 !important;
    color: #fff !important;
  }

  .nav-dropdown {
    width: 100% !important;
  }

  .dropdown-menu {
    position: static !important;
    min-width: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    border: 1px solid rgba(12, 31, 63, .08) !important;
    background: var(--cream) !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height .25s ease, padding .25s ease !important;
  }

  .nav-dropdown.open .dropdown-menu {
    max-height: 520px !important;
    padding: 8px !important;
  }
}

@media (max-width:480px) {
  :root {
    --topbar-h: 50px !important;
    --nav-h: 92px !important;
    --header-h: 142px !important;
  }

  .top-info-bar {
    font-size: .68rem !important;
  }

  .top-contact {
    gap: 8px !important;
  }

  .brand {
    width: 165px !important;
    min-width: 165px !important;
  }

  .brand-logo {
    height: 86px !important;
    max-height: 86px !important;
    max-width: 160px !important;
  }
}


/* ===== FINAL BULK ENQUIRY TYPE BUTTON + NO OTP FIX ===== */
.type-card .type-enquiry,
.type-card button.type-enquiry.open-order {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  min-width: 145px !important;
  margin: auto 22px 24px !important;
  padding: 11px 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--gold-light), var(--gold)) !important;
  color: var(--navy) !important;
  font-weight: 900 !important;
  font-size: .9rem !important;
  box-shadow: 0 10px 22px rgba(185, 138, 35, .22) !important;
  cursor: pointer !important;
}

.type-card .type-enquiry:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(185, 138, 35, .28) !important;
}

.otp-display,
#generateOtpBtn,
#otpCode,
label:has(#otpCode) {
  display: none !important;
}

.order-box h2 {
  font-family: var(--font-serif) !important;
  color: var(--navy) !important;
}

@media (max-width:640px) {

  .type-card .type-enquiry,
  .type-card button.type-enquiry.open-order {
    width: calc(100% - 44px) !important;
    margin: auto 22px 22px !important;
  }
}

/* ===== FINAL REQUEST: CENTER LOGO BETWEEN BOTH PRODUCT MENUS ===== */
@media (min-width: 901px) {
  :root {
    --topbar-h: 36px !important;
    --nav-h: 112px !important;
    --header-h: 148px !important;
  }

  .site-header {
    height: var(--header-h) !important;
    overflow: visible !important;
  }

  .nav-wrap {
    position: relative !important;
    height: var(--nav-h) !important;
    min-height: var(--nav-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  .brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 5 !important;
    width: 220px !important;
    min-width: 220px !important;
    height: var(--nav-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    pointer-events: auto !important;
  }

  .brand-logo {
    height: 104px !important;
    max-height: 104px !important;
    max-width: 210px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    background: transparent !important;
  }

  .main-nav {
    width: 100% !important;
    height: var(--nav-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Creates the exact center gap for the logo between Chocolates and Baked Products */
  .main-nav>.nav-dropdown:first-of-type {
    margin-right: 245px !important;
  }

  .main-nav>.nav-link,
  .main-nav>.nav-dropdown>.nav-link,
  .main-nav>.nav-whatsapp,
  .main-nav .group-cta>a {
    min-height: 42px !important;
    padding: 10px 10px !important;
    font-size: .82rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  .main-nav .group-cta {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .main-nav .group-cta>a {
    margin: 0 !important;
    background: #25D366 !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 12px 18px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    box-shadow: 0 10px 22px rgba(37, 211, 102, .22) !important;
  }

  .hero {
    padding-top: var(--header-h) !important;
  }

  .detail-hero {
    padding-top: calc(var(--header-h) + 38px) !important;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .brand {
    width: 195px !important;
    min-width: 195px !important;
  }

  .brand-logo {
    height: 94px !important;
    max-height: 94px !important;
    max-width: 185px !important;
  }

  .main-nav {
    gap: 10px !important;
  }

  .main-nav>.nav-dropdown:first-of-type {
    margin-right: 205px !important;
  }

  .main-nav>.nav-link,
  .main-nav>.nav-dropdown>.nav-link,
  .main-nav .group-cta>a {
    font-size: .70rem !important;
    padding-inline: 6px !important;
  }

  .main-nav .group-cta>a {
    padding-inline: 12px !important;
  }
}
/* ===== DELIVERY PROCESS, TIMING & TERMS SECTION ===== */
.delivery-section {
  position: relative !important;
  overflow: hidden !important;
  background:#f9f4ec;
    
}

.delivery-section::before {
  position: absolute;
  inset: 32px auto auto 4%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(185, 138, 35, .08);
  filter: blur(2px);
}

.delivery-section .container {
  position: relative !important;
  z-index: 2 !important;
}

.delivery-process-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  margin-top: 34px !important;
}

.delivery-step-card {
  position: relative !important;
  min-height: 290px !important;
  padding: 5px 22px !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(185, 138, 35, .24) !important;
  box-shadow: 0 16px 42px rgba(11, 35, 65, .09) !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
}

.delivery-step-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 58px rgba(11, 35, 65, .16) !important;
  border-color: rgba(185, 138, 35, .48) !important;
}

.delivery-step-no {
  position: absolute !important;
  top: 18px !important;
  right: 20px !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  color: var(--gold) !important;
  letter-spacing: .08em !important;
}

.delivery-icon {
  width: 100% !important;
  max-width: 220px !important;
  height: auto !important;
  margin: 0 auto 18px !important;
  display: grid !important;
  place-items: center !important;
  background: none !important;
  font-size: 2rem !important;
}

.service-card .delivery-icon {
  width: 110px !important;
  max-width: 110px !important;
  height: 110px !important;
  margin: 0 auto 1px !important;
  padding: 1px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.delivery-icon img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  display: block !important;
}

.service-card .delivery-icon img {
  width: 72% !important;
  max-width: 72% !important;
  height: 72% !important;
  max-height: 72% !important;
  object-fit: contain !important;
  display: block !important;

}

.delivery-step-card h3,
.delivery-info-card h3 {
  font-family: var(--font-serif) !important;
  color: #091e3a !important;
  font-size: 1.55rem !important;
  line-height: 1.05 !important;
  margin-bottom: 12px !important;
  text-align: center !important;
}

.delivery-step-card p {
  color: var(--text) !important;
  font-size: .96rem !important;
  line-height: 1.65 !important;
}

.delivery-info-grid {
  display: grid !important;
  grid-template-columns: 1.2fr .9fr 1fr !important;
  gap: 22px !important;
  margin-top: 28px !important;
}

.delivery-info-card {
  padding: 28px !important;
  border-radius: 28px !important;
  background: #ffffff !important;
  border: 1px solid rgba(13, 90, 110, .14) !important;
  box-shadow: 0 14px 38px rgba(11, 35, 65, .08) !important;
}

.timing-card {
  background: linear-gradient(135deg, #07172E, #0B2341 58%, #0D5A6E) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .16) !important;
}

.delivery-info-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}

.delivery-info-head span {
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  background: rgba(185, 138, 35, .16) !important;
  font-size: 1.45rem !important;
}

.timing-card .delivery-info-head span {
  background: rgba(255, 255, 255, .13) !important;
}

.timing-card h3 {
  color: #fff !important;
}

.delivery-info-card ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 12px !important;
}

.delivery-info-card li {
  position: relative !important;
  padding-left: 24px !important;
  color: var(--muted) !important;
  font-size: .96rem !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
}

.delivery-info-card li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: var(--gold) !important;
  font-weight: 900 !important;
}

.timing-card li {
  color: rgba(255, 255, 255, .88) !important;
}

.timing-card li::before {
  color: var(--gold-light) !important;
}

.timing-card strong {
  color: #fff !important;
}

@media (max-width:1120px) {
  .delivery-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .delivery-info-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width:640px) {
  .delivery-process-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .delivery-step-card {
    min-height: auto !important;
    padding: 26px 20px !important;
  }

  .delivery-info-card {
    padding: 22px !important;
    border-radius: 24px !important;
  }

  .delivery-info-head {
    align-items: flex-start !important;
  }

  .delivery-step-card h3,
  .delivery-info-card h3 {
    font-size: 1.38rem !important;
  }
}


/* ===== SERVICE NAV & CUSTOMER-FOCUSED CONTENT POLISH ===== */
.services-section .section-heading h2 {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.services-section .section-heading p {
  max-width: 920px !important;
}
.service-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.service-card h3 {
  min-height: 52px !important;
  margin: 0 0 1px !important;
  font-size: 1.1rem !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  color: #0b2341 !important;
  font-family: var(--text, 'Cormorant Garamond', serif) !important;
}

.service-card p {
  margin: 0 0 7px !important;
  width: 100% !important;
  text-align: left !important;
}

.about-content p {
  font-size: 1.02rem !important;
  line-height: 1.82 !important;
}
.main-nav .group-cta {
  margin: 0 !important;
}
.main-nav .group-cta a {
  padding: 10px 18px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}
@media (max-width: 960px) {
  .main-nav .group-cta {
    width: 100% !important;
    margin-top: 10px !important;
  }
}

/* ===== FINAL LOGO POSITION BALANCE - SHIFT LITTLE LEFT ===== */
@media (min-width: 992px) {
  .brand {
    transform: translateX(-14px) !important;
  }

  .brand-logo {
    transform: translateX(-12px) !important;
  }

  .main-nav {
    gap: 16px !important;
  }
}

@media (max-width: 991px) {
  .brand,
  .brand-logo {
    transform: none !important;
  }
}

/* ===== CORRECTED PREMIUM NAVBAR LOGO CENTER ALIGNMENT ===== */
@media (min-width: 992px) {
  .site-header {
    overflow: visible !important;
  }

  .nav-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: var(--nav-h, 112px) !important;
    min-height: var(--nav-h, 112px) !important;
    padding: 0 !important;
  }

  .brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(calc(-50% - 14px), -50%) !important;
    width: 220px !important;
    min-width: 220px !important;
    height: var(--nav-h, 112px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 10 !important;
  }

  .brand-logo {
    height: 104px !important;
    max-height: 104px !important;
    max-width: 210px !important;
    width: auto !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .brand-logo {
    transform: translateX(-17px) !important;
}

  .main-nav {
    width: 100% !important;
    height: var(--nav-h, 112px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .main-nav > .nav-dropdown:first-of-type {
    margin-right:195px !important;
  }

  .main-nav > .nav-link,
  .main-nav > .nav-dropdown > .nav-link,
  .main-nav .group-cta > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 10px 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .main-nav .group-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 991px) {
  .brand,
  .brand-logo {
    transform: none !important;
  }
}


/* ===== OTHER BUSINESSES SECTION ===== */
.other-businesses {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 10% 18%, rgba(185, 138, 35, .10), transparent 28%),
    radial-gradient(circle at 90% 85%, rgba(13, 90, 110, .10), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #fbf8f1 100%) !important;
}

.other-businesses .container {
  position: relative !important;
  z-index: 2 !important;
}

.other-business-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
}

.other-business-card {
  position: relative !important;
  min-height: 360px !important;
  padding: 28px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(185, 138, 35, .26) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 18px 48px rgba(11, 35, 65, .10) !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
}

.other-business-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 26px 62px rgba(11, 35, 65, .16) !important;
  border-color: rgba(185, 138, 35, .52) !important;
}

.other-business-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

.other-business-logo-wrap {
  flex: 0 0 auto !important;
  width: 132px !important;
  min-height: 88px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.other-business-logo {
  width: auto !important;
  max-width: 132px !important;
  height: auto !important;
  max-height: 92px !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  transition: none !important;
  transform: none !important;
}

.bumoniis-business-logo {
  max-height: 94px !important;
}

.sarvathaa-business-logo {
  max-height: 140px !important;
}

.other-business-tag {
  margin-left: auto !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  background: rgba(13, 90, 110, .08) !important;
  color: #091e3a !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  text-align: right !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  max-width: 230px !important;
}

.other-business-card h3 {
  font-family: var(--font-sans) !important;
  color: #091e3a !important;
  font-size: clamp(1.0rem, 3vw, 1.70rem) !important;
  line-height: 1.05 !important;
  text-align: center !important;
  margin: 6px 0 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
}
.other-business-card p {
  color: var(--text) !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
  text-align: center !important;
  margin: 0 auto 22px !important;
  max-width: 560px !important;
  flex: 1 !important;
}

.other-business-link {
  width: max-content !important;
  max-width: 100% !important;
  margin: auto auto 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 11px 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--gold-light), var(--gold)) !important;
  color: var(--navy) !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 24px rgba(185, 138, 35, .22) !important;
  word-break: break-word !important;
}

.other-business-link:hover {
  transform: translateY(-2px) !important;
  color: var(--navy) !important;
}

@media (max-width: 860px) {
  .other-business-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 540px) {
  .other-business-card {
    padding: 22px !important;
    border-radius: 24px !important;
    min-height: auto !important;
  }

  .other-business-top {
    gap: 12px !important;
  }

  .other-business-logo-wrap {
    width: 110px !important;
    min-height: 74px !important;
  }

  .other-business-logo {
    max-width: 110px !important;
    max-height: 78px !important;
  }

  .other-business-tag {
    font-size: .72rem !important;
    padding: 8px 11px !important;
    max-width: 172px !important;
  }
}

/* ===== FINAL FIX: NAV + OTHER BUSINESSES ALIGNMENT ===== */
.main-nav .nav-group-cta {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}
.main-nav .nav-group-cta .nav-group-link {
  margin: 0 !important;
  min-height: 44px !important;
  padding: 10px 15px !important;
  border-radius: 999px !important;
  background: #25D366 !important;
  color: #ffffff !important;
  font-size: .86rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
.page-group-cta {
  width: min(1120px, calc(100% - 32px)) !important;
  margin: 36px auto 44px !important;
  text-align: center !important;
}
.page-group-cta .page-group-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 13px 26px !important;
  border-radius: 999px !important;
  background: #25D366 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}
.other-businesses {
  padding: 78px 0 !important;
}
.other-business-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
}
.other-business-card {
  height: 100% !important;
  min-height: 360px !important;
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
}
.other-business-top {
  width: 100% !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}
.other-business-logo-wrap {
  width: 132px !important;
  min-height: 88px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  flex: 0 0 132px !important;
}
.other-business-logo {
  max-width: 132px !important;
  max-height: 92px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  transform: none !important;
  transition: none !important;
}
.other-business-tag {
  margin-left: auto !important;
  align-self: flex-start !important;
  max-width: 230px !important;
  text-align: right !important;
}
.other-business-card h3 {
  width: 100% !important;
  text-align: center !important;
}
.other-business-card p {
  width: 100% !important;
  max-width: 560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: justify !important;
  flex: 1 1 auto !important;
}
.other-business-link {
  margin: auto auto 0 !important;
}
@media (max-width: 991px) {
  .main-nav.open .nav-group-cta,
  .main-nav .nav-group-cta {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 8px !important;
  }
  .main-nav .nav-group-cta .nav-group-link {
    width: min(260px, 100%) !important;
  }
}
@media (max-width: 860px) {
  .other-business-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 540px) {
  .other-businesses {
    padding: 56px 0 !important;
  }
  .other-business-card {
    padding: 22px !important;
    min-height: auto !important;
  }
  .other-business-top {
    gap: 12px !important;
  }
  .other-business-logo-wrap {
    flex-basis: 108px !important;
    width: 108px !important;
    min-height: 72px !important;
  }
  .other-business-logo {
    max-width: 108px !important;
    max-height: 76px !important;
  }
  .other-business-tag {
    max-width: 170px !important;
    font-size: .72rem !important;
    text-align: right !important;
  }
}


/* ===== FINAL FIX: Floating WhatsApp For Enquiry Label ===== */
.floating-whatsapp {
  width: auto !important;
  min-width: 176px !important;
  height: 58px !important;
  padding: 0 18px 0 14px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  line-height: 1 !important;
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.85) !important;
  box-shadow: 0 16px 38px rgba(37, 211, 102, .35), 0 6px 16px rgba(0,0,0,.12) !important;
}

.floating-whatsapp svg {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  fill: #fff !important;
}

.floating-whatsapp-text {
  display: inline-block !important;
  color: #fff !important;
  white-space: nowrap !important;
}

.floating-whatsapp:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 20px 44px rgba(37, 211, 102, .42), 0 8px 20px rgba(0,0,0,.14) !important;
}

@media (max-width: 640px) {
  .floating-whatsapp {
    right: 14px !important;
    bottom: 14px !important;
    min-width: 152px !important;
    height: 52px !important;
    padding: 0 14px 0 12px !important;
    gap: 8px !important;
    font-size: .88rem !important;
  }

  .floating-whatsapp svg {
    width: 27px !important;
    height: 27px !important;
    flex-basis: 27px !important;
  }
}


.section-navy .serve-grid div:hover {
  background: #ffffff !important;
  border-color: rgba(185, 138, 35, .32) !important;
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(11, 35, 65, .12);
}


/* === BUMONIIS-MATCHED PRODUCT IMAGE GRID (B2B) === */
.product-grid,
.type-grid {
  align-items: stretch;
}

.product-card,
.type-card {
  height: 100%;
}

.product-image {
  height: 245px !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #fff !important;
}

.type-image {
  height: 245px !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #fff !important;
}

.detail-image {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #fff !important;
}

/* Keep all cards aligned like Bumoniis on tablet and mobile */
@media (max-width: 900px) {
  .baked-grid,
  .product-grid,
  .type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .baked-grid,
  .product-grid,
  .type-grid {
    grid-template-columns: 1fr !important;
  }
  .product-image,
  .type-image {
    height: 235px !important;
  }
}


/* ===== FINAL HOME PRODUCT & OTHER-BUSINESS POLISH ===== */
#products.products {
  background: linear-gradient(180deg, #fffdf8 0%, #f8fbfa 48%, #ffffff 100%) !important;
  padding-top: 10px !important;
  padding-bottom: 60px !important;
}
#products .section-heading {
  max-width: 780px !important;
  margin: 0 auto 4px !important;
  text-align: center !important;
}
#products .section-heading h2 {
  font-size: clamp(2rem, 4vw, 3.15rem) !important;
  letter-spacing: -0.035em !important;
}
#products .product-category {
  padding: 30px !important;
  margin-top: 30px !important;
  border: 1px solid rgba(10, 76, 68, .12) !important;
  border-radius: 26px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 18px 48px rgba(17, 55, 48, .08) !important;
}
#products .category-header {
  margin-bottom: 24px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(10, 76, 68, .10) !important;
}
#products .category-header h3 {
  margin-top: 5px !important;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem) !important;
}
#products .product-grid {
  gap: 20px !important;
}
#products .product-card {
  overflow: hidden !important;
  border: 1px solid rgba(10, 76, 68, .12) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(17,55,48,.08) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
#products .product-card:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(191,145,42,.42) !important;
  box-shadow: 0 20px 42px rgba(17,55,48,.15) !important;
}
#products .product-image {
  min-height: 245px !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 0 !important;
  position: relative !important;
}
#products .product-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(4,37,33,.16));
  pointer-events: none;
}
#products .product-body {
  padding: 21px 21px 23px !important;
}
#products .product-body > span {
  display: inline-block !important;
  margin-bottom: 8px !important;
  color: #8a6715 !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}
#products .product-body h3 {
  margin: 0 0 13px !important;
  font-size: 1.22rem !important;
}
#products .product-mini-info {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}
#products .product-mini-info em {
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: #f1f7f5 !important;
  color: #285c54 !important;
  font-size: .72rem !important;
  font-style: normal !important;
  font-weight: 700 !important;
}
#products .text-link {
  font-weight: 800 !important;
}

/* Make both related-business logos large and visually equal on every page. */
.other-business-logo-wrap {
  width: 190px !important;
  height: 125px !important;
  min-height: 125px !important;
  flex: 0 0 190px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(10,76,68,.10) !important;
}
.other-business-logo {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}
.bumoniis-business-logo,
.sarvathaa-business-logo {
  transform: scale(1.08) !important;
}
@media (max-width: 700px) {
  #products .product-category { padding: 20px !important; border-radius: 20px !important; }
  #products .product-image { min-height: 220px !important; }
  .other-business-top { flex-direction: column !important; align-items: center !important; }
  .other-business-logo-wrap { width: 180px !important; height: 115px !important; flex-basis: 180px !important; }
  .other-business-tag { margin: 0 auto !important; text-align: center !important; }
}

/* ===== FINAL REQUEST: OPEN OTHER-BUSINESS LOGOS + FULLY VISIBLE SUB-PRODUCT IMAGES ===== */
/* Remove the small rectangular logo holder. Keep both logos large and visually balanced. */
.other-business-logo-wrap {
  width: 210px !important;
  height: 125px !important;
  min-height: 125px !important;
  flex: 0 0 210px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.other-business-logo {
  width: 100% !important;
  height: 100% !important;
  max-width: 210px !important;
  max-height: 125px !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: none !important;
}
.bumoniis-business-logo,
.sarvathaa-business-logo {
  transform: none !important;
}

/* Match Bumoniis sub-product card proportions and keep every product fully visible. */
.type-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 26px !important;
  align-items: stretch !important;
}
.type-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}
.type-image {
  width: 100% !important;
  height: 270px !important;
  min-height: 270px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #fff !important;
  transform: none !important;
}
.type-card:hover .type-image {
  transform: none !important;
}
.type-card .type-enquiry,
.type-card button.type-enquiry.open-order {
  margin-top: auto !important;
}

@media (max-width: 900px) {
  .type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .other-business-logo-wrap {
    width: 190px !important;
    height: 115px !important;
    min-height: 115px !important;
    flex-basis: 190px !important;
  }
  .other-business-logo {
    max-width: 190px !important;
    max-height: 115px !important;
  }
}

@media (max-width: 560px) {
  .type-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .type-image {
    height: 250px !important;
    min-height: 250px !important;
  }
  .other-business-logo-wrap {
    width: 180px !important;
    height: 105px !important;
    min-height: 105px !important;
    flex-basis: 180px !important;
  }
  .other-business-logo {
    max-width: 180px !important;
    max-height: 105px !important;
  }
}


/* ===== FINAL: BUMONIIS-MATCHED SUB-PRODUCT NAMES, DESCRIPTION & CARD SIZE ===== */
/* FIX: 2 and 3 product layouts */
.type-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px !important;
    width: 100% !important;
}
.type-card.bumoniis-match-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid rgba(201, 168, 76, .28) !important;
  border-radius: 28px !important;
  box-shadow: 0 14px 34px rgba(45, 25, 15, .10) !important;
}
.type-card.bumoniis-match-card:hover { transform: translateY(-5px) !important; }
.type-card img.type-image.bumoniis-match-image {
  display: block !important;
  width: 100% !important;
  height: 230px !important;
  min-height: 230px !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #fff !important;
  border-radius: 0 !important;
  transform: none !important;
}
.type-card .type-card-body {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 1.5rem !important;
}
.type-card .type-card .type-card-body h3 {
  margin: 0 !important;
  color: #4a2818 !important;
  font-size: clamp(1.25rem, 2vw, 1.65rem) !important;
  line-height: 1.2 !important;
}
.type-card .type-card-body p {
  flex: 1 1 auto !important;
  margin: .65rem 0 1.1rem !important;
  color: #6f625b !important;
  font-size: .96rem !important;
  line-height: 1.65 !important;
}
.type-card .type-enquiry {
  width: 100% !important;
  margin-top: auto !important;
}
@media (max-width: 900px) {
  .type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  .type-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .type-card img.type-image.bumoniis-match-image { height: 220px !important; min-height: 220px !important; }
}


/* ===== FINAL ALIGNMENT: SUB-PRODUCT NUMBER, DESCRIPTION & ENQUIRY ===== */
.type-grid {
  grid-auto-rows: 1fr !important;
}
.type-card.bumoniis-match-card {
  height: 100% !important;
}
.type-card .type-card-body {
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
}
.type-card .type-card .type-card-body h3 {
  min-height: 2.4em !important;
  display: flex !important;
  align-items: flex-start !important;
}
.type-card .type-card-body p {
  min-height: 5.1em !important;
  width: 100% !important;
}
.type-card .type-enquiry,
.type-card button.type-enquiry.open-order {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 12px 18px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}
@media (max-width: 560px) {
  .type-card .type-card-body h3,
  .type-card .type-card-body p { min-height: 0 !important; }
}


/* ===== FINAL PREMIUM SUB-PRODUCT CONTENT & ENQUIRY STYLE ===== */
.type-card.bumoniis-match-card {
  border: 1px solid rgba(159, 112, 58, .22) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 30px rgba(55, 31, 18, .10) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.type-card.bumoniis-match-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(159, 112, 58, .48) !important;
  box-shadow: 0 18px 40px rgba(55, 31, 18, .15) !important;
}
.type-card.bumoniis-match-card .type-card-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  padding: 22px 22px 24px !important;
  text-align: center !important;
}
.type-card.bumoniis-match-card .type-card-body h3 {
  display: block !important;
  min-height: 0 !important;
  margin: 0 0 10px !important;
  color: #3f2418 !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: clamp(1.0rem, 1.8vw, 1.55rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: .01em !important;
}
.type-card.bumoniis-match-card .type-card-body p {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 1 1 auto !important;
  min-height: 5.4em !important;
  margin: 0 0 20px !important;
  color: #6b5a50 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: .96rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}
.type-card.bumoniis-match-card .type-enquiry,
.type-card.bumoniis-match-card button.type-enquiry.open-order {
  width: 100% !important;
  min-height: 50px !important;
  margin-top: auto !important;
  padding: 13px 20px !important;
  border: 1px solid #6f4a2f !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #70472d, #4a2b1b) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(74, 43, 27, .20) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.type-card.bumoniis-match-card .type-enquiry:hover,
.type-card.bumoniis-match-card button.type-enquiry.open-order:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #8b5b39, #5a3420) !important;
  box-shadow: 0 11px 24px rgba(74, 43, 27, .28) !important;
}
.type-card.bumoniis-match-card .type-enquiry:focus-visible {
  outline: 3px solid rgba(183, 137, 77, .35) !important;
  outline-offset: 3px !important;
}
@media (max-width: 560px) {
  .type-card.bumoniis-match-card .type-card-body { padding: 20px !important; }
  .type-card.bumoniis-match-card .type-card-body p { min-height: 0 !important; font-size: .94rem !important; }
}

/* ===== USER REQUEST: ALIGN SUB-PRODUCT BULK ENQUIRY + GOLD COLOR ONLY ===== */
.type-card.bumoniis-match-card .type-card-body {
  display: flex !important;
  flex-direction: column !important;
}

.type-card.bumoniis-match-card .type-enquiry,
.type-card.bumoniis-match-card button.type-enquiry.open-order {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 50px !important;
  margin: auto 0 0 !important;
  padding: 13px 20px !important;
  box-sizing: border-box !important;
  border: 1px solid #c99a35 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #f2cf73 0%, #d4a63f 52%, #b98522 100%) !important;
  color: #2f2415 !important;
  box-shadow: 0 8px 18px rgba(185, 138, 35, .24) !important;
}

.type-card.bumoniis-match-card .type-enquiry:hover,
.type-card.bumoniis-match-card button.type-enquiry.open-order:hover {
  background: linear-gradient(135deg, #f6da89 0%, #ddb34f 52%, #c49228 100%) !important;
  box-shadow: 0 11px 24px rgba(185, 138, 35, .30) !important;
}


/* Product-oriented header and related images */
.detail-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.related-thumb {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}


/* ===== FINAL OSUN'S-ORIENTED SUB-PRODUCT ENQUIRY BUTTON ===== */
.type-card.bumoniis-match-card .type-enquiry,
.type-card.bumoniis-match-card button.type-enquiry.open-order {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 50px !important;
  margin: auto 0 0 !important;
  padding: 13px 22px !important;
  border: 1px solid #c89a35 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #f2d27d 0%, #d7aa43 55%, #bd8724 100%) !important;
  color: #2f2417 !important;
  box-shadow: 0 7px 16px rgba(151, 105, 27, .22) !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .025em !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.type-card.bumoniis-match-card .type-enquiry:hover,
.type-card.bumoniis-match-card button.type-enquiry.open-order:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #f6dc91 0%, #dfb552 55%, #c8932d 100%) !important;
  box-shadow: 0 10px 22px rgba(151, 105, 27, .3) !important;
}

/* ===== BUMONIIS-STYLE PRODUCT HERO BANNERS ===== */
.hero.hero-slider .hero-slide {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.hero.hero-slider::after {
  background: #f9f4ec !important;
}
@media (max-width: 700px) {
  .hero.hero-slider .hero-slide {
    background-position: center center !important;
  }
  .hero.hero-slider::after {
    background: linear-gradient(90deg, rgba(28, 17, 10, .72), rgba(28, 17, 10, .34)) !important;
  }
}

/* ===== COMPACT, ATTRACTIVE HOME SECTION TYPOGRAPHY ===== */
#about .section-kicker,
.section-heading .section-kicker {
  font-size: 1.20rem !important;
  letter-spacing: .12em !important;
  margin-bottom: 1px !important;
}

#about .about-content h2 {
  font-size: clamp(1.55rem, 2.5vw, 2.05rem) !important;
  line-height: 1.22 !important;
  letter-spacing: -.015em !important;
  max-width: 760px !important;
  margin-bottom: 16px !important;
}

.section-heading h2,
.section-heading.light h2,
.contact h2 {
  font-size: clamp(1.55rem, 2.6vw, 2.15rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -.012em !important;
  margin-bottom: 10px !important;
}

#about .about-content > p:not(.section-kicker),
.section-heading > p:not(.section-kicker) {
  font-size: 0.99rem !important;
  line-height: 1.8 !important;
  color: var(--text) !important;
  margin-bottom: 5px;
}

@media (max-width: 700px) {
  #about .about-content h2,
  .section-heading h2,
  .section-heading.light h2,
  .contact h2 {
    font-size: 1.48rem !important;
    line-height: 1.25 !important;
  }

  #about .about-content > p:not(.section-kicker),
  .section-heading > p:not(.section-kicker) {
    font-size: .9rem !important;
    line-height: 1.65 !important;
  }
}

@media (max-width: 900px) {
  .home-hero-banner {
    min-height: 700px;
    padding-top: calc(var(--header-h) + 28px);
    padding-bottom: 60px
  }

  .home-hero-layout {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .home-hero-copy {
    text-align: left
  }

  .home-hero-copy h1 {
    text-align: left
  }

  .home-hero-media {
    min-height: 300px
  }
}

@media (max-width: 560px) {
  .home-hero-banner {
    min-height: 640px;
    padding-top: calc(var(--header-h) + 20px);
    padding-bottom: 48px
  }

  .home-hero-media {
    min-height: 220px;
    border-radius: 20px;
    border-width: 4px
  }
}


/* ===== SUB-PRODUCT HEADER BANNER: COMPACT AND ALIGNED ===== */
.detail-hero {
  padding-top: calc(var(--header-h) + 30px) !important;
  padding-bottom: 48px !important;
}

.detail-hero .detail-grid {
  grid-template-columns: minmax(0, .95fr) minmax(380px, .9fr) !important;
  gap: 36px !important;
  align-items: center !important;
}

.detail-hero .detail-image {
  width: 100% !important;
  min-height: 340px !important;
  height: 340px !important;
  border-radius: 26px !important;
  border-width: 6px !important;
  background-size: cover !important;
  background-position: center center !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  .detail-hero {
    padding-top: calc(var(--header-h) + 24px) !important;
    padding-bottom: 40px !important;
  }
  .detail-hero .detail-grid {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }
  .detail-hero .detail-image {
    min-height: 300px !important;
    height: 300px !important;
  }
}

@media (max-width: 560px) {
  .detail-hero {
    padding-top: calc(var(--header-h) + 18px) !important;
    padding-bottom: 32px !important;
  }
  .detail-hero .detail-grid {
    gap: 22px !important;
  }
  .detail-hero .detail-image {
    min-height: 235px !important;
    height: 235px !important;
    border-radius: 20px !important;
    border-width: 4px !important;
  }
}


/* ===== HOME PRODUCT IMAGES: MATCH SUB-PRODUCT HEADER BANNER PROPORTIONS ===== */
#products .product-image {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 3 / 2 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 0 !important;
}

/* Keep the product images consistently aligned in every home-page grid. */
#products .product-grid,
#products .baked-grid {
  align-items: stretch !important;
}

#products .product-card {
  height: 100% !important;
}

@media (max-width: 700px) {
  #products .product-image {
    aspect-ratio: 3 / 2 !important;
    min-height: 0 !important;
  }
}
/* About section responsive adjustments */
@media (max-width: 900px) {
  #about .about-main-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  
  #about .about-image-card img {
    min-height: 280px !important;
  }
}

@media (max-width: 768px) {
  .about-section {
    padding: 56px 0 !important;
  }
  
  #about .about-heading {
    margin-bottom: 20px !important;
  }
  
  #about .about-intro-text {
    margin-bottom: 32px !important;
  }
  
  #about .about-intro-text p {
    font-size: 1rem !important;
  }
  
  #about .about-main-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  #about .about-image-card img {
    min-height: 240px !important;
  }
  
  #about .about-content p {
    font-size: 0.95rem !important;
  }
}
/* ===== About Us: unify paragraph color + reduce image size ===== */
#about .about-intro-text p,
#about .about-content p {
  color: var(--text) !important;
}

#about .about-main-grid {
  grid-template-columns: 550px 1fr !important;
}

#about .about-visual {
  justify-content: stretch;
}

#about .about-image-card {
  width: 100%;
  max-width: 560px;
}

#about .about-image-card img {
  min-height: 320px !important;
  max-height: 300px !important;
}

#about .about-content {
  width: 100%;
}

@media (max-width: 980px) {
  #about .about-main-grid {
    grid-template-columns: 1fr !important;
  }
  #about .about-image-card {
    max-width: 420px;
    margin: 0 auto;
  }
  #about .about-visual {
    justify-content: center;
  }
}

/* ===== Chocolates & Confection: match Baked Products card size, 4 visible + arrow scroll for the 5th ===== */
.product-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
}

.product-scroll {
  display: flex !important;
  grid-template-columns: none !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 22px;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.product-scroll::-webkit-scrollbar {
  display: none;
}

.product-scroll .product-card {
  flex: 0 0 calc(25% - 16.5px);
  scroll-snap-align: start;
  min-width: 220px;
}

.carousel-arrow {
  flex: 0 0 auto;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #fff;
  color: #16384d;
  font-size: 1.30rem;
  box-shadow: 0 12px 28px rgba(32, 79, 107, .22);
  border: 1px solid rgba(32, 79, 107, .16);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.carousel-arrow:hover {
  background: var(--gold, #d0a24a);
  color: #fff;
}

@media (max-width: 980px) {
  .product-scroll .product-card {
    flex: 0 0 calc(50% - 11px);
  }
}

@media (max-width: 560px) {
  .product-scroll .product-card {
    flex: 0 0 calc(85% - 8px);
    min-width: 200px;
  }
}

/* ===== FINAL HOME HERO FIX =====
   The .hero-slide elements below the visible hero are DATA ONLY.
   Do not render them as full-screen background layers. */
.home-hero-banner .hero-slide {
  display: none !important;
}

/* Compact desktop banner: content on the left, changing image on the right. */
.home-hero-banner {
  min-height: 430px !important;
  height: 430px !important;
  padding-top: var(--header-h) !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.home-hero-banner .hero-content {
  width: min(100% - 32px, 1230px) !important;
  max-width: 1230px !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 20px 0 !important;
  display: flex !important;
  align-items: center !important;
}

.home-hero-layout {
  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: center !important;
}

.home-hero-copy {
  min-width: 0 !important;
  text-align: left !important;
  padding: 10px 0 !important;
}

.home-hero-copy h1,
.home-hero-copy p {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.home-hero-copy h1 {
  font-size: clamp(2rem, 3.6vw, 3.7rem) !important;
  line-height: 1.05 !important;
  margin-bottom: 14px !important;
}

.home-hero-copy p:not(.eyebrow) {
  max-width: 600px !important;
  font-size: clamp(.9rem, 1.2vw, 1.05rem) !important;
  line-height: 1.5 !important;
}

.home-hero-media {
  width: 100% !important;
  height: 420px !important;
  min-height: 0 !important;
  border-radius: 18px !important;
  background-size: cover !important;
  background-position: center !important;
}

.home-hero-banner::after {
  display: none !important;
}

@media (max-width: 900px) {
  .home-hero-banner {
    height: auto !important;
    min-height: 520px !important;
  }

  .home-hero-banner .hero-content {
    height: auto !important;
    min-height: 0 !important;
    padding: 28px 0 36px !important;
  }

  .home-hero-layout {
    height: auto !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .home-hero-media {
    height: 260px !important;
  }
}

@media (max-width: 560px) {
  .home-hero-banner {
    min-height: 0 !important;
    height: auto !important;
  }

  .home-hero-banner .hero-content {
    width: min(100% - 26px, 1220px) !important;
  }

  .home-hero-media {
    height: 220px !important;
    border-radius: 16px !important;
  }
}

/* ===== FINAL PRODUCT IMAGE PATH / SIZE FIX ===== */
#products .product-image {
  width: 100% !important;
  height: 195px !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.type-grid>*{
  grid-column: span 2 !important;
}
.type-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax( 1fr)) !important;
    gap: 22px !important;
    width: 100% !important;
}

.type-grid > * {
    grid-column: span 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}
/* ===== FINAL FIX: BROWNIES / SUB-PRODUCT CARD LAYOUT =====
   Desktop: always use 3 equal columns.
   With 2 products, the third column stays empty so each card
   keeps exactly the same width as a 3-product layout.
*/
.type-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  width: 100% !important;
  align-items: stretch !important;
}

.type-grid > .type-card {
  grid-column: span 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

@media (max-width: 900px) {
  .type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .type-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}

/* ===== MOBILE-ONLY FINAL FIX: FOOTER LOGO + WHATSAPP/INSTAGRAM GAP ===== */
@media (max-width: 640px) {
  /* Keep the footer logo truly centered on mobile only. */
  .footer .footer-brand {
    width: 100% !important;
    max-width: none !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    text-align: center !important;
    margin-inline: auto !important;
  }

  .footer .footer-brand img,
  .footer .footer-logo {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Instagram is directly after the WhatsApp Join US item in the mobile menu. */
  .main-nav > .footer-social {
    margin-top: 18px !important;
    padding-top: 0 !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ===== MANUFACTURING FIRST SECTION — MOBILE ONLY ===== */
@media (max-width: 640px) {
  .manufacturing-main-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    align-items: start !important;
  }

  .manufacturing-main-grid .about-visual {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .manufacturing-main-grid .about-image-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 24px !important;
  }

  .manufacturing-main-grid .about-image-card img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 240px !important;
    max-height: 320px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 24px !important;
  }

  .manufacturing-main-grid .about-content {
    width: 100% !important;
    margin: 0 !important;
  }

  .manufacturing-main-grid .about-content p {
    margin-bottom: 16px !important;
  }