/* =============================================
   SHILAM COUTURE  Luxury Fashion Boutique
   CSS Stylesheet
   ============================================= */

/* ---- CSS Variables ---- */
:root {
  --brown-dark:   #3E1F0E;
  --brown-mid:    #6B2D1A;
  --brown-warm:   #8B4513;
  --gold:         #C9A96E;
  --gold-light:   #E8D5B0;
  --cream:        #FAF6F0;
  --cream-dark:   #F0E8DA;
  --beige:        #E8DDD0;
  --text-dark:    #2C1810;
  --text-mid:     #5A3E30;
  --text-light:   #9A7B6A;
  --white:        #FFFFFF;

  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Jost', sans-serif;

  --shadow-sm:    0 2px 12px rgba(62,31,14,0.10);
  --shadow-md:    0 6px 30px rgba(62,31,14,0.15);
  --shadow-lg:    0 16px 60px rgba(62,31,14,0.20);

  --radius:       4px;
  --transition:   0.35s ease;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--text-dark);
  line-height: 1.7;
  overflow-x: hidden;
  padding-top: 78px;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; transform-origin: center; }
img:hover { transform: scale(1.04); }
a { text-decoration: none; color: inherit; }

/* ---- Container ---- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ---- Shared Typography ---- */
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.2; }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); color: var(--text-dark); }
h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--text-dark); }
h3 { font-size: 1.3rem; font-weight: 400; }
p  { font-size: 0.95rem; color: var(--text-mid); line-height: 1.85; }
em { font-style: italic; }

/* ---- Dividers ---- */
.divider-line {
  width: 60px;
  height: 2px;
  background: var(--gold);
  margin: 1.2rem 0 1.5rem;
}
.divider-ornament {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.6rem 0 1.4rem;
  color: var(--gold);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
}
.divider-ornament::before,
.divider-ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gold);
  max-width: 80px;
  opacity: 0.6;
}
.divider-ornament.light { color: var(--gold-light); }
.divider-ornament.light::before,
.divider-ornament.light::after { background: var(--gold-light); }

.subheading-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--brown-warm);
  margin-bottom: 1rem;
}

/* ---- Buttons ---- */
.btn-primary {
  display: inline-block;
  background: var(--brown-dark);
  color: var(--cream);
  padding: 0.85rem 2.2rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  border-radius: var(--radius);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
  border: 2px solid transparent;
  margin-top: 1.8rem;
}
.btn-primary:hover {
  background: var(--brown-warm);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(62,31,14,0.25);
}

.btn-outline {
  display: inline-block;
  border: 2px solid var(--gold-light);
  color: var(--gold-light);
  padding: 0.85rem 2.2rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  border-radius: var(--radius);
  margin-top: 1.8rem;
  transition: all var(--transition);
}
.btn-outline:hover {
  background: var(--gold-light);
  color: var(--brown-dark);
  transform: translateY(-2px);
}

/* =============================================
   NAVBAR
   ============================================= */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: var(--brown-dark);
  box-shadow: 0 2px 20px rgba(0,0,0,0.25);
  transition: background var(--transition);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 2rem;
}
.logo {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: 0.02em;
  font-style: italic;
}
.logo span { color: var(--gold); }

.nav-links { display: flex; gap: 2.2rem; }
.nav-links a {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(250,246,240,0.82);
  letter-spacing: 0.05em;
  position: relative;
  transition: color var(--transition);
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--gold);
  transition: width var(--transition);
}
.nav-links a:hover { color: var(--gold-light); }
.nav-links a:hover::after { width: 100%; }
/* ===== NAV DROPDOWNS ===== */
.nav-menu {
  list-style: none;
  display: flex;
  gap: 2.2rem;
  align-items: center;
}

.nav-links { display: block; } /* nav now holds ul */
.nav-links a { display: inline-flex; align-items: center; gap: 0.45rem; }

.nav-menu > li { position: relative; }

.nav-menu a.active {
  color: var(--gold-light);
}
.nav-menu a.active::after { width: 100%; }

.chev {
  font-size: 0.75rem;
  opacity: 0.85;
  transform: translateY(-1px);
}

.has-dropdown .dropdown-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 260px;
  background: rgba(62,31,14,0.98);
  border: 1px solid rgba(201,169,110,0.35);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  padding: 0.9rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 2000;
}

.has-dropdown:hover .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ===== NAV ICONS (CART + FAVORITES) ===== */
.nav-icon {
  display: flex;
  align-items: center;
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 0;
  background: transparent;
  color: var(--cream);
  font-size: 1rem;
  padding: 0.3rem 0.4rem;
  cursor: pointer;
  transition: color var(--transition), transform var(--transition);
}

.icon-btn:hover {
  color: var(--gold-light);
  transform: translateY(-1px);
}

.icon-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--brown-dark);
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-profile-btn {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 999px;
  background: rgba(62, 31, 14, 0.94);
  color: var(--cream);
  border: 1px solid rgba(201, 169, 110, 0.34);
  box-shadow: 0 16px 34px rgba(62,31,14,0.26);
  text-decoration: none;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}

.floating-profile-btn:hover {
  transform: translateY(-50%) translateX(2px);
  background: rgba(90, 44, 24, 0.98);
  box-shadow: 0 18px 38px rgba(62,31,14,0.3);
}

.floating-profile-btn.logged-in {
  background: linear-gradient(135deg, var(--brown-dark), #744229);
}

.floating-profile-badge {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--brown-dark);
  font-weight: 700;
  font-size: 0.94rem;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .nav-icon {
    width: 100%;
  }

  .icon-btn {
    width: 100%;
    justify-content: flex-start;
    padding: 0.9rem 2rem;
  }

  .icon-count {
    position: static;
    margin-left: 0.6rem;
  }

  .floating-profile-btn {
    position: static;
    transform: none;
    margin-left: auto;
    margin-right: 10px;
    padding: 4px;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .floating-profile-btn:hover {
    transform: none;
    background: transparent;
    box-shadow: none;
  }

  .floating-profile-badge {
    width: 34px;
    height: 34px;
  }
}

/* ── WhatsApp & Call floating buttons ── */
.wa-float-btn,
.call-float-btn {
  position: fixed;
  right: 20px;
  z-index: 1100;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  transition: transform var(--transition), box-shadow var(--transition);
}

.wa-float-btn {
  bottom: 20px;
  background: #25D366;
  color: #fff;
}

.call-float-btn {
  bottom: 84px;
  background: rgba(62,31,14,0.94);
  color: var(--gold);
  border: 1.5px solid rgba(201,169,110,0.35);
}

.wa-float-btn:hover { transform: scale(1.1); }
.call-float-btn:hover { transform: scale(1.1); }

@media (max-width: 768px) {
  .wa-float-btn,
  .call-float-btn {
    right: 14px;
    width: 46px;
    height: 46px;
  }

  .wa-float-btn { bottom: 16px; }
  .call-float-btn { bottom: 72px; }
}

/* ── Footer / contact-info links ── */
a.contact-item {
  text-decoration: none;
  color: rgba(250,246,240,0.88);
}
a.contact-item:hover { color: var(--gold); }

a.contact-info-item {
  text-decoration: none;
  color: var(--text-mid);
}
a.contact-info-item:hover { color: var(--gold); }
a.contact-info-item:hover i { color: var(--gold); }

.dropdown-panel a {
  display: block;
  padding: 0.65rem 0.7rem;
  border-radius: 10px;
  color: rgba(250,246,240,0.86);
  letter-spacing: 0.03em;
  font-size: 0.88rem;
}
.dropdown-panel a:hover {
  background: rgba(201,169,110,0.10);
  color: var(--gold-light);
}

.dropdown-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  min-width: 720px;
}
.dropdown-col { padding: 0.2rem 0.1rem; }
.dropdown-title {
  font-family: var(--font-serif);
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 0.92rem;
  margin: 0.2rem 0.2rem 0.55rem;
}

/* Mobile dropdown behavior */
@media (max-width: 768px) {
  .nav-menu {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }

  .has-dropdown .dropdown-panel {
    position: static;
    min-width: unset;
    width: 100%;
    margin: 0;
    padding: 0.4rem 0.6rem 0.8rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none; /* toggled by JS */
  }

  .has-dropdown.open .dropdown-panel { display: block; }

  /* Rotate chevron when dropdown is open on mobile */
  .has-dropdown.open .dropdown-trigger .chev { transform: rotate(180deg); }
  .dropdown-trigger .chev { transition: transform 0.25s ease; }

  .dropdown-cols {
    grid-template-columns: 1fr;
    min-width: unset;
  }

  .dropdown-title { margin-top: 0.8rem; }
}
/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: all 0.3s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* =============================================
   HERO
   ============================================= */
/* =============================================
   HERO – Background Image Version (Correct)
   ============================================= */

.hero {
  position: relative;
  min-height: 84vh;
  display: flex;
  align-items: center;
  background: url("assets/index-hero.png") no-repeat right 28%;
  background-size: cover;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;   /* reduced from 55% */
  height: 100%;
  background: linear-gradient(
  to right,
  rgba(214, 190, 165, 0.95) 0%,
  rgba(200, 170, 140, 0.85) 30%,
  rgba(170, 135, 105, 0.45) 70%,
  rgba(170, 135, 105, 0) 100%
);
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;              /* REMOVE GRID */
  justify-content: flex-start;
}

.hero-text {
  max-width: 520px;
  margin-left: 80px;
}

@media (max-width: 1024px) {

  .hero {
    min-height: 80vh;
    background-position: 70% 28%; /* push image down a bit */
  }

  .hero-text {
    margin-left: 60px;
    max-width: 480px;
  }

  .hero-text h1 {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
  }

}

@media (max-width: 768px) {
  /* Hamburger */
  .hamburger { display: flex; }

  .navbar .nav-inner { position: relative; }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    background: var(--brown-dark);
    flex-direction: column;
    gap: 0;

    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;

    /* NEW */
    overscroll-behavior: contain;
  }

  /* NEW: full screen usable height + scroll */
  .nav-links.open {
    max-height: calc(100vh - 72px); /* adjust 72px if your navbar height differs */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 18px;
  }

  .nav-links a {
    padding: 0.9rem 2rem;
    border-top: 1px solid rgba(255,255,255,0.06);
  }

  .footer-links {
    gap: 0.7rem;
    margin-bottom: 1.6rem;
  }

  .footer-link-pill {
    width: 100%;
    max-width: 320px;
  }
}

@media (max-width: 480px) {

  .hero-text h1 {
    font-size: 2rem;
  }

  .hero-text p {
    font-size: 0.9rem;
  }

  .btn-primary {
    width: 100%;
    text-align: center;
  }

}
/* =============================================
   OUR STORY
   ============================================= */
.story {
  background: var(--cream-dark);
  padding: 6rem 0 7rem;
}
.story-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.story-text h2 {
  color: var(--brown-dark);
}
.story-text p {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.85;
  text-align: justify;
}
.story-lead {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  line-height: 1.85;
  color: #4a2a1a;
  margin-bottom: 0.75rem;
  text-align: justify;
}
.story-highlight {
  margin-top: 1rem;
  padding: 0.9rem 1rem 0.8rem;
  border-left: 2px solid rgba(201,169,110,0.8);
  background: linear-gradient(90deg, rgba(201,169,110,0.12) 0%, rgba(201,169,110,0.02) 100%);
  border-radius: 4px;
}
.story-highlight-title {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(0.9rem, 2.2vw, 1rem);
  font-weight: 600;
  color: #4a2a1a;
  margin-bottom: 0.25rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

@media (max-width: 768px){
  .story-highlight-title{
    white-space: normal;
  }
}
.story-highlight p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.8;
  text-align: justify;
}
.story-closing {
  margin-top: 0.9rem;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  font-style: italic;
  color: #513324;
  text-align: justify;
}
.story-text .features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 2.5rem;
  padding: 1.5rem 1.2rem;
  border: none;
  background: linear-gradient(160deg, #fcf8f2 0%, #f1e8dc 100%);
  border-radius: 0;
  box-shadow: none;
  position: relative;
}
.story-text .features::before {
  display: none;
}
.feature-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
}

.feature-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 13%;
  right: 0;
  width: 1px;
  height: 74%;
  background: linear-gradient(to bottom, rgba(201,169,110,0.12) 0%, rgba(90,62,43,0.35) 45%, rgba(201,169,110,0.12) 100%);
  box-shadow: 0 0 8px rgba(62, 31, 14, 0.2);
}
.feature-icon {
  width: 52px;
  height: 52px;
  color: var(--brown-warm);
  transition: color var(--transition), transform var(--transition);
}
.feature-item:hover .feature-icon {
  color: #b88c4b;
  transform: translateY(-2px) scale(1.04);
}
.feature-label {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  color: var(--text-dark);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.feature-label span {
  display: block;
  margin-top: 0.08rem;
  font-weight: 500;
  color: #8b6a4f;
}

.story-image {
  position: relative;
  height: 520px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.story-image-accent {
  position: absolute;
  top: -12px;
  left: -12px;
  right: 12px;
  bottom: 12px;
  border: 2px solid var(--gold);
  border-radius: 2px;
  pointer-events: none;
  z-index: -1;
}

/* Desktop polish for story block (reference style) */
@media (min-width: 1025px) {
  .story-inner {
    align-items: start;
    gap: 4.2rem;
  }

  .story-text .features {
    margin-top: 2rem;
    border: none;
    border-radius: 0;
    background: linear-gradient(160deg, #fdf8f1 0%, #efe4d6 100%);
    box-shadow: none;
    padding: 1.6rem 1.2rem;
  }

  .feature-item:not(:last-child)::after {
    top: 13%;
    height: 72%;
    background: linear-gradient(to bottom, rgba(201,169,110,0.12) 0%, rgba(90,62,43,0.38) 45%, rgba(201,169,110,0.12) 100%);
    box-shadow: 0 0 9px rgba(62, 31, 14, 0.24);
  }

  .story-image {
    height: 470px;
    margin-top: 1.2rem;
    margin-left: -1.6rem;
    overflow: visible;
    border-radius: 0;
    border: 8px solid #fff;
    box-shadow: 0 26px 46px rgba(62, 31, 14, 0.30), 0 6px 14px rgba(62, 31, 14, 0.18);
  }

  .story-image::before {
    content: "";
    position: absolute;
    top: -2.3rem;
    left: -2.3rem;
    width: 185px;
    height: 235px;
    background: url("assets/shilam3.png") no-repeat center center;
    background-size: cover;
    border: 6px solid #fff;
    box-shadow: 0 20px 36px rgba(62, 31, 14, 0.34), 0 4px 10px rgba(62, 31, 14, 0.2);
    z-index: 3;
  }

  .story-image-accent {
    display: none;
  }
}

/* =============================================
   BRIDAL COLLECTION
   ============================================= */
.collections {
  background: var(--cream-dark);
  padding: 2.4rem 0 4.8rem;
}
.collections-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.collections-header .divider-ornament {
  justify-content: center;
}
.collections-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.collection-card { }
.card-img-wrap {
  position: relative;
  height: 420px;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  border-radius: 20px;
}
.card-img-wrap img {
  transition: transform 0.6s ease;
  object-position: top center;
}
.card-img-wrap:hover img { transform: scale(1.07); }
.card-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem 1.2rem 1.2rem;
  background: linear-gradient(to top, rgba(30,10,0,0.75) 0%, transparent 100%);
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Pickup card */
.pickup-card {
  background: var(--cream-dark);
  border: 1px solid var(--beige);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  min-height: 300px;
}
.pickup-card h2 { font-size: 1.8rem; margin-bottom: 0.4rem; }
.pickup-card h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--brown-warm);
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}
.pickup-card p { font-size: 0.92rem; }
.pickup-card .btn-primary { margin-top: 1.5rem; align-self: flex-start; }

/* =============================================
   TRAINING
   ============================================= */
.training {
  position: relative;
  padding: 5rem 0;
  overflow: hidden;
}
.training-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.training-bg img { object-position: center; }
.training-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(250,246,240,0.97) 0%,
    rgba(250,246,240,0.9) 28%,
    rgba(250,246,240,0.6) 52%,
    rgba(250,246,240,0.0) 78%
  );
}
.training-content {
  position: relative;
  z-index: 1;
}
.training-text { max-width: 500px; }
.training-text h2 {
  color: var(--text-dark);
  font-size: 2.8rem;
}
.training-text .subheading-italic { color: var(--brown-dark); }
.training-text p { color: var(--text-dark); }

/* =============================================
   FOOTER
   ============================================= */
.footer {
  background: var(--brown-dark);
  color: var(--cream);
  padding: 4rem 0 2rem;
  text-align: center;
}
.footer-top h2 {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-style: italic;
  color: var(--cream);
}
.footer-divider {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--gold);
  letter-spacing: 0.2em;
  margin: 0.6rem 0 2.5rem;
}

