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

   BAMBOO FIRST — COMPLETE & UNIFIED DESIGN SYSTEM

   Replicated from https://www.bamboofirst.in/

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



@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Forum&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Questrial&display=swap');



:root {

  /* Colors matching Wix site CSS variables */

  --olive: #526a3d;          /* --color_12 & --color_36 */

  --olive-dark: #3a4b2e;     /* Deep forest olive */

  --olive-darker: #2b3822;   /* Darkest tone */

  --cream: #fffbeb;          /* --color_11 & --color_37: #FFFBEB */

  --cream-soft: #fbf6df;     /* Soft warm cream */

  --sage-accent: #7d9269;    /* --color_41 & --color_38 */

  --sage-pale: #e4e9cb;      /* Soft sage */

  --sage-pale2: #f2f5e3;     /* Background pale sage */

  --sage-mid: #a9b394;       /* --color_13 & --color_39 */

  --accent-gold: #d8dfa9;    /* --color_25 & --color_42 */

  --ink: #212112;            /* --color_21 */

  --ink-soft: #555c48;       /* Muted body text */

  --ink-light: #79857b;      /* Caption muted */

  --line-light: rgba(255, 251, 235, 0.2);

  --line-dark: rgba(82, 106, 61, 0.16);

  --white: #ffffff;

  --black: #000000;



  /* Typography */

  --font-display: 'Forum', 'Cinzel', serif;

  --font-body: 'Questrial', 'Montserrat', sans-serif;

  --font-accent: 'Montserrat', sans-serif;



  /* Layout: 1440px wide-screen container */

  --container-max: 1440px;

  --site-width: 1440px;

}



/* Reset & Global */

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

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html {

  scroll-behavior: smooth;

  font-size: 16px;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  overflow-x: hidden !important;

  max-width: 100vw !important;

  width: 100% !important;

}



body {

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

  background-color: var(--cream);

  color: var(--ink);

  line-height: 1.65;

  overflow-x: hidden !important;

  max-width: 100vw !important;

  width: 100% !important;

  position: relative;

}



img {

  max-width: 100%;

  height: auto;

  display: block;

}



a {

  color: inherit;

  text-decoration: none;

  transition: all 0.25s ease;

}



/* Global Button Reset — Overrides Hello Elementor unstyled button pink highlight while preserving styled buttons */

html body button:not(.btn):not(.btn-solid-olive):not(.btn-outline-olive):not(.btn-add-to-cart):not(.mobile-btn-cart):not(.slider-nav-arrow):not(.carousel-nav-arrow):not(.menu-toggle):not(.btn-subscribe-wix):not(.filter-pill):not(.contact-submit-btn):not(.eco-btn-register),

html body [type="button"]:not(.btn):not(.btn-solid-olive):not(.btn-outline-olive):not(.btn-add-to-cart):not(.mobile-btn-cart):not(.slider-nav-arrow):not(.carousel-nav-arrow):not(.menu-toggle):not(.btn-subscribe-wix):not(.filter-pill):not(.contact-submit-btn):not(.eco-btn-register),

html body [type="reset"]:not(.btn):not(.btn-solid-olive):not(.btn-outline-olive):not(.btn-add-to-cart):not(.mobile-btn-cart):not(.filter-pill),

html body [type="submit"]:not(.btn):not(.btn-solid-olive):not(.btn-outline-olive):not(.btn-add-to-cart):not(.mobile-btn-cart):not(.btn-subscribe-wix):not(.filter-pill):not(.contact-submit-btn):not(.eco-btn-register) {

  font-family: inherit;

  cursor: pointer;

  border: none;

  background: transparent;

  outline: none !important;

  -webkit-tap-highlight-color: transparent !important;

  transition: all 0.25s ease;

}



html body button:not(.btn):not(.btn-solid-olive):not(.btn-outline-olive):not(.btn-add-to-cart):not(.mobile-btn-cart):not(.slider-nav-arrow):not(.carousel-nav-arrow):not(.menu-toggle):not(.btn-subscribe-wix):not(.filter-pill):not(.contact-submit-btn):not(.eco-btn-register):hover,

html body button:not(.btn):not(.btn-solid-olive):not(.btn-outline-olive):not(.btn-add-to-cart):not(.mobile-btn-cart):not(.slider-nav-arrow):not(.carousel-nav-arrow):not(.menu-toggle):not(.btn-subscribe-wix):not(.filter-pill):not(.contact-submit-btn):not(.eco-btn-register):focus,

html body button:not(.btn):not(.btn-solid-olive):not(.btn-outline-olive):not(.btn-add-to-cart):not(.mobile-btn-cart):not(.slider-nav-arrow):not(.carousel-nav-arrow):not(.menu-toggle):not(.btn-subscribe-wix):not(.filter-pill):not(.contact-submit-btn):not(.eco-btn-register):active,

html body button:not(.btn):not(.btn-solid-olive):not(.btn-outline-olive):not(.btn-add-to-cart):not(.mobile-btn-cart):not(.slider-nav-arrow):not(.carousel-nav-arrow):not(.menu-toggle):not(.btn-subscribe-wix):not(.filter-pill):not(.contact-submit-btn):not(.eco-btn-register):focus-visible,

html body [type="button"]:not(.btn):not(.btn-solid-olive):not(.btn-outline-olive):not(.btn-add-to-cart):not(.mobile-btn-cart):not(.slider-nav-arrow):not(.carousel-nav-arrow):not(.menu-toggle):not(.btn-subscribe-wix):not(.filter-pill):not(.contact-submit-btn):not(.eco-btn-register):hover,

html body [type="button"]:not(.btn):not(.btn-solid-olive):not(.btn-outline-olive):not(.btn-add-to-cart):not(.mobile-btn-cart):not(.slider-nav-arrow):not(.carousel-nav-arrow):not(.menu-toggle):not(.btn-subscribe-wix):not(.filter-pill):not(.contact-submit-btn):not(.eco-btn-register):focus,

html body [type="button"]:not(.btn):not(.btn-solid-olive):not(.btn-outline-olive):not(.btn-add-to-cart):not(.mobile-btn-cart):not(.slider-nav-arrow):not(.carousel-nav-arrow):not(.menu-toggle):not(.btn-subscribe-wix):not(.filter-pill):not(.contact-submit-btn):not(.eco-btn-register):active,

html body [type="button"]:not(.btn):not(.btn-solid-olive):not(.btn-outline-olive):not(.btn-add-to-cart):not(.mobile-btn-cart):not(.slider-nav-arrow):not(.carousel-nav-arrow):not(.menu-toggle):not(.btn-subscribe-wix):not(.filter-pill):not(.contact-submit-btn):not(.eco-btn-register):focus-visible,

html body [type="submit"]:not(.btn):not(.btn-solid-olive):not(.btn-outline-olive):not(.btn-add-to-cart):not(.mobile-btn-cart):not(.btn-subscribe-wix):not(.filter-pill):not(.contact-submit-btn):not(.eco-btn-register):hover,

html body [type="submit"]:not(.btn):not(.btn-solid-olive):not(.btn-outline-olive):not(.btn-add-to-cart):not(.btn-subscribe-wix):not(.filter-pill):not(.contact-submit-btn):not(.eco-btn-register):focus,

html body [type="submit"]:not(.btn):not(.btn-solid-olive):not(.btn-outline-olive):not(.btn-add-to-cart):not(.btn-subscribe-wix):not(.filter-pill):not(.contact-submit-btn):not(.eco-btn-register):active,

html body [type="submit"]:not(.btn):not(.btn-solid-olive):not(.btn-outline-olive):not(.btn-add-to-cart):not(.btn-subscribe-wix):not(.filter-pill):not(.contact-submit-btn):not(.eco-btn-register):focus-visible {

  border-color: transparent;

  outline: none !important;

  -webkit-tap-highlight-color: transparent !important;

  box-shadow: none;

}



.sr-only {

  position: absolute !important;

  width: 1px !important;

  height: 1px !important;

  padding: 0 !important;

  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;

  white-space: nowrap !important;

  border: 0 !important;

}



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

   ELEMENTOR FULL-BLEED & CONTAINER PADDING/MARGIN RESET

   Ensures Header, Footer, and all Full-Width Sections Span 100% Screen Width

   Eliminates unwanted Elementor default 10px gaps above/below Header and Footer

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



.elementor,

.elementor-section-wrap,

.elementor-section,

.elementor-section.elementor-section-full_width,

.elementor-section.elementor-section-boxed,

.elementor-container,

.elementor-section > .elementor-container,

.elementor-section.elementor-section-boxed > .elementor-container,

.elementor-section.elementor-section-full_width > .elementor-container,

.elementor-column,

.elementor-column-wrap,

.elementor-widget-wrap,

.elementor-widget-wrap.elementor-element-populated,

.elementor-widget,

.elementor-widget-container {

  width: 100% !important;

  max-width: 100% !important;

  margin: 0 !important;

  padding: 0 !important;

  box-sizing: border-box !important;

}



/* Eliminate Elementor default 10px column gap padding across all columns and widgets */

.elementor-column-gap-default > .elementor-column > .elementor-element-populated,

.elementor-widget-wrap.elementor-element-populated {

  padding: 0 !important;

  margin: 0 !important;

}



/* Ensure Header Section sits completely flush at top (0px top/bottom gap) */

body .elementor-section:first-child,

body .elementor-section:first-child > .elementor-container,

body .elementor-section:first-child .elementor-column,

body .elementor-section:first-child .elementor-widget-wrap,

body .elementor-section:first-child .elementor-element-populated,

body .elementor-section:first-child .elementor-widget,

body .elementor-section:first-child .elementor-widget-container,

body .elementor-element-populated:has(.site-header),

body .elementor-section:has(.site-header) {

  padding: 0 !important;

  margin: 0 !important;

}



/* Ensure Section directly below Header has no top gap */

body .elementor-section:nth-child(2),

body .elementor-section:nth-child(2) > .elementor-container,

body .elementor-section:nth-child(2) .elementor-column,

body .elementor-section:nth-child(2) .elementor-widget-wrap,

body .elementor-section:nth-child(2) .elementor-element-populated,

body .elementor-section:nth-child(2) .elementor-widget,

body .elementor-section:nth-child(2) .elementor-widget-container {

  padding-top: 0 !important;

  margin-top: 0 !important;

}



/* Ensure Footer Section sits completely flush at bottom (0px top/bottom gap) */

body .elementor-section:last-child,

body .elementor-section:last-child > .elementor-container,

body .elementor-section:last-child .elementor-column,

body .elementor-section:last-child .elementor-widget-wrap,

body .elementor-section:last-child .elementor-element-populated,

body .elementor-section:last-child .elementor-widget,

body .elementor-section:last-child .elementor-widget-container,

body .elementor-element-populated:has(.site-footer),

body .elementor-section:has(.site-footer) {

  padding: 0 !important;

  margin: 0 !important;

}



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

   FIXED & ANIMATED HEADER (SMART SCROLL: DISAPPEAR / REAPPEAR)

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



.site-header {

  position: sticky !important;

  top: 0 !important;

  left: 0 !important;

  right: 0 !important;

  width: 100% !important;

  max-width: 100vw !important;

  z-index: 1000 !important;

  background-color: var(--olive);

  color: var(--cream);

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);

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

              background-color 0.3s ease,

              box-shadow 0.3s ease,

              backdrop-filter 0.3s ease;

  padding: 12px 0 10px;

  transform: translate3d(0, 0, 0);

  will-change: transform;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  box-sizing: border-box !important;

  margin: 0 !important;

}



.site-header.scrolled {

  background-color: rgba(82, 106, 61, 0.96);

  backdrop-filter: blur(14px);

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

  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.2);

}



.site-header.header-hidden {

  transform: translate3d(0, -100%, 0) !important;

  box-shadow: none;

}



.header-container {

  width: 100% !important;

  max-width: 1440px !important;

  margin: 0 auto !important;

  padding: 0 24px !important;

  display: grid;

  grid-template-columns: auto 1fr auto;

  align-items: center;

  gap: 28px;

  transition: all 0.35s ease;

  box-sizing: border-box !important;

}



.header-col-left {

  display: flex;

  align-items: center;

}



.site-logo {

  display: inline-block;

  line-height: 0;

  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

}



.site-logo img {

  height: 84px;

  width: auto;

  max-width: 80px;

  object-fit: contain;

  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));

  transition: transform 0.3s ease;

}



.site-logo:hover {

  transform: scale(1.04);

}



.header-col-center {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 12px;

  transition: gap 0.35s ease;

}



.site-header.scrolled .header-col-center {

  gap: 6px;

}



.search-bar-wrap {

  width: 100%;

  max-width: 580px;

  display: flex;

  justify-content: center;

  position: relative;

}



.search-box {

  width: 100%;

  height: 36px;

  position: relative;

  display: flex;

  align-items: center;

  background: transparent;

  border-radius: 4px;

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

  padding: 0;

  transition: border-color 0.25s ease;

  overflow: hidden;

}



.search-box:focus-within {

  border-color: #ffffff;

  background: transparent;

  box-shadow: none;

  transform: none;

}



.search-box input {

  width: 100%;

  height: 100%;

  border: none;

  background: transparent;

  color: #ffffff;

  font-family: var(--font-body), 'Outfit', sans-serif;

  font-size: 0.95rem;

  outline: none;

  padding: 0 14px;

}



.search-box input::placeholder {

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

  font-size: 0.92rem;

}



.search-box button {

  position: static;

  width: 44px;

  height: 100%;

  transform: none;

  background: #dfded3;

  color: #526A3D;

  border: none;

  border-radius: 0 3px 3px 0;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  cursor: pointer;

  padding: 0;

  transition: background-color 0.2s ease;

}



.search-box button:hover {

  background: #ede9de;

  color: #3e502e;

  transform: none;

}



.search-box button svg {

  width: 16px;

  height: 16px;

  fill: #526A3D;

}



.search-dropdown {

  position: absolute;

  top: calc(100% + 8px);

  left: 0;

  right: 0;

  background: #ffffff;

  border-radius: 12px;

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

  border: 1px solid var(--line-dark);

  max-height: 400px;

  overflow-y: auto;

  opacity: 0;

  visibility: hidden;

  transform: translateY(12px) scale(0.98);

  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),

              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),

              visibility 0.25s ease;

  z-index: 1100;

}



.search-dropdown.open {

  opacity: 1;

  visibility: visible;

  transform: translateY(0) scale(1);

}



.search-item {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 10px 14px;

  border-bottom: 1px solid #f0f0f0;

  color: var(--ink);

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

}



.search-item:last-child {

  border-bottom: none;

}



.search-item:hover {

  background-color: #f7f9f0;

  transform: translateX(4px);

}



.search-item-thumb {

  width: 44px;

  height: 44px;

  border-radius: 6px;

  object-fit: cover;

  background: #fff;

  border: 1px solid #e0e0e0;

  flex-shrink: 0;

}



.search-item-info {

  flex: 1;

  min-width: 0;

}



.search-item-type {

  font-size: 0.72rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  padding: 2px 6px;

  border-radius: 4px;

  display: inline-block;

  margin-bottom: 2px;

}



.search-item-type.product {

  background: rgba(82, 106, 61, 0.15);

  color: var(--olive);

}



.search-item-type.blog {

  background: rgba(216, 223, 169, 0.4);

  color: #4b5832;

}



.search-item-title {

  font-size: 0.92rem;

  font-weight: 600;

  color: var(--ink);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.search-item-meta {

  font-size: 0.82rem;

  color: var(--olive);

  font-weight: 600;

}



.search-empty {

  padding: 20px;

  text-align: center;

  color: var(--ink-soft);

  font-size: 0.9rem;

}



.main-nav {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  max-width: 580px;

  gap: 16px;

  flex-wrap: nowrap;

  margin-top: 4px;

}



.main-nav .nav-link {

  font-family: var(--font-body), 'Outfit', sans-serif;

  font-size: 0.95rem;

  font-weight: 400;

  letter-spacing: 0;

  color: #ffffff;

  position: relative;

  padding: 4px 0;

  transition: opacity 0.2s ease, color 0.2s ease;

  white-space: nowrap;

}



.main-nav .nav-link::after {

  display: none !important;

}



.main-nav .nav-link:hover {

  color: #ffffff;

  opacity: 0.85;

}



.main-nav .nav-link.active {

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

  font-weight: 400;

}



.nav-dropdown {

  position: relative;

  display: inline-flex;

  align-items: center;

  padding: 4px 0;

}



.nav-dropdown-trigger {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  cursor: pointer;

  user-select: none;

}



.nav-dropdown-trigger svg,

.nav-dropdown-trigger .dropdown-caret {

  width: 9px;

  height: 6px;

  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  display: inline-block;

  vertical-align: middle;

  flex-shrink: 0;

}



.nav-dropdown:hover .nav-dropdown-trigger svg,

.nav-dropdown.open .nav-dropdown-trigger svg,

.nav-dropdown:hover .nav-dropdown-trigger .dropdown-caret,

.nav-dropdown.open .nav-dropdown-trigger .dropdown-caret {

  transform: rotate(180deg);

}



.nav-dropdown-menu {

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%) translateY(8px);

  background-color: var(--olive-dark);

  min-width: 220px;

  border-radius: 8px;

  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);

  border: 1px solid rgba(255, 251, 235, 0.18);

  padding: 8px 0;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: opacity 0.22s ease,

              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),

              visibility 0.22s ease;

  z-index: 1050;

}



/* Invisible bridge so mouse moving across gap never loses hover */

.nav-dropdown-menu::before {

  content: "";

  position: absolute;

  top: -16px;

  left: 0;

  right: 0;

  height: 16px;

  background: transparent;

}



.nav-dropdown:hover .nav-dropdown-menu,

.nav-dropdown:focus-within .nav-dropdown-menu,

.nav-dropdown.open .nav-dropdown-menu {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform: translateX(-50%) translateY(2px);

}



.nav-dropdown-menu a {

  display: block;

  padding: 10px 18px;

  color: var(--cream);

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

  font-size: 0.9rem;

  font-weight: 500;

  text-decoration: none;

  white-space: nowrap;

  transition: background-color 0.2s ease, padding-left 0.2s ease, color 0.2s ease;

}



.nav-dropdown-menu a:hover {

  background-color: rgba(255, 251, 235, 0.14);

  color: #ffffff;

  padding-left: 22px;

}



.header-col-right {

  display: flex;

  align-items: center;

  gap: 14px;

}



.catalogue-download-btn {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  background-color: #fdfbf7;

  color: #526A3D;

  border: none;

  padding: 9px 18px;

  border-radius: 6px;

  font-family: var(--font-body), 'Outfit', sans-serif;

  font-size: 0.92rem;

  font-weight: 500;

  letter-spacing: 0;

  white-space: nowrap;

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

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

}



.catalogue-download-btn svg {

  stroke: #526A3D;

  fill: none;

  width: 17px;

  height: 17px;

  flex-shrink: 0;

  transition: transform 0.2s ease;

}



.catalogue-download-btn:hover {

  background-color: #ffffff;

  color: #3e502e;

  transform: translateY(-1px);

  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);

}



.header-cart-btn {

  display: none !important;

}



body.cart-has-items .header-cart-btn {

  display: inline-flex !important;

}



.menu-toggle {

  display: none;

  color: var(--cream);

  padding: 8px;

  border-radius: 6px;

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

}



.menu-toggle:hover {

  background-color: rgba(255, 251, 235, 0.15);

  transform: scale(1.08);

}



.menu-toggle svg {

  width: 26px;

  height: 26px;

}



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

   PAGE HERO BANNERS

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



.page-hero {

  position: relative;

  height: 280px;

  min-height: 240px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  color: var(--cream);

  padding: 40px 20px;

}



.page-hero::before {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(43, 56, 34, 0.65) 0%, rgba(43, 56, 34, 0.8) 100%);

}



.page-hero h1 {

  position: relative;

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

  font-size: clamp(2.2rem, 4.8vw, 3.6rem);

  font-weight: 400;

  line-height: 1.15;

  color: var(--cream);

  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);

  max-width: 900px;

  margin: 0 auto;

}



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

   WIX-AUTHENTIC FIRST HERO SECTION (SAME TO SAME AS BAMBOOFIRST.IN)

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



.hero-wix-section {

  position: relative;

  width: 100%;

  min-height: clamp(520px, 70vh, 640px);

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  background-color: #2b3924;

  overflow: hidden;

}



.hero-wix-bg {

  position: absolute;

  inset: 0;

  background-image: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.36)), 

                    url('assets/bamboo-forest-hero.webp');

  background-size: cover;

  background-position: center center;

  background-repeat: no-repeat;

  transform: scale(1.02);

  transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1);

}



.hero-wix-section:hover .hero-wix-bg {

  transform: scale(1.04);

}



.hero-wix-inner {

  position: relative;

  z-index: 2;

  max-width: 1200px;

  padding: 40px 24px;

  margin: 0 auto;

  color: #fffbeb;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}



.hero-wix-title {

  font-family: var(--font-display), 'Forum', serif;

  font-size: clamp(3rem, 6.2vw, 6.3rem);

  font-weight: 400;

  line-height: 1.1;

  color: #fffbeb;

  margin: 0 0 20px 0;

  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);

  letter-spacing: normal;

}



.hero-wix-subtitle {

  font-family: var(--font-body), 'Questrial', sans-serif;

  font-size: clamp(1.05rem, 1.8vw, 1.25rem);

  font-weight: 400;

  line-height: 1.5;

  color: #fffbeb;

  max-width: 680px;

  margin: 0 0 38px 0;

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

}



.hero-wix-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-body), 'Questrial', sans-serif;

  font-size: 1.125rem;

  font-weight: 400;

  color: #fffbeb;

  background-color: transparent;

  border: 1px solid #fffbeb;

  border-radius: 5px;

  padding: 14px 44px;

  min-width: 140px;

  text-decoration: none;

  letter-spacing: 0.02em;

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

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

  cursor: pointer;

}



.hero-wix-btn:hover {

  background-color: #fffbeb;

  color: #24311c;

  border-color: #fffbeb;

  transform: translateY(-2px);

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

}



@media (max-width: 768px) {

  .hero-wix-section {

    min-height: 540px;

    padding: 60px 0;

  }

  .hero-wix-title {

    font-size: clamp(2.4rem, 9vw, 3.6rem);

    margin-bottom: 16px;

  }

  .hero-wix-subtitle {

    font-size: 1.05rem;

    margin-bottom: 28px;

    padding: 0 10px;

  }

  .hero-wix-btn {

    padding: 12px 36px;

    font-size: 1rem;

  }

}



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

   BAMBOO KANDIL HERO SECTION (Exact Match to Bamboo First Official)

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



.hero-kandil-section.bk,

.bk {

  --green: #1f3d2b;

  --ink: #14301f;

  --gold: #8a5a1a;

  --thread: #a8531f;

  position: relative;

  min-height: 880px;

  background-color: #2b1a08;

  background-image: var(--bg, url('https://static.wixstatic.com/media/e0afb1_8b1493be9c4249cca1365fcacb4bb740~mv2.webp'));

  background-position: center;

  background-size: cover;

  background-repeat: no-repeat;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  overflow: hidden;

  width: 100% !important;

  max-width: 100% !important;

  margin: 0 !important;

  padding: 0 !important;

}



.bk::before {

  content: "";

  position: absolute;

  inset: 0;

  background: radial-gradient(ellipse at 50% 55%,

    rgba(255, 246, 225, 0.80) 0%,

    rgba(255, 240, 210, 0.58) 45%,

    rgba(255, 240, 210, 0) 78%);

  pointer-events: none;

}



.bk .bk-wrap {

  position: relative;

  z-index: 1;

  width: 100%;

  max-width: 1400px;

  padding: 0 40px 48px;

  text-align: center;

  margin: 0 auto;

}



/* ---------- Kandils (top) ---------- */

.bk .bk-grid {

  display: flex;

  justify-content: center;

  align-items: flex-start;

  flex-wrap: wrap;

  gap: 32px;

}



.bk .card {

  flex: 0 1 345px;

  width: 345px;

  max-width: 345px;

  position: relative;

  text-decoration: none;

  display: block;

  cursor: pointer;

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

}



.bk .card:hover {

  transform: translateY(-5px);

}



.bk .card:hover .glow {

  opacity: 0.95 !important;

}



.bk .card:hover img {

  filter: brightness(1.15) saturate(1.2)

    drop-shadow(0 0 14px rgba(255, 215, 100, 0.85))

    drop-shadow(0 0 35px rgba(255, 150, 30, 0.7)) !important;

}



.bk .imgwrap {

  position: relative;

}



/* thread hanging from top of section */

.bk .imgwrap::before {

  content: "";

  position: absolute;

  z-index: 0;

  left: 50%;

  width: 1.5px;

  margin-left: -0.75px;

  bottom: calc(100% - 8px);

  height: 1600px;

  background: linear-gradient(to bottom, rgba(168, 83, 31, 0.55), var(--thread));

}



.bk .glow {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 120%;

  aspect-ratio: 1;

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

  background: radial-gradient(circle,

    rgba(255, 215, 100, 0.95) 0%,

    rgba(255, 150, 30, 0.50) 35%,

    rgba(255, 150, 30, 0) 70%);

  opacity: 0;

  transition: opacity 1.4s ease-in-out;

  pointer-events: none;

  z-index: 0;

}



