/* Page content background — keeps ivory/white as original */
main, #main-content {
  background: linear-gradient(to bottom, #1a3a2a 0px, #1a3a2a 120px, var(--clr-ivory, #fdf9f2) 120px);
}

/* ============================================================
   VADALO VENTURES — MANUFACTURING GUIDE CSS
   manufacturing.css
   ============================================================ */
:root { --jute-col:#5a7a2e; --cotton-col:#3a6b8a; --juco-col:#7a5a2e; --canvas-col:#5a4a3a; }

/* HERO */
.mfg-hero { background:#0f2318; background-size:cover; background-position:center; background-repeat:no-repeat; padding:4rem 0 3rem; position:relative; overflow:hidden; }
.mfg-hero__bg-img { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0; transition:opacity 0.6s ease; z-index:0; }
.mfg-hero__overlay-dim { position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,26,16,0.82) 0%, rgba(10,26,16,0.55) 38%, rgba(10,26,16,0.18) 65%, rgba(10,26,16,0.05) 100%); z-index:1; pointer-events:none; }
.mfg-hero::before { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; }
.mfg-hero__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.18; z-index:0; }
.mfg-hero__overlay { position:absolute; inset:0; background:transparent; z-index:1; }
.mfg-hero .container { position:relative; z-index:3; }
.mfg-hero__tag { font-family:var(--font-ui); font-size:.6rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--clr-gold); display:block; margin-bottom:.75rem; }
.mfg-hero__title { font-family:var(--font-display); font-size:clamp(2rem,4.5vw,3.2rem); font-weight:700; color:var(--clr-cream); line-height:1.1; margin-bottom:.85rem; transition:opacity 0.25s ease; }
.mfg-hero__title span { color:var(--clr-gold); font-style:italic; }
.mfg-hero__sub { font-size:.95rem; color:rgba(248,244,236,.65); line-height:1.75; max-width:560px; margin-bottom:1.5rem; }
.mfg-hero__breadcrumb { display:flex; align-items:center; gap:.5rem; font-family:var(--font-ui); font-size:.68rem; color:rgba(248,244,236,.4); margin-top:1rem; }
.mfg-hero__breadcrumb a { color:rgba(248,244,236,.5); text-decoration:none; }
.mfg-hero__breadcrumb a:hover { color:var(--clr-gold); }
.mfg-hero__breadcrumb .cur { color:var(--clr-gold); }
.hero-badges { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; }
.hero-badge { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:100px; padding:.3rem .9rem; font-family:var(--font-ui); font-size:.65rem; font-weight:600; color:rgba(248,244,236,.8); }