.footer-contacts {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 2.5rem;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: rgba(250,246,240,0.88);
}
.contact-icon {
  width: 20px;
  height: 20px;
  color: var(--gold);
  flex-shrink: 0;
}
.contact-icon svg { width: 100%; height: 100%; }
.contact-separator {
  color: var(--gold);
  opacity: 0.4;
  font-size: 1.2rem;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 0 auto 2rem;
  padding: 0 1.5rem;
}
.footer-link-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.7rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(201,169,110,0.34);
  color: rgba(250,246,240,0.9);
  background: rgba(255,255,255,0.04);
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  transition: background var(--transition), color var(--transition), transform var(--transition), border-color var(--transition);
}
.footer-link-pill:hover {
  background: rgba(201,169,110,0.12);
  color: var(--gold-light);
  border-color: rgba(201,169,110,0.64);
  transform: translateY(-2px);
}
.social-btn {
  width: 42px;
  height: 42px;
  border: 1.5px solid rgba(201,169,110,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  transition: all var(--transition);
}
.social-btn svg { width: 18px; height: 18px; }
.social-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--brown-dark);
  transform: translateY(-2px);
}

.footer-copy {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.5rem;
}
.footer-copy p {
  font-size: 0.8rem;
  color: rgba(250,246,240,0.45);
  letter-spacing: 0.06em;
}
.footer-admin-link {
  margin-top: 6px;
  font-size: 0.72rem;
  opacity: 0.4;
}
.footer-admin-link a {
  text-decoration: none;
  color: inherit;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: opacity 0.2s;
}
.footer-admin-link a:hover {
  opacity: 0.8;
}

.consultation-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
  z-index: 4500;
}

.consultation-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.consultation-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(44, 24, 16, 0.62);
  backdrop-filter: blur(4px);
}

.consultation-modal-panel {
  position: relative;
  width: min(100%, 500px);
  max-height: min(92vh, 700px);
  overflow-y: hidden;
  padding: 1.35rem 1.2rem 1.05rem;
  border-radius: 20px;
  border: 1px solid rgba(201, 169, 110, 0.38);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,246,240,0.98)),
    radial-gradient(circle at top right, rgba(201,169,110,0.18), transparent 38%);
  box-shadow: 0 24px 70px rgba(62,31,14,0.24);
}

.consultation-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(107,45,26,0.18);
  border-radius: 50%;
  background: rgba(255,255,255,0.88);
  color: var(--brown-dark);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.consultation-modal-head h2 {
  font-size: clamp(1.65rem, 2.5vw, 2.25rem);
  color: var(--brown-dark);
  line-height: 1.05;
}

.consultation-modal-head p {
  margin-top: 0.3rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-mid);
}

.consultation-modal-form {
  display: grid;
  gap: 0.72rem;
  margin-top: 0.95rem;
}

.consultation-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
}

.consultation-field {
  display: grid;
  gap: 0.28rem;
}

.consultation-field label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brown-mid);
}

.consultation-field input,
.consultation-field select,
.consultation-field textarea {
  width: 100%;
  padding: 0.72rem 0.82rem;
  border-radius: 12px;
  border: 1px solid rgba(107,45,26,0.16);
  background: rgba(255,255,255,0.92);
  color: var(--text-dark);
  font: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.consultation-field input:focus,
.consultation-field select:focus,
.consultation-field textarea:focus {
  outline: none;
  border-color: rgba(139,69,19,0.6);
  box-shadow: 0 0 0 4px rgba(201,169,110,0.16);
}

.consultation-field textarea {
  min-height: 74px;
  max-height: 90px;
  resize: vertical;
}

.consultation-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.1rem;
}

.consultation-modal-actions .btn-primary {
  margin-top: 0;
  min-width: 180px;
  padding: 0.78rem 1.35rem;
  text-align: center;
}

.consultation-modal-feedback {
  min-height: 22px;
  font-size: 0.84rem;
  color: var(--text-mid);
}

.consultation-modal-feedback.show.error {
  color: #9f2f25;
}

.consultation-modal-feedback.show.success {
  color: #1f7a4a;
}

/* =============================================
   RESPONSIVE – 1024px
   ============================================= */
@media (max-width: 1024px) {
  .hero-inner      { gap: 2rem; }
  .story-inner     { gap: 3rem; }
  .collections-grid { grid-template-columns: 1fr 1fr; }
  .pickup-card     { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 2rem; }
  .pickup-card > * { flex: 1; }
  .pickup-card h2  { flex: none; width: 100%; }
}

/* =============================================
   RESPONSIVE – 768px
   ============================================= */
@media (max-width: 768px) {
  /* Hamburger */
  .hamburger { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--brown-dark);
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }
  .nav-links.open {
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links a {
    padding: 0.9rem 2rem;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .navbar .nav-inner { position: relative; }

  /* Hero */
  .hero {
    min-height: auto;
    padding-bottom: 0;
  }
  .hero::before {
    width: 50%;
    background: rgba(255,255,255,0.95);
    border-right: 1px solid rgba(62, 31, 14, 0.08);
  }
  .hero-inner { justify-content: flex-start; gap: 0; padding-top: 1.5rem; }
  .hero-text {
    width: 48%;
    max-width: 280px;
    margin-left: 0;
    text-align: left;
    padding-right: 0;
    order: 2;
    padding: 1.6rem 0.8rem 0.6rem;
  }
  .hero-text h1 {
    font-size: 2.55rem;
    line-height: 1.12;
  }
  .hero-text p { max-width: 22ch; }
  .hero-text .btn-primary {
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.66rem 1.05rem;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    line-height: 1.2;
    margin-top: 1rem;
  }
  .hero-image { order: 1; height: 350px; }
  .hero-badge { display: none; }

  /* Story */
  .story-inner { grid-template-columns: 1fr; gap: 3rem; }
  .story { padding: 4.5rem 0 1.4rem; }
  .story-image {
    height: 320px;
    order: -1;
    margin-top: 0;
    margin-left: 0;
    overflow: visible;
    border: 6px solid #fff;
    border-radius: 0;
    box-shadow: 0 18px 34px rgba(62, 31, 14, 0.26), 0 5px 12px rgba(62, 31, 14, 0.16);
  }
  .story-image::before {
    content: "";
    position: absolute;
    top: -1.25rem;
    left: -1.15rem;
    width: 126px;
    height: 164px;
    background: url("assets/shilam3.jpg") no-repeat center top;
    background-size: cover;
    border: 5px solid #fff;
    box-shadow: 0 14px 24px rgba(62, 31, 14, 0.28), 0 4px 10px rgba(62, 31, 14, 0.18);
    z-index: 3;
  }
  .story-image-accent { display: none; }
  .story-text h2 { text-align: center; }
  .story-text .divider-ornament { justify-content: center; }
  .story-text .subheading-italic { text-align: center; }
  .story-text .features { padding: 1rem 0.4rem; }
  .feature-item { padding: 0.2rem 0.35rem; }
  .story-text p,
  .story-lead,
  .story-highlight p,
  .story-closing { text-align: left; }

  /* Collections */
  .collections { padding: 1.4rem 0 5.5rem; }
  .collections-grid { grid-template-columns: 1fr; }
  .card-img-wrap { height: 300px; }
  .pickup-card { flex-direction: column; }

  /* Training */
  .training { padding: 5rem 0; }

  /* Footer */
  .footer-contacts { flex-direction: column; gap: 1rem; }
  .contact-separator { display: none; }
  .consultation-modal {
    padding: 0.7rem;
  }
  .consultation-modal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }
  .consultation-modal-panel {
    width: min(100%, 420px);
    max-height: min(94vh, 640px);
    padding: 1rem 0.82rem 0.82rem;
    border-radius: 18px;
  }
  .consultation-modal-head h2 {
    font-size: 1.42rem;
  }
  .consultation-modal-head p {
    font-size: 0.84rem;
    line-height: 1.45;
  }
  .consultation-field label {
    font-size: 0.72rem;
  }
  .consultation-field input,
  .consultation-field select,
  .consultation-field textarea {
    padding: 0.62rem 0.72rem;
    font-size: 0.94rem;
  }
  .consultation-field textarea {
    min-height: 62px;
    max-height: 74px;
  }
  .consultation-modal-actions {
    gap: 0.55rem;
  }
  .consultation-modal-actions .btn-primary {
    min-width: 150px;
    padding: 0.72rem 1rem;
  }
  .consultation-modal-feedback {
    min-height: 18px;
    font-size: 0.76rem;
  }
  @media (max-width: 768px) {
  .hero-content {
    text-align: center;
    margin: 0 auto;
  }

  .hero-content p {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-content .btn {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
  }
}
}

@media (max-width: 480px) {
  .consultation-modal {
    padding: 0.5rem;
  }

  .consultation-modal-panel {
    width: min(100%, 390px);
    max-height: min(95vh, 600px);
    padding: 0.9rem 0.72rem 0.76rem;
    border-radius: 16px;
  }

  .consultation-modal-close {
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    font-size: 1.2rem;
  }

  .consultation-modal-head h2 {
    font-size: 1.28rem;
    padding-right: 2.2rem;
  }

  .consultation-modal-head p {
    font-size: 0.8rem;
    line-height: 1.38;
  }

  .consultation-modal-form {
    gap: 0.58rem;
    margin-top: 0.72rem;
  }

  .consultation-modal-grid {
    gap: 0.5rem;
  }

  .consultation-field label {
    font-size: 0.68rem;
  }

  .consultation-field input,
  .consultation-field select,
  .consultation-field textarea {
    padding: 0.56rem 0.68rem;
    border-radius: 10px;
    font-size: 0.9rem;
  }

  .consultation-field textarea {
    min-height: 56px;
    max-height: 66px;
  }

  .consultation-modal-actions .btn-primary {
    min-width: 136px;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
  }

  .consultation-modal-feedback {
    font-size: 0.72rem;
  }

  .hero {
    min-height: 68vh;
    padding-left: 0;
    padding-right: 0;
  }

  .hero::before {
    width: 53%;
    background: rgba(255,255,255,0.97);
    border-right: 1px solid rgba(62, 31, 14, 0.10);
  }

  .hero-inner {
    justify-content: flex-start;
    padding-top: 0.7rem;
  }

  .hero-text {
    width: 50%;
    max-width: none;
    padding: 1.05rem 0.62rem 1.2rem;
  }

  .hero-text h1 {
    font-size: 2.05rem;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-align: center;
  }

  .hero-text .divider-line {
    width: 44px;
    margin: 0.75rem auto 1rem;
  }

  .hero-text p {
    max-width: 18ch;
    font-size: 0.83rem;
    line-height: 1.5;
  }

  .hero-text .btn-primary {
    width: auto;
    max-width: calc(100% - 0.8rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 9.6rem;
    padding: 0.5rem 1.05rem;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    line-height: 1.2;
    margin-left: -0.45rem;
    margin-top: 0.7rem;
    border-radius: 3px;
    white-space: nowrap;
  }

  .story-image::before {
    top: -0.95rem;
    left: -0.9rem;
    width: 108px;
    height: 142px;
    border-width: 4px;
  }
}

/* =============================================
   FADE-IN ANIMATION
   ============================================= */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ===== ENHANCED TRAINING SECTION ===== */

.training-text {
  max-width: 560px;
}

.training-description {
  margin: 1.2rem 0 1.8rem;
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(250,246,240,0.85);
}

.training-features {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 2rem;
}

.training-feature {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: var(--text-dark);
  letter-spacing: 0.03em;
}

.training-feature span {
  color: var(--brown-dark);
  font-size: 0.8rem;
}

.training-highlight {
  background: rgba(201,169,110,0.16);
  border: 1px solid rgba(139,69,19,0.3);
  padding: 0.8rem 1rem;
  margin-bottom: 2rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dark);
  display: inline-block;
}

.training-btn {
  transition: all 0.35s ease;
  border-color: rgba(62,31,14,0.55);
  color: var(--brown-dark);
}

.training-btn:hover {
  background: var(--brown-dark);
  color: var(--cream);
  box-shadow: 0 8px 30px rgba(62,31,14,0.28);
  transform: translateY(-3px);
}

/* =============================================
   ABOUT PAGE
   ============================================= */
.about-hero {
  position: relative;
  padding: 6rem 0 5rem;
  overflow: hidden;
  background: linear-gradient(120deg, #f7eee2 0%, #e9d8c1 48%, #d7b99b 100%);
}

.about-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 24%, rgba(201,169,110,0.22) 0%, transparent 42%),
    radial-gradient(circle at 82% 20%, rgba(62,31,14,0.16) 0%, transparent 40%);
  pointer-events: none;
}

.about-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}

.about-kicker {
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brown-warm);
  font-weight: 500;
}

.about-hero-text p {
  max-width: 54ch;
}

.about-hero-card {
  height: 540px;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(62,31,14,0.12);
}

.about-hero-card img {
  transition: transform 0.6s ease;
}

.about-hero-card:hover img {
  transform: scale(1.06);
}

.about-signature {
  background: var(--cream);
  padding: 6rem 0;
}

.about-signature-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3.4rem;
  align-items: center;
}

.about-signature-media {
  height: 520px;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: var(--shadow-md);
}

.about-signature-media img {
  object-position: center top;
  transition: transform 0.6s ease;
}

.about-signature-media:hover img {
  transform: scale(1.06);
}

.about-story {
  padding: 6rem 0;
  background: linear-gradient(160deg, #f7eee2 0%, #fdf8f2 100%);
  position: relative;
  overflow: hidden;
}

.about-story::before {
  content: "";
  position: absolute;
  inset: -10% auto auto -8%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(201,169,110,0.22) 0%, rgba(201,169,110,0.04) 60%, transparent 70%);
  pointer-events: none;
}

.about-story::after {
  content: "";
  position: absolute;
  inset: auto 6% 8% auto;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(139,69,19,0.18);
  border-radius: 50%;
  pointer-events: none;
}

.about-story-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}

.about-story-text h2 {
  font-size: clamp(2rem, 3.6vw, 3.2rem);
}

.story-divider-ornament {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1rem 0 1.4rem;
  color: var(--gold);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
}

.story-divider-ornament::before,
.story-divider-ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gold);
  max-width: 90px;
  opacity: 0.7;
}

.about-story-text p {
  max-width: 60ch;
}

.story-highlights {
  margin-top: 1.6rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.story-highlights .story-highlight {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0.9rem;
  border-radius: 14px;
  border: 1px solid rgba(201,169,110,0.28);
  background: rgba(255,255,255,0.75);
  font-size: 0.9rem;
  color: var(--text-dark);
}

.story-highlights .story-highlight .legacy-icon {
  margin-right: 0;
  font-size: 0.9rem;
}

.story-timeline {
  margin-top: 1.6rem;
  display: grid;
  gap: 0.8rem;
  padding-left: 1.2rem;
  position: relative;
}

.story-timeline::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.2rem;
  bottom: 0.2rem;
  width: 2px;
  background: linear-gradient(to bottom, rgba(201,169,110,0.15), rgba(201,169,110,0.6), rgba(201,169,110,0.15));
}

.story-step {
  position: relative;
  padding-left: 1.4rem;
}

.story-step::before {
  content: "";
  position: absolute;
  left: -0.25rem;
  top: 0.4rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,169,110,0.2);
}

.story-time {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brown-warm);
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.story-step p {
  margin: 0;
  font-size: 0.92rem;
}

.about-story-media {
  height: 520px;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(201,169,110,0.28);
}

.about-story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.about-story-media:hover img {
  transform: scale(1.06);
}

.about-points {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.about-point {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text-dark);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.about-point span {
  color: var(--gold);
  font-size: 0.78rem;
}

.about-brand {
  padding: 6rem 0;
  background: var(--cream);
}

.about-brand-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3rem;
}

.about-brand-head .divider-ornament {
  justify-content: center;
}

.about-brand-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}

.about-brand-card {
  background: #fff;
  border: 1px solid rgba(201,169,110,0.28);
  border-radius: 18px;
  padding: 2rem 1.6rem;
  box-shadow: var(--shadow-sm);
}

.about-brand-card h3 {
  margin-bottom: 0.6rem;
}

.about-owner {
  padding: 6rem 0;
  background:
    radial-gradient(circle at top left, rgba(201,169,110,0.18), transparent 32%),
    linear-gradient(135deg, #fffaf5 0%, #f5ede2 52%, #f0e4d4 100%);
}

.about-owner-inner {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: start;
}

.about-owner-media {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  min-height: 520px;
  box-shadow: 0 20px 48px rgba(62,31,14,0.16);
  border: 1px solid rgba(201,169,110,0.28);
}

.about-owner-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(180deg, transparent 0%, rgba(62,31,14,0.32) 100%);
  pointer-events: none;
}