.bk .card img {

  position: relative;

  z-index: 1;

  display: block;

  width: 130%;

  max-width: none;

  margin-left: -15%;

  height: auto;

  transform-origin: top center;

  transition: filter 1.4s ease-in-out;

  filter: drop-shadow(0 6px 10px rgba(80, 40, 0, 0.25));

  will-change: transform;

}



.bk .name {

  position: relative;

  z-index: 1;

  margin-top: 0;

  font-family: 'Inter', -apple-system, sans-serif;

  font-weight: 700;

  font-size: clamp(18px, 2.3vw, 29px);

  line-height: 1.15;

  color: var(--ink);

  text-shadow: 0 1px 3px rgba(255, 244, 220, 0.9);

}



.bk .note {

  display: block;

  margin-top: 2px;

  font-weight: 600;

  font-size: 0.62em;

  color: var(--ink);

}



.bk .name::after {

  content: "";

  display: block;

  width: 26px;

  height: 1.5px;

  background: var(--gold);

  margin: 8px auto 6px;

  opacity: 0.8;

}



.bk .price {

  position: relative;

  z-index: 1;

  font-family: 'Inter', -apple-system, sans-serif;

  font-weight: 700;

  font-size: clamp(16px, 1.8vw, 23px);

  color: var(--ink);

  text-shadow: 0 1px 3px rgba(255, 244, 220, 0.9);

}



/* lit state: glow + light up */

.bk .card.is-lit .glow {

  opacity: 0.7;

}



.bk .card.is-lit img {

  filter: brightness(1.1) saturate(1.14)

    drop-shadow(0 0 10px rgba(255, 210, 90, 0.7))

    drop-shadow(0 0 28px rgba(255, 140, 20, 0.56));

}



/* ---------- Text (below) ---------- */

.bk h1 {

  font-family: 'Cormorant Garamond', 'Forum', serif;

  font-weight: 700;

  font-size: clamp(39px, 6.7vw, 73px);

  line-height: 1.05;

  color: var(--green);

  text-shadow: 0 1px 3px rgba(255, 244, 220, 0.9);

  margin-top: 40px;

  margin-bottom: 0;

}



.bk .about {

  font-family: 'Cormorant Garamond', 'Forum', serif;

  font-weight: 500;

  font-size: clamp(13px, 2.6vw, 23px);

  line-height: 1.3;

  color: #1d2b21;

  text-shadow: 0 1px 2px rgba(255, 244, 220, 0.85);

  margin: 2px auto 0;

}



.bk .about::before {

  content: "";

  display: block;

  width: 140px;

  height: 1px;

  background: var(--gold);

  opacity: 0.6;

  margin: 0 auto 8px;

}



.bk .btns {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 14px;

  margin-top: 22px;

}



.bk .btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 15px 28px;

  border-radius: 999px;

  text-decoration: none;

  font-size: 15px;

  font-weight: 500;

  font-family: 'Inter', 'Questrial', sans-serif;

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.bk .btn:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);

}



.bk .btn.primary {

  background: var(--green);

  color: #fff;

}



.bk .btn.ghost {

  border: 1px solid var(--green);

  color: var(--green);

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

}



.bk .btn svg {

  width: 20px;

  height: 20px;

  fill: currentColor;

}



@media (max-width: 768px) {

  .hero-kandil-section.bk,

  .bk {

    min-height: auto;

    overflow: hidden !important;

    max-width: 100vw !important;

    width: 100% !important;

    box-sizing: border-box !important;

    background-image: url('hero-kandil-bg.webp') !important;

    background-position: center 20% !important;

    background-size: cover !important;

    background-repeat: no-repeat !important;

  }

  .bk::before {

    display: block !important;

    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    background: radial-gradient(ellipse at 50% 50%,

      rgba(255, 246, 225, 0.82) 0%,

      rgba(255, 240, 210, 0.60) 45%,

      rgba(255, 240, 210, 0) 80%) !important;

    pointer-events: none !important;

  }

  .bk .bk-wrap {

    padding: 24px 8px 32px !important;

    overflow: hidden !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

  }

  .bk .bk-grid {

    display: grid !important;

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

    gap: 6px !important;

    align-items: flex-start !important;

    overflow: visible !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

  }

  .bk .card {

    flex: none !important;

    width: 100% !important;

    max-width: 100% !important;

    overflow: visible !important;

  }

  .bk .card .imgwrap {

    overflow: visible !important;

    position: relative !important;

  }

  .bk .imgwrap::before {

    display: block !important;

    position: absolute !important;

    z-index: 0 !important;

    left: 50% !important;

    width: 1px !important;

    bottom: calc(100% - 6px) !important;

    height: 120px !important;

    background: linear-gradient(to bottom, rgba(168, 83, 31, 0.35), var(--thread)) !important;

  }

  .bk .card img {

    width: 108% !important;

    max-width: 108% !important;

    margin-left: -4% !important;

    height: auto !important;

    position: relative !important;

    z-index: 1 !important;

  }

  .bk .glow {

    width: 100% !important;

  }

  .bk .name {

    font-size: clamp(9.5px, 2.8vw, 11px) !important;

    margin-top: 5px !important;

    line-height: 1.15 !important;

    font-weight: 700 !important;

    letter-spacing: -0.01em !important;

    color: var(--ink) !important;

    text-shadow: 0 1px 3px rgba(255, 244, 220, 0.95) !important;

  }

  .bk .name::after {

    margin: 4px auto 3px !important;

    width: 18px !important;

    height: 1.5px !important;

    background: var(--gold) !important;

    opacity: 0.8 !important;

    box-shadow: none !important;

  }

  .bk .note {

    font-size: 7.5px !important;

    margin-top: 1px !important;

    display: block !important;

    white-space: nowrap !important;

    color: var(--ink) !important;

    text-shadow: none !important;

    font-weight: 600 !important;

  }

  .bk .price {

    font-size: clamp(10.5px, 3.1vw, 12px) !important;

    margin-top: 2px !important;

    font-weight: 700 !important;

    color: var(--ink) !important;

    text-shadow: 0 1px 3px rgba(255, 244, 220, 0.95) !important;

  }

  .bk h1 {

    margin-top: 26px;

    font-size: 35px;

    line-height: 1.15;

    color: var(--green) !important;

    text-shadow: 0 1px 3px rgba(255, 244, 220, 0.95) !important;

    font-weight: 700 !important;

  }

  .bk .about {

    font-size: 13px;

    line-height: 1.5;

    padding-bottom: 6px;

    white-space: normal;

    color: #1d2b21 !important;

    text-shadow: 0 1px 2px rgba(255, 244, 220, 0.9) !important;

    font-weight: 500 !important;

  }

  .bk .btns {

    flex-direction: column;

    align-items: center;

    width: 100%;

  }

  .bk .btn {

    width: 100%;

    max-width: 320px;

  }

  .bk .btn.ghost {

    background: rgba(255, 255, 255, 0.7) !important;

    color: var(--green) !important;

    border: 1px solid var(--green) !important;

  }

  .bk .btn.primary {

    background: var(--green) !important;

    color: #ffffff !important;

    border: none !important;

  }

}





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

   HERO CAROUSEL SLIDER (Home Page)

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



.hero-slider {

  position: relative;

  height: clamp(540px, 78vh, 780px);

  width: 100%;

  overflow: hidden;

  background-color: var(--olive-darker);

}



.hero-slide {

  position: absolute;

  inset: 0;

  opacity: 0;

  visibility: hidden;

  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), visibility 1s ease;

  display: flex;

  align-items: center;

  justify-content: center;

}



.hero-slide.active {

  opacity: 1;

  visibility: visible;

  z-index: 2;

}



.hero-bg {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  transform: scale(1.08);

  transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1);

}



.hero-slide.active .hero-bg {

  transform: scale(1);

}



.hero-bg::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(33, 33, 18, 0.4) 0%, rgba(33, 33, 18, 0.78) 100%);

}



.hero-inner {

  position: relative;

  z-index: 3;

  text-align: center;

  color: var(--cream);

  max-width: 920px;

  padding: 0 24px;

  transform: translateY(20px);

  opacity: 0;

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

}



.hero-slide.active .hero-inner {

  transform: translateY(0);

  opacity: 1;

}



.hero-inner h1 {

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

  font-size: clamp(2.5rem, 6vw, 4.6rem);

  font-weight: 400;

  line-height: 1.12;

  margin-bottom: 0.4em;

  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.55);

}



.hero-inner p.lead {

  font-size: clamp(1.05rem, 2vw, 1.35rem);

  font-weight: 300;

  max-width: 740px;

  margin: 0 auto 2em;

  color: var(--cream-soft);

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

}



.hero-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 10;

  width: 50px;

  height: 50px;

  border-radius: 50%;

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

  color: var(--cream);

  font-size: 1.3rem;

  display: flex;

  align-items: center;

  justify-content: center;

  backdrop-filter: blur(8px);

  transition: all 0.25s ease;

  border: 1px solid rgba(255, 251, 235, 0.3);

}



.hero-arrow:hover {

  background: var(--cream);

  color: var(--olive);

  transform: translateY(-50%) scale(1.1);

}



.hero-arrow.left { left: 24px; }

.hero-arrow.right { right: 24px; }



.hero-indicators {

  position: absolute;

  bottom: 28px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 10;

  display: flex;

  gap: 10px;

}



.hero-dot {

  width: 12px;

  height: 12px;

  border-radius: 50%;

  background: rgba(255, 251, 235, 0.4);

  border: 1px solid rgba(255, 251, 235, 0.7);

  transition: all 0.3s ease;

}



.hero-dot.active {

  background: var(--cream);

  width: 32px;

  border-radius: 8px;

}



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

   BUTTONS

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



.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 13px 30px;

  border-radius: 4px;

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

  font-size: 0.94rem;

  font-weight: 600;

  letter-spacing: 0.03em;

  text-align: center;

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

  white-space: nowrap;

}



.btn-solid-olive {

  background-color: var(--olive);

  color: var(--cream);

  border: 1px solid var(--olive);

}



.btn-solid-olive:hover {

  background-color: var(--olive-darker);

  border-color: var(--olive-darker);

  color: #ffffff;

  transform: translateY(-2px);

  box-shadow: 0 6px 18px rgba(82, 106, 61, 0.35);

}



.btn-outline-olive {

  background-color: transparent;

  color: var(--olive);

  border: 1.5px solid var(--olive);

}



.btn-outline-olive:hover {

  background-color: var(--olive);

  color: var(--cream);

  transform: translateY(-2px);

  box-shadow: 0 6px 18px rgba(82, 106, 61, 0.25);

}



.btn-outline-cream {

  background-color: transparent;

  color: var(--cream);

  border: 1.5px solid var(--cream);

}



.btn-outline-cream:hover {

  background-color: var(--cream);

  color: var(--olive);

  transform: translateY(-2px);

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);

}



.btn-sm {

  padding: 8px 18px;

  font-size: 0.86rem;

}



.btn-block {

  width: 100%;

}



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

   COMMON LAYOUT & TYPOGRAPHY

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



.wrap {

  width: 100% !important;

  max-width: 1440px !important;

  margin: 0 auto !important;

  padding: 0 24px !important;

  box-sizing: border-box !important;

}



.section {

  padding: 96px 0;

  position: relative;

}



.center {

  text-align: center;

}



.center-head {

  text-align: center;

  max-width: 820px;

  margin: 0 auto 3.5rem;

}



.center-head h2 {

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

  font-size: clamp(2.1rem, 3.8vw, 2.9rem);

  font-weight: 400;

  color: var(--olive);

  margin-bottom: 0.4em;

  line-height: 1.22;

}



.center-head p {

  color: var(--ink-soft);

  font-size: 1.05rem;

  line-height: 1.7;

}



.eyebrow {

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

  font-size: 0.84rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  margin-bottom: 0.6em;

}



.eyebrow-on-olive {

  color: var(--accent-gold);

}



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

   HOMEPAGE SECTION ALIGNMENTS

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



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

   HOMEPAGE SECTION ALIGNMENTS (PIXEL PERFECT TO BAMBOOFIRST.IN)

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



/* 1. Hero Banner 2 / Slider Section */

.hero-slider-section {

  position: relative;

  width: 100%;

  min-height: 809px;

  height: 809px;

  background-size: cover;

  background-position: center;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #ffffff;

  overflow: hidden;

  transition: background-image 0.65s cubic-bezier(0.25, 1, 0.5, 1);

}



@media (max-width: 900px) {

  .hero-slider-section {

    min-height: 560px;

    height: auto;

  }

}



.hero-slider-inner {

  position: relative;

  z-index: 2;

  text-align: center;

  max-width: 980px;

  width: 100%;

  padding: 40px 24px;

  margin: 0 auto;

  transition: opacity 0.28s ease, transform 0.28s ease;

}



.hero-slider-inner.slide-fading {

  opacity: 0;

  transform: translateY(8px);

}



.hero-slider-title {

  font-family: var(--font-heading, "Playfair Display", "Forum", Georgia, serif);

  font-size: clamp(2.8rem, 6.2vw, 101px);

  font-weight: 400;

  color: #FFFBEB;

  margin-bottom: 20px;

  line-height: 1.12;

  letter-spacing: normal;

  text-align: center;

  max-width: 960px;

  margin-left: auto;

  margin-right: auto;

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

}



.hero-slider-subtitle {

  font-family: var(--font-body, "Plus Jakarta Sans", "Questrial", sans-serif);

  font-size: clamp(1.05rem, 1.4vw, 18px);

  color: #FFFBEB;

  margin-bottom: 34px;

  line-height: 1.45;

  text-align: center;

  max-width: 780px;

  margin-left: auto;

  margin-right: auto;

  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);

}



.hero-slider-btn {

  display: inline-flex !important;

  align-items: center;

  justify-content: center;

  min-width: 140px;

  height: 52px;

  padding: 0 34px !important;

  border: 1px solid #FFFBEB !important;

  color: #FFFBEB !important;

  font-family: var(--font-body, "Plus Jakarta Sans", "Questrial", sans-serif);

  font-size: 15px !important;

  font-weight: 500 !important;

  text-transform: none;

  letter-spacing: normal;

  text-decoration: none !important;

  background: transparent !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  transition: all 0.25s ease !important;

  border-radius: 5px !important;

  text-shadow: none !important;

}



.hero-slider-btn:hover {

  background: #FFFBEB !important;

  color: #1a2710 !important;

  border-color: #FFFBEB !important;

  transform: translateY(-2px);

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

  text-shadow: none !important;

}



.slider-nav-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 44px;

  height: 64px;

  border-radius: 0;

  background: transparent !important;

  background-color: transparent !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  border: none !important;

  color: rgba(255, 255, 255, 0.92) !important;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  z-index: 10;

  padding: 0;

  transition: all 0.2s ease;

  line-height: 1;

  box-shadow: none !important;

}



.slider-nav-arrow:hover {

  background: transparent !important;

  color: #ffffff !important;

  transform: translateY(-50%) scale(1.18);

  box-shadow: none !important;

  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));

}



.slider-nav-arrow:focus,

.slider-nav-arrow:focus-visible {

  outline: none !important;

  box-shadow: none !important;

}



.slider-nav-arrow svg {

  display: block;

  width: 26px;

  height: 52px;

  stroke: currentColor;

  stroke-width: 2;

  fill: none;

}



.slider-nav-prev { left: clamp(16px, 5vw, 68px); }

.slider-nav-next { right: clamp(16px, 5vw, 68px); }



@media (max-width: 768px) {

  .hero-slider-section {

    min-height: 520px !important;

  }

  .hero-slider-section::before {

    content: "" !important;

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    background: rgba(18, 28, 14, 0.45) !important;

    z-index: 1 !important;

    pointer-events: none !important;

  }

  .hero-slider-inner {

    padding: 30px 20px !important;

  }

  .hero-slider-title {

    font-size: clamp(2.1rem, 8.5vw, 2.9rem) !important;

    line-height: 1.15 !important;

    color: #ffffff !important;

    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.85) !important;

  }

  .hero-slider-subtitle {

    font-size: 1.05rem !important;

    line-height: 1.5 !important;

    color: #f7f9f0 !important;

    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9) !important;

    margin-bottom: 26px !important;

  }

  .hero-slider-btn {

    border-color: #ffffff !important;

    color: #ffffff !important;

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

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

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

  }

  .slider-nav-prev { left: 8px !important; }

  .slider-nav-next { right: 8px !important; }

}



/* 2. Photo Gallery Strip (Artisans & Dignitaries) */

.artisan-photo-strip {

  background: #FFFBEB;

  padding: 60px 0 50px;

  position: relative;

  border-bottom: none;

  overflow: hidden !important;

  max-width: 100vw !important;

  width: 100% !important;

}



.photo-strip-wrap {

  position: relative;

  max-width: 1440px;

  margin: 0 auto;

  padding: 0 24px;

  box-sizing: border-box;

  overflow: hidden !important;

}



.photo-strip-slider-container {

  position: relative;

  width: 100%;

  overflow: hidden !important;

}



.photo-strip-grid {

  display: flex;

  gap: 20px;

  overflow-x: auto;

  scroll-behavior: auto;

  scrollbar-width: none;

  -ms-overflow-style: none;

  padding-bottom: 8px;

  cursor: grab;

  user-select: none;

  -webkit-user-select: none;

  will-change: scroll-position;

}



.photo-strip-grid:active {

  cursor: grabbing;

}



.photo-strip-grid::-webkit-scrollbar {

  display: none;

}



.photo-strip-item {

  flex: 0 0 calc((100% - 40px) / 3);

  height: 520px;

  overflow: hidden;

  border-radius: 0;

  background: #ebe5d8;

  box-shadow: none;

}



@media (max-width: 992px) {

  .photo-strip-item {

    flex: 0 0 calc((100% - 20px) / 2);

    height: 420px;

  }

}



@media (max-width: 600px) {

  .photo-strip-item {

    flex: 0 0 85%;

    height: 350px;

  }

}



.photo-strip-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

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

  pointer-events: none;

}



.photo-strip-item:hover img {

  transform: scale(1.04);

}



.artisan-photo-strip .carousel-nav-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 50px;

  height: 50px;

  border-radius: 50%;

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

  backdrop-filter: blur(4px);

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

  color: #ffffff;

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

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  z-index: 10;

  transition: all 0.25s ease;

}



.artisan-photo-strip .carousel-nav-arrow:hover {

  background: #526A3D;

  color: #ffffff;

  border-color: #526A3D;

  transform: translateY(-50%) scale(1.08);

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

}



.artisan-photo-strip .carousel-nav-arrow:focus {

  outline: none;

  box-shadow: 0 0 0 3px rgba(82, 106, 61, 0.5);

}



.artisan-photo-strip .carousel-nav-arrow:focus-visible {

  outline: none;

  box-shadow: 0 0 0 3px #526A3D;

}



.artisan-photo-strip .carousel-nav-prev {

  left: 20px;

}



.artisan-photo-strip .carousel-nav-next {

  right: 20px;

}



@media (max-width: 768px) {

  .artisan-photo-strip .carousel-nav-prev {

    left: 8px;

    width: 38px;

    height: 38px;

  }

  .artisan-photo-strip .carousel-nav-next {

    right: 8px;

    width: 38px;

    height: 38px;

  }

}



/* 3. Product Categories Showcase (Transparent Cutouts) */

.category-showcase-section {

  background: #FFFBEB;

  padding: 50px 0 70px;

  position: relative;

  overflow: hidden;

}



.category-showcase-wrap {

  max-width: 1440px;

  margin: 0 auto;

  padding: 0 36px;

  box-sizing: border-box;

  position: relative;

}



.category-showcase-head {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 36px;

}



.category-showcase-head h2 {

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

  font-size: clamp(2.4rem, 4vw, 3.6rem) !important;

  font-weight: 400 !important;

  color: #889C73 !important;

  margin: 0 !important;

  line-height: 1.15 !important;

}



.category-showcase-head .btn-view-all {

  background: #9DA988 !important;

  color: #ffffff !important;

  padding: 9px 28px !important;

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

  font-size: 0.92rem !important;

  font-weight: 500 !important;

  border-radius: 20px !important;

  text-decoration: none !important;

  transition: all 0.25s ease !important;

  display: inline-block !important;

}



.category-showcase-head .btn-view-all:hover {

  background: #7D8E69 !important;

  transform: translateY(-1px) !important;

}



.category-cutout-carousel-wrap {

  position: relative !important;

  width: 100% !important;

}



.category-cutout-grid {

  display: flex !important;

  gap: 24px !important;

  overflow-x: auto !important;

  scroll-behavior: smooth !important;

  -webkit-overflow-scrolling: touch !important;

  scrollbar-width: none !important;

  -ms-overflow-style: none !important;

  padding: 10px 4px 18px !important;

  margin: 0 !important;

  align-items: stretch !important;

}



.category-cutout-grid::-webkit-scrollbar {

  display: none !important;

}



.category-cutout-grid .product-card {

  flex: 0 0 calc((100% - 72px) / 4) !important;

  min-width: 250px !important;

  max-width: 320px !important;

  background: #ffffff !important;

  border: 1px solid #E8E5D8 !important;

  border-radius: 10px !important;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;

  box-sizing: border-box !important;

  text-align: center !important;

  display: flex !important;

  flex-direction: column !important;

}



.category-cutout-grid .product-card:hover {

  transform: translateY(-4px) !important;

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;

  border-color: rgba(82, 106, 61, 0.4) !important;

}



.category-cutout-grid .product-card .thumb {

  position: relative !important;

  width: 100% !important;

  aspect-ratio: 1 / 1 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  margin-bottom: 14px !important;

  overflow: hidden !important;

  border-radius: 8px !important;

  background: #fbfaf6 !important;

  border: 1px solid #eeebdf !important;

  cursor: pointer !important;

}



.category-cutout-grid .product-card .thumb img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  object-position: center !important;

  transition: transform 0.4s ease !important;

  display: block !important;

}



.category-cutout-grid .product-card:hover .thumb img {

  transform: scale(1.06) !important;

}



.category-nav-arrow,

#catalogueNext,

button#catalogueNext,

#cataloguePrev,

button#cataloguePrev {

  position: absolute !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  background: #ffffff !important;

  background-color: #ffffff !important;

  border: 1px solid #D9D5C5 !important;

  border-radius: 50% !important;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;

  cursor: pointer !important;

  width: 44px !important;

  height: 44px !important;

  min-width: 44px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  z-index: 10 !important;

  transition: all 0.25s ease !important;

  color: #526A3D !important;

  padding: 0 !important;

  outline: none !important;

}



.category-nav-arrow:hover,

#catalogueNext:hover,

button#catalogueNext:hover,

#cataloguePrev:hover,

button#cataloguePrev:hover {

  background: #526A3D !important;

  background-color: #526A3D !important;

  border-color: #526A3D !important;

  box-shadow: 0 6px 18px rgba(82, 106, 61, 0.25) !important;

  transform: translateY(-50%) scale(1.06) !important;

}



.category-nav-arrow:hover svg path,

#catalogueNext:hover svg path,

button#catalogueNext:hover svg path,

#cataloguePrev:hover svg path,

button#cataloguePrev:hover svg path {

  fill: #ffffff !important;

}



.category-nav-prev,

#cataloguePrev,

button#cataloguePrev {

  left: -22px !important;

}



.category-nav-next,

#catalogueNext,

button#catalogueNext {

  right: -22px !important;

}



.category-nav-arrow svg,

#catalogueNext svg,

#cataloguePrev svg {

  width: 14px !important;

  height: 28px !important;

  display: block !important;

  transition: fill 0.2s ease !important;

}



.category-nav-arrow svg path,

#catalogueNext svg path,

#cataloguePrev svg path {

  fill: #526A3D !important;

}



@media (max-width: 1024px) {

  .category-cutout-grid .product-card {

    flex: 0 0 calc((100% - 24px) / 2) !important;

    min-width: 230px !important;

  }

  .category-nav-prev,

  #cataloguePrev {

    left: -12px !important;

  }

  .category-nav-next,

  #catalogueNext {

    right: -12px !important;

  }

}



@media (max-width: 600px) {

  .category-showcase-wrap {

    padding: 0 18px !important;

  }

  .category-cutout-grid {

    gap: 16px !important;

    padding-bottom: 12px !important;

  }

  .category-cutout-grid .product-card {

    flex: 0 0 82% !important;

    min-width: 230px !important;

    max-width: 290px !important;

  }

  .category-cutout-carousel-wrap .category-nav-arrow,

  .category-cutout-carousel-wrap .category-nav-prev,

  .category-cutout-carousel-wrap .category-nav-next,

  .category-cutout-carousel-wrap #catalogueNext,

  .category-cutout-carousel-wrap #cataloguePrev,

  .category-cutout-carousel-wrap button#catalogueNext,

  .category-cutout-carousel-wrap button#cataloguePrev {

    display: none !important;

    visibility: hidden !important;

    width: 0 !important;

    height: 0 !important;

    overflow: hidden !important;

    position: absolute !important;

    pointer-events: none !important;

  }

}



.green-gold-split {

  display: grid;

  grid-template-columns: 1fr 1.1fr;

  align-items: stretch;

  background-color: var(--cream);

  min-height: 540px;

  width: 100%;

  max-width: 100vw;

  overflow: hidden;

}