/* BANNER */
.mfg-banner { width:100%; height:240px; overflow:hidden; position:relative; background:linear-gradient(135deg,#0f2318,#1a3a2a); }
.mfg-banner img { width:100%; height:100%; object-fit:cover; display:block; }

/* TAB NAV */
.tab-nav { background:white; border-bottom:1px solid var(--clr-border-light); position:sticky; top:var(--header-h); z-index:80; box-shadow:0 2px 10px rgba(0,0,0,.05); }
.tab-nav-inner { display:flex; justify-content:center; gap:.5rem; padding:.75rem 0; overflow-x:auto; scrollbar-width:none; }
.tab-nav-inner::-webkit-scrollbar { display:none; }
.tab-btn { display:flex; align-items:center; gap:.45rem; padding:.55rem 1.25rem; border-radius:100px; font-family:var(--font-ui); font-size:.75rem; font-weight:700; cursor:pointer; border:2px solid #999; background:white; color:#444; white-space:nowrap; flex-shrink:0; transition:all .22s; position:relative; z-index:2; }
.tab-btn:hover { border-color:var(--clr-forest); color:var(--clr-forest); }
.tab-btn.active-jute   { background:var(--jute-col);   border-color:var(--jute-col);   color:white; }
.tab-btn.active-cotton { background:var(--cotton-col); border-color:var(--cotton-col); color:white; }
.tab-btn.active-juco   { background:var(--juco-col);   border-color:var(--juco-col);   color:white; }
.tab-btn.active-canvas { background:var(--canvas-col); border-color:var(--canvas-col); color:white; }

/* PANELS */
.panel { display:none; }
.panel.active { display:block; }

/* BAG HEADER */
.bag-header { padding:2.5rem 0; }
.bag-header-jute   { background:linear-gradient(135deg,#2d4a1e,#3d6a2e); }
.bag-header-cotton { background:linear-gradient(135deg,#1a3a4a,#2a5a7a); }
.bag-header-juco   { background:linear-gradient(135deg,#3a2a0a,#5a4a2e); }
.bag-header-canvas { background:linear-gradient(135deg,#2a1a0a,#4a3a2a); }
.bag-header-inner { display:flex; align-items:flex-start; gap:1.5rem; }
.bag-icon-wrap { width:64px; height:64px; border-radius:var(--radius-lg); background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:2rem; flex-shrink:0; }
.bag-header h2 { font-family:var(--font-display); font-size:1.8rem; font-weight:700; color:white; margin-bottom:.4rem; }
.bag-header p { font-size:.9rem; color:rgba(255,255,255,.7); line-height:1.65; max-width:600px; margin-bottom:.9rem; }
.pill-row { display:flex; flex-wrap:wrap; gap:.4rem; }
.pill { border-radius:100px; padding:.22rem .75rem; font-family:var(--font-ui); font-size:.62rem; font-weight:700; }
.pill-jute   { background:rgba(90,122,46,.35); color:#c8e89a; border:1px solid rgba(200,232,154,.3); }
.pill-cotton { background:rgba(58,107,138,.35); color:#a0d4f8; border:1px solid rgba(160,212,248,.3); }
.pill-juco   { background:rgba(122,90,46,.35); color:#f8d4a0; border:1px solid rgba(248,212,160,.3); }
.pill-canvas { background:rgba(90,74,58,.35); color:#e8d4c0; border:1px solid rgba(232,212,192,.3); }

/* SECTIONS */
.sections { background:var(--clr-ivory); padding:2rem 0; }
.section { background:white; border:1px solid var(--clr-border-light); border-radius:var(--radius-lg); padding:1.75rem; margin-bottom:1.25rem; }
.section-title { display:flex; align-items:center; gap:.75rem; font-family:var(--font-display); font-size:1.25rem; font-weight:700; color:var(--clr-forest); margin-bottom:1.25rem; padding-bottom:.85rem; border-bottom:2px solid var(--clr-border-light); }
.section-num { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-ui); font-size:.8rem; font-weight:800; flex-shrink:0; color:white; }
.sn-jute   { background:var(--jute-col); }
.sn-cotton { background:var(--cotton-col); }
.sn-juco   { background:var(--juco-col); }
.sn-canvas { background:var(--canvas-col); }

/* BENEFITS GRID */
.benefits-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.85rem; }
.benefit-card { background:var(--clr-ivory); border:1px solid var(--clr-border-light); border-radius:var(--radius-md); padding:1.1rem; transition:all .3s; }
.benefit-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.benefit-icon { font-size:1.5rem; display:block; margin-bottom:.5rem; }
.benefit-card h5 { font-family:var(--font-ui); font-size:.82rem; font-weight:700; color:var(--clr-forest); margin-bottom:.35rem; }
.benefit-card p { font-size:.8rem; color:var(--clr-text-muted); line-height:1.6; }

/* STAGE ACCORDION */
.stage { border:1px solid var(--clr-border-light); border-radius:var(--radius-md); margin-bottom:.6rem; overflow:hidden; }
.stage-head { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.1rem; cursor:pointer; background:var(--clr-ivory); transition:background .2s; gap:1rem; }
.stage-head:hover { background:rgba(46,102,71,.05); }
.stage.open .stage-head { background:white; }
.stage-head h4 { font-family:var(--font-ui); font-size:.82rem; font-weight:700; color:var(--clr-forest); display:flex; align-items:center; gap:.75rem; margin:0; flex:1; }
.stage-badge { border-radius:100px; padding:.18rem .7rem; font-family:var(--font-ui); font-size:.58rem; font-weight:800; color:white; letter-spacing:.08em; flex-shrink:0; }
.chevron { font-size:1rem; color:var(--clr-text-muted); transition:transform .25s; flex-shrink:0; }
.stage.open .chevron { transform:rotate(180deg); }
.stage-body { max-height:0; overflow:hidden; transition:max-height .4s ease; }
.stage.open .stage-body { max-height:1200px !important; }
.stage-steps { list-style:none; padding:.75rem 1.1rem 1rem; display:flex; flex-direction:column; gap:.5rem; counter-reset:list-item; }
.stage-steps li { display:flex; align-items:flex-start; gap:.65rem; font-size:.85rem; color:var(--clr-text-muted); line-height:1.65; counter-increment:list-item; }
.stage-steps li::before { content:counter(list-item); width:20px; height:20px; background:var(--clr-forest); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-ui); font-size:.6rem; font-weight:700; flex-shrink:0; margin-top:.1rem; }
.stage-steps li strong { color:var(--clr-forest); }

/* TABLES */
.spec-table-wrap,.price-table-wrap { overflow-x:auto; margin-bottom:.5rem; }
.spec-table,.price-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.spec-table thead tr,.price-table thead tr { background:var(--clr-forest); color:var(--clr-cream); }
.spec-table thead th,.price-table thead th { padding:.65rem .9rem; text-align:left; font-family:var(--font-ui); font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.spec-table tbody td,.price-table tbody td { padding:.6rem .9rem; border-bottom:1px solid var(--clr-border-light); color:var(--clr-text-muted); vertical-align:top; }
.spec-table tbody tr:last-child td,.price-table tbody tr:last-child td { border-bottom:none; }
.spec-table tbody tr:hover,.price-table tbody tr:hover { background:var(--clr-ivory); }
.price-cell { font-family:var(--font-ui); font-weight:700; color:var(--clr-forest); }

/* NOTE */
.note-block { background:rgba(201,168,76,.08); border:1px solid rgba(201,168,76,.25); border-left:4px solid var(--clr-gold); border-radius:var(--radius-md); padding:.9rem 1.1rem; font-size:.85rem; color:#7a6010; line-height:1.65; margin-top:1rem; }

/* CTA */
.cta-band { background:linear-gradient(135deg,var(--clr-forest),var(--clr-forest-mid)); padding:3rem 0; text-align:center; position:relative; overflow:hidden; }
.cta-band::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(-45deg,transparent,transparent 60px,rgba(255,255,255,.015) 60px,rgba(255,255,255,.015) 61px); }
.cta-band .container { position:relative; z-index:1; }
.cta-band h3 { font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--clr-cream); margin-bottom:.5rem; }
.cta-band p { font-size:.95rem; color:rgba(248,244,236,.65); max-width:480px; margin:0 auto 1.75rem; line-height:1.7; }
.cta-btns { display:flex; align-items:center; justify-content:center; gap:.75rem; flex-wrap:wrap; }

/* RESPONSIVE */
@media (max-width:900px) { .benefits-grid { grid-template-columns:repeat(3,1fr) !important; gap:.5rem !important; } }
@media (max-width:768px) {
  .mfg-hero { padding:2.5rem 0 2rem; }
  .mfg-hero__title { font-size:clamp(1.5rem,6vw,2.2rem); }
  .mfg-banner { height:160px; }
  .bag-header-inner { flex-direction:column; gap:1rem; }
  .benefits-grid { grid-template-columns:repeat(3,1fr) !important; gap:.4rem !important; }
  .section { padding:1.25rem; }
}

/* ── IMAGE GALLERY GRID ── */
.img-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; margin-top:.5rem; }
.img-cell {
  position:relative; aspect-ratio:4/3; border-radius:var(--radius-md);
  overflow:hidden; cursor:zoom-in; background:var(--clr-forest);
}
.img-cell img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.img-cell:hover img { transform:scale(1.06); }
.img-cell__overlay {
  position:absolute; inset:0; background:rgba(0,0,0,0);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s;
}
.img-cell:hover .img-cell__overlay { background:rgba(0,0,0,.25); }
.img-cell__zoom {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; color:var(--clr-forest);
  opacity:0; transform:scale(.8); transition:all .3s;
}
.img-cell:hover .img-cell__zoom { opacity:1; transform:scale(1); }

/* ── LIGHTBOX ── */
.mfg-lightbox {
  position:fixed; inset:0; background:rgba(0,0,0,.92);
  z-index:9999; display:none; align-items:center; justify-content:center;
  padding:1rem;
}
.mfg-lightbox.open { display:flex; }
.mfg-lightbox img {
  max-width:90vw; max-height:88vh; border-radius:var(--radius-md);
  object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.mfg-lb-close {
  position:absolute; top:1.25rem; right:1.25rem;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.15); border:none; cursor:pointer;
  color:white; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.mfg-lb-close:hover { background:rgba(255,255,255,.3); }
.mfg-lb-prev, .mfg-lb-next {
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.15); border:none; cursor:pointer;
  color:white; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.mfg-lb-prev:hover, .mfg-lb-next:hover { background:rgba(255,255,255,.3); }
.mfg-lb-prev { left:1.25rem; }
.mfg-lb-next { right:1.25rem; }
.mfg-lb-caption {
  position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.6); color:white; padding:.4rem 1rem;
  border-radius:100px; font-family:var(--font-ui); font-size:.72rem;
  white-space:nowrap;
}
@media(max-width:600px) { .img-gallery { grid-template-columns:1fr 1fr; } }

/* ── BENEFIT CARD WITH IMAGE ── */
.benefit-card { padding:0; overflow:hidden; }
.benefit-card__img {
  width:100%; height:140px; object-fit:cover; display:block;
  background:var(--clr-forest);
}
.benefit-card__body { padding:1rem; }
.benefit-card__body .benefit-icon { font-size:1.4rem; display:block; margin-bottom:.4rem; }
.benefit-card__body h5 { font-family:var(--font-ui); font-size:.82rem; font-weight:700; color:var(--clr-forest); margin-bottom:.3rem; }
.benefit-card__body p { font-size:.8rem; color:var(--clr-text-muted); line-height:1.6; }

/* ── CLICKABLE BAG ICON ── */
.bag-icon-btn { position:relative; transition:transform .2s, box-shadow .2s; }
.bag-icon-btn:hover { transform:scale(1.1); box-shadow:0 6px 20px rgba(0,0,0,.3); }
.bag-icon-btn::after {
  content:'🔍';
  position:absolute; bottom:-6px; right:-6px;
  width:22px; height:22px; border-radius:50%;
  background:var(--clr-gold); font-size:.6rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}

/* ── LIGHTBOX GRID ── */
.mfg-lb-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:.75rem; max-width:780px; width:90vw;
  max-height:80vh; overflow-y:auto;
}
.mfg-lb-grid-item {
  position:relative; aspect-ratio:4/3;
  border-radius:var(--radius-md); overflow:hidden;
  cursor:pointer; background:var(--clr-forest);
}
.mfg-lb-grid-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.mfg-lb-grid-item:hover img { transform:scale(1.05); }
.mfg-lb-grid-item p {
  position:absolute; bottom:0; left:0; right:0;
  background:rgba(0,0,0,.65); color:white; margin:0;
  font-size:.7rem; padding:.35rem .65rem;
  font-family:var(--font-ui); font-weight:600;
}

/* single image view inside lightbox */
.mfg-lb-single { max-width:90vw; max-height:88vh; border-radius:var(--radius-md); object-fit:contain; }
.mfg-lb-content { display:flex; flex-direction:column; align-items:center; max-height:90vh; overflow:auto; }

/* ── TAB BUTTONS SMALLER ON MOBILE ── */
@media (max-width: 900px) {
  .tab-nav-inner {
    gap: .3rem !important;
    padding: .5rem .4rem !important;
    justify-content: center !important;
  }
  .tab-btn {
    padding: .38rem .65rem !important;
    font-size: .6rem !important;
    gap: .25rem !important;
    border-width: 1.5px !important;
  }
}
@media (max-width: 480px) {
  .tab-btn {
    padding: .32rem .55rem !important;
    font-size: .56rem !important;
  }
}