.about-owner-media img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.about-owner-content {
  background: rgba(255,255,255,0.74);
  border: 1px solid rgba(201,169,110,0.34);
  border-radius: 26px;
  padding: 2.5rem;
  box-shadow: 0 16px 40px rgba(62,31,14,0.08);
}

.about-owner-content .divider-ornament {
  justify-content: flex-start;
  margin-bottom: 1.2rem;
}

.about-owner-lead {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  line-height: 1.7;
  text-align: justify;
  color: var(--brown-dark);
  margin-bottom: 1rem;
}

.about-owner-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.about-owner-chip {
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: rgba(62,31,14,0.08);
  border: 1px solid rgba(201,169,110,0.38);
  color: var(--brown-dark);
  font-family: var(--font-serif);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-owner-quote {
  margin: 0;
  padding: 1.2rem 1.3rem 1.2rem 1.5rem;
  border-left: 3px solid var(--gold);
  background: rgba(255,255,255,0.72);
  border-radius: 0 18px 18px 0;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  font-style: italic;
  color: #4a2a1a;
}

.about-owner-body {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--text-body);
  text-align: justify;
  margin-bottom: 0.9rem;
}

.about-legacy {
  padding: 6rem 0;
  background: linear-gradient(180deg, #fffaf5 0%, #f3e8da 100%);
}

.about-legacy-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3.2rem;
}

.about-legacy-head .divider-ornament {
  justify-content: center;
}

.about-legacy-lead {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: #4a2a1a;
  margin-top: 0.6rem;
}

.about-legacy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}

.legacy-card {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(201,169,110,0.28);
  border-radius: 20px;
  padding: 2rem 1.8rem;
  box-shadow: 0 10px 28px rgba(62,31,14,0.10);
  position: relative;
  overflow: hidden;
}

.legacy-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(201,169,110,0.4), rgba(139,69,19,0.65));
}

.legacy-card h3 {
  margin-bottom: 0.6rem;
}

.legacy-icon {
  color: var(--gold);
  margin-right: 0.5rem;
  font-size: 0.95rem;
  display: inline-block;
}

.legacy-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--brown-warm);
  margin-bottom: 0.9rem;
  font-weight: 500;
}

.legacy-vision {
  margin-top: 2.8rem;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 2rem;
  align-items: center;
  background: rgba(62,31,14,0.06);
  border: 1px solid rgba(201,169,110,0.35);
  border-radius: 22px;
  padding: 2rem 2.4rem;
}

.legacy-vision-text h3 {
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
}

.legacy-vision-list {
  list-style: none;
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  color: var(--text-dark);
}

.legacy-vision-list li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.95rem;
}

.legacy-vision-list li::before {
  content: "\2726";
  color: var(--gold);
  font-size: 0.75rem;
  margin-top: 3px;
}

.legacy-quote {
  margin-top: 2.4rem;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--brown-dark);
  padding: 1.6rem 1.8rem;
  border: 1px solid rgba(201,169,110,0.35);
  border-radius: 18px;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 10px 26px rgba(62,31,14,0.08);
}

.legacy-gallery {
  margin: 2.4rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.legacy-photo {
  position: relative;
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(201,169,110,0.25);
}

.legacy-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s ease;
}

.legacy-photo:hover img {
  transform: scale(1.06);
}

.about-values {
  padding: 6rem 0;
  background: var(--cream-dark);
}

.about-values-head {
  text-align: center;
  margin-bottom: 2.8rem;
}

.about-values-head .divider-ornament {
  justify-content: center;
}

.about-values-media {
  margin: 0 auto 2.2rem;
  max-width: 980px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(201,169,110,0.28);
}

.about-values-media img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}

.about-values-media:hover img {
  transform: scale(1.06);
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}

.about-value-card {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(201,169,110,0.36);
  border-radius: 18px;
  padding: 2rem 1.5rem;
  box-shadow: 0 8px 30px rgba(62,31,14,0.06);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.about-value-card h3 {
  margin-bottom: 0.7rem;
}

.about-value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 44px rgba(62,31,14,0.12);
  border-color: rgba(201,169,110,0.62);
}

.about-stats {
  padding: 4.8rem 0;
  background: var(--brown-dark);
}

.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.about-stat {
  text-align: center;
  padding: 1.1rem;
}

.about-stat strong {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 3vw, 3.2rem);
  color: var(--gold-light);
  line-height: 1;
}

.about-stat span {
  display: block;
  margin-top: 0.45rem;
  color: rgba(250,246,240,0.82);
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  text-transform: uppercase;
}

.about-cta {
  padding: 5.5rem 0;
  background: var(--cream);
}

.about-cta-inner {
  text-align: center;
  border: 1px solid rgba(201,169,110,0.4);
  border-radius: 22px;
  padding: 3rem 2rem;
  background: linear-gradient(145deg, rgba(255,255,255,0.82) 0%, rgba(240,232,218,0.72) 100%);
  box-shadow: 0 12px 38px rgba(62,31,14,0.08);
}

.about-cta-inner p {
  max-width: 64ch;
  margin: 0.6rem auto 0;
}

@media (max-width: 1024px) {
  .about-hero-inner,
  .about-owner-inner,
  .about-signature-inner,
  .about-story-inner {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  .about-brand-grid {
    grid-template-columns: 1fr 1fr;
  }

  .about-hero-card,
  .about-owner-media,
  .about-signature-media,
  .about-story-media {
    height: 460px;
  }

  .about-values-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .about-hero {
    padding: 5rem 0 4rem;
  }

  .about-hero-text,
  .about-signature-text {
    text-align: center;
  }

  /* Narrative sections stay left-aligned on mobile — centered long paragraphs are hard to read */
  .about-owner-content,
  .about-story-text {
    text-align: left;
  }

  .about-owner-content .divider-ornament {
    justify-content: flex-start;
  }

  .about-hero-text .divider-line {
    margin-left: auto;
    margin-right: auto;
  }

  .about-hero-text p,
  .about-signature-text p {
    margin-left: auto;
    margin-right: auto;
  }

  .about-story-text p {
    max-width: 100%;
  }

  .story-timeline {
    padding-left: 0.8rem;
  }

  .story-highlights {
    grid-template-columns: 1fr;
  }

  .about-points {
    align-items: center;
  }

  .about-values-grid,
  .about-stats-grid {
    grid-template-columns: 1fr;
  }

  .about-brand-grid {
    grid-template-columns: 1fr;
  }

  .about-values-media img {
    height: 220px;
  }

  .about-legacy-grid {
    grid-template-columns: 1fr;
  }

  .legacy-vision {
    grid-template-columns: 1fr;
    padding: 1.8rem 1.6rem;
  }

  .legacy-gallery {
    grid-template-columns: 1fr;
  }

  .legacy-photo {
    height: 200px;
  }

  .about-hero-card,
  .about-owner-media,
  .about-signature-media,
  .about-story-media {
    height: 390px;
  }

  .about-owner-content {
    padding: 1.8rem 1.6rem;
  }

  .about-owner-content h2 {
    font-size: clamp(1.7rem, 6vw, 2.2rem);
  }

  .about-owner-lead {
    font-size: 1.04rem;
    line-height: 1.75;
    text-align: left;
  }

  .about-owner-body {
    font-size: 0.97rem;
    text-align: left;
  }

  .about-owner-highlights {
    justify-content: flex-start;
  }

  .about-owner-quote {
    font-size: 0.98rem;
    text-align: left;
  }

  .about-owner {
    padding: 3.5rem 0;
  }

  .about-cta-inner {
    padding: 2.3rem 1.2rem;
  }
}

@media (max-width: 480px) {
  .about-hero-card,
  .about-owner-media,
  .about-signature-media,
  .about-story-media {
    height: 320px;
  }

  .about-kicker {
    letter-spacing: 0.14em;
  }

  .about-owner-media,
  .about-owner-media img {
    min-height: 300px;
    height: 300px;
  }

  .about-owner-lead {
    font-size: 1rem;
  }

  .about-owner-body {
    font-size: 0.94rem;
  }

  .about-owner-content {
    padding: 1.5rem 1.3rem;
    border-radius: 20px;
  }

  .about-owner {
    padding: 3rem 0;
  }
}

/* ===== MOBILE CENTER FIX ===== */
html, body {
  width: 100%;
  overflow-x: hidden;
}

/* Ensure sections are properly centered */
section,
.hero,
.nav-inner,
.container {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Fix uneven padding */
@media (max-width: 768px) {
  section,
  .hero,
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* =============================================
   HERO STYLE OVERRIDES (REQUESTED)
   ============================================= */
/* About hero should look like current home hero style */
.about-hero {
  position: relative;
  min-height: 84vh;
  padding: 0;
  display: flex;
  align-items: center;
  background: url("assets/hero1.jpg") no-repeat right 35%;
  background-size: cover;
  overflow: hidden;
}

.about-hero-bg {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  background: linear-gradient(
    to right,
    rgba(214, 190, 165, 0.95) 0%,
    rgba(200, 170, 140, 0.85) 30%,
    rgba(170, 135, 105, 0.45) 70%,
    rgba(170, 135, 105, 0) 100%
  );
  z-index: 0;
}

.about-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.about-hero-text {
  max-width: 520px;
  margin-left: 80px;
}

.about-hero-card {
  width: min(36vw, 420px);
  height: 520px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(62,31,14,0.12);
  box-shadow: var(--shadow-lg);
}

/* Remove front image card on desktop only */
@media (min-width: 769px) {
  .about-hero {
    background-image: url("assets/about-hero.png");
    background-position: right 28%;
    background-size: cover;
  }

  .about-hero-bg {
    width: 44%;
  }

  .about-hero-card {
    display: none;
  }
}

/* Home hero container should match the provided card-like mobile look */
@media (max-width: 768px) {
  .about-hero {
    min-height: 80vh;
    background-position: 70% 35%;
  }

  .about-hero-bg {
    width: 50%;
  }

  .about-hero-text {
    margin-left: 0;
    max-width: 300px;
    text-align: left;
  }

  .about-hero-text .divider-line {
    margin-left: 0;
  }

  .about-hero-card {
    display: none;
  }
}

@media (max-width: 480px) {
  .about-hero {
    min-height: 72vh;
    background-position: 72% 35%;
  }
}

/* Contact page hero uses its own image */
.contact-hero {
  background-image: url("assets/contact-hero.png");
  background-position: right 35%;
}

@media (min-width: 769px) {
  .contact-hero {
    background-image: url("assets/contact-hero.png");
    background-position: right 28%;
  }
}

@media (max-width: 768px) {
  .contact-hero {
    background-position: 70% 35%;
  }
}

@media (max-width: 480px) {
  .contact-hero {
    background-position: 72% 35%;
  }
}

/* Home hero should match about hero layout in mobile only */
@media (max-width: 768px) {
  .hero {
    min-height: 80vh;
    background-image: url("assets/index-hero.png");
    background-position: 70% 35%;
    padding-left: 0;
    padding-right: 0;
  }

  .hero::before {
    width: 50%;
    border-right: none;
    background: linear-gradient(
      to right,
      rgba(214, 190, 165, 0.95) 0%,
      rgba(200, 170, 140, 0.85) 30%,
      rgba(170, 135, 105, 0.45) 70%,
      rgba(170, 135, 105, 0) 100%
    );
  }

  .hero-text {
    width: auto;
    max-width: 300px;
    margin-left: 0;
    padding: 0;
    text-align: left;
  }

  .hero-text .divider-line {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: 72vh;
    background-image: url("assets/index-hero.png");
    background-position: 72% 35%;
  }

  .hero-text {
    width: auto;
    max-width: 300px;
    padding: 0;
  }

  .hero-text h1,
  .hero-text p {
    text-align: left;
  }

  .hero-text .btn-primary {
    margin-left: 0;
  }
}
/* ===== SERVICE SHOWCASE ===== */

.service-showcase{
  padding:7rem 0;
  background:var(--cream);
}

.alt-bg{
  background:var(--cream-dark);
}

.service-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:center;
}

.reverse{
  direction:rtl;
}

.reverse *{
  direction:ltr;
}

.service-text{
  max-width:520px;
}

.service-features{
  margin-top:1.5rem;
  display:flex;
  flex-direction:column;
  gap:0.7rem;
}

.service-feature{
  display:flex;
  align-items:center;
  gap:0.6rem;
  color:var(--text-mid);
  font-size:0.95rem;
}

.service-feature span{
  color:var(--gold);
  font-size:0.8rem;
}

.service-image{
  position:relative;
  height:520px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}

.service-accent{
  position:absolute;
  top:-12px;
  left:-12px;
  right:12px;
  bottom:12px;
  border:2px solid var(--gold);
  border-radius:2px;
  z-index:-1;
}
.party-section{
  padding:6rem 0;
  background:var(--cream);
  text-align:center;
}

.party-grid{
  margin-top:3rem;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}

.party-card{
  position:relative;
  height:420px;
  overflow:hidden;
  border-radius:16px;
}

.party-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s;
}

.party-card:hover img{
  transform:scale(1.08);
}

.party-overlay{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:1.5rem;
  background:linear-gradient(transparent, rgba(0,0,0,.6));
  color:#fff;
}
.divider-ornament.center{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:12px auto 20px;
}

.divider-ornament.center::before,
.divider-ornament.center::after{
    content:"";
    width:60px;
    height:1px;
    background:var(--gold);
    margin:0 10px;
}
.feature-item i{
font-size:32px;
color:#c7a17a;
margin-bottom:12px;
}

.feature-item{
text-align:center;
max-width:220px;
}
/* FEATURE ICON CONTAINER */

.feature-container{
display:flex;
justify-content:center;
align-items:center;
background:#f5efe7;
padding:60px 50px;
margin-top:40px;
border-radius:6px;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.feature-box{
flex:1;
text-align:center;
padding:10px 20px;
transition:all 0.3s ease;
}

.feature-icon{
width:60px;
height:60px;
margin:0 auto 18px;
border:1px solid #c7a17a;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#c7a17a;
font-size:22px;
transition:all 0.3s ease;
}

.feature-box h4{
font-size:18px;
color:#3e2c23;
margin-bottom:6px;
}

.feature-box p{
font-size:14px;
color:#8c7a6a;
}

.feature-divider{
width:1px;
height:80px;
background:#d8c8b8;
margin:0 30px;
}

/* hover animation */

.feature-box:hover .feature-icon{
background:#c7a17a;
color:white;
transform:translateY(-5px);
}
.feature-container{
display:flex;
justify-content:space-between;
align-items:center;
background:#f5efe7;
padding:60px 40px;
border-radius:6px;
}

.feature-box{
flex:1;
text-align:center;
position:relative;
padding:0 30px;
}

/* ONLY add divider before boxes except the first */
.feature-box + .feature-box{
border-left:1px solid #d8c8b8;
}
.home-delivery{
padding:90px 0;
background:#f7f1ea;
}

.delivery-wrapper{
display:flex;
align-items:center;
justify-content:space-between;
gap:60px;
}

.delivery-text{
flex:1;
}

.delivery-text p{
margin-top:20px;
color:#7a6a5a;
line-height:1.7;
}

.delivery-image{
flex:1;
}

.delivery-image img{
width:100%;
border-radius:6px;
box-shadow:0 15px 40px rgba(0,0,0,0.1);
}
.about-luxury{
padding:120px 0;
background:#f7f1ea;
text-align:center;
}

.about-title{
font-size:42px;
margin-bottom:10px;
color:#3b2a22;
}

.about-text{
max-width:750px;
margin:25px auto;
line-height:1.8;
color:#6d5a4a;
font-size:17px;
}

.about-highlight-section{
background:#3b2a22;
padding:60px 0;
}

.about-highlights-box{
display:flex;
justify-content:space-between;
align-items:center;
gap:40px;
}

.highlight{
flex:1;
text-align:center;
}

.highlight h3{
font-size:34px;
color:#c7a777;
margin-bottom:6px;
}

.highlight p{
font-size:13px;
letter-spacing:1px;
text-transform:uppercase;
color:#f5ede6;
}

.highlight:not(:last-child){
border-right:1px solid rgba(255,255,255,0.25);
}
.about-button{
text-align:center;
margin-top:40px;
}

.btn-about{
display:inline-block;
padding:12px 36px;
border:1px solid #3b2a22;
color:#3b2a22;
text-decoration:none;
font-size:14px;
letter-spacing:1px;
text-transform:uppercase;
transition:all 0.3s ease;
}

.btn-about:hover{
background:#3b2a22;
color:#fff ;
}

/* =============================================
   MOBILE FIRST FIXES (NEW SECTIONS)
   ============================================= */
@media (max-width: 1024px) {
  .service-inner { grid-template-columns: 1fr; gap: 3rem; }
  .service-image { height: 420px; }

  .party-grid { grid-template-columns: 1fr 1fr; }
  .party-card { height: 320px; }

  .delivery-wrapper { flex-direction: column; gap: 2.5rem; }
  .delivery-image img { border-radius: 10px; }

  .about-highlights-box { flex-direction: column; gap: 1.8rem; }
  .highlight:not(:last-child) { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 1.2rem; }
}

@media (max-width: 768px) {
  .service-showcase { padding: 4.5rem 0; }
  .service-text { max-width: 100%; }
  .service-image { height: 340px; }

  .feature-container {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    padding: 22px 14px;
  }
  .feature-box {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 10px;
  }
  .feature-box + .feature-box { border-left: 1px solid #d8c8b8; border-top: 0; padding-top: 0; }
  .feature-icon {
    width: 48px;
    height: 48px;
    font-size: 18px;
    margin-bottom: 12px;
  }
  .feature-box h4 { font-size: 15px; }
  .feature-box p { font-size: 12px; }

  .party-section { padding: 4.5rem 0; }
  .party-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .party-card { height: auto; aspect-ratio: 4 / 3; }
  .party-card img { object-position: center 20%; }

  .home-delivery { padding: 70px 0; }
  .delivery-text { text-align: center; }
  .delivery-text p { margin-left: auto; margin-right: auto; }

  .about-luxury { padding: 80px 0; }
  .about-title { font-size: 30px; }
  .about-text { font-size: 15px; }

  .card-img-wrap { height: auto; aspect-ratio: 4 / 3; }
  .card-img-wrap img { object-position: center 20%; }
}

@media (max-width: 480px) {
  .service-image { height: 260px; }
  .party-card { aspect-ratio: 4 / 3; }
  .feature-container { padding: 18px 10px; }
  .feature-box { padding: 0 6px; }
  .feature-icon {
    width: 42px;
    height: 42px;
    font-size: 16px;
  }
  .feature-box h4 { font-size: 14px; }
  .feature-box p { font-size: 11px; }
  .home-delivery { padding: 60px 0; }
  .about-highlight-section { padding: 40px 0; }
  .highlight h3 { font-size: 28px; }

  .card-img-wrap { aspect-ratio: 4 / 3; }
}

/* =============================================
   LUXURY PRODUCTS (BRIDAL + PARTY)
   ============================================= */
.luxury-products {
  padding: 4.8rem 0 5.4rem;
  background: var(--cream);
}

.luxury-products .section-title {
  text-align: center;
  letter-spacing: 0.04em;
}

.luxury-products .section-sub {
  text-align: center;
  max-width: 640px;
  margin: 0.6rem auto 2rem;
}

@media (max-width: 768px) {
  .luxury-products .section-sub::after {
    content: "Swipe \2192";
    display: block;
    margin-top: 0.6rem;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-mid);
  }
}

.luxury-products .products-grid {
  max-width: 1200px;
  margin: 2.6rem auto 0;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.8rem;
}

.luxury-products .product-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(201, 169, 110, 0.25);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.luxury-products .product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.luxury-products .product-image {
  position: relative;
  overflow: hidden;
}

.luxury-products .product-image img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.luxury-products .product-card:hover img {
  transform: scale(1.06);
}

.luxury-products .hover-actions {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 0.6rem;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition);
}

.luxury-products .product-card:hover .hover-actions {
  opacity: 1;
  transform: translateY(0);
}

.luxury-products .hover-actions button {
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--brown-dark);
  padding: 0.7rem 0.85rem;
  border-radius: 999px;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), background var(--transition);
}