.green-gold-split .media {

  background-size: cover;

  background-position: center;

  min-height: 420px;

  max-width: 100%;

}



.green-gold-title {

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

  font-size: clamp(2.4rem, 3.8vw, 3.5rem);

  font-weight: 400;

  color: #526A3D;

  line-height: 1.15;

  margin-bottom: 6px;

}



.green-gold-byline {

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

  font-size: clamp(1.3rem, 1.9vw, 1.8rem);

  font-weight: 400;

  color: #526A3D;

  margin-bottom: 24px;

}



.green-gold-split .body {

  padding: clamp(24px, 5.5vw, 80px);

  display: flex;

  flex-direction: column;

  justify-content: center;

  box-sizing: border-box;

  max-width: 100%;

}



@media (max-width: 900px) {

  .green-gold-split {

    grid-template-columns: 1fr !important;

  }

  .green-gold-split .media {

    min-height: 280px !important;

  }

  .green-gold-split .body {

    padding: 36px 20px !important;

  }

}



.green-gold-split h2 {

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

  font-size: clamp(2rem, 3.2vw, 2.7rem);

  font-weight: 400;

  color: var(--olive);

  margin-bottom: 0.8rem;

  line-height: 1.2;

}



.green-gold-split p {

  font-size: 0.98rem;

  line-height: 1.75;

  color: var(--ink);

  margin-bottom: 1rem;

}



.stats-grid {

  display: grid;

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

  gap: 16px;

  margin: 1.8rem 0 2.2rem;

}



.stat-box {

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

  border: 1px solid var(--line-dark);

  padding: 22px 14px;

  text-align: center;

  border-radius: 6px;

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

}



.stat-box .num {

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

  font-size: 2.2rem;

  font-weight: 600;

  color: var(--olive);

  line-height: 1;

  margin-bottom: 6px;

}



.stat-box .lbl {

  font-size: 0.82rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  color: var(--ink-soft);

}



/* 4. Mann Ki Baat Section */

.mann-ki-baat-section {

  background-color: #4e5d32;

  color: #ffffff;

  text-align: center;

  padding: 85px 24px 90px;

}



.mann-ki-baat-wrap {

  max-width: 1100px;

  margin: 0 auto;

}



.mann-ki-baat-section h2 {

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

  font-size: clamp(2.1rem, 3.8vw, 3.2rem);

  font-weight: 400;

  line-height: 1.25;

  color: #ffffff;

  max-width: 880px;

  margin: 0 auto 16px;

}



.mann-ki-baat-section p {

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

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

  line-height: 1.75;

  max-width: 840px;

  margin: 0 auto 36px;

}



.video-embed-box {

  position: relative;

  max-width: 980px;

  margin: 0 auto;

  border-radius: 8px;

  overflow: hidden;

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);

  background: #000000;

  aspect-ratio: 16 / 9;

}



.video-embed-box iframe {

  width: 100%;

  height: 100%;

  border: none;

  display: block;

}



.modi-video-banner {

  position: relative;

  max-width: 980px;

  margin: 0 auto;

  border-radius: 8px;

  overflow: hidden;

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);

  background: #000000;

  cursor: pointer;

}



.modi-video-banner img {

  width: 100%;

  height: auto;

  display: block;

  transition: transform 0.4s ease;

}



.modi-video-banner:hover img {

  transform: scale(1.02);

}



.video-play-overlay-btn {

  position: absolute;

  top: 50%;

  left: 50%;

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

  width: 76px;

  height: 52px;

  background: #ff0000;

  border-radius: 14px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: transform 0.2s ease, background 0.2s ease;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);

  border: none;

  z-index: 2;

}



.modi-video-banner:hover .video-play-overlay-btn {

  background: #cc0000;

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

}



.video-play-overlay-btn svg {

  fill: #ffffff;

  width: 24px;

  height: 24px;

  margin-left: 3px;

}



/* 5. Tribal Artisans Journey Video Section */

.artisan-video-section {

  background: #faf8f3;

  padding: 85px 24px;

  text-align: center;

}



.artisan-video-wrap {

  max-width: 1100px;

  margin: 0 auto;

}



.artisan-video-section h2 {

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

  font-size: clamp(2.1rem, 3.6vw, 3rem);

  font-weight: 400;

  color: #4e5d32;

  margin: 0 auto 16px;

  line-height: 1.25;

  max-width: 860px;

}



.artisan-video-section p {

  font-size: clamp(0.98rem, 1.2vw, 1.1rem);

  line-height: 1.7;

  color: var(--ink-soft);

  max-width: 820px;

  margin: 0 auto 36px;

}



.artisan-player-box {

  max-width: 980px;

  margin: 0 auto;

  border-radius: 8px;

  overflow: hidden;

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);

  background: #000000;

  position: relative;

  aspect-ratio: 16 / 9;

}



.artisan-player-box iframe {

  width: 100%;

  height: 100%;

  border: none;

  display: block;

}



/* 6. Eco-Tourism Experience Section */

.eco-tourism-section {

  background: #D4D7C0;

  padding: 85px 24px;

  text-align: center;

}



.eco-tourism-wrap {

  max-width: 1440px;

  margin: 0 auto;

}



.eco-eyebrow,

.eco-tourism-section .eco-eyebrow {

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

  font-style: normal !important;

  font-weight: 400 !important;

  font-size: clamp(20px, 2.36vw, 34px) !important;

  color: #526A3D !important;

  margin-bottom: 4px !important;

  line-height: 1.25 !important;

  letter-spacing: normal !important;

  text-align: center !important;

}



.eco-tourism-section h2,

.eco-tourism-wrap h2 {

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

  font-size: clamp(38px, 5.625vw, 81px) !important;

  font-weight: 700 !important;

  color: #526A3D !important;

  margin: 0 auto 36px !important;

  line-height: 1.15 !important;

  letter-spacing: normal !important;

  text-align: center !important;

}



.eco-carousel-wrap {

  position: relative;

  width: 100%;

}



.eco-carousel-wrap {

  position: relative;

  width: 100%;

}



.eco-photo-grid {

  display: flex !important;

  gap: 24px !important;

  overflow-x: auto !important;

  scroll-behavior: smooth !important;

  -webkit-overflow-scrolling: touch !important;

  scrollbar-width: none !important;

  -ms-overflow-style: none !important;

  margin-bottom: 0 !important;

  padding: 8px 4px 16px !important;

  align-items: stretch !important;

}



.eco-photo-grid::-webkit-scrollbar {

  display: none !important;

}



.eco-photo-card {

  flex: 0 0 calc((100% - 48px) / 3) !important;

  min-width: 320px !important;

  height: 380px !important;

  border-radius: 0 !important;

  overflow: hidden !important;

  box-shadow: none !important;

  margin: 0 !important;

}



@media (max-width: 900px) {

  .eco-photo-grid {

    gap: 16px !important;

  }

  .eco-photo-card {

    flex: 0 0 85% !important;

    min-width: 260px !important;

    height: 280px !important;

  }

}



@media (max-width: 900px) {

  .eco-photo-card {

    height: 280px;

  }

}



.eco-photo-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;

}



.eco-photo-card:hover img {

  transform: scale(1.05);

}



/* 7. A Journey Into Sustainable Living */

.sustainable-living-section {

  position: relative;

  background-size: cover;

  background-position: center;

  padding: 110px 24px;

  color: #ffffff;

  text-align: center;

}



.sustainable-living-wrap {

  position: relative;

  z-index: 2;

  max-width: 900px;

  margin: 0 auto;

}



.sustainable-living-section h2 {

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

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

  font-weight: 400;

  color: #ffffff;

  margin-bottom: 20px;

  line-height: 1.2;

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

}



.sustainable-living-section p {

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

  line-height: 1.8;

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

  margin-bottom: 34px;

  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);

}



.sustainable-living-section .btn,

.sustainable-living-section .btn-outline-white {

  display: inline-block;

  padding: 12px 34px;

  border: 1px solid #FFFBEB;

  color: #FFFBEB;

  background: transparent;

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

  font-size: 15px;

  font-weight: 400;

  text-transform: none;

  letter-spacing: normal;

  border-radius: 4px;

  text-decoration: none;

  transition: all 0.3s ease;

}



.sustainable-living-section .btn:hover,

.sustainable-living-section .btn-outline-white:hover {

  background: #FFFBEB;

  color: #1a2414;

}



/* 6. Why Choose Bamboo Split Section */

.why-bamboo-split {

  display: grid;

  grid-template-columns: 1fr 1.15fr;

  background-color: var(--olive);

  color: var(--cream);

  align-items: stretch;

}



.why-bamboo-split .media {

  background-size: cover;

  background-position: center;

  min-height: 480px;

}



.why-bamboo-split .body {

  padding: clamp(40px, 5.5vw, 80px);

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.why-bamboo-split h2 {

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

  font-size: clamp(2rem, 3.2vw, 2.8rem);

  font-weight: 400;

  color: var(--cream);

  margin-bottom: 2rem;

}



.why-list {

  display: flex;

  flex-direction: column;

  gap: 22px;

}



.why-item {

  display: flex;

  align-items: flex-start;

  gap: 16px;

}



.why-item .icon {

  width: 44px;

  height: 75px;

  border-radius: 0;

  background: transparent;

  border: none;

  color: #FFFBEB;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  margin-top: 0;

}



.why-item .icon svg {

  width: 38px;

  height: 75px;

}



.why-item p {

  color: var(--cream-soft);

  font-size: 0.95rem;

  line-height: 1.65;

  margin: 0;

}



.why-item p strong {

  color: var(--cream);

  display: block;

  font-size: 1.05rem;

  margin-bottom: 2px;

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

}



/* 7. Marquee Ticker */

.ticker {

  background-color: var(--olive-darker);

  color: var(--cream);

  overflow: hidden;

  white-space: nowrap;

  padding: 16px 0;

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

  border-bottom: 1px solid rgba(255, 251, 235, 0.15);

}



.ticker-track {

  display: inline-flex;

  animation: tickerScroll 24s linear infinite;

}



.ticker-track span {

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

  font-size: 0.95rem;

  font-weight: 700;

  letter-spacing: 0.16em;

  padding-right: 30px;

}



@keyframes tickerScroll {

  0% { transform: translateX(0); }

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

}



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

   PRODUCT CATALOGUE & GRID

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



.catalogue-controls {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 20px;

  margin-bottom: 3rem;

  width: 100%;

}



.filter-bar {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  justify-content: center;

  align-items: center;

  width: 100%;

}



html body .filter-bar .filter-pill,

html body .filter-pill,

.filter-pill {

  padding: 8px 20px !important;

  border-radius: 24px !important;

  font-family: var(--font-accent, "Questrial", sans-serif) !important;

  font-size: 0.88rem !important;

  font-weight: 600 !important;

  background-color: transparent !important;

  color: var(--olive, #526A3D) !important;

  border: 1.5px solid var(--olive, #526A3D) !important;

  cursor: pointer !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  line-height: 1.2 !important;

  transition: all 0.25s ease !important;

  box-sizing: border-box !important;

}



html body .filter-bar .filter-pill:hover,

html body .filter-bar .filter-pill.active,

html body .filter-pill:hover,

html body .filter-pill.active,

.filter-pill:hover,

.filter-pill.active {

  background-color: var(--olive, #526A3D) !important;

  color: #FFFBEB !important;

  border: 1.5px solid var(--olive, #526A3D) !important;

  transform: translateY(-1px) !important;

  box-shadow: 0 4px 12px rgba(82, 106, 61, 0.25) !important;

}



.catalogue-search-wrap {

  position: relative;

  width: 100%;

  max-width: 420px;

  display: flex;

  align-items: center;

  margin: 0 auto;

}



.catalogue-search-wrap input {

  width: 100%;

  padding: 10px 16px 10px 38px;

  border-radius: 24px;

  border: 1px solid var(--line-dark);

  background: #ffffff;

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

  font-size: 0.92rem;

  color: var(--ink);

  outline: none;

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

  transition: all 0.25s ease;

}



.catalogue-search-wrap input:focus {

  border-color: var(--olive);

  box-shadow: 0 0 0 3px rgba(82, 106, 61, 0.2);

}



.catalogue-search-wrap svg {

  position: absolute;

  left: 14px;

  top: 50%;

  transform: translateY(-50%);

  pointer-events: none;

  color: var(--ink-soft);

}



.product-grid {

  display: grid;

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

  gap: 24px;

  align-items: stretch;

}



.product-card {

  background: #ffffff;

  border: 1px solid var(--line-dark);

  border-radius: 8px;

  padding: 18px 16px;

  text-align: center;

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;

  display: flex;

  flex-direction: column;

  height: 100%;

  box-sizing: border-box;

  position: relative;

}



.product-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);

  border-color: rgba(82, 106, 61, 0.35);

}



.product-card .thumb {

  position: relative;

  width: 100%;

  aspect-ratio: 1 / 1;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 14px;

  overflow: hidden;

  border-radius: 8px;

  background: #fbfaf6;

  border: 1px solid #eeebdf;

  cursor: pointer;

  box-sizing: border-box;

}



.product-card .thumb img {

  width: 100%;

  height: 100%;

  max-width: 100%;

  max-height: 100%;

  object-fit: cover;

  object-position: center center;

  margin: 0;

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

  display: block;

}



.product-card:hover .thumb img {

  transform: scale(1.06);

}



.product-card .thumb .badge {

  position: absolute;

  top: 10px;

  right: 10px;

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

  color: var(--olive);

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

  font-size: 0.72rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  padding: 4px 10px;

  border-radius: 6px;

  pointer-events: none;

  z-index: 2;

  white-space: nowrap;

  line-height: 1.2;

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

  backdrop-filter: blur(4px);

}



.product-card h4 {

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

  font-size: 1.15rem;

  font-weight: 600;

  color: var(--ink);

  margin: 0 0 6px 0;

  line-height: 1.3;

  min-height: 2.6em;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

}



.product-card h4 a {

  color: var(--ink);

  text-decoration: none;

  transition: color 0.2s ease;

}



.product-card h4 a:hover {

  color: var(--olive);

}



.product-card .price {

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

  font-size: 1.15rem;

  font-weight: 700;

  color: var(--olive);

  margin: 0 0 6px 0;

  text-align: center;

  line-height: 1.2;

}



.product-card .product-size {

  font-size: 0.78rem;

  color: var(--ink-light);

  min-height: 1.4em;

  margin: 0 0 14px 0;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

}



.product-card .card-actions {

  margin-top: auto;

  display: flex;

  gap: 8px;

  align-items: center;

  justify-content: center;

  width: 100%;

}



.product-card .card-actions .btn {

  padding: 8px 10px;

  font-size: 0.82rem;

  line-height: 1.2;

  white-space: nowrap;

  border-radius: 4px;

  text-align: center;

}



.product-card .card-actions .btn-solid-olive {

  flex: 1;

}



.product-card .card-actions .btn-outline-olive {

  padding: 8px 10px;

  flex-shrink: 0;

}



.highlight-item {

  animation: pulseHighlight 2s ease;

  border-color: var(--olive) !important;

}



@keyframes pulseHighlight {

  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(82, 106, 61, 0.6); }

  50% { transform: scale(1.03); box-shadow: 0 0 0 12px rgba(82, 106, 61, 0); }

  100% { transform: scale(1); }

}



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

   INDIVIDUAL PRODUCT DETAIL PAGE STYLES

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



.breadcrumb-nav {

  padding: 16px 0;

  background-color: var(--cream-soft);

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

  font-size: 0.88rem;

}



.breadcrumb-list {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

  list-style: none;

  color: var(--ink-soft);

}



.breadcrumb-list a {

  color: var(--olive);

  font-weight: 500;

}



.breadcrumb-list a:hover {

  text-decoration: underline;

}



.breadcrumb-sep {

  color: var(--ink-light);

  font-size: 0.8rem;

}



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

   INDIVIDUAL PRODUCT DETAIL PAGE (HIGH-CONVERSION DESIGN & VIBE)

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

.product-detail-layout {

  display: grid;

  grid-template-columns: 1fr 1.15fr;

  gap: 52px;

  align-items: start;

  margin-top: 10px;

  margin-bottom: 30px;

}



.product-gallery {

  position: sticky;

  top: 110px;

}



.gallery-main-wrap {

  background: #ffffff;

  border: 1px solid #ebe5d6;

  border-radius: 12px;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  aspect-ratio: 1 / 1;

  height: auto;

  position: relative;

  overflow: hidden;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

  cursor: zoom-in;

  transition: border-color 0.3s ease;

}



.gallery-main-wrap:hover {

  border-color: #dcd4c0;

}



.gallery-main-wrap img {

  width: 100%;

  height: 100%;

  max-width: 100%;

  max-height: 100%;

  object-fit: cover;

  object-position: center center;

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

  display: block;

}



.gallery-badges-wrap {

  position: absolute;

  top: 16px;

  left: 16px;

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  z-index: 10;

  pointer-events: none;

}



.gallery-badge {

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

  font-size: 0.72rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  padding: 5px 12px;

  border-radius: 999px;

  backdrop-filter: blur(8px);

}



.gallery-badge-special {

  background: #b3261e;

  color: #ffffff;

  box-shadow: 0 4px 12px rgba(179, 38, 30, 0.28);

}



.gallery-badge-eco {

  background: rgba(43, 76, 36, 0.92);

  color: #ffffff;

  box-shadow: 0 4px 12px rgba(43, 76, 36, 0.22);

}



.gallery-zoom-hint {

  position: absolute;

  bottom: 14px;

  right: 14px;

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

  backdrop-filter: blur(6px);

  border-radius: 999px;

  padding: 5px 12px;

  font-size: 0.74rem;

  font-weight: 600;

  color: #4a4a4a;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  pointer-events: none;

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

}



.gallery-thumbs {

  display: flex;

  gap: 12px;

  margin-top: 16px;

  overflow-x: auto;

  padding-bottom: 4px;

}



.gallery-thumb-item {

  width: 76px;

  height: 76px;

  border-radius: 8px;

  border: 2px solid #e8e2d4;

  background: #ffffff;

  padding: 4px;

  cursor: pointer;

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

  transition: all 0.25s ease;

  flex-shrink: 0;

}



.gallery-thumb-item.active,

.gallery-thumb-item:hover {

  border-color: var(--olive);

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(82, 106, 61, 0.25);

}



.gallery-thumb-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 4px;

}



/* Luxury Artisan Assurance Bar below gallery */

.gallery-assurance-bar {

  display: grid;

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

  gap: 10px;

  margin-top: 20px;

}



.assurance-pill {

  background: #ffffff;

  border: 1px solid #ebe5d6;

  border-radius: 8px;

  padding: 10px 12px;

  display: flex;

  align-items: center;

  gap: 10px;

  transition: all 0.25s ease;

}



.assurance-pill:hover {

  transform: translateY(-2px);

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);

  border-color: #dcd4c0;

}



.assurance-pill .pill-icon {

  font-size: 1.4rem;

  line-height: 1;

  flex-shrink: 0;

}



.assurance-pill strong {

  display: block;

  font-size: 0.82rem;

  color: var(--ink);

  margin-bottom: 2px;

  line-height: 1.2;

}



.assurance-pill p {

  font-size: 0.72rem;

  color: var(--ink-light);

  margin: 0;

  line-height: 1.3;

}



/* Right Panel: Product Info & Order Configuration */

.product-info-panel {

  display: flex;

  flex-direction: column;

}



.product-eyebrow-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 10px;

}



.product-info-panel .product-cat-tag {

  font-size: 0.78rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--olive);

  background: rgba(82, 106, 61, 0.12);

  padding: 4px 10px;

  border-radius: 4px;

}



.heritage-origin-tag {

  display: none !important;

  font-size: 0.76rem;

  font-weight: 600;

  color: #4a6332;

  background: #f1f6ed;

  border: 1px solid #dce8d4;

  padding: 4px 10px;

  border-radius: 4px;

  display: inline-flex;

  align-items: center;

}



.rating-stars-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-size: 0.82rem;

  font-weight: 600;

  color: #8a6508;

  background: #fff8e6;

  padding: 4px 10px;

  border-radius: 999px;

  border: 1px solid #f3e2b4;

}



.rating-stars-badge .stars {

  color: #eab308;

  letter-spacing: 2px;

}



.rating-score {

  font-weight: 700;

  color: #1a1a1a;

}



.rating-count {

  color: #666;

  font-size: 0.76rem;

  font-weight: 400;

}



.product-info-panel h1 {

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

  font-size: clamp(2rem, 3.2vw, 2.65rem);

  font-weight: 400;

  color: var(--ink);

  line-height: 1.2;

  margin-bottom: 4px;

}



.product-artisan-subtitle {

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

  font-size: 0.98rem;

  color: #5c5545;

  font-style: italic;

  margin-top: 0;

  margin-bottom: 12px;

  line-height: 1.45;

}



.sku-stock-row {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 12px;

  flex-wrap: wrap;

}



.product-info-panel .product-sku {

  font-size: 0.8rem;

  color: var(--ink-light);

}



.stock-status-badge {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  font-size: 0.82rem;

  font-weight: 600;

  color: #2e7d32;

}



.stock-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #2e7d32;

  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.25);

  animation: pulseDot 2s infinite;

}



@keyframes pulseDot {

  0% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.5); }

  70% { box-shadow: 0 0 0 6px rgba(46, 125, 50, 0); }

  100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }

}



.urgency-strip {

  background: #fff8f0;

  border-left: 3.5px solid #d9531e;

  border-radius: 0 6px 6px 0;

  padding: 9px 12px;

  font-size: 0.82rem;

  color: #9c3c12;

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 16px;

  line-height: 1.4;

}



.urgency-fire {

  font-size: 1.1rem;

}



.product-price-box {

  padding: 12px 0;

  border-top: 1px solid #eee8dc;

  border-bottom: 1px solid #eee8dc;

  margin-bottom: 16px;

}



.price-main-wrap {

  display: flex;

  align-items: baseline;

  gap: 10px;

  flex-wrap: wrap;

}



.product-price-box .price-amount {

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

  font-size: 1.5rem;

  font-weight: 700;

  color: var(--olive);

  line-height: 1.2;

  letter-spacing: -0.01em;

}



.price-mrp {

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

  font-size: 0.95rem;

  color: #8c8c8c;

  text-decoration: line-through;

  font-weight: 400;

}



.price-save-badge {

  background: #eef6ec;

  color: #2e7d32;

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

  font-size: 0.78rem;

  font-weight: 600;

  padding: 2px 8px;

  border-radius: 4px;

  letter-spacing: 0.01em;

}



.price-tax-note {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 0.78rem;

  color: #666;

  margin-top: 6px;

  line-height: 1.4;

}



.price-tax-note svg {

  color: var(--olive);

  flex-shrink: 0;

}



.impact-mission-box {

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

  border: 1px solid #e4d7bf;

  border-radius: 10px;

  padding: 16px 20px;

  margin-bottom: 22px;

  position: relative;

}



.impact-mission-quote {

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

  font-size: 1.08rem;

  color: #3b2c1b;

  line-height: 1.5;

  margin-bottom: 6px;

}



.impact-mission-meta {

  font-size: 0.78rem;

  color: #785a36;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  font-weight: 600;

}



.order-actions-box {

  background: #ffffff;

  border: 1px solid #e6e0d2;

  border-radius: 10px;

  padding: 22px;

  margin-bottom: 24px;

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

}



.qty-calc-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  margin-bottom: 16px;

  flex-wrap: wrap;

}



.qty-label {

  font-size: 0.84rem;

  font-weight: 600;

  color: var(--ink);

  display: block;

  margin-bottom: 6px;

}



.qty-stepper {

  display: inline-flex !important;

  align-items: stretch !important;

  border: 1px solid #d4cdbd !important;

  border-radius: 6px !important;

  overflow: hidden !important;

  background: #ffffff !important;

  height: 42px !important;

  width: auto !important;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;

}



.qty-stepper button,

.qty-stepper button[type="button"],

.qty-stepper button#qtyMinus,

.qty-stepper button#qtyPlus {

  width: 42px !important;

  min-width: 42px !important;

  max-width: 42px !important;

  height: 42px !important;

  padding: 0 !important;

  margin: 0 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-family: inherit !important;

  color: var(--ink) !important;

  background: #fbf9f5 !important;

  background-color: #fbf9f5 !important;

  border: none !important;

  border-radius: 0 !important;

  cursor: pointer !important;

  outline: none !important;

  transition: background-color 0.15s ease, color 0.15s ease !important;

  user-select: none !important;

  -webkit-user-select: none !important;

  box-shadow: none !important;

  text-decoration: none !important;

}



.qty-stepper button svg,

.qty-stepper button[type="button"] svg {

  color: var(--ink) !important;

  stroke: var(--ink) !important;

  flex-shrink: 0 !important;

  transition: stroke 0.15s ease !important;

}



.qty-stepper button:hover,

.qty-stepper button:focus,

.qty-stepper button:active,

.qty-stepper button[type="button"]:hover,

.qty-stepper button[type="button"]:focus,

.qty-stepper button[type="button"]:active,

.qty-stepper button#qtyMinus:hover,

.qty-stepper button#qtyMinus:focus,

.qty-stepper button#qtyMinus:active,

.qty-stepper button#qtyPlus:hover,