.luxury-products .hover-actions button:hover {
  transform: translateY(-2px);
  background: var(--gold-light);
}

.luxury-products .wishlist.active {
  background: rgba(255, 255, 255, 0.98);
}

.luxury-products .wishlist.active i {
  color: #b21b1b;
}

.luxury-products .product-info {
  padding: 1.1rem 1.2rem 1.4rem;
}

.luxury-products .product-info h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.luxury-products .price {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brown-dark);
  margin-bottom: 1rem;
}

.luxury-products .buttons {
  display: flex;
  gap: 0.7rem;
}

.luxury-products .cart-btn,
.luxury-products .buy-btn {
  flex: 1;
  padding: 0.6rem 0.8rem;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.luxury-products .cart-btn {
  background: transparent;
  border: 1px solid rgba(62, 31, 14, 0.55);
  color: var(--brown-dark);
}

.luxury-products .cart-btn:hover {
  background: var(--brown-dark);
  color: var(--cream);
}

.luxury-products .buy-btn {
  background: var(--gold);
  border: 1px solid transparent;
  color: var(--brown-dark);
}

.luxury-products .buy-btn:hover {
  background: #b99451;
}

@media (max-width: 1024px) {
  .luxury-products .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .luxury-products {
    overflow: hidden;
  }

  .luxury-products .products-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding: 0 1rem 1rem;
    scroll-padding: 1rem;
  }

  .luxury-products .product-image img {
    height: 280px;
  }

.luxury-products .product-card {
  flex: 0 0 100%;
  scroll-snap-align: center;
}
}

/* Custom Stitching Picks width alignment */
.custom-stitching-products .products-grid {
  max-width: none;
  padding: 0;
}


.product-dots {
  display: none;
}

@media (max-width: 768px) {
  .product-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.8rem;
  }

  .product-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(120, 90, 60, 0.35);
    border: none;
    padding: 0;
  }

  .product-dot.active {
    background: var(--gold);
    width: 18px;
  }
}

/* =============================================
   CART + FAVORITES PANELS
   ============================================= */
.nav-panels {
  position: relative;
  z-index: 3000;
}

.panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 10, 5, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

.panel-overlay.show {
  opacity: 1;
  visibility: visible;
}

.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(380px, 92vw);
  background: #fff;
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--transition);
  display: flex;
  flex-direction: column;
}

.side-panel.open {
  transform: translateX(0);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid rgba(201, 169, 110, 0.25);
  background: var(--cream-dark);
}

.panel-header h3 {
  font-size: 1.3rem;
  margin: 0;
}

.panel-close {
  border: 0;
  background: transparent;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--brown-dark);
}

.panel-body {
  padding: 1.2rem 1.4rem;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.panel-empty {
  text-align: center;
  color: var(--text-light);
  font-size: 0.95rem;
  padding: 2rem 0;
}

.panel-item {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.7rem;
  border: 1px solid rgba(201, 169, 110, 0.2);
  border-radius: 12px;
  background: rgba(250, 246, 240, 0.6);
}

.panel-link{
  display: contents;
  text-decoration:none;
  color:inherit;
}

.panel-item img {
  width: 70px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

.panel-item h4 {
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.panel-item .panel-price {
  font-size: 0.88rem;
  color: var(--text-mid);
}

.panel-item .panel-qty {
  font-size: 0.78rem;
  color: var(--text-light);
}

.panel-remove {
  border: 0;
  background: transparent;
  color: var(--text-light);
  font-size: 1rem;
  cursor: pointer;
}

.panel-footer {
  padding: 1.2rem 1.4rem 1.6rem;
  border-top: 1px solid rgba(201, 169, 110, 0.25);
  background: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.panel-total {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  color: var(--brown-dark);
}

/* =============================================
   CONTACT PAGE
   ============================================= */
.contact-section {
  padding: 5.5rem 0 4.5rem;
  background: var(--cream-dark);
}

.contact-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3.2rem;
}

.contact-header p {
  color: var(--text-mid);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 2.5rem;
  align-items: start;
}

.contact-form {
  background: #fff;
  border-radius: 22px;
  padding: 2.4rem 2.2rem;
  border: 1px solid rgba(201, 169, 110, 0.28);
  box-shadow: var(--shadow-md);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}

.form-row label {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
}

.form-row input,
.form-row select,
.form-row textarea {
  border: 1px solid rgba(62, 31, 14, 0.2);
  background: #fff;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-family: var(--font-sans);
  color: var(--text-dark);
  font-size: 0.95rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: rgba(201, 169, 110, 0.8);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.2);
}

.contact-btn {
  width: 100%;
  margin-top: 0.6rem;
}

.form-disclaimer{
  margin: 0.9rem 0 0.4rem;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-light);
}

.form-disclaimer a{
  color: var(--text-dark);
  text-decoration: underline;
}

.form-feedback{
  display:none;
  margin-top:14px;
  padding:12px 14px;
  border-radius:12px;
  font-size:0.92rem;
  line-height:1.6;
}

.form-feedback.show{
  display:block;
}

.form-feedback.success{
  background:rgba(49,91,63,0.1);
  border:1px solid rgba(49,91,63,0.18);
  color:#315b3f;
}

.form-feedback.error{
  background:rgba(138,47,47,0.09);
  border:1px solid rgba(138,47,47,0.15);
  color:#8a2f2f;
}

.contact-success-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:1300;
}

.contact-success-modal.open{
  display:flex;
}

.contact-success-backdrop{
  position:absolute;
  inset:0;
  background:rgba(37,20,10,0.52);
  backdrop-filter:blur(4px);
}

.contact-success-panel{
  position:relative;
  width:min(100%, 470px);
  padding:34px 28px 28px;
  border-radius:28px;
  background:linear-gradient(180deg, #fffdf9 0%, #f8efe4 100%);
  border:1px solid rgba(201,169,110,0.32);
  box-shadow:0 28px 70px rgba(58,29,15,0.24);
  text-align:center;
  overflow:hidden;
}

.contact-success-panel::before{
  content:"";
  position:absolute;
  inset:auto -40px -70px auto;
  width:170px;
  height:170px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(201,169,110,0.26) 0%, rgba(201,169,110,0) 72%);
  pointer-events:none;
}

.contact-success-close{
  position:absolute;
  top:14px;
  right:14px;
  width:40px;
  height:40px;
  border:none;
  border-radius:50%;
  background:rgba(93,46,20,0.08);
  color:#5f341d;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  transition:transform 0.2s ease, background 0.2s ease;
}

.contact-success-close:hover{
  background:rgba(93,46,20,0.14);
  transform:rotate(90deg);
}

.contact-success-badge{
  width:74px;
  height:74px;
  margin:0 auto 18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, #3dbb63, #159447);
  color:#fff;
  font-size:30px;
  box-shadow:0 16px 36px rgba(21,148,71,0.28);
}

.contact-success-panel h3{
  margin:0 0 10px;
  color:#3b2316;
  font-size:30px;
}

.contact-success-panel p{
  margin:0 auto;
  max-width:320px;
  color:#71523f;
  line-height:1.7;
}

.contact-success-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top:26px;
  flex-wrap:wrap;
}

.contact-success-whatsapp,
.contact-success-okay{
  min-width:170px;
  padding:13px 20px;
  border-radius:999px;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.contact-success-whatsapp{
  border:none;
  background:linear-gradient(135deg, #25d366, #179c52);
  color:#fff;
  box-shadow:0 16px 28px rgba(37,211,102,0.22);
}

.contact-success-okay{
  border:1px solid rgba(93,46,20,0.18);
  background:#fff;
  color:#5f341d;
  cursor:pointer;
}

.contact-success-whatsapp:hover,
.contact-success-okay:hover{
  transform:translateY(-2px);
}

.contact-info {
  background: var(--cream);
  border-radius: 22px;
  padding: 2.2rem;
  border: 1px solid rgba(201, 169, 110, 0.2);
  box-shadow: var(--shadow-sm);
}

.contact-info h3 {
  margin-bottom: 0.6rem;
}

.contact-info-list {
  margin: 1.6rem 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-info-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--text-mid);
  font-size: 0.95rem;
}

.contact-info-item i {
  color: var(--gold);
  font-size: 1rem;
  width: 20px;
  text-align: center;
}

.contact-map {
  padding: 2rem 0 6rem;
  background: var(--cream);
}


/* =============================================
   NEWSLETTER
   ============================================= */
.newsletter-section{
  padding: 5rem 0;
  background: var(--cream-dark);
}

.newsletter-inner{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: center;
  border: 1px solid rgba(201,169,110,0.35);
  border-radius: 18px;
  padding: 1.2rem 1.6rem;
  background: linear-gradient(145deg, rgba(255,255,255,0.88) 0%, rgba(240,232,218,0.76) 100%);
  box-shadow: 0 10px 28px rgba(62,31,14,0.08);
}

.newsletter-text h2{
  margin-bottom: 0.6rem;
}

.newsletter-text p{
  max-width: 56ch;
}

.newsletter-form,
.newsletter-cta{
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: flex-end;
}

.newsletter-form input{
  flex: 1;
  min-width: 220px;
  border: 1px solid rgba(62,31,14,0.2);
  border-radius: 999px;
  padding: 0.85rem 1.2rem;
  font-size: 0.9rem;
  background: #fff;
}

.newsletter-form .btn-primary,
.newsletter-cta .btn-primary{
  margin-top: 0;
  border-radius: 999px;
  padding: 0.85rem 1.6rem;
}

@media (max-width: 1024px){
  .newsletter-inner{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .newsletter-form,
  .newsletter-cta{
    justify-content: center;
  }
}

@media (max-width: 768px){
  .newsletter-inner{
    padding: 2rem 1.6rem;
  }

  .newsletter-form,
  .newsletter-cta{
    flex-direction: column;
    align-items: stretch;
  }

  .newsletter-form input,
  .newsletter-form .btn-primary,
  .newsletter-cta .btn-primary{
    width: 100%;
  }
}

/* =============================================
   CUSTOMER REVIEWS
   ============================================= */
.testimonials-section{
  padding: 5rem 0;
  background: var(--cream);
}

.testimonials-head{
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2.8rem;
}

.testimonials-swipe{
  display: none;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mid);
}

.testimonials-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}

.testimonial-card{
  background: #fff;
  border: 1px solid rgba(201,169,110,0.28);
  border-radius: 18px;
  padding: 1.8rem 1.6rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.testimonial-card::before{
  content: "";
  position: absolute;
  top: -60%;
  left: -60%;
  width: 220%;
  height: 220%;
  background: linear-gradient(120deg, transparent 45%, rgba(201,169,110,0.35) 50%, transparent 55%);
  transform: translateX(-60%) translateY(60%) rotate(0deg);
  opacity: 0;
  pointer-events: none;
  animation: shimmer-sweep 6s ease-in-out infinite;
}

@keyframes shimmer-sweep{
  0%{ opacity: 0; transform: translateX(-60%) translateY(60%) rotate(0deg); }
  10%{ opacity: 0.55; }
  35%{ opacity: 0; transform: translateX(60%) translateY(-60%) rotate(0deg); }
  100%{ opacity: 0; transform: translateX(60%) translateY(-60%) rotate(0deg); }
}

.testimonial-stars{
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.7rem;
}

.testimonial-quote{
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--text-dark);
  margin-bottom: 0.8rem;
}

.testimonial-name{
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 0.2rem;
}

.testimonial-meta{
  font-size: 0.85rem;
  color: var(--text-mid);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 1024px){
  .testimonials-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  .testimonials-swipe{
    display: block;
  }

  .testimonials-grid{
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1.2rem;
    padding-bottom: 0.8rem;
  }

  .testimonial-card{
    flex: 0 0 100%;
    scroll-snap-align: center;
  }

}

/* =============================================
   WHY CHOOSE SHILAM
   ============================================= */
.why-choose{
  padding: 5.5rem 0;
  background: var(--cream-dark);
}

.why-choose-head{
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2.8rem;
}

.why-choose-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6rem;
}

.why-choose-card{
  background: #fff;
  border: 1px solid rgba(201,169,110,0.28);
  border-radius: 18px;
  padding: 1.8rem 1.6rem;
  box-shadow: var(--shadow-sm);
}

.why-choose-card h3{
  margin-bottom: 0.6rem;
}

.why-choose-card p{
  color: var(--text-mid);
  font-size: 0.95rem;
}

@media (max-width: 1024px){
  .why-choose-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  .why-choose-grid{
    grid-template-columns: 1fr;
  }
}


.contact-highlights{
  padding: 3.2rem 0 4.2rem;
  background: #fff;
  border-top: 1px solid rgba(201,169,110,0.2);
  border-bottom: 1px solid rgba(201,169,110,0.2);
}

.contact-highlights-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  text-align:center;
}

.contact-highlight{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 1rem;
  color: var(--text-dark);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 500;
}

.contact-highlight i{
  font-size: 1.6rem;
  color: var(--brown-dark);
}