.qty-stepper button#qtyPlus:focus,

.qty-stepper button#qtyPlus:active {

  background: #ede6d8 !important;

  background-color: #ede6d8 !important;

  color: var(--olive) !important;

  border: none !important;

  outline: none !important;

  box-shadow: none !important;

}



.qty-stepper button:hover svg,

.qty-stepper button:focus svg,

.qty-stepper button:active svg {

  stroke: var(--olive) !important;

}



.qty-stepper input,

.qty-stepper input[type="number"],

.qty-stepper input#qtyInput {

  width: 52px !important;

  min-width: 52px !important;

  max-width: 52px !important;

  height: 42px !important;

  padding: 0 !important;

  margin: 0 !important;

  text-align: center !important;

  border: none !important;

  border-left: 1px solid #d4cdbd !important;

  border-right: 1px solid #d4cdbd !important;

  border-radius: 0 !important;

  background: #ffffff !important;

  background-color: #ffffff !important;

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

  font-size: 1.15rem !important;

  font-weight: 600 !important;

  color: var(--ink) !important;

  line-height: 42px !important;

  outline: none !important;

  box-shadow: none !important;

  -moz-appearance: textfield !important;

  appearance: textfield !important;

}



.qty-stepper input::-webkit-outer-spin-button,

.qty-stepper input::-webkit-inner-spin-button {

  -webkit-appearance: none !important;

  margin: 0 !important;

  display: none !important;

}



.total-calc-display {

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

  font-size: 0.92rem;

  color: var(--ink);

}



.total-calc-display strong {

  color: var(--olive);

  font-size: 1.15rem;

  font-weight: 600;

  margin-left: 4px;

}



.action-buttons-group {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.dual-cta-row {

  display: flex;

  gap: 14px;

  align-items: stretch;

}



.btn-add-cart-human {

  flex: 1;

  background: var(--olive) !important;

  background-color: var(--olive) !important;

  color: var(--cream) !important;

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

  font-size: 1rem !important;

  font-weight: 500 !important;

  padding: 13px 22px !important;

  border-radius: 6px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 8px !important;

  border: 1px solid var(--olive) !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

  box-shadow: 0 2px 8px rgba(82, 106, 61, 0.15) !important;

  outline: none !important;

}



.btn-add-cart-human:hover,

.btn-add-cart-human:focus {

  background: var(--olive-dark) !important;

  background-color: var(--olive-dark) !important;

  color: #ffffff !important;

  transform: translateY(-1px) !important;

  box-shadow: 0 4px 12px rgba(82, 106, 61, 0.25) !important;

}



.btn-wa-order-human {

  flex: 1;

  background: #25d366 !important;

  background-color: #25d366 !important;

  color: #ffffff !important;

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

  font-size: 1rem !important;

  font-weight: 500 !important;

  padding: 13px 22px !important;

  border-radius: 6px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 8px !important;

  border: 1px solid #25d366 !important;

  cursor: pointer !important;

  text-decoration: none !important;

  transition: all 0.2s ease !important;

  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.2) !important;

}



.btn-wa-order-human:hover,

.btn-wa-order-human:focus {

  background: #20bd5a !important;

  background-color: #20bd5a !important;

  color: #ffffff !important;

  transform: translateY(-1px) !important;

  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3) !important;

}



.btn-wa-order-human svg {

  flex-shrink: 0;

  fill: currentColor;

}



.order-artisan-note {

  margin-top: 14px;

  font-size: 0.82rem;

  color: var(--ink-light);

  line-height: 1.5;

  font-style: italic;

}



.pincode-check-wrap {

  margin-top: 16px;

  padding-top: 14px;

  border-top: 1px solid #eee9de;

}



.pincode-input-row {

  display: flex;

  align-items: center;

  gap: 8px;

}



.pincode-input-row svg {

  color: var(--olive);

  flex-shrink: 0;

}



.pincode-input-row input {

  flex: 1;

  padding: 9px 12px;

  border: 1.5px solid #dcd7ca;

  border-radius: 6px;

  font-size: 0.86rem;

  font-family: inherit;

  outline: none;

  transition: border-color 0.2s ease;

}



.pincode-input-row input:focus {

  border-color: var(--olive);

}



.pincode-input-row button,

.pincode-input-row button[type="button"] {

  padding: 9px 16px !important;

  background: #fafaf8 !important;

  background-color: #fafaf8 !important;

  border: 1.5px solid #dcd7ca !important;

  border-radius: 6px !important;

  font-weight: 600 !important;

  font-size: 0.86rem !important;

  color: var(--ink) !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

  outline: none !important;

  box-shadow: none !important;

}



.pincode-input-row button:hover,

.pincode-input-row button:focus {

  background: #f0eee6 !important;

  background-color: #f0eee6 !important;

  border-color: #c8c2b3 !important;

  color: var(--ink) !important;

  outline: none !important;

  box-shadow: none !important;

}



.pincode-result {

  margin-top: 8px;

  font-size: 0.82rem;

  padding: 8px 12px;

  border-radius: 6px;

  line-height: 1.4;

}



/* 4-Point Buyer Confidence Grid */

.buyer-perks-grid {

  display: grid;

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

  gap: 10px;

  margin-top: 16px;

  padding-top: 14px;

  border-top: 1px dashed #e6e0d2;

}



.perk-item {

  display: flex;

  align-items: flex-start;

  gap: 8px;

  font-size: 0.78rem;

  color: #4a4a4a;

  line-height: 1.35;

}



.perk-item svg {

  color: var(--olive);

  flex-shrink: 0;

  margin-top: 2px;

}



.perk-item strong {

  color: var(--ink);

}



.share-strip {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-top: 16px;

  padding-top: 14px;

  border-top: 1px solid #eee9de;

  font-size: 0.82rem;

  flex-wrap: wrap;

}



.bulk-quote-link {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  color: var(--olive);

  font-weight: 600;

  text-decoration: none;

  font-size: 0.82rem;

}



.bulk-quote-link:hover {

  text-decoration: underline;

}



.share-actions {

  display: flex;

  align-items: center;

  gap: 8px;

}



.share-btn {

  padding: 5px 10px;

  border-radius: 4px;

  border: 1px solid var(--line-dark);

  background: #ffffff;

  font-size: 0.8rem;

  display: inline-flex;

  align-items: center;

  gap: 5px;

  cursor: pointer;

  color: var(--ink);

  transition: all 0.2s ease;

  text-decoration: none;

}



.share-btn:hover {

  border-color: var(--olive);

  color: var(--olive);

}



.share-btn.share-wa {

  color: #128c7e;

  border-color: #25d366;

}



/* Tabs Section */

.product-tabs-section {

  margin-top: 10px;

  margin-bottom: 20px;

}



.tab-nav-bar {

  display: flex;

  gap: 8px;

  border-bottom: 2px solid #ede7db;

  margin-bottom: 24px;

  overflow-x: auto;

  padding-bottom: 0;

}



button.tab-nav-btn,

.tab-nav-btn {

  padding: 13px 26px !important;

  font-family: var(--font-accent) !important;

  font-size: 0.95rem !important;

  font-weight: 600 !important;

  color: #635f56 !important;

  border: 1px solid transparent !important;

  border-bottom: 3px solid transparent !important;

  background: transparent !important;

  background-color: transparent !important;

  margin-bottom: -2px !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

  white-space: nowrap !important;

  outline: none !important;

  box-shadow: none !important;

  border-radius: 6px 6px 0 0 !important;

}



button.tab-nav-btn:hover,

button.tab-nav-btn:focus,

.tab-nav-btn:hover,

.tab-nav-btn:focus {

  color: var(--olive) !important;

  background: rgba(82, 106, 61, 0.06) !important;

  background-color: rgba(82, 106, 61, 0.06) !important;

  border-bottom: 3px solid var(--olive) !important;

  outline: none !important;

  box-shadow: none !important;

}



button.tab-nav-btn.active,

.tab-nav-btn.active,

button.tab-nav-btn.active:hover,

button.tab-nav-btn.active:focus,

.tab-nav-btn.active:hover,

.tab-nav-btn.active:focus {

  color: var(--olive) !important;

  background: #ffffff !important;

  background-color: #ffffff !important;

  border: 1px solid #ede7db !important;

  border-bottom: 3px solid var(--olive) !important;

  outline: none !important;

  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.03) !important;

  font-weight: 700 !important;

}



.tab-pane-content {

  display: none;

  background: #ffffff;

  border: 1px solid var(--line-dark);

  border-radius: 8px;

  padding: 36px;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);

}



.tab-pane-content.active {

  display: block;

}



.tab-pane-content h3 {

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

  font-size: 1.6rem;

  color: var(--olive);

  margin-bottom: 16px;

}



.tab-pane-content p {

  color: var(--ink-soft);

  font-size: 0.98rem;

  line-height: 1.8;

  margin-bottom: 16px;

}



.spec-table-wrap {

  width: 100%;

  border-collapse: collapse;

}



.spec-table-wrap tr {

  border-bottom: 1px solid #f0f0f0;

}



.spec-table-wrap tr:last-child {

  border-bottom: none;

}



.spec-table-wrap th {

  text-align: left;

  padding: 12px 16px;

  background-color: #fafaf8;

  color: var(--ink);

  font-size: 0.9rem;

  width: 35%;

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

}



.spec-table-wrap td {

  padding: 12px 16px;

  color: var(--ink-soft);

  font-size: 0.92rem;

}



/* Why Bamboo First Section */

.why-bamboo-section {

  padding: 60px 0;

  background: #fbf9f4;

  border-top: 1px solid #ece6d8;

  border-bottom: 1px solid #ece6d8;

}



.why-bamboo-grid {

  display: grid;

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

  gap: 28px;

  margin-top: 36px;

}



.why-bamboo-card {

  background: #ffffff;

  border: 1px solid #eae4d5;

  border-radius: 10px;

  padding: 30px 24px;

  text-align: center;

  transition: all 0.3s ease;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);

}



.why-bamboo-card:hover {

  transform: translateY(-4px);

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

  border-color: var(--olive);

}



.why-card-icon {

  font-size: 2.5rem;

  margin-bottom: 14px;

  line-height: 1;

}



.why-bamboo-card h4 {

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

  font-size: 1.25rem;

  color: var(--ink);

  margin-bottom: 10px;

}



.why-bamboo-card p {

  font-size: 0.88rem;

  color: var(--ink-soft);

  line-height: 1.6;

  margin: 0;

}



/* Reviews Showcase Section */

.reviews-showcase-section {

  padding: 65px 0;

  background: #ffffff;

}



.reviews-grid {

  display: grid;

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

  gap: 24px;

  margin-top: 36px;

}



.review-card {

  background: #fbfaf6;

  border: 1px solid #ebe5d6;

  border-radius: 10px;

  padding: 24px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);

}



.review-card-stars {

  color: #eab308;

  font-size: 1.05rem;

  letter-spacing: 2px;

  margin-bottom: 10px;

}



.review-card-quote {

  font-size: 0.92rem;

  color: var(--ink);

  line-height: 1.6;

  font-style: italic;

  margin-bottom: 16px;

  flex: 1;

}



.review-author-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 0.82rem;

  padding-top: 12px;

  border-top: 1px solid #eee8db;

}



.review-author-name {

  font-weight: 700;

  color: var(--ink);

}



/* Product Experience Section */

.product-experience-section {

  padding: 60px 0;

  background: #fbf9f4;

  border-top: 1px solid #ede7db;

  border-bottom: 1px solid #ede7db;

}



.experience-cards-grid {

  display: grid;

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

  gap: 24px;

  margin-top: 36px;

}



.experience-card {

  background: #ffffff;

  border: 1px solid #eae3d4;

  border-radius: 10px;

  padding: 28px 24px;

  text-align: left;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);

  transition: all 0.25s ease;

}



.experience-card:hover {

  transform: translateY(-4px);

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

  border-color: var(--olive);

}



.exp-icon {

  font-size: 2.4rem;

  margin-bottom: 14px;

  line-height: 1;

}



.experience-card h3 {

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

  font-size: 1.25rem;

  color: var(--ink);

  margin-bottom: 10px;

  line-height: 1.3;

}



.experience-card p {

  font-size: 0.9rem;

  color: var(--ink-soft);

  line-height: 1.6;

  margin: 0;

}



/* What's In The Box Section */

.product-in-box-section {

  padding: 60px 0;

  background: #ffffff;

  border-bottom: 1px solid #ede7db;

}



.inbox-grid {

  display: grid;

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

  gap: 20px;

  margin-top: 36px;

}



.inbox-item {

  background: #faf8f3;

  border: 1px solid #ebe4d5;

  border-radius: 8px;

  padding: 22px 18px;

  display: flex;

  flex-direction: column;

  gap: 10px;

  transition: all 0.25s ease;

}



.inbox-item:hover {

  transform: translateY(-3px);

  border-color: var(--olive);

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);

}



.inbox-icon {

  font-size: 2.1rem;

  line-height: 1;

}



.inbox-item strong {

  font-size: 0.94rem;

  color: var(--ink);

  line-height: 1.3;

  display: block;

}



.inbox-item p {

  font-size: 0.82rem;

  color: var(--ink-soft);

  line-height: 1.45;

  margin: 0;

}



/* Comparison Section */

.product-comparison-section {

  padding: 65px 0;

  background: #fbf9f4;

  border-bottom: 1px solid #ede7db;

}



.comparison-table-wrap {

  margin-top: 36px;

  overflow-x: auto;

  background: #ffffff;

  border-radius: 10px;

  border: 1px solid #ebe5d6;

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

}



.comparison-table {

  width: 100%;

  border-collapse: collapse;

  text-align: left;

}



.comparison-table th {

  padding: 18px 22px;

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

  font-size: 0.95rem;

  font-weight: 700;

  border-bottom: 2px solid #ede7db;

  color: var(--ink);

}



.comparison-table th.col-highlight {

  background: #f2f7ef;

  color: #1e3d22;

  border-bottom: 2px solid #3d502e;

}



.comparison-table th.col-muted {

  color: #777;

  background: #fafaf8;

}



.comparison-table td {

  padding: 16px 22px;

  font-size: 0.92rem;

  border-bottom: 1px solid #f0eae0;

  line-height: 1.5;

}



.comparison-table tr:last-child td {

  border-bottom: none;

}



.comparison-table td.col-highlight {

  background: #f7faf5;

  color: #1a391e;

  font-weight: 600;

}



.comparison-table td.col-muted {

  color: #6a6a6a;

  background: #ffffff;

}



/* FAQ Accordion Section */

.product-faq-section {

  padding: 65px 0;

  background: #ffffff;

  border-bottom: 1px solid #ede7db;

}



.faq-accordion-list {

  max-width: 860px;

  margin: 36px auto 0;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.faq-item {

  border: 1px solid #ebe5d6;

  border-radius: 8px;

  overflow: hidden;

  background: #faf8f4;

  transition: border-color 0.2s ease, background 0.2s ease;

}



.faq-item.active {

  border-color: var(--olive);

  background: #ffffff;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);

}



button.faq-question,

.faq-question {

  width: 100% !important;

  text-align: left !important;

  padding: 18px 22px !important;

  background: transparent !important;

  background-color: transparent !important;

  border: none !important;

  font-family: var(--font-accent) !important;

  font-size: 1rem !important;

  font-weight: 600 !important;

  color: var(--ink) !important;

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  cursor: pointer !important;

  outline: none !important;

  box-shadow: none !important;

}



button.faq-question:hover,

button.faq-question:focus,

.faq-question:hover,

.faq-question:focus {

  color: var(--olive) !important;

  background: transparent !important;

  background-color: transparent !important;

  outline: none !important;

  box-shadow: none !important;

}



.faq-toggle-icon {

  font-size: 1.4rem;

  font-weight: 300;

  color: var(--olive);

  line-height: 1;

}



.faq-answer {

  display: none;

  padding: 0 22px 20px 22px;

  font-size: 0.92rem;

  color: var(--ink-soft);

  line-height: 1.65;

}



.faq-item.active .faq-answer {

  display: block;

}



/* Sticky Mobile Buy Bar */

.mobile-sticky-buy-bar {

  display: none;

}



@media (max-width: 992px) {

  .product-detail-layout {

    grid-template-columns: minmax(0, 1fr) !important;

    gap: 36px;

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

  }

  .product-gallery {

    position: static;

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

  }

  .product-info-panel {

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

  }

  .gallery-main-wrap {

    width: 100% !important;

    max-width: 100% !important;

  }

  .gallery-main-wrap img {

    max-width: 100% !important;

    height: auto !important;

    aspect-ratio: 1 / 1;

    object-fit: cover !important;

  }

  .why-bamboo-grid,

  .reviews-grid,

  .experience-cards-grid {

    grid-template-columns: 1fr;

    gap: 20px;

  }

  .inbox-grid {

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

    gap: 16px;

  }

}



@media (max-width: 768px) {

  .product-detail-section {

    padding-bottom: 90px !important; /* Leave clearance for sticky mobile buy bar */

  }

  .product-detail-layout {

    grid-template-columns: minmax(0, 1fr) !important;

    width: 100% !important;

    max-width: 100% !important;

  }

  .product-gallery,

  .product-info-panel {

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

  }

  button.faq-question,

  .faq-question {

    white-space: normal !important;

  }

  button.faq-question span,

  .faq-question span {

    white-space: normal !important;

    word-break: break-word !important;

  }

  .tab-nav-bar {

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch;

    width: 100% !important;

    max-width: 100% !important;

  }

  .gallery-thumbs {

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch;

    width: 100% !important;

    max-width: 100% !important;

  }

  .gallery-assurance-bar,

  .trust-matrix-grid,

  .buyer-perks-grid {

    grid-template-columns: 1fr;

  }

  .inbox-grid {

    grid-template-columns: 1fr;

    gap: 12px;

  }

  .dual-cta-row {

    flex-direction: column;

  }

  .wa-concierge-card {

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

  }

  .wa-concierge-card .btn-wa-compact {

    width: 100%;

    justify-content: center;

  }

  .comparison-table th,

  .comparison-table td {

    padding: 12px 14px;

    font-size: 0.84rem;

  }

  .mobile-sticky-buy-bar {

    position: fixed !important;

    bottom: 0 !important;

    left: 0 !important;

    right: 0 !important;

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border-top: 1px solid #ded9cb !important;

    padding: 10px 14px !important;

    z-index: 9999 !important;

    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;

    display: none; /* Managed by JS scroll */

    align-items: center !important;

    justify-content: space-between !important;

    gap: 10px !important;

  }

  .mobile-buy-info {

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    min-width: 0 !important;

    flex: 1 1 auto !important;

    overflow: hidden !important;

  }

  .mobile-buy-thumb {

    width: 44px !important;

    height: 44px !important;

    border-radius: 6px !important;

    object-fit: cover !important;

    flex-shrink: 0 !important;

    border: 1px solid #e0e0e0 !important;

  }

  .mobile-buy-title {

    font-size: 0.82rem !important;

    font-weight: 600 !important;

    color: var(--ink) !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    display: block !important;

    max-width: 140px !important;

  }

  .mobile-buy-price {

    font-family: var(--font-accent) !important;

    font-size: 0.92rem !important;

    font-weight: 700 !important;

    color: var(--olive) !important;

    display: block !important;

  }

  .mobile-buy-actions {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    flex-shrink: 0 !important;

  }

  .mobile-btn-cart {

    background: #3d502e !important;

    background-color: #3d502e !important;

    color: #ffffff !important;

    padding: 9px 14px !important;

    border-radius: 6px !important;

    font-weight: 600 !important;

    font-size: 0.82rem !important;

    border: none !important;

    cursor: pointer !important;

    white-space: nowrap !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    box-shadow: 0 2px 6px rgba(61, 80, 46, 0.25) !important;

  }

  .mobile-btn-cart:hover,

  .mobile-btn-cart:active {

    background: #2b3921 !important;

    background-color: #2b3921 !important;

    color: #ffffff !important;

  }

  .mobile-btn-wa {

    background: #25d366 !important;

    background-color: #25d366 !important;

    color: #ffffff !important;

    width: 38px !important;

    height: 38px !important;

    padding: 0 !important;

    border-radius: 6px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    text-decoration: none !important;

    flex-shrink: 0 !important;

    box-shadow: 0 2px 6px rgba(37, 211, 102, 0.3) !important;

  }

}





.artisan-impact-banner {

  background-color: var(--sage-pale2);

  border: 1px solid var(--line-dark);

  border-radius: 8px;

  padding: 32px;

  display: flex;

  align-items: center;

  gap: 28px;

  margin-bottom: 10px;

}



.artisan-impact-banner img {

  width: 110px;

  height: 110px;

  border-radius: 50%;

  object-fit: cover;

  flex-shrink: 0;

  border: 3px solid var(--olive);

}



.artisan-impact-banner h4 {

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

  font-size: 1.4rem;

  color: var(--olive);

  margin-bottom: 6px;

}



.artisan-impact-banner p {

  font-size: 0.94rem;

  color: var(--ink);

  line-height: 1.65;

  margin: 0;

}



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

   BLOG HUB & CARDS (PIXEL PERFECT TO BAMBOOFIRST.IN)

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



.blog-wix-section {

  background: #FFFBEB;

  padding-bottom: 80px;

}



.blog-wix-header-strip {

  background: #7D8E69;

  color: #FFFBEB;

  padding: 42px 24px;

  margin-bottom: 48px;

}



.blog-wix-header-inner {

  max-width: 1440px;

  margin: 0 auto;

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 20px;

  padding: 0 10px;

  box-sizing: border-box;

}



.blog-wix-header-strip .eyebrow {

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

  font-size: 0.88rem;

  font-weight: 600;

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

  margin-bottom: 6px;

  text-transform: uppercase;

  letter-spacing: 0.08em;

}



.blog-wix-header-strip h2 {

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

  font-size: clamp(2rem, 3.4vw, 2.85rem);

  font-weight: 400;

  color: #ffffff;

  margin: 0;

}



.blog-wix-header-strip .btn-blog-readmore {

  background: #526A3D;

  color: #FFFBEB;

  padding: 10px 28px;

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

  font-size: 15px;

  font-weight: 500;

  border-radius: 4px;

  text-decoration: none;

  transition: all 0.25s ease;

  display: inline-block;

}



.blog-wix-header-strip .btn-blog-readmore:hover {

  background: #3c4925;

  transform: none;

  box-shadow: none;

}



.blog-grid {

  display: grid;

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

  gap: 30px;

  max-width: 1440px;

  margin: 0 auto;

  padding: 0 24px;

  box-sizing: border-box;

}



.blog-card {

  background: transparent;

  border: none;

  border-radius: 0;

  overflow: visible;

  display: flex;

  flex-direction: column;

  box-shadow: none;

  text-decoration: none;

  transition: opacity 0.2s ease;

}



.blog-card:hover {

  transform: none;

  box-shadow: none;

  opacity: 0.9;

}



.blog-card .thumb {

  height: 240px;

  width: 100%;

  overflow: hidden;

  margin-bottom: 14px;

}



.blog-card .thumb img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.blog-card .meta {

  padding: 0;

  font-size: 13px;

  color: #666666;

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

  font-weight: 400;

  text-transform: none;

  letter-spacing: normal;

  margin-bottom: 8px;

}



.blog-card h4 {

  padding: 0;

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

  font-size: 23px;

  font-weight: 400;

  color: #526A3D;

  line-height: 1.3;

  margin-bottom: 12px;

}



.blog-card p {

  padding: 0;

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

  font-size: 14px;

  color: #4a4a4a;

  line-height: 1.5;

}



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

   OUR STORY, MENTORS & TEAMS

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



.team-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 24px;

}



.team-card {

  background: #ffffff;

  border-radius: 6px;

  overflow: hidden;

  text-align: center;

  border: 1px solid var(--line-dark);

  color: var(--ink);

  transition: transform 0.3s ease;

}



.team-card:hover {

  transform: translateY(-4px);

}



.team-card img {

  width: 100%;

  height: 220px;

  object-fit: cover;

}



.team-card .cap {

  padding: 16px 12px;

}



.team-card h4 {

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

  font-size: 1.25rem;

  margin-bottom: 4px;

}



.team-card .role {

  font-size: 0.82rem;

  color: var(--olive);

  font-weight: 600;

}



.sdg-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

  gap: 16px;

  margin-top: 2rem;

}



.sdg-card {

  background: #ffffff;

  border: 1px solid var(--line-dark);

  padding: 20px 14px;

  border-radius: 6px;

  text-align: center;

  transition: transform 0.25s ease;

}



.sdg-card:hover {

  transform: translateY(-3px);

  border-color: var(--olive);

}



.sdg-num {

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

  font-size: 1.8rem;

  font-weight: 700;

  color: var(--olive);

  display: block;

  margin-bottom: 4px;

}



.sdg-name {

  font-size: 0.84rem;

  font-weight: 600;

  color: var(--ink);

  line-height: 1.3;

  display: block;

}



.mentor-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 24px;

  margin-top: 2rem;

}



.mentor-card {

  background: #ffffff;

  border: 1px solid var(--line-dark);

  border-radius: 6px;

  padding: 30px 20px;

  text-align: center;

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

}



.mentor-card:hover {

  transform: translateY(-4px);

  border-color: var(--olive);

}