.map-frame {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(201, 169, 110, 0.35);
  box-shadow: var(--shadow-lg);
  height: 420px;
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .contact-section {
    padding: 4.5rem 0 4rem;
  }

  .contact-highlights{
    padding: 2.6rem 0 3.2rem;
  }

  .contact-highlights-grid{
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .contact-form,
  .contact-info {
    padding: 2rem 1.6rem;
  }

  .contact-success-panel{
    padding:30px 20px 22px;
    border-radius:24px;
  }

  .contact-success-panel h3{
    font-size:25px;
  }

  .contact-success-whatsapp,
  .contact-success-okay{
    width:100%;
  }

  .map-frame {
    height: 320px;
  }
}

/* PRODUCT SECTION */

.product-section{
    padding:80px 6%;
    background:#faf8f6;
}

.product-heading{
    font-size:32px;
    margin-bottom:40px;
    font-weight:500;
    text-align:center;
    letter-spacing:1px;
}

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

/* PRODUCT CARD */

.product-card{
    background:white;
    border-radius:8px;
    overflow:hidden;
    transition:0.3s;
    box-shadow:0 4px 18px rgba(0,0,0,0.06);
}

.product-card img{
    width:100%;
    height:420px;
    object-fit:cover;
}

.product-info{
    padding:18px;
}

.product-info h3{
    font-size:16px;
    font-weight:500;
    margin-bottom:6px;
}

.price{
    font-size:18px;
    font-weight:600;
}

/* Hover Effect */

.product-card:hover{
    transform:translateY(-6px);
    box-shadow:0 8px 30px rgba(0,0,0,0.15);
}

/* MOBILE */

@media(max-width:768px){

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

.product-card img{
    height:260px;
}

}
/* PRODUCT GRID */

.product-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin-top:40px;
}

/* PRODUCT CARD */

.product-card{
background:white;
border-radius:8px;
overflow:hidden;
transition:all .35s ease;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.product-card:hover{
transform:translateY(-8px);
box-shadow:0 18px 40px rgba(0,0,0,0.15);
}

/* IMAGE */

.product-image{
position:relative;
overflow:hidden;
}

.product-image img{
width:100%;
height:420px;
object-fit:cover;
transition:transform .6s ease;
}

.product-card:hover img{
transform:scale(1.08);
}

/* ICONS */

.product-icons{
position:absolute;
top:15px;
right:15px;
display:flex;
flex-direction:column;
gap:10px;
opacity:0;
transition:.3s;
}

.product-card:hover .product-icons{
opacity:1;
}

.product-icons button{
background:white;
border:none;
padding:10px;
border-radius:50%;
cursor:pointer;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

/* PRODUCT INFO */

.product-info{
padding:18px;
}

.product-info h3{
font-size:16px;
margin-bottom:5px;
}

.price{
font-weight:600;
font-size:18px;
margin-bottom:12px;
}

/* BUTTONS */

.product-buttons{
display:flex;
gap:10px;
}

.cart-btn{
flex:1;
padding:8px;
border:1px solid #222;
background:white;
cursor:pointer;
transition:.3s;
}

.cart-btn:hover{
background:#222;
color:white;
}

.buy-btn{
flex:1;
padding:8px;
background:#c6a75e;
border:none;
color:white;
cursor:pointer;
transition:.3s;
}

.buy-btn:hover{
background:#b9984d;
}

/* MOBILE */

@media(max-width:768px){

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

.product-image img{
height:260px;
}

}
/* PRODUCT GRID */

.product-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin-top:40px;
}
.product-card{
background:white;
border-radius:8px;
overflow:hidden;
transition:0.3s;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.product-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

/* IMAGE */

.product-image{
position:relative;
overflow:hidden;
}

.product-image img{
width:100%;
height:380px;
object-fit:cover;
transition:0.5s;
}

.product-card:hover img{
transform:scale(1.08);
}

/* HOVER BUTTONS */

.hover-actions{
position:absolute;
top:15px;
right:15px;
display:flex;
flex-direction:column;
gap:10px;
opacity:0;
transition:0.3s;
}

.product-card:hover .hover-actions{
opacity:1;
}

.hover-actions button{
background:white;
border:none;
padding:8px 10px;
cursor:pointer;
border-radius:50px;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

/* PRODUCT INFO */

.product-info{
padding:15px;
text-align:center;
}

.price{
font-weight:600;
font-size:18px;
margin:10px 0;
}

/* BUTTONS */

.buttons{
display:flex;
gap:10px;
}

.cart-btn{
flex:1;
padding:10px;
border:1px solid black;
background:white;
cursor:pointer;
}

.buy-btn{
flex:1;
padding:10px;
background:#c6a75e;
border:none;
color:white;
cursor:pointer;
}
@media(max-width:768px){

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

.product-image img{
height:250px;
}

}

.view-btn{
display:inline-block;
background:white;
border:none;
padding:8px 14px;
border-radius:20px;
font-size:14px;
text-decoration:none;
color:black;
cursor:pointer;
box-shadow:0 5px 15px rgba(0,0,0,0.15);
transition:0.3s;
}

.view-btn:hover{
background:#c6a75e;
color:white;
}

/* PRODUCT PAGE */

.product-page{
padding:80px 8%;
background:#faf8f6;
}


.product-container{
display:grid;
grid-template-columns:1.1fr 1fr;
gap:70px;
align-items:flex-start;
grid-template-areas:
  "gallery details-top"
  "details-bottom sizechart";
}

/* IMAGE */

.product-gallery{
display:flex;
flex-direction:row;
gap:16px;
align-items:flex-start;
grid-area:gallery;
}

.product-main-image{
flex:1;
order:0;
}

.product-main-image img{
width:100%;
border-radius:10px;
box-shadow:0 20px 50px rgba(0,0,0,0.12);
}

.product-thumbs{
display:grid;
grid-template-rows:repeat(4, 1fr);
grid-template-columns:none;
gap:10px;
width:90px;
order:-1;
}

.product-sizechart img{
width:100%;
border-radius:10px;
box-shadow:0 12px 30px rgba(0,0,0,0.08);
}


.product-sizechart-section{
grid-area:sizechart;
}

.product-details-top{
grid-area:details-top;
}

.product-details-bottom{
grid-area:details-bottom;
}

@media(min-width:769px){
}

.product-sizechart-section{
padding:0;
background:transparent;
}

.product-thumb{
border:1px solid rgba(0,0,0,0.08);
border-radius:10px;
padding:0;
background:#fff;
cursor:pointer;
overflow:hidden;
transition:0.2s;
}

.product-thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.product-thumb.active{
border-color:#c6a75e;
box-shadow:0 6px 16px rgba(198,167,94,0.25);
}

/* DETAILS */

.product-breadcrumbs{
display:flex;
gap:8px;
align-items:center;
font-size:0.9rem;
color:#8c6a44;
margin-bottom:12px;
}

.mobile-breadcrumbs{
display:none;
}



.product-breadcrumbs a{
color:#8c6a44;
text-decoration:none;
}

.product-breadcrumbs a:hover{
text-decoration:none;
}

.product-details-top h1{
font-size:34px;
margin-bottom:15px;
font-weight:500;
}

.product-price{
font-size:26px;
font-weight:600;
margin-bottom:20px;
color:#c6a75e;
display:none;
}

.product-desc{
font-size:15px;
line-height:1.7;
color:#555;
margin-bottom:30px;
}

.product-meta{
margin:8px 0 14px;
}

.product-qty{
display:flex;
align-items:center;
gap:14px;
margin:18px 0;
}

.qty-control{
display:inline-flex;
align-items:center;
border:1px solid rgba(0,0,0,0.12);
border-radius:8px;
overflow:hidden;
background:#fff;
}

.qty-btn{
width:36px;
height:36px;
border:0;
background:transparent;
cursor:pointer;
font-size:1.1rem;
color:#3c2a1a;
transition:background 0.2s;
}

.qty-btn:hover{
background:#f2e9dc;
}

.qty-input{
width:44px;
height:36px;
border:0;
text-align:center;
font-size:0.95rem;
color:#3c2a1a;
background:#fff;
}

.qty-input:focus{
outline:none;
}

.product-accordions{
margin-top:18px;
border-top:1px solid rgba(0,0,0,0.08);
}

.product-accordion{
border-bottom:1px solid rgba(0,0,0,0.08);
}

.product-accordion summary{
list-style:none;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px 0;
cursor:pointer;
color:#3c2a1a;
font-size:0.95rem;
}

.product-accordion summary::-webkit-details-marker{
display:none;
}

.product-accordion .acc-title{
display:flex;
align-items:center;
gap:10px;
}

.product-accordion .acc-title i{
color:#c6a75e;
font-size:0.95rem;
}

.product-accordion .acc-chevron{
width:22px;
height:22px;
border:1px solid rgba(0,0,0,0.12);
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:0.75rem;
color:#8c6a44;
transition:transform 0.2s ease;
}

.product-accordion[open] .acc-chevron{
transform:rotate(180deg);
}

.product-accordion .acc-body{
padding:0 0 12px 28px;
color:#6b5239;
font-size:0.9rem;
line-height:1.6;
}

.share-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:10px;
}

.share-icon{
width:40px;
height:40px;
border-radius:50%;
border:1px solid rgba(0,0,0,0.12);
background:#fff;
color:#3c2a1a;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:background 0.2s, border-color 0.2s, transform 0.2s, color 0.2s;
}

.share-icon i{
font-size:1rem;
}

.share-icon:hover{
background:#f2e9dc;
border-color:rgba(0,0,0,0.2);
transform:translateY(-1px);
}

.share-note{
font-size:0.8rem;
color:#8c6a44;
}

.product-rating{
display:flex;
align-items:center;
gap:10px;
}

.rating-badge{
background:#e9f5ef;
color:#1f7a4a;
font-weight:600;
padding:3px 8px;
border-radius:6px;
font-size:13px;
}

.rating-count{
font-size:13px;
color:#7a5a3c;
}

.product-price-row{
display:flex;
align-items:baseline;
gap:10px;
margin-bottom:6px;
}

.current-price{
font-size:26px;
font-weight:700;
color:#1d1a16;
}

.mrp{
font-size:14px;
color:#8c6a44;
text-decoration:line-through;
}

.discount{
font-size:14px;
color:#e15b2d;
font-weight:600;
}

.product-tax{
font-size:12px;
color:#1f7a4a;
margin-bottom:16px;
}

.section-title-sm{
font-size:12px;
letter-spacing:0.12em;
text-transform:uppercase;
color:#6d4f34;
margin-bottom:10px;
font-weight:600;
}

.product-colors{
margin:10px 0 18px;
}

.color-thumbs{
display:flex;
gap:8px;
}

.color-thumb{
width:44px;
height:58px;
border-radius:8px;
border:1px solid rgba(0,0,0,0.08);
padding:0;
overflow:hidden;
background:#fff;
cursor:pointer;
}

.color-thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.product-sizes{
margin:10px 0 18px;
}

.product-handedness{
margin:10px 0 18px;
}

.size-chart{
font-size:11px;
color:#c24b2f;
text-decoration:none;
margin-left:8px;
}

.size-options{
display:flex;
gap:8px;
flex-wrap:wrap;
}

.size-btn{
width:38px;
height:38px;
border-radius:50%;
border:1px solid rgba(0,0,0,0.2);
background:#fff;
font-size:12px;
cursor:pointer;
transition:0.2s;
}

.size-btn:hover{
border-color:#c6a75e;
color:#c6a75e;
}

.size-btn.selected{
border-color:#c6a75e;
background:#fff6e4;
color:#5a3a1f;
box-shadow:0 6px 16px rgba(198,167,94,0.25);
}

.handedness-options{
display:flex;
gap:16px;
flex-wrap:wrap;
}

.handedness-btn{
position:relative;
display:inline-flex;
align-items:center;
gap:12px;
padding:8px 0;
border:none;
background:transparent;
color:#3c2a1a;
font-size:14px;
cursor:pointer;
transition:color 0.2s ease;
}

.handedness-btn::before{
content:"";
width:22px;
height:22px;
border:1px solid rgba(60,42,26,0.65);
background:#fff;
box-shadow:inset 0 0 0 4px transparent;
transition:border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.handedness-btn:hover,
.handedness-btn.selected{
color:#2b1d14;
}

.handedness-btn.selected::before{
background:#1f1611;
border-color:#1f1611;
box-shadow:inset 0 0 0 3px #bdaea5;
}

.delivery-options{
border-top:1px solid rgba(0,0,0,0.08);
padding-top:16px;
margin:12px 0 18px;
}

.pincode-row{
display:flex;
gap:10px;
margin-bottom:10px;
}

.pincode-input{
flex:1;
padding:10px 12px;
border:1px solid rgba(0,0,0,0.2);
border-radius:6px;
font-size:13px;
}

.pincode-check{
padding:10px 14px;
border:1px solid #c6a75e;
background:#fff;
color:#c6a75e;
border-radius:6px;
font-size:12px;
cursor:pointer;
}

.delivery-notes{
font-size:12px;
color:#5a4a3a;
display:flex;
flex-direction:column;
gap:6px;
}

/* CUSTOM STITCHING CATEGORIES */
.stitching-categories{
  padding: 5.5rem 0;
  background: var(--cream);
}

.blouse-patterns-section{
  padding: 4.5rem 0;
  background:
    linear-gradient(180deg, rgba(247,242,234,0.96), rgba(250,246,240,1));
}

.blouse-patterns-intro{
  max-width: 680px;
  margin: 0 auto 2rem;
  text-align: center;
}

.blouse-patterns-intro .section-sub{
  margin-top: 0.8rem;
}

.blouse-patterns-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.blouse-pattern-card{
  position: relative;
  background: #fff;
  border: 1px solid rgba(201,169,110,0.22);
  border-radius: 18px;
  padding: 1.2rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.blouse-pattern-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), rgba(201,169,110,0.2));
}

.blouse-pattern-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  background: rgba(201,169,110,0.12);
  color: var(--brown-mid);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.blouse-pattern-card h3{
  margin: 0 0 0.55rem;
  font-size: 1.2rem;
}

.blouse-pattern-card p{
  margin: 0 0 1rem;
  color: var(--text-mid);
  font-size: 0.94rem;
  line-height: 1.65;
}

.blouse-pattern-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.blouse-pattern-meta span{
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  background: #f8f1e6;
  color: #7a5a3c;
  font-size: 0.8rem;
}

.blouse-pattern-link{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--brown-dark);
  font-weight: 500;
  font-size: 0.92rem;
}

.blouse-pattern-link:hover{
  color: var(--brown-mid);
}

@media (min-width: 640px) {
  .blouse-patterns-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .blouse-patterns-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.stitching-categories .section-title,
.stitching-categories .section-sub{
  text-align:center;
}

.stitching-categories .divider-ornament.center{
  margin-left:auto;
  margin-right:auto;
}

/* Signature categories (single section layout) */

.stitching-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 2.4rem;
}

.stitching-grid.three-up{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stitching-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(201,169,110,0.25);
  box-shadow: var(--shadow-sm);
  display:flex;
  flex-direction:column;
}

.stitching-image img{
  width:100%;
  height:220px;
  object-fit:cover;
}

.stitching-body{
  padding: 1.4rem 1.4rem 1.8rem;
}

.stitching-body h3{
  font-size:1.2rem;
  margin-bottom:0.6rem;
}

.stitching-body p{
  color: var(--text-mid);
  font-size:0.95rem;
  line-height:1.6;
  margin-bottom:1.2rem;
}

@media (max-width: 1024px) {
  .stitching-grid,
  .stitching-grid.three-up{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .stitching-grid,
  .stitching-grid.three-up{
    grid-template-columns: 1fr;
  }
  .stitching-image img{
    height:200px;
  }
}

/* STITCHING FRAMEWORK */
.stitching-framework{
  padding: 5.5rem 0;
  background: #f7f2ea;
}

.framework-header{
  text-align:center;
  max-width: 680px;
  margin: 0 auto 2.6rem;
}

.framework-header h2{
  font-size: 2.1rem;
}

.framework-header p{
  color: var(--text-mid);
  margin-top: 0.8rem;
}

.framework-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.framework-grid.four-up{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.framework-card{
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(201,169,110,0.2);
  padding: 1.8rem 1.6rem;
  box-shadow: var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap: 0.8rem;
}

.framework-card .btn-outline{
  background: var(--brown-dark);
  color: #fff;
  border-color: var(--brown-dark);
  margin-top: auto;
  align-self: flex-start;
}

.framework-card .btn-outline:hover{
  background: #2b1306;
  border-color: #2b1306;
}

.framework-card h3{
  font-size: 1.2rem;
  margin: 0;
}

.framework-card p{
  color: var(--text-mid);
  font-size: 0.95rem;
  margin: 0;
}

.framework-list{
  list-style:none;
  padding:0;
  margin: 0.6rem 0 0.8rem;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  color:#5a4a3a;
}

.framework-list li{
  display:flex;
  gap:0.5rem;
  align-items:flex-start;
}

.framework-list li::before{
  content:"\2726";
  color:#c6a75e;
  font-size:0.8rem;
  margin-top:2px;
}

@media (max-width: 1024px) {
  .framework-grid,
  .framework-grid.four-up{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .framework-grid,
  .framework-grid.four-up{
    grid-template-columns: 1fr;
  }
  .framework-header h2{
    font-size: 1.8rem;
  }
}

/* BLOUSE TYPE PAGE */
.blouse-types{
  padding: 5.5rem 0;
  background: var(--cream);
}

.blouse-types .section-title,
.blouse-types .section-sub{
  text-align:center;
}

.blouse-types .divider-ornament.center{
  margin-left:auto;
  margin-right:auto;
}

.blouse-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 2.4rem;
}

.blouse-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(201,169,110,0.25);
  box-shadow: var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap: 0.8rem;
  padding: 1.4rem;
}

.blouse-card .btn-outline{
  background: var(--brown-dark);
  color: #fff;
  border-color: var(--brown-dark);
}

.blouse-card .btn-outline:hover{
  background: #2b1306;
  border-color: #2b1306;
}

.blouse-img img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:14px;
}