.mentor-card h4 {

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

  font-size: 1.4rem;

  color: var(--olive);

  margin-bottom: 6px;

}



.mentor-card span {

  font-size: 0.85rem;

  color: var(--ink-soft);

}



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

   FORMS & INPUTS

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



.form-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 18px;

}



.form-grid .full {

  grid-column: 1 / -1;

}



.form-grid label {

  display: block;

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

  font-size: 0.84rem;

  font-weight: 600;

  margin-bottom: 6px;

  color: var(--ink);

}



.form-grid.on-olive label {

  color: var(--cream);

}



.form-grid input,

.form-grid select,

.form-grid textarea {

  width: 100%;

  box-sizing: border-box;

  padding: 12px 14px;

  border-radius: 6px;

  border: 1px solid #d5cebf;

  background: #ffffff;

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

  font-size: 0.95rem;

  color: var(--ink);

  outline: none;

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

}



.form-grid textarea {

  min-height: 110px;

  resize: vertical;

}



.form-grid input:focus,

.form-grid select:focus,

.form-grid textarea:focus {

  border-color: var(--olive);

  box-shadow: 0 0 0 3px rgba(82, 106, 61, 0.2);

}



@media (max-width: 768px) {

  #bulkInquirySection form,

  .bulk-inquiry-form,

  form:has(.form-grid) {

    padding: 24px 18px !important;

    border-radius: 12px !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

  }

  .form-grid {

    grid-template-columns: 1fr !important;

    gap: 16px !important;

  }

  .form-grid .full {

    grid-column: 1 !important;

  }

  .form-grid label {

    font-size: 0.88rem !important;

    margin-bottom: 6px !important;

  }

  .form-grid input,

  .form-grid select,

  .form-grid textarea {

    font-size: 16px !important; /* Prevents auto-zoom on iOS Safari */

    padding: 12px 14px !important;

    border-radius: 8px !important;

  }

  .form-grid button[type="submit"],

  .form-grid .btn {

    width: 100% !important;

    min-width: 0 !important;

    padding: 14px 20px !important;

    font-size: 1rem !important;

    justify-content: center !important;

  }

}



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

   SUBSCRIBE STRIP (PIXEL PERFECT TO BAMBOOFIRST.IN)

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



.subscribe-wix-section {

  background: #FFFBEB;

  padding: 70px 24px 85px;

  text-align: center;

  border-top: none;

}



.subscribe-wix-wrap {

  max-width: 780px;

  margin: 0 auto;

}



.subscribe-wix-section h2 {

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

  font-size: clamp(2rem, 3.4vw, 2.9rem);

  font-weight: 400;

  color: #526A3D;

  line-height: 1.25;

  margin-bottom: 12px;

}



.subscribe-wix-subtitle {

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

  font-size: 17px;

  color: #333333;

  margin-bottom: 28px;

}



.subscribe-wix-form {

  display: flex;

  flex-direction: column;

  gap: 16px;

  max-width: 580px;

  margin: 0 auto;

  box-sizing: border-box;

}



.subscribe-wix-form .form-group {

  width: 100%;

  text-align: left;

}



.subscribe-wix-form label {

  display: none !important;

}



.subscribe-wix-form input {

  width: 100%;

  height: 48px;

  padding: 0 14px;

  border: 1px solid #333333;

  border-radius: 0;

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

  font-size: 15px;

  color: #111111;

  outline: none;

  background: transparent;

  box-sizing: border-box;

}



.subscribe-wix-form input:focus {

  border-color: #526A3D;

}



.btn-subscribe-wix {

  width: 100%;

  height: 48px;

  background: #526A3D !important;

  color: #FFFBEB !important;

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

  font-size: 15px;

  font-weight: 500;

  border: none !important;

  border-radius: 0;

  cursor: pointer;

  transition: background 0.2s ease;

}



.btn-subscribe-wix:hover {

  background: #3F522F !important;

  transform: none;

  box-shadow: none;

}



.subscribe-strip {

  background-color: var(--sage-accent);

  color: var(--cream);

  padding: 70px 20px;

  text-align: center;

}



.subscribe-strip h2 {

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

  font-size: clamp(1.9rem, 3.4vw, 2.7rem);

  font-weight: 400;

  margin-bottom: 0.4em;

}



.sub-row {

  display: flex;

  max-width: 560px;

  margin: 1.8rem auto 0;

  gap: 12px;

}



.sub-row input {

  flex: 1;

  padding: 13px 20px;

  border-radius: 4px;

  border: 1px solid var(--cream);

  background: #ffffff;

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

  font-size: 0.95rem;

  outline: none;

}



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

   MODALS (HIDDEN BY DEFAULT WITH DISPLAY: NONE)

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



.quickview-modal,

.quickview-modal.open {

  display: none !important;

  opacity: 0 !important;

  visibility: hidden !important;

  pointer-events: none !important;

}



.quickview-backdrop {

  position: absolute;

  inset: 0;

  background: rgba(33, 33, 18, 0.7);

  backdrop-filter: blur(6px);

}



.quickview-dialog {

  position: relative;

  z-index: 2;

  background: #ffffff;

  border-radius: 8px;

  max-width: 820px;

  width: 100%;

  max-height: 90vh;

  overflow-y: auto;

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

  padding: 36px;

  transform: scale(0.94);

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

}



.quickview-modal.open .quickview-dialog {

  transform: scale(1);

}



.quickview-close {

  position: absolute;

  top: 14px;

  right: 16px;

  font-size: 1.8rem;

  color: var(--ink-soft);

  line-height: 1;

  padding: 4px 8px;

  border-radius: 4px;

}



.quickview-close:hover {

  color: var(--ink);

}



.quickview-content {

  display: grid;

  grid-template-columns: 1fr 1.2fr;

  gap: 32px;

  align-items: center;

}



.quickview-media img {

  width: 100%;

  max-height: 320px;

  object-fit: contain;

  border-radius: 6px;

  background: #fafaf8;

  padding: 16px;

}



.quickview-badge {

  font-size: 0.75rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--olive);

  background: rgba(82, 106, 61, 0.12);

  padding: 3px 8px;

  border-radius: 4px;

  display: inline-block;

  margin-bottom: 8px;

}



.quickview-details h3 {

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

  font-size: 1.8rem;

  color: var(--ink);

  margin-bottom: 6px;

}



.quickview-price {

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

  font-size: 1.3rem;

  font-weight: 700;

  color: var(--olive);

  margin-bottom: 14px;

}



.quickview-desc {

  font-size: 0.95rem;

  color: var(--ink-soft);

  line-height: 1.6;

  margin-bottom: 16px;

}



.quickview-highlights {

  font-size: 0.88rem;

  color: var(--ink);

  line-height: 1.7;

  margin-bottom: 24px;

  padding-left: 4px;

}



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

   TOAST NOTIFICATION & FLOATING WHATSAPP BUTTON

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



.site-toast {

  position: fixed;

  bottom: 28px;

  right: 28px;

  background: var(--olive-darker);

  color: #ffffff;

  padding: 14px 22px;

  border-radius: 8px;

  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);

  font-size: 0.94rem;

  line-height: 1.5;

  z-index: 99999;

  transform: translateY(100px);

  opacity: 0;

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

  max-width: 480px;

  pointer-events: none;

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

}



.site-toast.show {

  transform: translateY(0);

  opacity: 1;

  pointer-events: auto;

}



.site-toast a {

  color: #fceea7 !important;

  text-decoration: underline !important;

  font-weight: 600 !important;

  margin-left: 8px !important;

  display: inline-block !important;

  transition: opacity 0.2s;

}



.site-toast a:hover {

  opacity: 0.85;

}



.site-toast strong {

  color: #ffffff;

  font-weight: 600;

}



.whatsapp-float {

  position: fixed;

  bottom: 28px;

  left: 28px;

  z-index: 1500;

  background-color: #25d366;

  color: #ffffff;

  width: 58px;

  height: 58px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

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

  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  text-decoration: none;

}



.whatsapp-float:hover {

  transform: scale(1.1) translateY(-2px);

  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.55);

}



.whatsapp-tooltip {

  position: absolute;

  left: calc(100% + 12px);

  top: 50%;

  transform: translateY(-50%);

  background: #212112;

  color: #ffffff;

  padding: 6px 12px;

  border-radius: 4px;

  font-size: 0.8rem;

  font-weight: 500;

  white-space: nowrap;

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.2s ease;

}



.whatsapp-float:hover .whatsapp-tooltip {

  opacity: 1;

}



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

   FOOTER (100% FULL WIDTH EDGE-TO-EDGE)

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



body .elementor-section:has(.site-footer),

body .elementor-widget:has(.site-footer),

body .elementor-widget-wrap:has(.site-footer),

body .elementor-column:has(.site-footer) {

  margin-bottom: 0 !important;

  padding-bottom: 0 !important;

}



.site-footer {

  width: 100% !important;

  max-width: 100vw !important;

  background-color: #526A3D !important;

  color: #FFFBEB !important;

  padding: 41px 0 45px !important;

  position: relative !important;

  box-sizing: border-box !important;

  margin: 0 !important;

}



.footer-wrap {

  width: 100% !important;

  max-width: 1440px !important;

  margin: 0 auto !important;

  padding: 0 !important;

  box-sizing: border-box !important;

}



.footer-top-rule {

  width: calc(100% - 40px) !important;

  max-width: 1400px !important;

  height: 1px !important;

  background-color: #7D8E69 !important;

  margin: 0 auto 25px auto !important;

}



.footer-cols {

  display: grid !important;

  grid-template-columns: repeat(4, 1fr) !important;

  gap: 0 !important;

  align-items: flex-start !important;

  width: 100% !important;

  max-width: 1440px !important;

  margin: 0 auto !important;

  box-sizing: border-box !important;

}



/* Col 1: Logo centered in 360px column */

.footer-col-logo,

.footer-cols > div:nth-child(1) {

  display: flex !important;

  justify-content: center !important;

  align-items: flex-start !important;

  padding-top: 32px !important;

  box-sizing: border-box !important;

  width: 100% !important;

}



.footer-logo-link {

  display: inline-block !important;

  text-decoration: none !important;

}



.footer-col-logo img,

.footer-cols > div:nth-child(1) img {

  width: 138px !important;

  height: 171px !important;

  max-width: 138px !important;

  object-fit: contain !important;

  display: block !important;

}



/* Col 2: Helpful Links */

.footer-col-links,

.footer-cols > div:nth-child(2) {

  padding-left: 92.5px !important;

  padding-top: 47px !important;

  box-sizing: border-box !important;

}



/* Col 3: Company */

.footer-col-company,

.footer-cols > div:nth-child(3) {

  padding-left: 114.5px !important;

  padding-top: 47px !important;

  box-sizing: border-box !important;

}



/* Col 4: Contact */

.footer-col-contact,

.footer-cols > div:nth-child(4) {

  padding-left: 59.5px !important;

  padding-top: 47px !important;

  box-sizing: border-box !important;

}



.footer-col-title {

  font-family: 'Questrial', 'Montserrat', sans-serif !important;

  font-size: 21px !important;

  font-weight: 400 !important;

  color: #FFFBEB !important;

  margin: 0 0 20px 0 !important;

  letter-spacing: normal !important;

  line-height: normal !important;

}



.footer-links {

  list-style: none !important;

  padding: 0 !important;

  margin: 0 !important;

}



.footer-links li {

  margin: 0 0 0 0 !important;

  padding: 0 !important;

  line-height: 25.6px !important;

}



.footer-links a {

  color: #FFFBEB !important;

  font-family: 'Montserrat', sans-serif !important;

  font-size: 16px !important;

  font-weight: 400 !important;

  line-height: 25.6px !important;

  text-decoration: none !important;

  letter-spacing: normal !important;

  display: inline-block !important;

  transition: opacity 0.2s ease !important;

}



.footer-links a:hover {

  color: #ffffff !important;

  opacity: 0.85 !important;

}



.footer-contact-text {

  color: #FFFBEB !important;

  font-family: 'Questrial', 'Montserrat', sans-serif !important;

  font-size: 18px !important;

  font-weight: 400 !important;

  line-height: 25.2px !important;

  max-width: 240px !important;

  letter-spacing: normal !important;

  margin-bottom: 38px !important;

}



.footer-bot-rule {

  width: calc(100% - 40px) !important;

  max-width: 1400px !important;

  height: 1px !important;

  background-color: #7D8E69 !important;

  margin: 31px auto 29px auto !important;

}



.footer-bottom {

  width: 100% !important;

  text-align: center !important;

  font-family: 'Questrial', 'Montserrat', sans-serif !important;

  font-size: 16px !important;

  font-weight: 400 !important;

  color: #FFFBEB !important;

  line-height: 25.6px !important;

  letter-spacing: normal !important;

  margin: 0 !important;

  padding: 0 !important;

  border-top: none !important;

}



.footer-bottom a {

  color: #FFFBEB !important;

  text-decoration: underline !important;

  transition: opacity 0.2s ease !important;

}



.footer-bottom a:hover {

  opacity: 0.85 !important;

}



@media (max-width: 1100px) {

  .footer-col-links,

  .footer-cols > div:nth-child(2),

  .footer-col-company,

  .footer-cols > div:nth-child(3),

  .footer-col-contact,

  .footer-cols > div:nth-child(4) {

    padding-left: 30px !important;

  }

}



@media (max-width: 820px) {

  .site-footer {

    padding: 36px 0 40px !important;

  }

  .footer-wrap {

    padding: 0 24px !important;

    box-sizing: border-box !important;

  }

  .footer-top-rule {

    width: 100% !important;

    margin: 0 0 28px 0 !important;

    opacity: 0.25 !important;

  }

  .footer-bot-rule {

    width: 100% !important;

    margin: 28px 0 20px 0 !important;

    opacity: 0.25 !important;

  }

  .footer-cols {

    grid-template-columns: 1fr !important;

    gap: 26px !important;

    text-align: left !important;

  }

  .footer-col-logo,

  .footer-cols > div:nth-child(1) {

    padding-top: 0 !important;

    justify-content: flex-start !important;

  }

  .footer-col-logo img,

  .footer-cols > div:nth-child(1) img {

    width: 100px !important;

    height: auto !important;

    max-width: 100px !important;

    margin: 0 !important;

  }

  .footer-col-links,

  .footer-cols > div:nth-child(2),

  .footer-col-company,

  .footer-cols > div:nth-child(3),

  .footer-col-contact,

  .footer-cols > div:nth-child(4) {

    padding-left: 0 !important;

    padding-top: 0 !important;

    text-align: left !important;

  }

  .footer-col-title {

    font-size: 1.15rem !important;

    font-weight: 600 !important;

    margin-bottom: 12px !important;

    letter-spacing: 0.04em !important;

    text-align: left !important;

  }

  .footer-links {

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 8px !important;

    text-align: left !important;

  }

  .footer-links li {

    line-height: 1.4 !important;

    text-align: left !important;

  }

  .footer-links a {

    font-size: 0.95rem !important;

    padding: 3px 0 !important;

    color: #f7f9f0 !important;

    text-align: left !important;

  }

  .footer-contact-text {

    font-size: 0.92rem !important;

    line-height: 1.6 !important;

    max-width: 100% !important;

    margin: 0 !important;

    text-align: left !important;

    color: #f0f3e8 !important;

  }

  .footer-bottom {

    margin: 0 !important;

    padding: 0 !important;

    font-size: 0.82rem !important;

    line-height: 1.5 !important;

    text-align: left !important;

    color: #e2e8d5 !important;

  }

}



/* Backwards compatibility for older templates */

.footer-top {

  width: 100% !important;

  max-width: 1440px !important;

  margin: 0 auto !important;

  padding: 0 24px !important;

  display: grid;

  grid-template-columns: 1.4fr 1fr 1fr 1.6fr;

  gap: 40px;

  margin-bottom: 40px;

  box-sizing: border-box !important;

}

.footer-top img {

  height: 90px;

  width: auto;

}

.footer-top h5 {

  font-family: var(--font-body), 'Outfit', sans-serif;

  font-size: 1.05rem;

  font-weight: 500;

  color: #ffffff;

  margin-bottom: 14px;

}

.footer-top ul {

  list-style: none;

}

.footer-top ul li {

  margin-bottom: 8px;

}

.footer-top ul li a {

  color: #e5e2da;

  font-size: 0.92rem;

}

.footer-top address {

  font-style: normal;

  font-size: 0.88rem;

  line-height: 1.65;

  color: #e5e2da;

}



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

   RESPONSIVE STYLES

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



@media (max-width: 1120px) {

  .product-grid {

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

  }

}



@media (max-width: 960px) {

  .rakhi-split {

    grid-template-columns: 1fr;

  }

  

  .green-gold-split {

    grid-template-columns: 1fr;

  }



  .why-bamboo-split {

    grid-template-columns: 1fr;

  }



  .artisan-quotes-grid {

    grid-template-columns: 1fr;

  }



  .blog-grid {

    grid-template-columns: 1fr 1fr;

  }



  .product-grid {

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

  }



  .product-detail-layout {

    grid-template-columns: 1fr;

    gap: 36px;

  }



  .product-gallery {

    position: static;

  }



  .artisan-impact-banner {

    flex-direction: column;

    text-align: center;

  }



  .footer-top {

    grid-template-columns: 1fr 1fr;

  }

}



@media (max-width: 860px) {

  .site-header {

    padding: 10px 0;

  }



  .header-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

  }



  .site-logo img {

    height: 70px;

  }



  .site-header.scrolled .site-logo img {

    height: 56px;

  }



  .header-col-center {

    position: fixed;

    top: 76px;

    left: 0;

    right: 0;

    background: var(--olive-darker);

    padding: 24px 20px 30px;

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

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

    display: flex;

    flex-direction: column;

    align-items: stretch;

    max-height: calc(100vh - 85px);

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-20px);

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

    z-index: 999;

  }



  .header-col-center.open {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

  }



  .search-bar-wrap {

    max-width: 100%;

    margin-bottom: 12px;

  }



  .main-nav {

    flex-direction: column;

    align-items: stretch;

    gap: 6px;

  }



  .main-nav .nav-link {

    padding: 10px 14px;

    font-size: 1rem;

    border-radius: 4px;

  }



  .main-nav .nav-link:hover {

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

  }



  .nav-dropdown {

    flex-direction: column;

    align-items: stretch;

    width: 100%;

  }



  .nav-dropdown-trigger {

    padding: 10px 14px;

    justify-content: space-between;

    width: 100%;

  }



  .nav-dropdown-menu {

    position: static;

    transform: none !important;

    display: none;

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

    box-shadow: none;

    border: none;

    border-radius: 6px;

    padding: 4px 0 6px 16px;

    margin-top: 4px;

    width: 100%;

  }



  .nav-dropdown.open .nav-dropdown-menu {

    display: block !important;

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    transform: none !important;

  }



  .menu-toggle {

    display: flex;

    align-items: center;

    justify-content: center;

  }



  .photo-row {

    grid-template-columns: 1fr;

  }



  .sub-row {

    flex-direction: column;

  }



  .stats-grid {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 600px) {

  .product-grid {

    grid-template-columns: 1fr;

  }



  .blog-grid {

    grid-template-columns: 1fr;

  }



  .footer-top {

    grid-template-columns: 1fr;

  }

}



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

   CART & CHECKOUT SYSTEM STYLES

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



/* 1. Header Cart Button & Live Counter */

.header-cart-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  position: relative;

  width: 42px;

  height: 42px;

  background-color: var(--cream);

  color: var(--olive);

  border: 1px solid var(--cream);

  border-radius: 6px;

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

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

  text-decoration: none;

  flex-shrink: 0;

}



.header-cart-btn:hover {

  background-color: #ffffff;

  color: var(--olive-darker);

  transform: translateY(-2px);

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

}



.header-cart-btn svg {

  stroke: var(--olive);

  transition: transform 0.25s ease;

}



.header-cart-btn:hover svg {

  stroke: var(--olive-darker);

  transform: scale(1.08);

}



.cart-count-badge {

  position: absolute;

  top: -6px;

  right: -6px;

  background-color: #b3261e;

  color: #ffffff;

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

  font-size: 0.72rem;

  font-weight: 700;

  min-width: 20px;

  height: 20px;

  padding: 0 4px;

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 2px solid #ffffff;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

  line-height: 1;

  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

}



.cart-count-badge.bounce {

  transform: scale(1.35);

}



/* 2. Toast Notifications */

#toastContainer {

  position: fixed;

  top: 96px;

  right: 24px;

  z-index: 99999;

  display: flex;

  flex-direction: column;

  gap: 10px;

  pointer-events: none;

}



.toast-msg {

  pointer-events: auto;

  display: flex;

  align-items: center;

  gap: 12px;

  background-color: var(--olive-darker);

  color: #ffffff;

  padding: 14px 20px;

  border-radius: 8px;

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

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

  font-size: 0.92rem;

  font-weight: 500;

  animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;

  transition: opacity 0.3s ease, transform 0.3s ease;

  max-width: 380px;

  border-left: 4px solid var(--accent-gold);

}



.toast-msg a {

  color: var(--accent-gold);

  font-weight: 700;

  text-decoration: underline;

  margin-left: 6px;

}



.toast-msg.fade-out {

  opacity: 0;

  transform: translateX(30px);

}



@keyframes toastSlideIn {

  from {

    opacity: 0;

    transform: translateY(-16px) scale(0.96);

  }

  to {

    opacity: 1;

    transform: translateY(0) scale(1);

  }

}



/* 3. Add to Cart Button States */

.btn-add-to-cart {

  position: relative;

  transition: all 0.25s ease;

  cursor: pointer;

}



.btn-add-to-cart.added {

  background-color: #2e7d32 !important;

  color: #ffffff !important;

  border-color: #2e7d32 !important;

}



/* 3.1 Page Header for Cart & Checkout */

.page-title-header {

  text-align: left;

  width: 100%;

  max-width: 100%;

  margin: 0 0 28px 0;

  padding: 0;

}



.page-title-header h1 {

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

  font-size: clamp(2rem, 3.2vw, 2.5rem);

  font-weight: 500;

  color: var(--olive-darker);

  margin: 0 0 8px 0;

  line-height: 1.22;

}



.page-title-header p {

  color: var(--ink-soft);

  font-size: 1.02rem;

  margin: 0;

  line-height: 1.5;

}



/* 4. Cart Page Layout & Table */

.cart-layout {

  display: grid;

  grid-template-columns: 1fr 360px;

  gap: 36px;

  align-items: start;

  margin: 0 0 60px;

}



.cart-items-panel {

  background: #ffffff;

  border: 1px solid var(--cream-dark);

  border-radius: 12px;

  padding: 24px 28px;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);

}



.cart-items-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  border-bottom: 2px solid var(--cream-dark);

  padding-bottom: 16px;

  margin-bottom: 20px;

}



.cart-items-header h2 {

  font-size: 1.5rem;

  margin: 0;

  color: var(--olive-darker);

}



.cart-clear-btn {

  background: none;

  border: none;

  color: #888;

  font-size: 0.85rem;

  cursor: pointer;

  text-decoration: underline;

  padding: 0;

}



.cart-clear-btn:hover {

  color: #b3261e;

}



.cart-item-row {

  display: grid;

  grid-template-columns: 90px 1fr auto auto;

  gap: 20px;

  align-items: center;

  padding: 18px 0;

  border-bottom: 1px solid #f0eee6;

  position: relative;

}



.cart-item-row:last-child {

  border-bottom: none;

}



.cart-item-thumb {

  width: 90px;

  height: 90px;

  border-radius: 8px;

  overflow: hidden;

  background: var(--cream);

  border: 1px solid var(--cream-dark);

  display: flex;

  align-items: center;

  justify-content: center;

}



.cart-item-thumb img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.cart-item-details {

  min-width: 0;

}



.cart-item-category {

  font-size: 0.76rem;

  text-transform: uppercase;

  color: var(--olive);

  font-weight: 700;

  letter-spacing: 0.5px;

  margin-bottom: 4px;

}



.cart-item-title {

  font-size: 1.05rem;

  font-weight: 600;

  color: var(--ink);

  margin: 0 0 6px;

}



.cart-item-title a {

  color: inherit;

  text-decoration: none;

}



.cart-item-title a:hover {

  color: var(--olive);

}



.cart-item-unit-price {

  font-size: 0.88rem;

  color: var(--ink-soft);

}



.cart-item-qty-wrap {

  display: flex;

  align-items: center;

  gap: 12px;

}



.cart-qty-stepper {

  display: inline-flex;

  align-items: center;

  border: 1.5px solid var(--cream-dark);

  border-radius: 6px;

  background: #ffffff;

  overflow: hidden;

}



.cart-qty-btn {

  background: none;

  border: none;

  width: 32px;

  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  font-size: 1.1rem;

  color: var(--ink);

  transition: background 0.2s ease;

}



.cart-qty-btn:hover {

  background-color: var(--cream);

}



.cart-qty-input {

  width: 40px;

  height: 34px;

  border: none;

  text-align: center;

  font-size: 0.95rem;

  font-weight: 600;

  color: var(--ink);

  -moz-appearance: textfield;

}



.cart-qty-input::-webkit-outer-spin-button,

.cart-qty-input::-webkit-inner-spin-button {

  -webkit-appearance: none;

  margin: 0;

}



.cart-item-subtotal {

  font-size: 1.15rem;

  font-weight: 700;

  color: var(--olive-darker);

  min-width: 100px;

  text-align: right;

}



.cart-item-remove-btn {

  background: none;

  border: none;

  color: #999;

  cursor: pointer;

  padding: 6px;

  border-radius: 4px;

  transition: color 0.2s ease;

}



.cart-item-remove-btn:hover {

  color: #b3261e;

}



/* 5. Order Summary Panel */

.order-summary-card {

  background: #ffffff;

  border: 1px solid var(--cream-dark);

  border-radius: 12px;

  padding: 24px;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);

  position: sticky;

  top: 100px;

}



.order-summary-card h3 {

  font-size: 1.3rem;

  margin: 0 0 18px;

  color: var(--olive-darker);

  border-bottom: 2px solid var(--cream-dark);

  padding-bottom: 12px;

}



.summary-line {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 12px;

  font-size: 0.95rem;

  color: var(--ink-soft);

}



.summary-line.total {

  border-top: 1.5px solid var(--cream-dark);

  padding-top: 14px;

  margin-top: 14px;

  font-size: 1.25rem;

  font-weight: 700;

  color: var(--ink);

}



.summary-line.total strong {

  color: var(--olive-darker);

}



.summary-badges {

  margin-top: 20px;

  padding-top: 16px;

  border-top: 1px solid #f0eee6;

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.summary-badge-item {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 0.82rem;

  color: var(--ink-soft);

}



.summary-badge-item svg {

  flex-shrink: 0;

  color: var(--olive);

}



/* 6. Empty Cart State */

.cart-empty-panel {

  text-align: center;

  padding: 60px 20px;

  background: #ffffff;

  border: 1px solid var(--cream-dark);

  border-radius: 12px;

  margin: 32px 0 60px;

}



.cart-empty-icon {

  width: 80px;

  height: 80px;

  border-radius: 50%;

  background: var(--cream);

  color: var(--olive);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 20px;

}



.cart-empty-panel h2 {

  font-size: 1.8rem;

  margin: 0 0 10px;

  color: var(--olive-darker);

}



.cart-empty-panel p {

  color: var(--ink-soft);

  max-width: 480px;

  margin: 0 auto 28px;

  font-size: 1rem;

}



/* 7. Checkout Page Layout & Form */

.checkout-layout {

  display: grid;

  grid-template-columns: 1fr 380px;

  gap: 36px;

  align-items: start;

  margin: 0 0 60px;

}



.checkout-form-panel {

  background: #ffffff;

  border: 1px solid var(--cream-dark);

  border-radius: 12px;

  padding: 28px 32px;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);

}



.checkout-section-title {

  font-size: 1.25rem;

  font-weight: 600;

  color: var(--olive-darker);

  margin: 0 0 16px;

  display: flex;

  align-items: center;

  gap: 10px;

}



.checkout-step-num {

  width: 28px;

  height: 28px;

  border-radius: 50%;

  background: var(--olive);

  color: #ffffff;

  font-size: 0.85rem;

  font-weight: 700;

  display: inline-flex;

  align-items: center;

  justify-content: center;

}



.checkout-form-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

  margin-bottom: 24px;

}



.checkout-form-grid.full {

  grid-template-columns: 1fr;

}



.checkout-form-group {

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.checkout-form-group.span-2 {

  grid-column: span 2;

}



.checkout-form-group label {

  font-size: 0.88rem;

  font-weight: 600;

  color: var(--ink);

}



.checkout-form-group input,

.checkout-form-group select,

.checkout-form-group textarea {

  width: 100%;

  padding: 10px 14px;

  border: 1.5px solid #d5cfbd;

  border-radius: 6px;

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

  font-size: 0.92rem;

  color: var(--ink);

  background: #ffffff;

  box-sizing: border-box;

  transition: border-color 0.2s ease, box-shadow 0.2s ease;

}



.checkout-form-group input:focus,

.checkout-form-group select:focus,

.checkout-form-group textarea:focus {

  outline: none;

  border-color: var(--olive);

  box-shadow: 0 0 0 3px rgba(82, 106, 61, 0.15);

}



/* Payment Method Selection Tiles */

.payment-tiles-grid {

  display: flex;

  flex-direction: column;

  gap: 12px;

  margin: 16px 0 24px;

}



.payment-tile {

  display: flex;

  align-items: flex-start;

  gap: 14px;

  padding: 16px;

  border: 1.5px solid #d5cfbd;

  border-radius: 8px;

  cursor: pointer;

  transition: all 0.2s ease;

  background: #ffffff;

}



.payment-tile:hover {

  border-color: var(--olive);

  background-color: #fcfbf7;

}



.payment-tile.selected {

  border-color: var(--olive);

  background-color: #f7f9f0;

  box-shadow: 0 2px 8px rgba(82, 106, 61, 0.1);

}



.payment-tile input[type="radio"] {

  margin-top: 3px;

  accent-color: var(--olive);

}



.payment-tile-body strong {

  display: block;

  font-size: 0.95rem;

  color: var(--ink);

  margin-bottom: 4px;

}



.payment-tile-body p {

  font-size: 0.84rem;

  color: var(--ink-soft);

  margin: 0;

  line-height: 1.4;

}



.payment-upi-details {

  margin-top: 10px;

  padding: 12px;

  background: #ffffff;

  border: 1px dashed var(--olive);

  border-radius: 6px;

  font-size: 0.86rem;

}



/* Order Success State */

.order-success-panel {

  text-align: center;

  background: #ffffff;

  border: 1px solid var(--cream-dark);

  border-radius: 12px;

  padding: 48px 32px;

  max-width: 680px;

  margin: 40px auto 60px;

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);

}



.order-success-icon {

  width: 72px;

  height: 72px;

  border-radius: 50%;

  background: #e8f5e9;

  color: #2e7d32;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 20px;

}



.order-id-badge {

  display: inline-block;

  background: var(--cream);

  color: var(--olive-darker);

  font-family: monospace;

  font-size: 1.15rem;

  font-weight: 700;

  padding: 6px 16px;

  border-radius: 6px;

  border: 1px dashed var(--olive);

  margin: 12px 0 20px;

}



.order-details-summary-box {

  text-align: left;

  background: #faf8f2;

  border-radius: 8px;

  padding: 20px;

  margin: 20px 0 28px;

  font-size: 0.92rem;

}



@media (max-width: 900px) {

  .cart-layout,

  .checkout-layout {

    grid-template-columns: 1fr;

  }



  .cart-item-row {

    grid-template-columns: 80px 1fr;

    grid-template-rows: auto auto;

  }



  .cart-item-qty-wrap {

    grid-column: 2;

  }



  .cart-item-subtotal {

    grid-column: 2;

    text-align: left;

  }



  .checkout-form-grid {

    grid-template-columns: 1fr;

  }



  .checkout-form-group.span-2 {

    grid-column: span 1;

  }

}







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

   AUTHENTIC ECOTOURISM PAGE STYLES (MATCHING LIVE WIX ECOTOURISM)

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



/* Section 1: Hero Banner */

.eco-hero-section {

  position: relative;

  width: 100%;

  height: 698px;

  min-height: 480px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  background-image: url('https://static.wixstatic.com/media/nsplsh_a38a5295a801475ebdb50cdb8c9de82d~mv2.jpg');

  background-size: cover;

  background-position: center center;

  background-repeat: no-repeat;

  overflow: hidden;

}



.eco-hero-overlay {

  position: absolute;

  inset: 0;

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

  pointer-events: none;

}



.eco-hero-content {

  position: relative;

  z-index: 2;

  padding: 0 24px;

  max-width: 900px;

}



.eco-hero-title {

  font-family: 'Forum', Georgia, serif;

  font-size: 90px;

  line-height: 81px;

  font-weight: 400;

  color: #FFFBEB;

  margin: 0;

  text-transform: uppercase;

  letter-spacing: normal;

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

}



/* Section 2: 3-Column Info Grid */

.eco-three-cols-section {

  background-color: #FFFBEB;

  padding: 75px 24px 85px;

  width: 100%;

}



.eco-three-cols-container {

  max-width: 980px;

  margin: 0 auto;

  display: grid;

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

  gap: 53px;

}



.eco-col {

  display: flex;

  flex-direction: column;

}



.eco-col-title {

  font-family: 'Forum', Georgia, serif;

  font-size: 20px;

  font-weight: 700;

  color: #526A3D;

  margin: 0 0 24px 0;

  line-height: 1.4;

}



.eco-col-text p {

  font-family: 'Questrial', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  font-size: 16px;

  font-weight: 400;

  line-height: 28.8px;

  color: #526A3D;

  margin: 0;

}



/* Section 3: Experience Eco Life First Hand */

.eco-experience-section {

  background-color: #758760;

  padding: 85px 24px 95px;

  width: 100%;

  text-align: center;

}



.eco-experience-container {

  max-width: 700px;

  margin: 0 auto;

}



.eco-experience-title {

  font-family: 'Forum', Georgia, serif;

  font-size: 56px;

  font-weight: 400;

  line-height: 78.4px;

  color: #FFFBEB;

  margin: 0 0 28px 0;

}



.eco-experience-text p {

  font-family: 'Questrial', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  font-size: 16px;

  font-weight: 400;

  line-height: 28.8px;

  color: #FFFBEB;

  margin: 0;

}



/* Section 4: Video Player */

.eco-video-section {

  background-color: #FFFBEB;

  padding: 75px 24px 60px;

  width: 100%;

}



.eco-video-container {

  max-width: 835px;

  margin: 0 auto;

}



.eco-video-wrapper {

  width: 100%;

  aspect-ratio: 835 / 470;

  position: relative;

  overflow: hidden;

  background: #000000;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

  border-radius: 4px;

}



.eco-video-wrapper iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border: 0;

  display: block;

}



/* Section 5: ECOTOURISM ENQUIRY FORM */

.eco-enquiry-section {

  background-color: #FFFBEB;

  padding: 60px 24px 100px;

  width: 100%;

}



.eco-enquiry-container {

  max-width: 536px;

  margin: 0 auto;

}



.eco-enquiry-title {

  font-family: 'Montserrat', sans-serif;

  font-size: 19px;

  font-weight: 400;

  line-height: 28.5px;

  color: #526A3D;

  text-align: center;

  margin: 0 0 38px 0;

  letter-spacing: 0.02em;

}



.eco-form {

  display: flex;

  flex-direction: column;

  gap: 26px;

}



.eco-form-row.full-width {

  width: 100%;

}



.eco-form-row-split {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 24px;

}



.eco-form-col {

  display: flex;

  flex-direction: column;

}



.eco-label {

  display: block;

  font-family: Helvetica, Arial, sans-serif;

  font-size: 13px;

  font-weight: 300;

  color: #526A3D;

  margin-bottom: 6px;

  line-height: 16px;

}



.eco-required {

  color: #526A3D;

}



.eco-input {

  width: 100%;

  border: none;

  border-bottom: 1px solid #526A3D;

  background: transparent;

  font-family: Helvetica, Arial, sans-serif;

  font-size: 14px;

  color: #526A3D;

  padding: 6px 2px 7px 0;

  border-radius: 0;

  outline: none;

  transition: border-bottom-color 0.2s ease, border-bottom-width 0.1s ease;

  box-sizing: border-box;

}



.eco-input:focus {

  border-bottom: 2px solid #526A3D;

  padding-bottom: 6px;

}



.eco-phone-wrap {

  position: relative;

  display: flex;

  align-items: center;

  width: 100%;

}



.eco-phone-globe {

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

  color: #526A3D;

  display: flex;

  align-items: center;

  pointer-events: none;

}



.eco-input-phone {

  padding-left: 24px;

}



.eco-select-wrap {

  position: relative;

  width: 100%;

}



.eco-select {

  cursor: pointer;

  -webkit-appearance: none;

  appearance: none;

  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23526A3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 2px center;

  padding-right: 20px;

}



.eco-select option {

  background-color: #FFFBEB;

  color: #526A3D;

}



.eco-textarea {

  min-height: 40px;

  resize: vertical;

  line-height: 1.5;

}



.eco-form-submit-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  margin-top: 14px !important;
}



.eco-btn-register,
button.eco-btn-register,
html body .eco-btn-register,
html body button.eco-btn-register,
html body [type="submit"].eco-btn-register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 256px !important;
  max-width: 100% !important;
  height: 44px !important;
  padding: 0 20px !important;
  background-color: #526A3D !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: normal !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.1s ease !important;
  margin: 20px auto 0 auto !important;
  text-align: center !important;
  box-shadow: 0 2px 6px rgba(82, 106, 61, 0.25) !important;
}



.eco-btn-register:hover,

button.eco-btn-register:hover,

html body .eco-btn-register:hover,

html body button.eco-btn-register:hover,

html body [type="submit"].eco-btn-register:hover {

  background-color: #425531 !important;

  color: #FFFFFF !important;

}



.eco-btn-register:active,

button.eco-btn-register:active,

html body .eco-btn-register:active,

html body button.eco-btn-register:active,

html body [type="submit"].eco-btn-register:active {

  transform: scale(0.98) !important;

  background-color: #354526 !important;

}



/* Responsive adjustments */

@media (max-width: 900px) {

  .eco-hero-section {

    height: 480px;

  }

  .eco-hero-title {

    font-size: 56px;

    line-height: 52px;

  }

  .eco-three-cols-container {

    grid-template-columns: 1fr;

    gap: 36px;

  }

  .eco-experience-title {

    font-size: 40px;

    line-height: 52px;

  }

  .eco-experience-section {

    padding: 60px 20px;

  }

}



@media (max-width: 600px) {

  .eco-hero-section {

    height: 380px;

  }

  .eco-hero-title {

    font-size: 38px;

    line-height: 36px;

  }

  .eco-form-row-split {

    grid-template-columns: 1fr;

    gap: 20px;

  }

  .eco-experience-title {

    font-size: 32px;

    line-height: 42px;

  }

  .eco-btn-register {

    width: 100%;

    max-width: 280px;

  }

}



.eco-date-wrap {

  position: relative;

  display: flex;

  align-items: center;

  width: 100%;

}



.eco-date-calendar-icon {

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

  color: #526A3D;

  display: flex;

  align-items: center;

  pointer-events: none;

}



.eco-input-date {

  padding-left: 24px;

}





/* High specificity overrides to ensure underline inputs on WordPress */

.eco-form input.eco-input,

.eco-form select.eco-input,

.eco-form textarea.eco-input,

.eco-form input[type="text"],

.eco-form input[type="email"],

.eco-form input[type="tel"],

.eco-form input[type="date"],

.eco-input {

  width: 100% !important;

  border: none !important;

  border-top: none !important;

  border-left: none !important;

  border-right: none !important;

  border-bottom: 1px solid #526A3D !important;

  background: transparent !important;

  background-color: transparent !important;

  font-family: Helvetica, Arial, sans-serif !important;

  font-size: 14px !important;

  color: #526A3D !important;

  padding: 6px 2px 7px 0 !important;

  border-radius: 0 !important;

  outline: none !important;

  box-shadow: none !important;

  transition: border-bottom-color 0.2s ease, border-bottom-width 0.1s ease;

  box-sizing: border-box !important;

}



.eco-form input.eco-input:focus,

.eco-form select.eco-input:focus,

.eco-form textarea.eco-input:focus,

.eco-form input[type="text"]:focus,

.eco-form input[type="email"]:focus,

.eco-form input[type="tel"]:focus,

.eco-form input[type="date"]:focus,

.eco-input:focus {

  border-top: none !important;

  border-left: none !important;

  border-right: none !important;

  border-bottom: 2px solid #526A3D !important;

  padding-bottom: 6px !important;

  box-shadow: none !important;

  outline: none !important;

  background-color: transparent !important;

}



.eco-form .eco-phone-wrap input.eco-input,

.eco-form .eco-phone-wrap input[type="tel"],

.eco-form input.eco-input-phone,

.eco-form input#ecoPhone,

.eco-phone-wrap .eco-input,

.eco-input-phone {

  padding-left: 36px !important;

}



.eco-form .eco-date-wrap input.eco-input,

.eco-form .eco-date-wrap input[type="date"],

.eco-form input.eco-input-date,

.eco-form input#ecoDate,

.eco-date-wrap .eco-input,

.eco-input-date {

  padding-left: 28px !important;

}





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

   AUTHENTIC OUR STORY PAGE STYLES (MATCHING LIVE WIX OUR STORY)

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



/* Section 1: Hero Banner */

.story-hero-section {

  position: relative;

  width: 100%;

  height: 606px;

  min-height: 440px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  background-image: url('https://static.wixstatic.com/media/nsplsh_396b6b536955796e4b6649~mv2_d_4000_3000_s_4_2.jpg/v1/fill/w_1440,h_900,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/nsplsh_396b6b536955796e4b6649~mv2_d_4000_3000_s_4_2.jpg');

  background-size: cover;

  background-position: center center;

  background-repeat: no-repeat;

  overflow: hidden;

}



.story-hero-overlay {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.16);

  pointer-events: none;

}



.story-hero-content {

  position: relative;

  z-index: 2;

  padding: 0 24px;

  max-width: 920px;

}



.story-hero-title {

  font-family: 'Forum', Georgia, serif;

  font-size: 90px;

  line-height: 1.0;

  font-weight: 400;

  color: #FFFBEB;

  margin: 0;

  letter-spacing: normal;

  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);

}



/* Section 2: Our Story Chronicle */

.story-chronicle-section {

  background-color: #FFFBEB;

  padding: 70px 24px 60px;

  width: 100%;

}



.story-chronicle-container {

  max-width: 1200px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 48px;

  align-items: start;

}



.story-chronicle-image-col img {

  width: 100%;

  height: auto;

  display: block;

  border-radius: 2px;

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

}



.story-section-title {

  font-family: 'Forum', Georgia, serif;

  font-size: 40px;

  font-weight: 400;

  color: #526A3D;

  margin: 0 0 20px 0;

  line-height: 1.2;

}



.story-paragraphs p {

  font-family: 'Questrial', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  font-size: 14.5px;

  font-weight: 400;

  line-height: 1.68;

  color: #526A3D;

  margin: 0 0 16px 0;

}



/* Section 3: Vision & Mission */

.story-vm-section {

  background-color: #FFFBEB;

  padding: 20px 24px 60px;

  width: 100%;

}



.story-vm-container {

  max-width: 1000px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

  text-align: center;

}



.story-vm-title {

  font-family: 'Forum', Georgia, serif;

  font-size: 20px;

  font-weight: 700;

  color: #526A3D;

  margin: 0 0 12px 0;

  letter-spacing: 0.05em;

}



.story-vm-text {

  font-family: 'Questrial', -apple-system, BlinkMacSystemFont, sans-serif;

  font-size: 15px;

  font-weight: 400;

  line-height: 1.65;

  color: #526A3D;

  margin: 0;

}



/* Section 4: Our Values */

.story-values-section {

  background-color: #FFFBEB;

  padding: 50px 24px 70px;

  width: 100%;

}



.story-values-container {

  max-width: 1200px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr 1.15fr;

  gap: 48px;

  align-items: center;

}



.story-value-item {

  margin-bottom: 24px;

}



.story-value-heading {

  font-family: 'Montserrat', sans-serif;

  font-size: 14px;

  font-weight: 700;

  color: #526A3D;

  margin: 0 0 6px 0;

  letter-spacing: 0.03em;

}



.story-value-text {

  font-family: 'Questrial', sans-serif;

  font-size: 14px;

  font-weight: 400;

  line-height: 1.65;

  color: #526A3D;

  margin: 0;

}



.story-values-image-col img {

  width: 100%;

  height: auto;

  display: block;

  border-radius: 2px;

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

}



/* Section 5: Our Team */

.story-team-section {

  background-color: #FFFBEB;

  padding: 50px 24px 80px;

  width: 100%;

}



.story-team-container {

  max-width: 1200px;

  margin: 0 auto;

}



.story-team-intro-grid {

  display: grid;

  grid-template-columns: 1.15fr 1fr;

  gap: 48px;

  align-items: start;

  margin-bottom: 60px;

}



.story-team-image-col img {

  width: 100%;

  height: auto;

  display: block;

  border-radius: 2px;

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

}



.story-team-cards-grid {

  display: grid;

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

  gap: 24px;

}



.story-team-card {

  display: flex;

  flex-direction: column;

  overflow: hidden;

  background: #FFF;

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

  border-radius: 2px;

}



.story-team-cards-grid > .story-team-card:nth-child(1),

.story-team-cards-grid > .story-team-card:nth-child(2),

.story-team-cards-grid > .story-team-card:nth-child(3) {

  grid-column: span 2;

}



.story-team-cards-grid > .story-team-card:nth-child(4) {

  grid-column: 2 / span 2;

}



.story-team-cards-grid > .story-team-card:nth-child(5) {

  grid-column: 4 / span 2;

}



.story-team-photo-wrap img {

  width: 100%;

  height: 334px;

  object-fit: cover;

  display: block;

}



.story-team-info-banner {

  background-color: #70845a;

  color: #FFFFFF;

  padding: 14px 18px;

  text-align: left;

}



.story-team-name {

  font-family: 'Montserrat', 'Forum', sans-serif;

  font-size: 16px;

  font-weight: 700;

  color: #FFFFFF;

  margin: 0 0 3px 0;

  letter-spacing: 0.04em;

}



.story-team-role {

  font-family: 'Questrial', sans-serif;

  font-size: 12px;

  font-weight: 400;

  color: #FFFFFF;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  display: block;

}



/* Section 6: United Nations SDG */

.story-sdg-section {

  background-color: #758760;

  padding: 80px 24px;

  width: 100%;

  text-align: center;

}



.story-sdg-container {

  max-width: 1100px;

  margin: 0 auto;

}



.story-sdg-title {

  font-family: 'Forum', Georgia, serif;

  font-size: 25px;

  font-weight: 400;

  color: #FFFBEB;

  margin: 0 0 14px 0;

  letter-spacing: 0.04em;

}



.story-sdg-subtitle {

  font-family: 'Questrial', sans-serif;

  font-size: 15px;

  font-weight: 400;

  line-height: 1.6;

  color: #FFFBEB;

  margin: 0 auto 45px auto;

  max-width: 780px;

}



.story-sdg-grid {

  display: grid;

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

  gap: 24px 20px;

  justify-items: center;

  align-items: center;

}



.story-sdg-item img {

  width: 120px;

  height: 120px;

  object-fit: contain;

  display: block;

  transition: transform 0.2s ease;

}



.story-sdg-item img:hover {

  transform: scale(1.05);

}



/* Section 7: Our 5 Year Journey */

.story-journey-section {

  background-color: #FFFBEB;

  padding: 75px 24px 85px;

  width: 100%;

  text-align: center;

}



.story-journey-container {

  max-width: 820px;

  margin: 0 auto;

}



.story-journey-title {

  font-family: 'Questrial', 'Forum', sans-serif;

  font-size: 20px;

  font-weight: 700;

  color: #526A3D;

  margin: 0 0 20px 0;

  letter-spacing: 0.05em;

  text-transform: uppercase;

}



.story-journey-text p {

  font-family: 'Questrial', sans-serif;

  font-size: 15px;

  font-weight: 400;

  line-height: 1.75;

  color: #526A3D;

  margin: 0 0 16px 0;

}



.story-journey-btn-wrap {

  margin-top: 32px;

}



.story-btn-download {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 225px;

  height: 42px;

  background-color: #526A3D;

  color: #FFFFFF;

  font-family: 'Questrial', -apple-system, sans-serif;

  font-size: 13.5px;

  font-weight: 600;

  letter-spacing: 0.06em;

  text-decoration: none;

  border-radius: 4px;

  transition: background-color 0.2s ease, transform 0.1s ease;

}



.story-btn-download:hover {

  background-color: #425531;

  color: #FFFFFF;

}



.story-btn-download:active {

  transform: scale(0.98);

}



/* Responsive adjustments */

@media (max-width: 992px) {

  .story-hero-section {

    height: 480px;

  }

  .story-hero-title {

    font-size: 56px;

  }

  .story-chronicle-container,

  .story-values-container,

  .story-team-intro-grid {

    grid-template-columns: 1fr;

    gap: 36px;

  }

  .story-team-cards-grid {

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

  }

  .story-team-cards-grid > .story-team-card {

    grid-column: auto !important;

  }

  .story-sdg-grid {

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

  }

}



@media (max-width: 600px) {

  .story-hero-section {

    height: 380px;

  }

  .story-hero-title {

    font-size: 38px;

  }

  .story-vm-container {

    grid-template-columns: 1fr;

    gap: 30px;

  }

  .story-team-cards-grid {

    grid-template-columns: 1fr;

  }

  .story-sdg-grid {

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

    gap: 16px;

  }

  .story-sdg-item img {

    width: 90px;

    height: 90px;

  }

  .story-btn-download {

    width: 100%;

    max-width: 260px;

  }

}



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

   AUTHENTIC OUR MENTORS PAGE STYLES (Pixel-perfect matching Wix)

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



.mentors-hero-section {

  position: relative;

  width: 100%;

  background-color: var(--cream);

  padding: 40px 0 20px;

}



.mentors-hero-wrap {

  position: relative;

  max-width: 1280px;

  height: 432px;

  margin: 0 auto;

}