.blouse-card h3{
  margin: 0.4rem 0 0;
}

.blouse-card p{
  color: var(--text-mid);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0.8rem;
}

.blouse-meta{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem 0.8rem;
  font-size:0.82rem;
  color:#7a5a3c;
  margin: 0.2rem 0 0.6rem;
}

.blouse-meta span{
  position:relative;
  padding-left:14px;
}

.blouse-meta span::before{
  content:"\2726";
  position:absolute;
  left:0;
  top:0;
  color:#c6a75e;
  font-size:0.75rem;
}

.blouse-divider{
  height:1px;
  background:rgba(0,0,0,0.08);
  margin: 0.6rem 0 0.7rem;
}

.blouse-price{
  font-size:0.9rem;
  color:#5a3a1f;
  font-weight:600;
  margin-bottom:0.8rem;
}

.blouse-details{
  padding: 5.5rem 0;
  background: #f7f2ea;
}

.details-inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items:start;
}

.details-block{
  background:#fff;
  border-radius:18px;
  padding: 2rem;
  border:1px solid rgba(201,169,110,0.2);
  box-shadow: var(--shadow-sm);
}

.details-block.accent{
  background: #fffaf3;
}

.details-block p{
  color: var(--text-mid);
}

.details-list{
  list-style:none;
  padding:0;
  margin: 1.2rem 0 0;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
}

.details-list li{
  display:flex;
  gap:0.5rem;
  align-items:flex-start;
}

.details-list li::before{
  content:"\2726";
  color:#c6a75e;
  font-size:0.8rem;
  margin-top:2px;
}

.process-steps{
  display:flex;
  flex-direction:column;
  gap: 1rem;
  margin: 1.2rem 0 1.4rem;
}

.step{
  display:flex;
  gap: 0.9rem;
  align-items:flex-start;
}

.step-no{
  font-weight:600;
  color:#c6a75e;
  font-size: 0.95rem;
  min-width: 36px;
}

.step h4{
  margin:0 0 0.2rem;
  font-size: 1rem;
}

.step p{
  margin:0;
  color: var(--text-mid);
  font-size: 0.9rem;
}

@media (max-width: 1024px) {
  .blouse-grid{
    grid-template-columns: 1fr;
  }
  .details-inner{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .blouse-grid{
    grid-template-columns: 1fr;
  }
  .blouse-img img{
    height: 180px;
  }
}

/* BLOUSE SLIDER */
.blouse-slider{
  padding: 5.5rem 0;
  background: var(--cream);
}

.blouse-slider .section-title,
.blouse-slider .section-sub{
  text-align:center;
}

.blouse-slider .divider-ornament.center{
  margin-left:auto;
  margin-right:auto;
}

.blouse-slide-track{
  margin-top: 2.2rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 1.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
}

.blouse-slide-card{
  scroll-snap-align: start;
  background: #fff;
  border-radius: 18px;
  padding: 0 0 1.2rem;
  border: 1px solid rgba(201,169,110,0.2);
  box-shadow: var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap: 0.6rem;
}

.blouse-slide-img{
  position: relative;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
}

.blouse-slide-img img{
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

.blouse-slide-card h4{
  font-size: 1rem;
  padding: 0 1rem;
  margin: 0.4rem 0 0;
}

.blouse-slide-price{
  padding: 0 1rem;
  color: #5a3a1f;
  font-weight: 600;
}

.blouse-slide-card h3{
  font-size: 1rem;
  padding: 0 1rem;
  margin: 0.4rem 0 0;
}

.blouse-slide-card .price{
  padding: 0 1rem;
  color: #5a3a1f;
  font-weight: 600;
  margin: 0;
}

.blouse-slide-card .buttons{
  padding: 0 1rem;
}

.blouse-slide-card .cart-btn{
  padding: 10px 18px;
  border-radius: 24px;
  font-size: 13px;
}

@media (max-width: 768px) {
  .blouse-slide-track{
    grid-auto-columns: 80%;
  }
  .blouse-slide-img img{
    height: 280px;
  }
}

/* FABRIC GUIDE */
.fabric-guide{
  padding: 5.5rem 0;
  background: #f7f2ea;
}

.fabric-guide .divider-ornament.center{
  justify-content: flex-start;
}
.fabric-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 2.4rem;
}

.fabric-card{
  background: var(--brown-dark);
  border-radius:16px;
  border:1px solid rgba(201,169,110,0.35);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
}

.fabric-card h3{
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
  color:#fff;
}

.fabric-card p{
  color: rgba(255,255,255,0.85);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.fabric-card ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}

.fabric-card li{
  display:flex;
  gap:0.5rem;
  align-items:flex-start;
  color: rgba(255,255,255,0.9);
}

.fabric-card li::before{
  content:"\2726";
  color:#c6a75e;
  font-size:0.8rem;
  margin-top:2px;
}

/* FAQ */
.blouse-faq{
  padding: 5.5rem 0;
  background: var(--cream);
}

.blouse-faq .section-title,
.blouse-faq .section-sub{
  text-align:center;
}

.blouse-faq .divider-ornament.center{
  margin-left:auto;
  margin-right:auto;
}

.faq-list{
  margin-top: 2rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.faq-item{
  background:#fff;
  border-radius:14px;
  border:1px solid rgba(201,169,110,0.2);
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow-sm);
}

.faq-item summary{
  cursor:pointer;
  font-weight:600;
  color:#3b2a1a;
  list-style:none;
}

.faq-item summary::-webkit-details-marker{
  display:none;
}

.faq-item summary::after{
  content:"+";
  float:right;
  color:#c6a75e;
  font-weight:600;
}

.faq-item[open] summary::after{
  content:"�";
}

.faq-item p{
  margin:0.8rem 0 0;
  color: var(--text-mid);
}

@media (max-width: 1024px) {
  .fabric-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .fabric-grid{
    grid-template-columns: 1fr;
  }
}


.pincode-status{
font-size:12px;
color:#6d4f34;
margin-bottom:10px;
}

.pincode-status.success{
color:#1f7a4a;
}

.pincode-status.error{
color:#b13a2f;
}

/* SIZE CHART MODAL */
.size-modal{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
z-index:4000;
}

.size-modal.open{
display:flex;
}

.size-modal-overlay{
position:absolute;
inset:0;
background:rgba(20,10,5,0.45);
}

.size-modal-panel{
position:relative;
background:#fffaf5;
width:min(760px, 92vw);
max-height:90vh;
overflow:auto;
border-radius:16px;
box-shadow:0 20px 50px rgba(0,0,0,0.25);
padding:20px 22px 24px;
z-index:1;
}

.size-modal-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
border-bottom:1px solid rgba(0,0,0,0.08);
padding-bottom:12px;
margin-bottom:16px;
}

.size-modal-title{
font-size:18px;
font-weight:600;
color:#2b2118;
}

.size-modal-sub{
font-size:12px;
color:#7a5a3c;
margin-top:2px;
}

.size-modal-close{
border:none;
background:transparent;
font-size:26px;
cursor:pointer;
color:#5a4a3a;
}

.size-tabs{
display:flex;
gap:12px;
border-bottom:1px solid rgba(0,0,0,0.08);
margin-bottom:14px;
}

.size-tab{
border:none;
background:transparent;
font-size:13px;
text-transform:uppercase;
letter-spacing:0.08em;
padding:8px 2px;
cursor:pointer;
color:#7a5a3c;
}

.size-tab.active{
color:#2b2118;
border-bottom:2px solid #c6a75e;
}

.size-tab-content{
display:none;
}

.size-tab-content.active{
display:block;
}

.size-table{
width:100%;
border-collapse:collapse;
font-size:13px;
}

.size-table th,
.size-table td{
text-align:left;
padding:10px 8px;
border-bottom:1px solid rgba(0,0,0,0.08);
}

.size-table th{
font-weight:600;
color:#5a4a3a;
}

.size-note{
margin-top:10px;
font-size:12px;
color:#6d4f34;
}

.measure-grid{
display:grid;
grid-template-columns:1.2fr 0.8fr;
gap:16px;
}

.measure-grid h4{
margin:0 0 8px;
font-size:14px;
}

.measure-grid ul{
margin:0;
padding-left:16px;
color:#5a4a3a;
font-size:13px;
line-height:1.6;
}

.measure-card{
background:rgba(198,167,94,0.15);
border:1px solid rgba(198,167,94,0.35);
border-radius:12px;
padding:12px;
font-size:13px;
color:#5a4a3a;
}

.measure-title{
font-weight:600;
margin-bottom:6px;
color:#2b2118;
}

@media(max-width:768px){
  .measure-grid{
    grid-template-columns:1fr;
  }
}

.product-highlights{
margin:22px 0 28px;
}

.product-highlights h3{
font-size:16px;
margin-bottom:10px;
font-weight:600;
}

.product-highlights ul{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:10px;
}

.product-highlights li{
display:flex;
gap:8px;
align-items:flex-start;
color:#5a4a3a;
}

.product-highlights li::before{
content:"\2726";
color:#c6a75e;
font-size:0.85rem;
margin-top:2px;
}

.reviews-section{
padding:40px 8% 70px;
background:#faf8f6;
}

.reviews-card{
border:1px solid rgba(0,0,0,0.08);
background:#fff;
border-radius:10px;
padding:26px 28px;
box-shadow:0 8px 24px rgba(0,0,0,0.05);
}

.reviews-card h2{
font-size:1.4rem;
margin-bottom:12px;
}

.reviews-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
flex-wrap:wrap;
}

.reviews-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
}

.reviews-stars{
display:flex;
align-items:center;
gap:10px;
color:#1f4fbf;
font-size:1rem;
}

.reviews-stars span{
color:#5a4a3a;
font-size:0.95rem;
}

.review-btn{
padding:8px 16px;
font-size:0.9rem;
}

.review-btn{
border-color:#3c2a1a;
color:#3c2a1a;
}

.review-btn:hover{
background:#3c2a1a;
color:#fff;
}

.review-form{
margin-top:18px;
padding-top:18px;
border-top:1px solid rgba(0,0,0,0.08);
display:none;
}

.review-form.open{
display:block;
}

.review-form-head{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:14px;
font-size:0.95rem;
color:#3c2a1a;
}

.review-cancel{
background:none;
border:none;
color:#3c2a1a;
text-decoration:underline;
cursor:pointer;
font-size:0.85rem;
}

.review-field{
display:flex;
flex-direction:column;
gap:6px;
margin-bottom:14px;
}

.review-field label{
font-size:0.85rem;
color:#5a4a3a;
}

.review-field input,
.review-field textarea{
border:1px solid rgba(0,0,0,0.15);
border-radius:6px;
padding:8px 10px;
font-size:0.9rem;
}

.rating-input{
display:flex;
gap:6px;
}

.rating-star{
background:none;
border:none;
cursor:pointer;
color:#1f4fbf;
font-size:1rem;
}

.rating-star.active{
color:#1f4fbf;
}

.review-submit{
background:#3c2a1a;
color:#fff;
border:none;
padding:9px 16px;
border-radius:6px;
cursor:pointer;
font-size:0.9rem;
}

.review-submit:hover{
background:#4a3523;
}

.reviews-list{
margin-top:18px;
display:flex;
flex-direction:column;
gap:14px;
}

.reviews-list.hidden{
display:none;
}

.review-item{
border-top:1px solid rgba(0,0,0,0.08);
padding-top:12px;
}

.review-item h4{
margin:0 0 6px;
font-size:1rem;
color:#3c2a1a;
}

.review-meta{
font-size:0.8rem;
color:#7a6248;
margin-bottom:6px;
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}

.review-body{
font-size:0.9rem;
color:#5a4a3a;
}

.review-delete{
margin-left:auto;
border:none;
background:none;
color:#8c6a44;
cursor:pointer;
font-size:0.8rem;
text-decoration:underline;
}

.related-section{
padding:40px 8% 80px;
background:#faf8f6;
}

.related-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:18px;
}

.related-head h2{
font-size:1.5rem;
color:#3c2a1a;
}

.related-controls{
display:flex;
gap:10px;
}

.related-nav{
width:36px;
height:36px;
border-radius:50%;
border:1px solid rgba(0,0,0,0.12);
background:#fff;
color:#3c2a1a;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
transition:background 0.2s, transform 0.2s;
}

.related-nav:hover{
background:#f2e9dc;
transform:translateY(-1px);
}

.related-track{
display:grid;
grid-auto-flow:column;
grid-auto-columns:100%;
gap:18px;
overflow-x:auto;
scroll-snap-type:x mandatory;
padding-bottom:6px;
}

.related-track::-webkit-scrollbar{
height:6px;
}

.related-track::-webkit-scrollbar-thumb{
background:rgba(0,0,0,0.15);
border-radius:20px;
}

.related-track .product-card{
border-radius:16px;
overflow:hidden;
scroll-snap-align:start;
}

.related-track .product-image img{
height:260px;
}

.related-track .product-info{
padding:14px;
}

.related-track .product-info h3{
font-size:0.98rem;
margin-bottom:6px;
color:#3c2a1a;
}

.related-track .price{
font-size:1rem;
margin-bottom:12px;
color:#8c6a44;
}

.related-track .product-buttons .cart-btn{
border-radius:999px;
padding:10px 18px;
background:#fff;
color:#3c2a1a;
border:1px solid #3c2a1a;
}

.related-track .product-buttons .cart-btn:hover{
background:#3c2a1a;
color:#fff;
}

.related-track .product-icons{
opacity:0;
pointer-events:none;
}

.related-track .product-card:hover .product-icons{
opacity:1;
pointer-events:auto;
}

@media(min-width:561px){
.related-track{
grid-auto-columns:calc((100% - 18px) / 2);
}
}

@media(min-width:992px){
.related-track{
grid-auto-columns:calc((100% - 54px) / 4);
}
}

.highlight-text{
color:#b88e3c;
font-weight:600;
background:rgba(198,167,94,0.14);
padding:2px 6px;
border-radius:6px;
}

.product-important-points{
margin:12px 0 6px;
display:flex;
flex-wrap:wrap;
gap:10px;
}

.highlight-pill{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 10px;
border-radius:999px;
background:#f2e9dc;
color:#3c2a1a;
border:1px solid rgba(0,0,0,0.08);
font-size:0.85rem;
font-weight:600;
}

/* BUTTONS */

.product-actions{
display:flex;
gap:20px;
}

.cart-btn{
padding:14px 30px;
border:1px solid #3c2a1a;
background:white;
color:#3c2a1a;
cursor:pointer;
font-size:15px;
transition:0.3s;
}

.cart-btn:hover{
background:#3c2a1a;
color:#fff;
}

.buy-btn{
padding:14px 30px;
background:#c6a75e;
border:none;
color:white;
font-size:15px;
cursor:pointer;
transition:0.3s;
}

.buy-btn:hover{
background:#b5954f;
}

/* MOBILE */

@media(max-width:768px){

.product-page{
padding:28px 0 50px;
}

.product-container{
grid-template-columns:1fr;
gap:40px;
padding:0 6%;
grid-template-areas:
  "breadcrumbs"
  "gallery"
  "details-top"
  "details-bottom"
  "sizechart";
}

.product-gallery{
flex-direction:column;
align-items:stretch;
}

.product-thumbs{
grid-template-columns:repeat(4, 1fr);
grid-template-rows:none;
width:100%;
order:1;
}

.product-thumb{
aspect-ratio:1 / 1;
}

.product-details-top h1{
font-size:26px;
}

.product-breadcrumbs{
display:none;
}

.mobile-breadcrumbs{
display:flex;
grid-area:breadcrumbs;
margin:0 0 8px;
font-size:0.82rem;
gap:6px;
white-space:nowrap;
}


.product-highlights li{
flex-wrap:wrap;
}

.highlight-text{
padding:2px 4px;
display:inline-block;
}

.reviews-card{
padding:22px 20px;
}

.reviews-stars{
flex-wrap:wrap;
row-gap:8px;
}

.reviews-stars span{
display:block;
line-height:1.5;
}

.reviews-actions{
width:100%;
display:grid;
grid-template-columns:1fr;
gap:10px;
}

.review-btn{
width:100%;
text-align:center;
}

}

@media(max-width:768px){
  .service-showcase .service-text{
    text-align:center;
  }

  .service-showcase .divider-ornament{
    justify-content:center;
  }
}
.service-image{
  width:100%;
  position:relative;
  overflow:hidden;
  border-radius:20px; /* if you are using rounded corners */
}
.service-image img{
  object-position: 10% center;
}

.service-showcase.alt-bg .service-inner{
  gap: 3.2rem;
}

.corporate-align-left .service-inner{
  gap: 3rem;
}

.corporate-align-left .service-text{
  margin-left: -1.25rem;
}

@media (max-width: 768px){
  .corporate-align-left .service-text{
    margin-left: 0;
  }
}

.service-showcase.alt-bg .service-image img{
  object-position: 0% center;
}

/* Category showcase spacing + mobile polish */
.category-showcase{
  padding: 5.2rem 0;
}

/* Make all category images consistent with blouse size on desktop */
.category-showcase .service-image{
  height: 420px;
}

.category-showcase .service-image img{
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1024px){
  .category-showcase{
    padding: 4.6rem 0;
  }
}

@media (max-width: 768px){
  .category-showcase .service-inner{
    display:flex;
    flex-direction:column;
    gap: 2rem;
  }

  .category-showcase .service-image{
    order: 1;
    height: 320px;
  }

  .category-showcase .service-text{
    order: 2;
  }

  .category-showcase .service-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ===== SERVICE SHOWCASE FIX ===== 

.service-inner{
display:flex;
align-items:center;
gap:40px;
}

.service-inner.reverse{
flex-direction:row-reverse;
}

.service-text{
flex:1;
max-width:520px;
}

.service-image{
flex:1;
}

.service-image img{
width:100%;
height:auto;
border-radius:20px;
display:block;
}

/* Mobile Fix 

@media (max-width:768px){

.service-inner,
.service-inner.reverse{
flex-direction:column;
gap:25px;
}

.service-text,
.service-image{
max-width:100%;
}

}
/* FIX SPACE BELOW CORPORATE IMAGE 

.service-image{
line-height:0;
}

.service-image img{
display:block;
width:100%;
height:auto;
}

.service-inner{
align-items:flex-start;
}
/* CORPORATE SECTION STABLE LAYOUT FIX 

.service-inner{
display:flex;
gap:40px;
align-items:stretch;
}

.service-text{
flex:1;
}

.service-image{
flex:1;
display:flex;
}

.service-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
border-radius:20px;
}

/* Mobile 
@media (max-width:768px){

.service-inner{
flex-direction:column;
}

.service-image img{
height:auto;
}

}*/
.service-image{
  width:100%;
  height:auto;
  overflow:hidden;
  border-radius:20px;
}

.service-image img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}
/* ===== FORCE FIX PRODUCT IMAGE GAP ===== */

.product-container{
display:grid !important;
grid-template-columns:1.1fr 1fr !important;
gap:40px !important;
align-items:start !important;
grid-auto-rows:auto !important;
}

.product-gallery{
height:auto !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
align-self:start !important;
}

.product-gallery img{
display:block !important;
width:100% !important;
height:auto !important;
object-fit:contain !important;
}

.product-container *{
margin-bottom:0 !important;
}

.product-details,
.product-info,
.product-detail-banner{
margin-top:0 !important;
padding-top:0 !important;
}
/* Space between Add to Cart and Buy Now */
.product-actions{
    display:flex;
    gap:20px;
    align-items:center;
}
.product-actions{
    gap:16px;
}
/* ===== MOBILE FIRST PRODUCT PAGE FIX ===== */

@media (max-width:768px){

/* container */
.product-container{
display:block !important;
padding:0 18px !important;
gap:0 !important;
}

/* gallery */
.product-gallery{
width:100% !important;
margin:0 auto 20px auto !important;
}

/* main image */
.product-gallery img{
width:100% !important;
height:auto !important;
border-radius:16px !important;
display:block !important;
}

/* thumbnails */
.product-thumbnails{
display:flex !important;
justify-content:center !important;
gap:10px !important;
margin-top:14px !important;
flex-wrap:nowrap !important;
overflow-x:auto !important;
padding-bottom:6px !important;
}

.product-thumbnails img{
width:64px !important;
height:64px !important;
border-radius:10px !important;
flex:0 0 auto !important;
}

/* details section */
.product-details{
width:100% !important;
margin-top:22px !important;
}

/* title */
.product-details h1{
font-size:22px !important;
line-height:1.3 !important;
}

/* price */
.product-price{
font-size:20px !important;
margin-top:6px !important;
}

/* quantity + buttons */
.product-actions{
display:flex !important;
flex-direction:column !important;
gap:12px !important;
margin-top:18px !important;
}

/* buttons */
.product-actions button{
width:100% !important;
height:48px !important;
font-size:15px !important;
border-radius:6px !important;
}

/* size chart section */
.size-chart{
margin-top:30px !important;
}

/* remove weird gaps */
.product-gallery,
.product-details,
.product-actions{
padding:0 !important;
}

}
/* ===== MOBILE SPACING FIX FOR SIZE CHART ===== */

@media (max-width:768px){

/* space below delivery + stitching badges */
.product-details .delivery-info,
.product-details .service-tags{
margin-bottom:20px !important;
}

/* push size chart image down */
.size-chart,
.product-size-chart{
margin-top:25px !important;
}

/* size chart image styling */
.size-chart img,
.product-size-chart img{
width:100% !important;
height:auto !important;
border-radius:14px !important;
display:block !important;
}

}
.product-details img{
margin-top:18px !important;
}
/* Create gap above size chart */
.product-sizechart-section{
margin-top:20px;
}
/* ===============================
   BLOUSE TRENDING SECTION
================================ */

.blouse-trending{
  padding:60px 0;
  background: var(--cream);
}

.blouse-trending .section-title,
.blouse-trending .section-sub{
  text-align: center;
}

.blouse-trending .divider-ornament.center{
  justify-content: center;
}

.trend-grid{
  display:flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap:28px;
  margin-top:40px;
}

.trend-card{
  background:#fff;
  border:1px solid rgba(201,169,110,0.25);
  border-radius:18px;
  overflow:hidden;
  transition:all .35s ease;
  text-align:center;
  box-shadow: var(--shadow-sm);
  flex: 0 0 280px;
  scroll-snap-align: start;
}

.trend-card img{
  width:100%;
  height:260px;
  object-fit:cover;
}

.trend-card h3{
  font-family:'Cormorant Garamond', serif;
  font-size:22px;
  margin-top:18px;
  color: var(--text-dark);
}

.trend-card p{
  font-size:14px;
  padding:10px 20px 24px;
  color: var(--text-mid);
  opacity: 1;
}

.trend-card:hover{
  transform:translateY(-6px);
  border-color:rgba(201,169,110,0.6);
}

@media(max-width:768px){
  .trend-grid{
    gap:1.2rem;
    padding-bottom:0.8rem;
  }

  .trend-card{
    flex:0 0 85%;
    scroll-snap-align:center;
  }
}

@media(min-width:768px){
  .trend-card{ flex-basis: 300px; }
}

@media(min-width:1100px){
  .trend-card{ flex-basis: 320px; }
}

/* DESIGNER BLOUSE PAGE */

.designer-hero{
padding:120px 0;
background:#f6f2eb;
text-align:center;
}

.designer-hero .hero-text{
max-width:700px;
margin:auto;
}

.designer-intro{
padding:80px 20px;
}

.intro-grid{
display:grid;
grid-template-columns:1fr;
gap:40px;
align-items:center;
}

.intro-img img{
width:100%;
border-radius:6px;
}

.intro-points{
margin-top:1.3rem;
padding-left:1.2rem;
display:flex;
flex-direction:column;
gap:0.7rem;
color:var(--text-mid);
}

.intro-points li{
line-height:1.8;
}

.designer-features{
background:#faf7f2;
padding:80px 20px;
text-align:center;
}

.feature-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
margin-top:40px;
}

.feature-item i{
font-size:28px;
color:#c8a97e;
margin-bottom:10px;
}

.designer-gallery{
padding:80px 20px;
}

.designer-gallery .section-title{
margin-bottom:22px;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.gallery-item{
position:relative;
}

.gallery-item img{
width:100%;
border-radius:6px;
}

.gallery-item span{
position:absolute;
bottom:10px;
left:10px;
background:white;
padding:6px 10px;
font-size:14px;
}

.designer-split{
padding:90px 20px;
}

.split-grid{
display:grid;
grid-template-columns:1fr;
gap:40px;
align-items:center;
}

.split-img img{
width:100%;
border-radius:6px;
}

.designer-fabric{
background:#faf7f2;
padding:80px 20px;
}

.fabric-grid{
display:grid;
grid-template-columns:1fr;
gap:40px;
align-items:center;
}

.fabric-img img{
width:100%;
border-radius:6px;
}

.designer-process{
padding:90px 20px;
text-align:center;
}

.process-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
margin-top:40px;
}

.process-step span{
display:inline-block;
font-size:22px;
margin-bottom:10px;
color:#c8a97e;
}

.designer-occasion{
padding:80px 20px;
background:#faf7f2;
}

.designer-occasion .section-title{
margin-bottom:22px;
}

.occasion-grid{
display:grid;
grid-template-columns:1fr;
gap:30px;
}

.occasion-card img{
width:100%;
border-radius:6px;
margin-bottom:10px;
}

.designer-why{
padding:90px 20px;
}

.why-grid{
display:grid;
grid-template-columns:1fr;
gap:40px;
align-items:center;
}

.why-grid img{
width:100%;
border-radius:6px;
}

.designer-cta{
padding:100px 20px;
text-align:center;
background:#f6f2eb;
}

@media(min-width:900px){

.intro-grid,
.split-grid,
.fabric-grid,
.why-grid{
grid-template-columns:1fr 1fr;
}

.intro-grid{
gap:5rem;
}

.split-grid{
gap:5rem;
}

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

.feature-grid{
grid-template-columns:repeat(4,1fr);
}

.process-grid{
grid-template-columns:repeat(4,1fr);
}

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

}
.designer-hero{
position:relative;
padding:160px 20px;
background:url("./assets/desinger-blouse-hero.png") center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

/* remove strong overlay */
.hero-overlay{
display:none;
}

/* text styling */

.hero-inner{
position:relative;
z-index:2;
max-width:800px;
margin:auto;
}

/* add subtle text shadow for readability */

.hero-text h1{
font-size:52px;
margin:15px 0;
text-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.hero-text p{
font-size:18px;
max-width:650px;
margin:auto;
margin-bottom:25px;
text-shadow:0 1px 6px rgba(0,0,0,0.08);
}

/* mobile */

@media(max-width:768px){

.hero-text h1{
font-size:36px;
}

.designer-hero{
padding:120px 20px;
}

}
.designer-hero{
animation:heroZoom 18s ease-in-out infinite alternate;
}

@keyframes heroZoom{
0%{background-size:100%;}
100%{background-size:110%;}
}
.container{
  width: 85%;
  max-width: 1180px;
  margin: 0 auto;
}

/* ===== HERO SECTION GRID FIX (ALL PAGES) ===== */

.hero,
.page-hero,
.main-hero {
  display: flex;
  align-items: center;
  min-height: 80vh;
}

/* Align hero content with site container/logo */
.hero-content,
.hero-text,
.page-hero-content {
  max-width: 520px;
  margin-left: max(40px, calc((100% - 1200px) / 2));
  z-index: 2;
}

/* prevent text touching the image */
.hero h1,
.hero h2 {
  line-height: 1.2;
  margin-bottom: 16px;
}

.hero p {
  margin-bottom: 28px;
  max-width: 480px;
}

/* mobile adjustment */
@media (max-width:768px){

  .hero-content,
  .hero-text,
  .page-hero-content{
    margin-left: 24px;
    margin-right: 24px;
    max-width: 100%;
  }

}
/* CAREER SECTION */
.career-section {
  padding: 5rem 0;
  background: var(--cream-dark);
  text-align: center;
}

.career-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.career-card {
  background: #fff;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

/* MODAL */
.career-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(44, 24, 16, 0.48);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}

.career-modal-content {
  position: relative;
  width: min(100%, 520px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,246,240,0.98));
  padding: 28px;
  border-radius: 24px;
  border: 1px solid rgba(201,169,110,0.26);
  box-shadow: 0 26px 70px rgba(62,31,14,0.22);
}

.career-modal input,
.career-modal textarea {
  width: 100%;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(107,45,26,0.24);
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
  color: var(--text-dark);
  font-family: var(--font-sans);
  font-size: 0.96rem;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.career-modal input::placeholder,
.career-modal textarea::placeholder {
  color: #8a7466;
}

.career-modal input:focus,
.career-modal textarea:focus {
  outline: none;
  background: #fff;
  border-color: rgba(201,169,110,0.9);
  box-shadow: 0 0 0 4px rgba(201,169,110,0.14);
}

.career-modal textarea {
  min-height: 120px;
  resize: vertical;
}

.career-modal input[type="file"] {
  padding: 12px 14px;
  cursor: pointer;
}

.career-modal input[type="file"]::file-selector-button {
  border: 0;
  margin-right: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--brown-dark);
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.career-modal input[type="file"]::file-selector-button:hover {
  background: var(--brown-mid);
  transform: translateY(-1px);
}

.career-modal form button[type="submit"] {
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brown-dark), var(--brown-mid));
  color: var(--cream);
  padding: 14px 18px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  box-shadow: 0 14px 30px rgba(62,31,14,0.18);
}

.career-modal form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(62,31,14,0.24);
}

.franchise-cta {
  position: relative;
  padding: 4rem 0;
  background:
    radial-gradient(circle at top left, rgba(201,169,110,0.15), transparent 28%),
    linear-gradient(135deg, #fffaf3 0%, #f4e9dc 100%);
  overflow: hidden;
}

.franchise-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(107,45,26,0.04), transparent 36%),
    radial-gradient(circle at bottom right, rgba(62,31,14,0.08), transparent 30%);
  pointer-events: none;
}

.franchise-cta .container {
  position: relative;
  z-index: 1;
}

.franchise-cta-card {
  display: grid;
  gap: 1.6rem;
  padding: 2rem;
  border-radius: 30px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(201,169,110,0.24);
  box-shadow: 0 24px 55px rgba(62,31,14,0.08);
}

.franchise-cta-copy h2 {
  margin-bottom: 0.8rem;
}

.franchise-cta-copy p {
  margin-bottom: 1rem;
  max-width: 40rem;
}

.franchise-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: var(--brown-mid);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.franchise-kicker::before {
  content: "";
  width: 42px;
  height: 1px;
  background: rgba(107,45,26,0.35);
}

.franchise-points {
  display: grid;
  gap: 0.85rem;
  margin: 1.25rem 0 1.5rem;
}

.franchise-point {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  color: var(--text-mid);
  line-height: 1.7;
}

.franchise-point span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(201,169,110,0.16);
  color: var(--brown-dark);
  font-size: 0.88rem;
  font-weight: 700;
}

.franchise-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.franchise-cta-aside {
  display: grid;
  gap: 1rem;
}

.franchise-cta-stat {
  padding: 1.2rem 1.25rem;
  border-radius: 22px;
  background: linear-gradient(145deg, var(--brown-dark), #744229);
  color: var(--cream);
}

.franchise-cta-stat strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 1.8rem;
  font-family: var(--font-serif);
  color: var(--gold-light);
}

.franchise-cta-note {
  padding: 1.2rem 1.25rem;
  border-radius: 22px;
  background: rgba(107,45,26,0.06);
  border: 1px solid rgba(107,45,26,0.12);
}

.franchise-cta-note p:last-child,
.franchise-cta-copy p:last-child {
  margin-bottom: 0;
}

@media (min-width: 960px) {
  .franchise-cta-card {
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
    align-items: start;
    padding: 2.5rem;
  }
}

.career-modal-content > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: auto;
  margin-bottom: 10px;
  border-radius: 999px;
  color: var(--brown-dark);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.career-modal-content > span:hover {
  background: rgba(201,169,110,0.16);
  color: var(--brown-mid);
  transform: rotate(90deg);
}

@media (max-width: 560px) {
  .career-modal {
    padding: 16px;
  }

  .career-modal-content {
    padding: 22px 18px;
    border-radius: 20px;
  }

  .franchise-cta {
    padding: 3rem 0;
  }

  .franchise-cta-card {
    padding: 1.4rem;
    border-radius: 24px;
  }

  .franchise-cta-actions .btn-primary,
  .franchise-cta-actions .btn-outline {
    width: 100%;
    justify-content: center;
  }
}

.career-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.career-card {
  background: white;
  padding: 2rem;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: 0.3s;
  text-align: left;
}

.career-card:hover {
  transform: translateY(-8px);
}

.career-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.career-card p {
  font-size: 14px;
  color: #6b5b4b;
}