.mentors-hero-img-box {

  position: absolute;

  top: 0;

  left: 0;

  width: 810px;

  height: 362px;

  overflow: hidden;

  z-index: 1;

}



.mentors-hero-img-box img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.mentors-hero-title-box {

  position: absolute;

  top: 80px;

  right: 0;

  width: 810px;

  height: 352px;

  background-color: #526A3D;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 2;

  box-sizing: border-box;

}



.mentors-hero-title {

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

  font-size: 90px;

  line-height: 1.4;

  color: #FFFBEB;

  text-align: center;

  margin: 0;

  letter-spacing: normal;

}



.mentors-narrative-section {

  background-color: var(--cream);

  padding: 40px 24px 30px;

}



.mentors-narrative-container {

  max-width: 770px;

  margin: 0 auto;

  text-align: left;

}



.mentors-narrative-container p {

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

  font-size: 18px;

  line-height: 1.4;

  color: #526A3D;

  margin: 0 0 26px 0;

}



.mentors-narrative-container p strong {

  font-weight: 700;

  color: #526A3D;

}



.mentors-showcase-section {

  background-color: var(--cream);

  padding: 20px 24px 80px;

}



.mentors-slider-outer {

  max-width: 1060px;

  margin: 0 auto;

  position: relative;

  display: flex;

  align-items: center;

}



.mentors-slider-track-wrap {

  width: 100%;

  overflow: hidden;

  padding: 4px 0;

}



.mentors-slider-track {

  display: flex;

  gap: 34.6px;

  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);

}



.mentor-logo-card {

  flex: 0 0 239px;

  width: 239px;

  height: 239px;

  background-color: #FFFFFF;

  box-sizing: border-box;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 24px;

  user-select: none;

}



.mentor-logo-card img {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

  display: block;

}



.mentor-slider-arrow,

.mentor-slider-arrow:hover,

.mentor-slider-arrow:focus,

.mentor-slider-arrow:active,

.mentor-slider-arrow:focus-visible,

button#mentorPrevBtn,

button#mentorNextBtn,

button#mentorPrevBtn:hover,

button#mentorNextBtn:hover,

button#mentorPrevBtn:focus,

button#mentorNextBtn:focus,

button#mentorPrevBtn:active,

button#mentorNextBtn:active {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background: transparent !important;

  background-color: transparent !important;

  border: none !important;

  outline: none !important;

  box-shadow: none !important;

  cursor: pointer;

  padding: 0;

  width: 24px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 10;

  color: #526A3D !important;

  opacity: 0.65;

  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;

  -webkit-tap-highlight-color: transparent !important;

}



.mentor-slider-arrow:hover,

.mentor-slider-arrow:focus,

button#mentorPrevBtn:hover,

button#mentorNextBtn:hover,

button#mentorPrevBtn:focus,

button#mentorNextBtn:focus {

  opacity: 1 !important;

  transform: translateY(-50%) scale(1.1) !important;

  background: transparent !important;

  background-color: transparent !important;

}



.mentor-slider-arrow.prev,

button#mentorPrevBtn {

  left: -40px;

}



.mentor-slider-arrow.next,

button#mentorNextBtn {

  right: -40px;

}



.mentor-slider-arrow svg,

button#mentorPrevBtn svg,

button#mentorNextBtn svg {

  width: 20px;

  height: 35px;

  fill: #526A3D !important;

  color: #526A3D !important;

  transition: fill 0.2s ease, transform 0.2s ease;

}



.mentor-slider-arrow:hover svg,

button#mentorPrevBtn:hover svg,

button#mentorNextBtn:hover svg {

  fill: #2B3A1D !important;

  color: #2B3A1D !important;

}



/* Responsive adjustments for mentors page */

@media (max-width: 1320px) {

  .mentor-slider-arrow.prev,

  .mentor-slider-arrow.next,

  button#mentorPrevBtn,

  button#mentorNextBtn {

    background: rgba(255, 251, 235, 0.92) !important;

    background-color: rgba(255, 251, 235, 0.92) !important;

    border: 1px solid #D9D5C5 !important;

    border-radius: 4px !important;

    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;

    width: 32px !important;

    height: 44px !important;

    opacity: 0.9 !important;

  }

  .mentor-slider-arrow.prev {

    left: 8px !important;

  }

  .mentor-slider-arrow.next {

    right: 8px !important;

  }

  .mentor-slider-arrow.prev:hover,

  .mentor-slider-arrow.next:hover,

  .mentor-slider-arrow.prev:focus,

  .mentor-slider-arrow.next:focus,

  .mentor-slider-arrow.prev:active,

  .mentor-slider-arrow.next:active,

  button#mentorPrevBtn:hover,

  button#mentorNextBtn:hover,

  button#mentorPrevBtn:focus,

  button#mentorNextBtn:focus,

  button#mentorPrevBtn:active,

  button#mentorNextBtn:active {

    background: #526A3D !important;

    background-color: #526A3D !important;

    border-color: #526A3D !important;

    box-shadow: 0 4px 12px rgba(82, 106, 61, 0.25) !important;

  }

  .mentor-slider-arrow.prev:hover svg,

  .mentor-slider-arrow.next:hover svg,

  .mentor-slider-arrow.prev:focus svg,

  .mentor-slider-arrow.next:focus svg,

  .mentor-slider-arrow.prev:active svg,

  .mentor-slider-arrow.next:active svg,

  button#mentorPrevBtn:hover svg,

  button#mentorNextBtn:hover svg,

  button#mentorPrevBtn:focus svg,

  button#mentorNextBtn:focus svg,

  button#mentorPrevBtn:active svg,

  button#mentorNextBtn:active svg {

    fill: #FFFBEB !important;

    color: #FFFBEB !important;

  }

}



@media (max-width: 1280px) {

  .mentors-hero-wrap {

    max-width: 96%;

    height: 380px;

  }

  .mentors-hero-img-box {

    width: 65%;

    height: 300px;

  }

  .mentors-hero-title-box {

    width: 65%;

    height: 290px;

    top: 70px;

  }

  .mentors-hero-title {

    font-size: 70px;

  }

}



@media (max-width: 900px) {

  .mentors-hero-wrap {

    height: auto;

    display: flex;

    flex-direction: column;

  }

  .mentors-hero-img-box {

    position: relative;

    width: 100%;

    height: 260px;

  }

  .mentors-hero-title-box {

    position: relative;

    width: 100%;

    height: auto;

    top: 0;

    margin-top: -30px;

    padding: 40px 20px;

  }

  .mentors-hero-title {

    font-size: 50px;

  }

  .mentors-slider-track-wrap {

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

  }

  .mentors-slider-track-wrap::-webkit-scrollbar {

    display: none;

  }

}



@media (max-width: 600px) {

  .mentors-hero-title {

    font-size: 38px;

  }

  .mentors-narrative-container p {

    font-size: 16px;

  }

  .mentor-logo-card {

    flex: 0 0 200px;

    width: 200px;

    height: 200px;

  }

}



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

   AUTHENTIC MEDIA PAGE STYLES (Pixel-perfect matching Wix)

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



.media-hero-section {

  position: relative;

  width: 100%;

  height: 443px;

  display: flex;

  align-items: center;

  justify-content: center;

  background-image: url('https://static.wixstatic.com/media/nsplsh_6c4c6a575a4a30554b7a51~mv2_d_6016_4000_s_4_2.jpg/v1/fill/w_1440,h_443,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/nsplsh_6c4c6a575a4a30554b7a51~mv2_d_6016_4000_s_4_2.jpg');

  background-size: cover;

  background-position: center;

  overflow: hidden;

}



.media-hero-overlay {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.28);

}



.media-hero-title {

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

  font-size: 90px;

  line-height: 1.2;

  color: #FFFBEB;

  text-align: center;

  margin: 0;

  position: relative;

  z-index: 2;

  letter-spacing: normal;

}



.media-slideshow-section {

  position: relative;

  background-color: var(--cream);

  padding: 70px 24px 80px;

  overflow: hidden;

}



.media-slideshow-outer {

  max-width: 1000px;

  margin: 0 auto;

  position: relative;

}



.media-slide-container {

  display: none;

}



.media-slide-container.active {

  display: block;

  animation: mediaFadeIn 0.35s ease;

}



@keyframes mediaFadeIn {

  from { opacity: 0; transform: translateY(6px); }

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

}



.media-slide-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 40px 60px;

  align-items: start;

}



.media-slide-header {

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.media-slide-date {

  font-family: 'Montserrat', sans-serif;

  font-size: 16px;

  font-weight: 500;

  color: #526A3D;

  margin-bottom: 18px;

}



.media-slide-title {

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

  font-size: 60px;

  line-height: 1.15;

  color: #526A3D;

  margin: 0;

  letter-spacing: normal;

}



.media-slide-img-wrap {

  display: flex;

  justify-content: center;

}



.media-slide-img {

  width: 100%;

  max-width: 381px;

  height: 481px;

  object-fit: cover;

  display: block;

}



.media-slide-text {

  font-family: 'Questrial', sans-serif;

  font-size: 15px;

  line-height: 1.65;

  color: #526A3D;

  padding-top: 10px;

}



.media-slide-text p {

  margin: 0 0 20px 0;

}



.media-slider-arrow,

.media-slider-arrow:hover,

.media-slider-arrow:focus,

.media-slider-arrow:active,

.media-slider-arrow:focus-visible,

button#mediaPrevBtn,

button#mediaNextBtn,

button#mediaPrevBtn:hover,

button#mediaNextBtn:hover,

button#mediaPrevBtn:focus,

button#mediaNextBtn:focus,

button#mediaPrevBtn:active,

button#mediaNextBtn:active {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background: transparent !important;

  background-color: transparent !important;

  border: none !important;

  outline: none !important;

  box-shadow: none !important;

  cursor: pointer;

  padding: 0;

  width: 24px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 10;

  color: #526A3D !important;

  opacity: 0.65;

  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;

  -webkit-tap-highlight-color: transparent !important;

}



.media-slider-arrow:hover,

.media-slider-arrow:focus,

button#mediaPrevBtn:hover,

button#mediaNextBtn:hover,

button#mediaPrevBtn:focus,

button#mediaNextBtn:focus {

  opacity: 1 !important;

  transform: translateY(-50%) scale(1.1) !important;

  background: transparent !important;

  background-color: transparent !important;

}



.media-slider-arrow.prev,

button#mediaPrevBtn {

  left: -55px;

}



.media-slider-arrow.next,

button#mediaNextBtn {

  right: -55px;

}



.media-slider-arrow svg,

button#mediaPrevBtn svg,

button#mediaNextBtn svg {

  width: 22px;

  height: 38px;

  fill: #526A3D !important;

  color: #526A3D !important;

  transition: fill 0.2s ease, transform 0.2s ease;

}



.media-slider-arrow:hover svg,

button#mediaPrevBtn:hover svg,

button#mediaNextBtn:hover svg {

  fill: #2B3A1D !important;

  color: #2B3A1D !important;

}



/* Mann Ki Baat Section */

.media-mann-section {

  background-color: #D4D7C0;

  padding: 75px 24px 85px;

}



.media-mann-wrap {

  max-width: 1020px;

  margin: 0 auto;

}



.media-mann-title {

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

  font-size: 40px;

  line-height: 1.3;

  color: #526A3D;

  text-align: center;

  margin: 0 0 45px 0;

}



.media-mann-grid {

  display: grid;

  grid-template-columns: 587px 1fr;

  gap: 40px;

  align-items: center;

}



.media-video-embed {

  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  border-radius: 4px;

  overflow: hidden;

  background-color: #000000;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);

}



.media-video-embed iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border: 0;

}



.media-mann-text {

  font-family: 'Questrial', sans-serif;

  font-size: 14px;

  line-height: 1.75;

  color: #526A3D;

}



.media-mann-text p {

  margin: 0;

}



/* Second Video Section (Bamboo Rakhi) */

.media-rakhi-section {

  background-color: var(--cream);

  padding: 80px 24px 90px;

}



.media-rakhi-wrap {

  width: 100%;

  max-width: 864px;

  margin: 0 auto;

}



.media-rakhi-wrap .media-video-embed {

  width: 100%;

  aspect-ratio: 16 / 9;

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

}



/* Responsive adjustments for media page */

@media (max-width: 1180px) {

  .media-slider-arrow.prev,

  .media-slider-arrow.next,

  button#mediaPrevBtn,

  button#mediaNextBtn {

    background: rgba(255, 251, 235, 0.92) !important;

    background-color: rgba(255, 251, 235, 0.92) !important;

    border: 1px solid #D9D5C5 !important;

    border-radius: 4px !important;

    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;

    width: 32px !important;

    height: 44px !important;

    opacity: 0.9 !important;

  }

  .media-slider-arrow.prev {

    left: 8px !important;

  }

  .media-slider-arrow.next {

    right: 8px !important;

  }

  .media-slider-arrow.prev:hover,

  .media-slider-arrow.next:hover,

  .media-slider-arrow.prev:focus,

  .media-slider-arrow.next:focus,

  .media-slider-arrow.prev:active,

  .media-slider-arrow.next:active,

  button#mediaPrevBtn:hover,

  button#mediaNextBtn:hover,

  button#mediaPrevBtn:focus,

  button#mediaNextBtn:focus,

  button#mediaPrevBtn:active,

  button#mediaNextBtn:active {

    background: #526A3D !important;

    background-color: #526A3D !important;

    border-color: #526A3D !important;

    box-shadow: 0 4px 12px rgba(82, 106, 61, 0.25) !important;

  }

  .media-slider-arrow.prev:hover svg,

  .media-slider-arrow.next:hover svg,

  .media-slider-arrow.prev:focus svg,

  .media-slider-arrow.next:focus svg,

  .media-slider-arrow.prev:active svg,

  .media-slider-arrow.next:active svg,

  button#mediaPrevBtn:hover svg,

  button#mediaNextBtn:hover svg,

  button#mediaPrevBtn:focus svg,

  button#mediaNextBtn:focus svg,

  button#mediaPrevBtn:active svg,

  button#mediaNextBtn:active svg {

    fill: #FFFBEB !important;

    color: #FFFBEB !important;

  }

}



@media (max-width: 992px) {

  .media-hero-title {

    font-size: 65px;

  }

  .media-slide-title {

    font-size: 42px;

  }

  .media-slide-grid {

    grid-template-columns: 1fr;

    gap: 30px;

  }

  .media-slide-img {

    max-width: 100%;

    height: auto;

    max-height: 420px;

  }

  .media-mann-grid {

    grid-template-columns: 1fr;

    gap: 28px;

  }

  .media-mann-title {

    font-size: 32px;

    margin-bottom: 28px;

  }

}



@media (max-width: 600px) {

  .media-hero-section {

    height: 320px;

  }

  .media-hero-title {

    font-size: 48px;

  }

  .media-slide-title {

    font-size: 32px;

  }

  .media-slide-date {

    font-size: 14px;

  }

  .media-slideshow-section {

    padding: 40px 16px 50px;

  }

  .media-mann-section {

    padding: 50px 16px 60px;

  }

  .media-rakhi-section {

    padding: 50px 16px 60px;

  }

}



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

   AUTHENTIC CONTACT US PAGE STYLES (Pixel-perfect matching Wix)

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



.contact-header-section {

  background-color: var(--cream);

  padding: 50px 24px 35px;

  text-align: center;

}



.contact-main-title {

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

  font-size: 90px;

  line-height: 1.1;

  color: #526A3D;

  margin: 0;

  letter-spacing: normal;

}



.contact-split-section {

  background-color: var(--cream);

  padding: 0 24px 60px;

}



.contact-split-box {

  max-width: 1320px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr 659px;

  border: 1px solid #D4D7C0;

  background-color: var(--cream);

  overflow: hidden;

}



.contact-info-panel {

  padding: 60px 50px;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  gap: 32px;

}



.contact-item-row {

  display: flex;

  align-items: flex-start;

  gap: 16px;

}



.contact-icon {

  width: 24px;

  height: 24px;

  color: #526A3D;

  flex-shrink: 0;

  margin-top: 2px;

}



.contact-item-text {

  font-family: 'Questrial', sans-serif;

  font-size: 18px;

  line-height: 1.6;

  color: #526A3D;

}



.contact-item-text a {

  color: #526A3D;

  text-decoration: none;

  display: block;

  transition: opacity 0.2s;

}



.contact-item-text a:hover {

  opacity: 0.8;

}



.contact-social-group {

  margin-top: 4px;

}



.contact-social-label {

  font-family: 'Questrial', sans-serif;

  font-size: 16px;

  color: #526A3D;

  margin-bottom: 12px;

}



.contact-social-icons {

  display: flex;

  gap: 12px;

  align-items: center;

}



.contact-social-icon-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 41px;

  height: 41px;

  border-radius: 8px;

  transition: transform 0.2s;

}



.contact-social-icon-btn:hover {

  transform: scale(1.08);

}



.contact-social-icon-btn img {

  width: 41px;

  height: 41px;

  display: block;

}



.contact-address-block {

  font-family: 'Questrial', sans-serif;

  font-size: 15px;

  line-height: 1.6;

  color: #526A3D;

}



.contact-address-block h4 {

  font-weight: 700;

  font-size: 16px;

  color: #526A3D;

  margin: 0 0 6px 0;

}



.contact-photo-panel {

  height: 100%;

  min-height: 850px;

  overflow: hidden;

}



.contact-photo-panel img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



/* Contact Form Section */

.contact-form-section {

  background-color: var(--cream);

  padding: 40px 24px 90px;

}



.contact-form-wrap {

  max-width: 600px;

  margin: 0 auto;

}



.contact-form-title {

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

  font-size: 34px;

  line-height: 1.25;

  color: #526A3D;

  text-align: center;

  margin: 0 0 45px 0;

}



.contact-form-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

  margin-bottom: 20px;

}



.contact-form-field {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.contact-form-field.full-width {

  grid-column: span 2;

}



.contact-form-label {

  font-family: 'Questrial', sans-serif;

  font-size: 14px;

  color: #526A3D;

}



.contact-form-input,

.contact-form-textarea {

  font-family: 'Questrial', sans-serif;

  font-size: 15px;

  color: #333333;

  background-color: var(--cream);

  border: 1px solid #526A3D;

  border-radius: 4px;

  padding: 12px 14px;

  outline: none;

  transition: border-color 0.2s, box-shadow 0.2s;

  box-sizing: border-box;

  width: 100%;

}



.contact-form-input:focus,

.contact-form-textarea:focus {

  border-color: #384a27;

  box-shadow: 0 0 0 2px rgba(82, 106, 61, 0.2);

}



.contact-form-textarea {

  height: 120px;

  resize: vertical;

}



.contact-submit-btn,
button.contact-submit-btn,
html body .contact-submit-btn,
html body button.contact-submit-btn,
html body [type="submit"].contact-submit-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 600px !important;
  height: 50px !important;
  padding: 0 20px !important;
  background-color: #526A3D !important;
  color: #FFFFFF !important;
  font-family: 'Questrial', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.1s ease !important;
  margin: 16px auto 0 auto !important;
  text-align: center !important;
  line-height: normal !important;
  box-shadow: 0 2px 6px rgba(82, 106, 61, 0.25) !important;
}



.contact-submit-btn:hover,

button.contact-submit-btn:hover,

html body .contact-submit-btn:hover,

html body button.contact-submit-btn:hover,

html body [type="submit"].contact-submit-btn:hover {

  background-color: #425531 !important;

  color: #FFFFFF !important;

}



.contact-submit-btn:active,

button.contact-submit-btn:active,

html body .contact-submit-btn:active,

html body button.contact-submit-btn:active,

html body [type="submit"].contact-submit-btn:active {

  transform: scale(0.99) !important;

  background-color: #354526 !important;

}



/* Responsive adjustments for contact page */

@media (max-width: 992px) {

  .contact-main-title {

    font-size: 65px;

  }

  .contact-split-box {

    grid-template-columns: 1fr;

  }

  .contact-photo-panel {

    min-height: 400px;

    max-height: 520px;

  }

  .contact-info-panel {

    padding: 40px 24px;

    gap: 24px;

  }

  .contact-form-grid {

    grid-template-columns: 1fr;

  }

  .contact-form-field.full-width {

    grid-column: span 1;

  }

}



@media (max-width: 600px) {

  .contact-main-title {

    font-size: 46px;

  }

  .contact-form-title {

    font-size: 26px;

  }

  .contact-split-section {

    padding: 0 16px 40px;

  }

  .contact-form-section {

    padding: 30px 16px 60px;

  }

}



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

   MAHILA SWAVALAMBAN KENDRE PAGE STYLES

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

:root {

  --msk-green: #526A3D;

  --msk-green2: #3F7652;

  --msk-cream: #FFFBEB;

  --msk-sage: #D4D7C0;

  --msk-peach: #F8B389;

  --msk-lav: #CCC8F1;

  --msk-ink: #1c2416;

}



.msk-img {

  background: var(--msk-sage) center/cover no-repeat;

  position: relative;

  width: 100%;

  aspect-ratio: 3/2;

  border-radius: 10px;

  overflow: hidden;

}



/* HERO */

.msk-hero {

  background: var(--msk-green);

  color: var(--msk-cream);

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  gap: 18px;

  padding: 70px 6% 64px;

}

.msk-tag {

  display: inline-block;

  background: var(--msk-peach);

  color: var(--msk-ink);

  font-size: 13px;

  letter-spacing: 2px;

  text-transform: uppercase;

  padding: 6px 16px;

  border-radius: 30px;

  font-family: 'Questrial', Arial, sans-serif;

  font-weight: 500;

}

.msk-hero h1 {

  font-family: 'Forum', serif;

  font-weight: 400;

  font-size: clamp(36px, 5.5vw, 68px);

  line-height: 1.12;

  max-width: 900px;

  color: var(--msk-cream);

  margin: 0;

}

.msk-hero p {

  max-width: 620px;

  opacity: 0.9;

  font-size: 18px;

  line-height: 1.6;

  font-family: 'Questrial', Arial, sans-serif;

  color: var(--msk-cream);

  margin: 0;

}

.msk-hero .msk-frame {

  width: 100%;

  max-width: 900px;

  margin-top: 22px;

}



/* MARQUEE */

.msk-marquee {

  background: var(--msk-green2);

  color: var(--msk-cream);

  overflow: hidden;

  padding: 18px 0;

  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);

  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);

}

.msk-mq-track {

  display: flex;

  width: max-content;

  animation: msk-mq 45s linear infinite;

}

.msk-marquee:hover .msk-mq-track {

  animation-play-state: paused;

}

.msk-mq-group {

  display: flex;

  flex: none;

}

.msk-mq-group span {

  display: flex;

  align-items: center;

  white-space: nowrap;

  padding: 0 30px;

  font-size: clamp(16px, 2vw, 26px);

  letter-spacing: 3px;

  text-transform: uppercase;

  font-family: 'Questrial', Arial, sans-serif;

}

.msk-mq-group span::after {

  content: "";

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--msk-peach);

  margin-left: 60px;

}

@keyframes msk-mq {

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

}



/* SPLIT SECTIONS */

.msk-split {

  display: grid;

  grid-template-columns: 1.15fr 1fr;

  align-items: center;

}

.msk-split .msk-media {

  padding: 64px 4% 64px 6%;

  display: flex;

  justify-content: center;

}

.msk-split .msk-frame {

  width: 100%;

  max-width: 680px;

}

.msk-split .msk-txt {

  padding: 64px 6% 64px 4%;

  display: flex;

  flex-direction: column;

  gap: 18px;

}

.msk-split h2 {

  font-family: 'Forum', serif;

  font-weight: 400;

  font-size: clamp(28px, 3.4vw, 46px);

  color: var(--msk-green);

  line-height: 1.2;

  margin: 0;

}

.msk-split p {

  font-size: 17px;

  line-height: 1.7;

  font-family: 'Questrial', Arial, sans-serif;

  color: var(--msk-ink);

  margin: 0;

}

.msk-split.msk-rev {

  grid-template-columns: 1fr 1.15fr;

}

.msk-split.msk-rev .msk-media {

  order: 2;

  padding: 64px 6% 64px 4%;

}

.msk-split.msk-rev .msk-txt {

  padding: 64px 4% 64px 6%;

}

.msk-split.msk-light {

  background: var(--msk-cream);

}

.msk-split.msk-dark {

  background: var(--msk-green);

  color: var(--msk-cream);

}

.msk-split.msk-dark h2 {

  color: var(--msk-cream);

}

.msk-split.msk-dark p {

  color: var(--msk-cream);

  opacity: 0.95;

}

.msk-split.msk-sage {

  background: var(--msk-sage);

}

.msk-rule {

  width: 60px;

  height: 3px;

  background: var(--msk-peach);

}



/* GALLERY */

.msk-gallery {

  background: var(--msk-sage);

  padding: 70px 0 60px;

  text-align: center;

  overflow: hidden;

}

.msk-gallery h2 {

  font-family: 'Forum', serif;

  font-weight: 400;

  font-size: clamp(28px, 3.4vw, 44px);

  color: var(--msk-green);

  margin-bottom: 34px;

  padding: 0 24px;

}

.msk-vp {

  overflow: hidden;

  padding-left: 6%;

  touch-action: pan-y;

  cursor: grab;

}

.msk-track {

  display: flex;

  transition: transform .6s ease;

}