.skills {
  margin: 10px 0;
  font-size: 12px;
  color: #a67c52;
}

.admin-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  text-decoration: none;
}

.btn-edit {
  background: #c9a96e;
  color: white;
}

.btn-delete {
  background: #b22222;
  color: white;
}


.salwar-hero {
  background-image: url("assets/4.png");
}

@media (max-width: 768px) {
  .salwar-hero {
    background-image: url("assets/4.png");
  }
}
.blousetype-hero {
  background-image: url("assets/hero.png");
}

@media (max-width: 768px) {
  .blousetype-hero {
    background-image: url("assets/hero.png");
  }
}
.chudidhar-hero {
  background-image: url("assets/5.png");
}

@media (max-width: 768px) {
  .chudidhar-hero {
    background-image: url("assets/5.png");
  }
}
.corporate-hero {
  background-image: url("assets/11.png");
}

@media (max-width: 768px) {
  .corporate-hero {
    background-image: url("assets/11.png");
  }
}
.custom-hero {
  background-image: url("assets/custom-stitching-hero.png");
}

@media (max-width: 768px) {
  .custom-hero {
    background-image: url("assets/custom-stitching-hero.png");
  }
}
.gift-hero {
  background-image: url("assets/giftshero.jpg");
}

@media (max-width: 768px) {
  .gift-hero {
    background-image: url("assets/giftshero.jpg");
  }
}
.designer-hero {
  background-image: url("assets/desinger-blouse-hero.png");
}

@media (max-width: 768px) {
  .designer-hero {
    background-image: url("assets/designer-blouse-hero.png");
  }
}
.dress-hero {
  background-image: url("assets/9.png");
}

@media (max-width: 768px) {
  .dress-hero {
    background-image: url("assets/9.png");
  }
}
.heavy-hero {
  background-image: url("assets/16.png");
}

@media (max-width: 768px) {
  .heavy-hero {
    background-image: url("assets/16.png");
  }
}
.hospital-hero {
  background-image: url("assets/13.png");
}

@media (max-width: 768px) {
  .hospital-hero {
    background-image: url("assets/13.png");
  }
}
.jewellery-hero {
  background-image: url("assets/12.png");
}

@media (max-width: 768px) {
  .jewellery-hero {
    background-image: url("assets/12.png");
  }
}
.longgown-hero {
  background-image: url("assets/15.png");
}

@media (max-width: 768px) {
  .longgown-hero {
    background-image: url("assets/15.png");
  }
}
.office-hero {
  background-image: url("assets/11.png");
}

@media (max-width: 768px) {
  .office-hero {
    background-image: url("assets/11.png");
  }
}
.padded-hero {
  background-image: url("assets/padded-hero.png");
}

@media (max-width: 768px) {
  .padded-hero {
    background-image: url("assets/padded-hero.png");
  }
}
.palazzo-hero {
  background-image: url("assets/6.png");
}

@media (max-width: 768px) {
  .palazzo-hero {
    background-image: url("assets/6.png");
  }
}
.partywearstitching-hero {
  background-image: url("assets/hero-partywear.png");
}

@media (max-width: 768px) {
  .partywearstitching-hero {
    background-image: url("assets/hero-partywear.png");
  }
}
.prebridal-hero {
  background-image: url("assets/2.png");
}

@media (max-width: 768px) {
  .prebridal-hero {
    background-image: url("assets/2.png");
  }
}
.pdress-hero {
  background-image: url("assets/8.png");
}

@media (max-width: 768px) {
  .pdress-hero {
    background-image: url("assets/8.png");
  }
}
.psuit-hero {
  background-image: url("assets/8.png");
}

@media (max-width: 768px) {
  .psuit-hero {
    background-image: url("assets/8.png");
  }
}
.reception-hero {
  background-image: url("assets/12.png");
}

@media (max-width: 768px) {
  .reception-hero {
    background-image: url("assets/12.png");
  }
}
.school-hero {
  background-image: url("assets/3.png");
}

@media (max-width: 768px) {
  .school-hero {
    background-image: url("assets/3.png");
  }
}
.stitching-hero {
  background-image: url("assets/traininghero.jpg");
}

@media (max-width: 768px) {
  .stitching-hero {
    background-image: url("assets/traininghero.jpg");
  }
}
.training-hero {
  background-image: url("assets/traininghero.jpg");
}

@media (max-width: 768px) {
  .training-hero {
    background-image: url("assets/traininghero.jpg");
  }
}
.partywear-hero {
  background-image: url("assets/hero-partywear.png");
}

@media (max-width: 768px) {
  .partywear-hero {
    background-image: url("assets/hero-partywear.png");
  }
}

/* =============================================
   HOMEPAGE HERO — MOBILE FIX (all phones)
   Stacked layout: image fills frame, text
   anchored at bottom over a cream gradient.
   These rules must stay at EOF to win cascade.
   ============================================= */
@media (max-width: 767px) {
  .hero {
    min-height: 88vh;
    min-height: 88svh;
    background-image: url("assets/index-hero.png");
    background-position: 75% 15%;
    background-size: cover;
    align-items: flex-end;
    padding: 0 !important;
  }

  /* Full-width bottom gradient */
  .hero::before {
    width: 100% !important;
    height: 58%;
    top: auto !important;
    bottom: 0;
    background: linear-gradient(
      to top,
      rgba(250, 246, 240, 1.00)  0%,
      rgba(250, 246, 240, 0.93) 30%,
      rgba(250, 246, 240, 0.60) 62%,
      rgba(250, 246, 240, 0.00) 100%
    ) !important;
    border-right: none !important;
  }

  /* Reset container width so it spans full screen */
  .hero-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 1.5rem 3rem !important;
    margin: 0 !important;
    justify-content: flex-start;
    align-items: flex-start;
  }

  /* Text block — flush left, no rogue auto margins */
  .hero-text {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .hero-text h1 {
    font-size: clamp(1.85rem, 7vw, 2.3rem) !important;
    line-height: 1.18 !important;
    text-align: left !important;
    margin: 0 0 0.5rem !important;
    text-shadow: none !important;
  }

  .hero-text .divider-line {
    margin: 0.8rem 0 1rem !important;
    width: 40px;
  }

  /* Remove margin:auto from p — it was centering p while h1 stayed left */
  .hero-text p {
    margin: 0 0 1.1rem !important;
    max-width: 34ch !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    text-align: left !important;
    text-shadow: none !important;
  }

  .hero-text .btn-primary {
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Extra-small phones (≤ 400px) */
@media (max-width: 400px) {
  .hero {
    min-height: 85vh;
    min-height: 85svh;
    background-position: 80% 15%;
  }

  .hero-inner {
    padding: 0 1.2rem 2.2rem !important;
  }

  .hero-text h1 {
    font-size: 1.75rem !important;
  }
}


/* =============================================
   MEASUREMENT APPOINTMENT WIDGET
   ============================================= */

/* ── Sticky trigger button ── */
.appt-sticky-btn {
  position: fixed;
  bottom: 28px;
  left: 20px;
  z-index: 1080;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px 11px 13px;
  background: var(--brown-dark);
  color: var(--gold);
  border: 1.5px solid rgba(201,169,110,0.28);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(62,31,14,0.28);
  animation: apptBtnSlideUp 0.65s cubic-bezier(0.32, 0.72, 0, 1) 1.4s both;
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.32s cubic-bezier(0.32, 0.72, 0, 1),
              background 0.22s ease;
}

.appt-sticky-btn:hover {
  transform: translateY(-3px);
  background: var(--brown-mid);
  box-shadow: 0 10px 32px rgba(62,31,14,0.36);
}

.appt-sticky-btn:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

.appt-sticky-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.appt-sticky-full { display: inline; }
.appt-sticky-short { display: none; }

.appt-sticky-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  animation: apptDotPulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes apptBtnSlideUp {
  from { transform: translateY(130%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes apptDotPulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%       { transform: scale(1.6); opacity: 0.55; }
}

/* ── Modal overlay ── */
.appt-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 4400;
  transition: opacity 0.28s cubic-bezier(0.32, 0.72, 0, 1),
              visibility 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.appt-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.appt-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(44, 24, 16, 0.62);
  backdrop-filter: blur(4px);
}

/* ── Modal panel ── */
.appt-modal-panel {
  position: relative;
  width: min(100%, 540px);
  max-height: min(94vh, 740px);
  overflow-y: auto;
  background: var(--cream);
  border-radius: 20px;
  border-top: 2px solid rgba(201,169,110,0.55);
  padding: 2rem 1.85rem 1.85rem;
  box-shadow: 0 28px 72px rgba(62,31,14,0.26);
  transform: scale(0.94) translateY(20px);
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  scrollbar-width: thin;
  scrollbar-color: var(--gold-light) transparent;
}

.appt-modal.open .appt-modal-panel {
  transform: scale(1) translateY(0);
}

.appt-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(62,31,14,0.07);
  color: var(--text-mid);
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease;
}

.appt-modal-close:hover {
  background: rgba(62,31,14,0.14);
  color: var(--brown-dark);
}

/* ── Modal header ── */
.appt-modal-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.55rem;
}

.appt-modal-kicker-line {
  flex: 1;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
  max-width: 28px;
}

.appt-modal-head {
  margin-bottom: 1.4rem;
  padding-right: 2.2rem;
}

.appt-modal-head h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 600;
  color: var(--brown-dark);
  line-height: 1.1;
  margin-bottom: 0.38rem;
}

.appt-modal-head p {
  font-size: 0.88rem;
  color: var(--text-mid);
  line-height: 1.65;
}

/* ── Form layout ── */
.appt-form {
  display: grid;
  gap: 0.9rem;
}

.appt-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

.appt-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.appt-field label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dark);
}

.appt-optional {
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--text-light);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 3px;
}

.appt-field input,
.appt-field textarea {
  border: 1.5px solid var(--beige);
  border-radius: 6px;
  padding: 10px 13px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-dark);
  background: var(--white);
  outline: none;
  width: 100%;
  transition: border-color 0.22s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

.appt-field input::placeholder,
.appt-field textarea::placeholder {
  color: var(--text-light);
  font-size: 0.85rem;
}

.appt-field input:focus,
.appt-field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,169,110,0.13);
}

.appt-field input.appt-input-error,
.appt-field textarea.appt-input-error {
  border-color: #b83c35;
}

.appt-field-error {
  font-size: 0.72rem;
  color: #9f2f25;
  min-height: 14px;
  line-height: 1.3;
}

.appt-field textarea {
  resize: vertical;
  min-height: 82px;
  max-height: 140px;
}

/* ── Submit button ── */
.appt-submit-btn {
  width: 100%;
  padding: 13px 20px;
  background: var(--brown-dark);
  color: var(--gold);
  border: none;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
  margin-top: 0.25rem;
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
              background 0.22s ease,
              box-shadow 0.22s ease;
}

.appt-submit-btn:hover {
  background: var(--brown-mid);
  box-shadow: 0 6px 22px rgba(62,31,14,0.2);
}

.appt-submit-btn:active {
  transform: scale(0.98);
  transition-duration: 0.1s;
}

.appt-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Inline feedback ── */
.appt-feedback {
  font-size: 0.82rem;
  min-height: 18px;
  color: var(--text-mid);
}

.appt-feedback.show.error   { color: #9f2f25; }
.appt-feedback.show.success { color: #1f7a4a; }

/* ── Thank-you / success state ── */
.appt-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.2rem 0 0.6rem;
  gap: 1rem;
  animation: apptSuccessFadeIn 0.42s cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes apptSuccessFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.appt-success-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(201,169,110,0.1);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

.appt-success h3 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--brown-dark);
  line-height: 1.15;
}

.appt-success p {
  font-size: 0.9rem;
  color: var(--text-mid);
  max-width: 340px;
  line-height: 1.7;
}

.appt-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 26px;
  background: #25D366;
  color: #fff;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.22s ease;
}

.appt-wa-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37,211,102,0.3);
}

.appt-success-done {
  background: none;
  border: none;
  color: var(--text-light);
  font-family: var(--font-sans);
  font-size: 0.84rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}

.appt-success-done:hover { color: var(--brown-dark); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .appt-sticky-btn {
    bottom: 20px;
    left: 14px;
    padding: 9px 13px 9px 11px;
    font-size: 0.77rem;
    gap: 7px;
  }

  .appt-modal {
    padding: 0.7rem;
    align-items: flex-end;
  }

  .appt-modal-panel {
    width: 100%;
    max-height: 88vh;
    border-radius: 18px 18px 12px 12px;
    padding: 1.5rem 1.1rem 1.3rem;
  }

  .appt-form-row {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
}

@media (max-width: 480px) {
  .appt-sticky-full  { display: none; }
  .appt-sticky-short { display: inline; }

  .appt-sticky-dot { display: none; }
}

/* =============================================
   OTHER INNER PAGE HEROES — MOBILE ONLY
   .inner-page-hero marks the 23 inner pages (every
   about-hero variant except about.html and contact.html,
   which keep their own image/layout). Forces hero1.jpg
   and switches to the same full-bleed, bottom-anchored
   text layout used by the homepage hero so titles never
   overlap the photo. Placed last to win the cascade.
   ============================================= */
@media (max-width: 767px) {
  .inner-page-hero {
    background-image: url("assets/hero1.jpg") !important;
    background-position: center top !important;
    background-size: cover !important;
    min-height: 88vh;
    min-height: 88svh;
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .inner-page-hero .about-hero-bg {
    width: 100% !important;
    height: 58%;
    top: auto !important;
    bottom: 0;
    background: linear-gradient(
      to top,
      rgba(250, 246, 240, 1.00) 0%,
      rgba(250, 246, 240, 0.93) 30%,
      rgba(250, 246, 240, 0.60) 62%,
      rgba(250, 246, 240, 0.00) 100%
    ) !important;
  }

  .inner-page-hero .about-hero-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 1.5rem 3rem !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  .inner-page-hero .about-hero-text {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .inner-page-hero .about-hero-text h1 {
    font-size: clamp(1.85rem, 7vw, 2.3rem) !important;
    line-height: 1.18 !important;
    margin: 0 0 0.5rem !important;
    text-shadow: none !important;
  }

  .inner-page-hero .about-hero-text .divider-line {
    margin: 0.8rem 0 1rem !important;
    width: 40px;
  }

  .inner-page-hero .about-hero-text p {
    margin: 0 0 1.1rem !important;
    max-width: 34ch !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    text-align: left !important;
    text-shadow: none !important;
  }

  .inner-page-hero .about-hero-text .btn-primary {
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 400px) {
  .inner-page-hero {
    background-position: 55% top !important;
  }

  .inner-page-hero .about-hero-inner {
    padding: 0 1.2rem 2.2rem !important;
  }

  .inner-page-hero .about-hero-text h1 {
    font-size: 1.75rem !important;
  }
}

/* =============================================
   ABOUT PAGE HERO — MOBILE ONLY
   Uses assets/about-hero.png and the same full-bleed,
   bottom-anchored text layout as the inner pages so the
   title/paragraph never overlap the photo. Index and
   contact keep their own rules above. Placed last to
   win the cascade.
   ============================================= */
@media (max-width: 767px) {
  .about-page-hero {
    background-image: url("assets/about-hero.png") !important;
    background-position: center top !important;
    background-size: cover !important;
    min-height: 88vh;
    min-height: 88svh;
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .about-page-hero .about-hero-bg {
    width: 100% !important;
    height: 58%;
    top: auto !important;
    bottom: 0;
    background: linear-gradient(
      to top,
      rgba(250, 246, 240, 1.00) 0%,
      rgba(250, 246, 240, 0.93) 30%,
      rgba(250, 246, 240, 0.60) 62%,
      rgba(250, 246, 240, 0.00) 100%
    ) !important;
  }

  .about-page-hero .about-hero-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 1.5rem 3rem !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  .about-page-hero .about-hero-card {
    display: none !important;
  }

  .about-page-hero .about-hero-text {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .about-page-hero .about-hero-text h1 {
    font-size: clamp(1.85rem, 7vw, 2.3rem) !important;
    line-height: 1.18 !important;
    margin: 0 0 0.5rem !important;
    text-shadow: none !important;
  }

  .about-page-hero .about-hero-text .divider-line {
    margin: 0.8rem 0 1rem !important;
    width: 40px;
  }

  .about-page-hero .about-hero-text p {
    margin: 0 0 1.1rem !important;
    max-width: 34ch !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    text-align: left !important;
    text-shadow: none !important;
  }

  .about-page-hero .about-hero-text .btn-primary {
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 400px) {
  .about-page-hero {
    background-position: 55% top !important;
  }

  .about-page-hero .about-hero-inner {
    padding: 0 1.2rem 2.2rem !important;
  }

  .about-page-hero .about-hero-text h1 {
    font-size: 1.75rem !important;
  }
}