.msk-slide {

  flex: 0 0 auto;

  padding-right: 16px;

}

.msk-slide .msk-img {

  cursor: zoom-in;

  transition: transform .3s;

}

.msk-slide .msk-img:hover {

  transform: translateY(-4px);

}

.msk-ctrl {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  margin-top: 30px;

  padding: 0 24px;

}

.msk-arrow {

  width: 46px;

  height: 46px;

  border-radius: 50%;

  border: 1px solid var(--msk-green);

  background: transparent;

  color: var(--msk-green);

  font-size: 24px;

  cursor: pointer;

  flex: none;

  transition: background .25s, color .25s;

  display: inline-flex;

  align-items: center;

  justify-content: center;

}

.msk-arrow:hover {

  background: var(--msk-green);

  color: var(--msk-cream);

}

.msk-dots {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  justify-content: center;

}

.msk-dots button {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  border: none;

  background: var(--msk-green2);

  opacity: .3;

  cursor: pointer;

  padding: 0;

  transition: opacity .25s, transform .25s;

}

.msk-dots button.on {

  opacity: 1;

  transform: scale(1.25);

}



/* VALUES */

.msk-values {

  background: var(--msk-green);

  color: var(--msk-cream);

  text-align: center;

  padding: 70px 24px;

  margin-bottom: 0 !important;

}

.msk-values p {

  max-width: 780px;

  margin: 0 auto;

  font-family: 'Forum', serif;

  font-size: clamp(22px, 2.8vw, 34px);

  line-height: 1.45;

  color: var(--msk-cream);

}

.msk-values .msk-tag {

  background: var(--msk-lav);

  margin-bottom: 24px;

}

.msk-footer-spacer,

.bn-footer-spacer {

  height: 36px !important;

  background: #FFFBEB !important;

  width: 100% !important;

  display: block !important;

  margin: 0 !important;

  padding: 0 !important;

}



/* LIGHTBOX */

.msk-lb {

  position: fixed;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background: rgba(14, 20, 11, .97);

  z-index: 99999;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: opacity .45s ease, visibility 0s linear .45s;

}

.msk-lb.open {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transition: opacity .45s ease, visibility 0s;

}

.msk-lb .msk-stage {

  position: relative;

  width: min(90%, 1000px);

  aspect-ratio: 3/2;

  transform: scale(.92);

  opacity: 0;

  transition: transform .55s cubic-bezier(.22,.8,.3,1), opacity .45s ease;

}

.msk-lb.open .msk-stage {

  transform: scale(1);

  opacity: 1;

}

.msk-lbimg {

  position: absolute;

  inset: 0;

  border-radius: 8px;

  background: center/contain no-repeat;

  transition: transform .55s cubic-bezier(.22,.8,.3,1), opacity .55s ease;

}

.msk-lb button {

  position: absolute;

  background: rgba(82, 106, 61, .9);

  color: var(--msk-cream);

  border: 1px solid var(--msk-cream);

  border-radius: 50%;

  width: 48px;

  height: 48px;

  font-size: 24px;

  cursor: pointer;

  z-index: 3;

  transition: background .25s, transform .25s;

  display: inline-flex;

  align-items: center;

  justify-content: center;

}

.msk-lb button:hover {

  background: var(--msk-green);

}

.msk-lb .msk-lp {

  left: 22px;

  top: 50%;

  margin-top: -24px;

}

.msk-lb .msk-ln {

  right: 22px;

  top: 50%;

  margin-top: -24px;

}

.msk-lb .msk-lp:hover {

  transform: translateX(-3px);

}

.msk-lb .msk-ln:hover {

  transform: translateX(3px);

}

.msk-lb .msk-lx {

  right: 22px;

  top: 22px;

  font-size: 20px;

}

.msk-lb .msk-lx:hover {

  transform: rotate(90deg);

}

.msk-lb .msk-cnt {

  position: absolute;

  bottom: 20px;

  left: 0;

  right: 0;

  text-align: center;

  color: var(--msk-cream);

  letter-spacing: 3px;

  font-size: 14px;

  font-family: 'Questrial', Arial, sans-serif;

}



/* RESPONSIVE */

@media(max-width: 800px) {

  .msk-hero { padding: 50px 24px 44px; }

  .msk-split, .msk-split.msk-rev { grid-template-columns: 1fr; }

  .msk-split.msk-rev .msk-media { order: 0; }

  .msk-split .msk-media, .msk-split.msk-rev .msk-media { padding: 44px 24px 0; }

  .msk-split .msk-txt, .msk-split.msk-rev .msk-txt { padding: 32px 24px 52px; }

  .msk-vp { padding-left: 24px; }

  .msk-lb .msk-stage { width: 94%; }

  .msk-lb .msk-lp { left: 10px; }

  .msk-lb .msk-ln { right: 10px; }

  .msk-lb .msk-lx { right: 12px; top: 12px; }

}



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

   BAMBOO NURSERY PAGE STYLES

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

:root {

  --bn-green: #526A3D;

  --bn-green2: #3F7652;

  --bn-cream: #FFFBEB;

  --bn-sage: #D4D7C0;

  --bn-peach: #F8B389;

  --bn-lav: #CCC8F1;

  --bn-ink: #1c2416;

}



.bn-img {

  background: var(--bn-sage) center/cover no-repeat;

  position: relative;

  width: 100%;

  aspect-ratio: 3/2;

  border-radius: 10px;

  overflow: hidden;

}

.bn-img.bn-v {

  aspect-ratio: 2/3;

}



/* HERO */

.bn-hero {

  background: var(--bn-green);

  color: var(--bn-cream);

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  gap: 18px;

  padding: 70px 6% 64px;

}

.bn-tag {

  display: inline-block;

  background: var(--bn-peach);

  color: var(--bn-ink);

  font-size: 13px;

  letter-spacing: 2px;

  text-transform: uppercase;

  padding: 6px 16px;

  border-radius: 30px;

  font-family: 'Questrial', Arial, sans-serif;

  font-weight: 500;

}

.bn-hero h1 {

  font-family: 'Forum', serif;

  font-weight: 400;

  font-size: clamp(36px, 5.5vw, 68px);

  line-height: 1.12;

  max-width: 900px;

  color: var(--bn-cream);

  margin: 0;

}

.bn-hero p {

  max-width: 640px;

  opacity: 0.9;

  font-size: 18px;

  line-height: 1.6;

  font-family: 'Questrial', Arial, sans-serif;

  color: var(--bn-cream);

  margin: 0;

}

.bn-hero .bn-frame {

  width: 100%;

  max-width: 900px;

  margin-top: 22px;

}



/* MARQUEE */

.bn-marquee {

  background: var(--bn-green2);

  color: var(--bn-cream);

  overflow: hidden;

  padding: 18px 0;

  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);

  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);

}

.bn-mq-track {

  display: flex;

  width: max-content;

  animation: bn-mq 45s linear infinite;

}

.bn-marquee:hover .bn-mq-track {

  animation-play-state: paused;

}

.bn-mq-group {

  display: flex;

  flex: none;

}

.bn-mq-group span {

  display: flex;

  align-items: center;

  white-space: nowrap;

  padding: 0 30px;

  font-size: clamp(16px, 2vw, 26px);

  letter-spacing: 3px;

  text-transform: uppercase;

  font-family: 'Questrial', Arial, sans-serif;

}

.bn-mq-group span::after {

  content: "";

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--bn-peach);

  margin-left: 60px;

}

@keyframes bn-mq {

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

}



/* SPLIT SECTIONS */

.bn-split {

  display: grid;

  grid-template-columns: 1.15fr 1fr;

  align-items: center;

}

.bn-split .bn-media {

  padding: 64px 4% 64px 6%;

  display: flex;

  justify-content: center;

}

.bn-split .bn-frame {

  width: 100%;

  max-width: 680px;

}

.bn-split .bn-frame.bn-vf {

  max-width: 380px;

}

.bn-split .bn-txt {

  padding: 64px 6% 64px 4%;

  display: flex;

  flex-direction: column;

  gap: 18px;

}

.bn-split h2 {

  font-family: 'Forum', serif;

  font-weight: 400;

  font-size: clamp(28px, 3.4vw, 46px);

  color: var(--bn-green);

  line-height: 1.2;

  margin: 0;

}

.bn-split p {

  font-size: 17px;

  line-height: 1.7;

  font-family: 'Questrial', Arial, sans-serif;

  color: var(--bn-ink);

  margin: 0;

}

.bn-split.bn-rev {

  grid-template-columns: 1fr 1.15fr;

}

.bn-split.bn-rev .bn-media {

  order: 2;

  padding: 64px 6% 64px 4%;

}

.bn-split.bn-rev .bn-txt {

  padding: 64px 4% 64px 6%;

}

.bn-split.bn-light {

  background: var(--bn-cream);

}

.bn-split.bn-dark {

  background: var(--bn-green);

  color: var(--bn-cream);

}

.bn-split.bn-dark h2 {

  color: var(--bn-cream);

}

.bn-split.bn-dark p {

  color: var(--bn-cream);

  opacity: 0.95;

}

.bn-split.bn-sage {

  background: var(--bn-sage);

}

.bn-rule {

  width: 60px;

  height: 3px;

  background: var(--bn-peach);

}



/* SOLO TEXT ONLY */

.bn-solo {

  background: var(--bn-green);

  color: var(--bn-cream);

  padding: 80px 6%;

  text-align: center;

}

.bn-solo .bn-in {

  max-width: 820px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 18px;

}

.bn-solo h2 {

  font-family: 'Forum', serif;

  font-weight: 400;

  font-size: clamp(28px, 3.4vw, 46px);

  color: var(--bn-cream);

  line-height: 1.2;

  margin: 0;

}

.bn-solo p {

  font-size: 18px;

  line-height: 1.7;

  font-family: 'Questrial', Arial, sans-serif;

  color: var(--bn-cream);

  margin: 0;

}



/* DUO IMAGES */

.bn-duo {

  background: var(--bn-sage);

  padding: 70px 6%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 24px;

}



/* VALUES */

.bn-values {

  background: var(--bn-green);

  color: var(--bn-cream);

  text-align: center;

  padding: 70px 24px;

  margin-bottom: 0 !important;

}

.bn-values p {

  max-width: 780px;

  margin: 0 auto 22px;

  font-family: 'Forum', serif;

  font-size: clamp(22px, 2.8vw, 34px);

  line-height: 1.45;

  color: var(--bn-cream);

}

.bn-values p:last-child {

  margin-bottom: 0;

}

.bn-values .bn-tag {

  background: var(--bn-lav);

  margin-bottom: 24px;

}



/* RESPONSIVE */

@media(max-width: 800px) {

  .bn-hero { padding: 50px 24px 44px; }

  .bn-split, .bn-split.bn-rev { grid-template-columns: 1fr; }

  .bn-split.bn-rev .bn-media { order: 0; }

  .bn-split .bn-media, .bn-split.bn-rev .bn-media { padding: 44px 24px 0; }

  .bn-split .bn-txt, .bn-split.bn-rev .bn-txt { padding: 32px 24px 52px; }

  .bn-solo { padding: 52px 24px; }

  .bn-duo { grid-template-columns: 1fr; padding: 44px 24px; }

}



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

   ENHANCED HUMAN ARTISAN PRODUCT INFO (Rich, Informative & Authentic)

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



.product-lead-summary {

  font-family: var(--font-body), 'Questrial', sans-serif;

  font-size: 1.05rem;

  line-height: 1.7;

  color: var(--ink);

  margin-top: 14px;

  margin-bottom: 20px;

}



.artisan-attributes-list {

  display: grid;

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

  gap: 12px 16px;

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

  border: 1px solid rgba(82, 106, 61, 0.2);

  border-radius: 12px;

  padding: 16px 18px;

  margin-bottom: 24px;

}



.attr-item {

  display: flex;

  align-items: flex-start;

  gap: 10px;

}



.attr-icon {

  font-size: 1.3rem;

  line-height: 1;

  flex-shrink: 0;

  margin-top: 2px;

}



.attr-meta {

  display: flex;

  flex-direction: column;

  gap: 2px;

}



.attr-meta strong {

  font-size: 0.82rem;

  font-family: var(--font-body), sans-serif;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  color: var(--ink-soft);

  font-weight: 700;

}



.attr-meta span {

  font-size: 0.92rem;

  font-weight: 600;

  color: var(--ink);

  line-height: 1.35;

}



.product-dispatch-info {

  margin-top: 18px;

  padding: 14px 16px;

  background: rgba(244, 246, 240, 0.9);

  border-radius: 10px;

  border-left: 3px solid #526A3D;

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.dispatch-badge {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.92rem;

  font-weight: 600;

  color: #2b3924;

}



.dispatch-badge .dot {

  width: 8px;

  height: 8px;

  background: #25D366;

  border-radius: 50%;

  display: inline-block;

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

}



.bulk-inquiry-note {

  font-size: 0.88rem;

  color: var(--ink-soft);

  line-height: 1.5;

}



.bulk-inquiry-note a {

  color: #526A3D;

  font-weight: 600;

  text-decoration: underline;

  text-underline-offset: 3px;

  transition: color 0.2s ease;

}



.bulk-inquiry-note a:hover {

  color: #1e2815;

}



@media (max-width: 600px) {

  .artisan-attributes-list {

    grid-template-columns: 1fr;

    gap: 12px;

    padding: 14px;

  }

}



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

   SCROLL REVEAL & CAROUSEL INTERACTIVITY

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

[data-reveal] {

  opacity: 0;

  transform: translateY(28px);

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

  will-change: opacity, transform;

}



[data-reveal].revealed {

  opacity: 1;

  transform: translateY(0);

}



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

  [data-reveal] {

    opacity: 1 !important;

    transform: none !important;

    transition: none !important;

  }

}



.carousel-nav-arrow:active {

  transform: translateY(-50%) scale(0.95);

}



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

   ECO-TOURISM EXPERIENCE CAROUSEL ARROWS

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

.eco-carousel-wrap .carousel-nav-arrow,

#ecoPhotoNext,

button#ecoPhotoNext,

#ecoPhotoPrev,

button#ecoPhotoPrev {

  position: absolute !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  width: 46px !important;

  height: 46px !important;

  border-radius: 50% !important;

  background: #ffffff !important;

  background-color: #ffffff !important;

  color: #526A3D !important;

  border: 1px solid #D9D5C5 !important;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  cursor: pointer !important;

  z-index: 25 !important;

  transition: all 0.25s ease !important;

  padding: 0 !important;

  outline: none !important;

}



.eco-carousel-wrap .carousel-nav-arrow:hover,

.eco-carousel-wrap .carousel-nav-arrow:focus,

.eco-carousel-wrap .carousel-nav-arrow:active,

button#ecoPhotoNext:hover,

button#ecoPhotoNext:focus,

button#ecoPhotoNext:active,

button#ecoPhotoPrev:hover,

button#ecoPhotoPrev:focus,

button#ecoPhotoPrev:active {

  background: #526A3D !important;

  background-color: #526A3D !important;

  color: #ffffff !important;

  border-color: #526A3D !important;

  transform: translateY(-50%) scale(1.08) !important;

  box-shadow: 0 6px 18px rgba(82, 106, 61, 0.35) !important;

}



.eco-carousel-wrap .carousel-nav-arrow svg,

#ecoPhotoNext svg,

#ecoPhotoPrev svg {

  display: block !important;

  stroke: currentColor !important;

  fill: none !important;

  width: 22px !important;

  height: 22px !important;

}



#ecoPhotoPrev,

.eco-carousel-wrap .carousel-nav-prev {

  left: 14px !important;

}



#ecoPhotoNext,

.eco-carousel-wrap .carousel-nav-next {

  right: 14px !important;

}



@media (max-width: 768px) {

  .eco-carousel-wrap .carousel-nav-arrow,

  #ecoPhotoNext,

  #ecoPhotoPrev {

    width: 38px !important;

    height: 38px !important;

  }

  #ecoPhotoPrev { left: 8px !important; }

  #ecoPhotoNext { right: 8px !important; }

}



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

   PERMANENT HELLO ELEMENTOR BUTTON OVERRIDE (NEVER BERRY PINK #CC3366)

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

html body button.slider-nav-arrow,

html body #sliderPrev,

html body #sliderNext,

html body .hero-slider-section .slider-nav-arrow {

  position: absolute !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  width: 44px !important;

  height: 64px !important;

  border-radius: 0 !important;

  background: transparent !important;

  background-color: transparent !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  border: none !important;

  color: rgba(255, 255, 255, 0.92) !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  cursor: pointer !important;

  z-index: 10 !important;

  padding: 0 !important;

  outline: none !important;

  box-shadow: none !important;

  transition: all 0.2s ease !important;

}



html body button.slider-nav-arrow:hover,

html body button.slider-nav-arrow:focus,

html body button.slider-nav-arrow:active,

html body #sliderPrev:hover,

html body #sliderPrev:focus,

html body #sliderPrev:active,

html body #sliderNext:hover,

html body #sliderNext:focus,

html body #sliderNext:active {

  background: transparent !important;

  background-color: transparent !important;

  border: none !important;

  color: #ffffff !important;

  transform: translateY(-50%) scale(1.18) !important;

  box-shadow: none !important;

  outline: none !important;

  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) !important;

}



html body button.slider-nav-arrow svg,

html body #sliderPrev svg,

html body #sliderNext svg {

  width: 26px !important;

  height: 52px !important;

  stroke: currentColor !important;

  stroke-width: 2 !important;

  fill: none !important;

}



html body .artisan-photo-strip .carousel-nav-arrow,

html body #photoStripPrev,

html body #photoStripNext {

  position: absolute !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  width: 50px !important;

  height: 50px !important;

  border-radius: 50% !important;

  background: rgba(0, 0, 0, 0.35) !important;

  background-color: rgba(0, 0, 0, 0.35) !important;

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

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

  color: #ffffff !important;

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

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  cursor: pointer !important;

  z-index: 10 !important;

  outline: none !important;

}



html body .artisan-photo-strip .carousel-nav-arrow:hover,

html body .artisan-photo-strip .carousel-nav-arrow:focus,

html body .artisan-photo-strip .carousel-nav-arrow:active,

html body #photoStripPrev:hover,

html body #photoStripPrev:focus,

html body #photoStripPrev:active,

html body #photoStripNext:hover,

html body #photoStripNext:focus,

html body #photoStripNext:active {

  background: #526A3D !important;

  background-color: #526A3D !important;

  color: #ffffff !important;

  border-color: #526A3D !important;

  transform: translateY(-50%) scale(1.08) !important;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;

  outline: none !important;

}



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

   PRODUCT CARD & BRANDED OLIVE BUTTONS (HIGH CONTRAST & VISIBILITY)

   Guarantees solid olive background, crisp white text, and zero transparency

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

html body .btn-solid-olive,

html body button.btn-solid-olive,

html body a.btn-solid-olive,

html body .product-card .card-actions .btn-solid-olive,

html body .product-card .card-actions .btn-add-to-cart,

html body .product-card .btn-add-to-cart,

html body button.btn-add-to-cart,

html body .btn-add-to-cart {

  background: #526A3D !important;

  background-color: #526A3D !important;

  color: #ffffff !important;

  border: 1px solid #526A3D !important;

  font-family: inherit !important;

  font-weight: 600 !important;

  font-size: 0.85rem !important;

  line-height: 1.2 !important;

  letter-spacing: 0.02em !important;

  padding: 8px 14px !important;

  border-radius: 4px !important;

  cursor: pointer !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  text-align: center !important;

  text-decoration: none !important;

  box-shadow: 0 2px 6px rgba(82, 106, 61, 0.25) !important;

  transition: all 0.22s ease !important;

}



html body .btn-solid-olive:hover,

html body .btn-solid-olive:focus,

html body .btn-solid-olive:active,

html body button.btn-solid-olive:hover,

html body button.btn-solid-olive:focus,

html body a.btn-solid-olive:hover,

html body .product-card .card-actions .btn-solid-olive:hover,

html body .product-card .card-actions .btn-solid-olive:focus,

html body .product-card .card-actions .btn-add-to-cart:hover,

html body .product-card .card-actions .btn-add-to-cart:focus,

html body .product-card .btn-add-to-cart:hover,

html body button.btn-add-to-cart:hover,

html body .btn-add-to-cart:hover {

  background: #3f522e !important;

  background-color: #3f522e !important;

  border-color: #3f522e !important;

  color: #ffffff !important;

  transform: translateY(-2px) !important;

  box-shadow: 0 4px 12px rgba(82, 106, 61, 0.4) !important;

}



html body .btn-outline-olive,

html body button.btn-outline-olive,

html body a.btn-outline-olive,

html body .product-card .card-actions .btn-outline-olive {

  background: transparent !important;

  background-color: transparent !important;

  color: #526A3D !important;

  border: 1px solid #526A3D !important;

  font-family: inherit !important;

  font-weight: 600 !important;

  font-size: 0.85rem !important;

  line-height: 1.2 !important;

  padding: 8px 12px !important;

  border-radius: 4px !important;

  cursor: pointer !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  text-align: center !important;

  text-decoration: none !important;

  transition: all 0.22s ease !important;

}



html body .btn-outline-olive:hover,

html body .btn-outline-olive:focus,

html body .btn-outline-olive:active,

html body button.btn-outline-olive:hover,

html body .product-card .card-actions .btn-outline-olive:hover {

  background: #526A3D !important;

  background-color: #526A3D !important;

  border-color: #526A3D !important;

  color: #ffffff !important;

  transform: translateY(-2px) !important;

}



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

   BLOG READER & DYNAMIC ARTICLE VIEW STYLES

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

.blog-article-view {

  display: none;

  animation: blogFadeIn 0.3s ease forwards;

}



@keyframes blogFadeIn {

  from { opacity: 0; transform: translateY(10px); }

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

}



.blog-reader-wrap {

  max-width: 860px;

  margin: 0 auto;

  padding: 40px 20px 80px;

}



.blog-reader-nav {

  margin: 0 0 28px 0 !important;

  display: flex !important;

  align-items: center !important;

}



.btn-blog-back,

.btn-blog-back-bottom {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  color: #526A3D !important;

  border: 1px solid #526A3D !important;

  background: transparent !important;

  padding: 8px 18px !important;

  border-radius: 4px !important;

  font-weight: 500 !important;

  font-size: 0.88rem !important;

  line-height: 1 !important;

  cursor: pointer !important;

  text-decoration: none !important;

  transition: all 0.2s ease !important;

  box-sizing: border-box !important;

}



.btn-blog-back:hover,

.btn-blog-back-bottom:hover {

  background: #526A3D !important;

  color: #ffffff !important;

  transform: translateX(-3px) !important;

  box-shadow: 0 4px 12px rgba(82, 106, 61, 0.25) !important;

}



.blog-article-meta-line {

  display: flex !important;

  align-items: center !important;

  flex-wrap: wrap !important;

  gap: 10px !important;

  color: #5A6556 !important;

  font-size: 0.88rem !important;

  line-height: 1 !important;

  font-weight: 400 !important;

  margin: 0 0 18px 0 !important;

}



.blog-article-category {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  background: #526A3D !important;

  color: #ffffff !important;

  padding: 4px 12px !important;

  border-radius: 12px !important;

  font-size: 0.72rem !important;

  font-weight: 600 !important;

  letter-spacing: 0.05em !important;

  text-transform: uppercase !important;

  line-height: 1 !important;

  height: 22px !important;

  box-sizing: border-box !important;

}



.blog-article-meta-line span:not(.blog-article-category) {

  display: inline-flex !important;

  align-items: center !important;

  line-height: 1 !important;

}



.blog-article-meta-line .meta-sep {

  color: #8C9686 !important;

  font-weight: 400 !important;

  font-size: 0.95rem !important;

}



.blog-article-header h1 {

  font-family: var(--font-heading, 'Playfair Display', Georgia, serif);

  color: #2E3D22;

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

  line-height: 1.22;

  margin: 0 0 12px 0 !important;

  font-weight: 700;

}



.blog-article-header h3 {

  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);

  color: #556052;

  font-size: clamp(1.05rem, 2vw, 1.3rem);

  font-weight: 400;

  line-height: 1.5;

  margin: 0 0 28px 0 !important;

}



.blog-article-hero-wrap {

  border-radius: 12px;

  overflow: hidden;

  margin: 0 0 36px 0;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

  max-height: 480px;

  width: 100%;

}



.blog-article-hero-wrap img {

  width: 100%;

  height: 100%;

  max-height: 480px;

  object-fit: cover;

  display: block;

}



.blog-article-body {

  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);

  font-size: 1.08rem;

  line-height: 1.85;

  color: #2C3E2D;

}



.blog-article-body p {

  margin: 0 0 1.5em 0;

}



.blog-article-body p:first-of-type {

  font-size: 1.15rem;

  line-height: 1.8;

  color: #1F2E1E;

}



.blog-article-actions {

  margin-top: 48px;

  padding-top: 28px;

  border-top: 1px solid #E5E7EB;

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 16px;

}



.blog-article-related {

  margin-top: 60px;

  padding-top: 40px;

  border-top: 2px solid #EAE6DB;

}



.blog-article-related h3 {

  font-family: var(--font-heading, 'Playfair Display', Georgia, serif);

  color: #2E3D22;

  font-size: 1.75rem;

  margin-bottom: 24px;

}