/**
 * LCS polish — grey rhythm, icons, section media, showcase, stats motion, footer wordmark
 */

.section--shop-preview {
  --shop-gutter: clamp(1rem, 4vw, 2.5rem);
  overflow-x: clip;
}

.section--shop-preview .section__head {
  padding-left: var(--shop-gutter);
  padding-right: var(--shop-gutter);
}

.section--shop-preview .section__head .section__inner,
.section--shop-preview .shop-home,
.section--shop-preview .shop-home.section__inner {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.section--shop-preview .shop-home {
  padding: 0 var(--shop-gutter) 2.5rem;
  box-sizing: border-box;
}

.section--shop-preview .slider-band--shop .slider-band__shade {
  background: linear-gradient(to top, rgba(246, 241, 234, 0.95) 0%, rgba(246, 241, 234, 0.4) 45%, transparent 70%);
}

.section--shop-preview .slider-band--shop .slider-band__title {
  font-weight: 700;
  letter-spacing: -0.02em;
}


/* --- Grey more dominant --- */
.section--stats.section--compact,
.section--faq.section--compact {
  min-height: auto !important;
}

.section--marquee.section--dark,
#tags.section--dark {
  background: var(--warm, #f0e8dc) !important;
}

.section--faq-compact {
  background: var(--sand, #f6f1ea) !important;
}

.section--faq-compact .faq-item {
  border-color: rgba(235, 224, 211, 0.25);
}

.section--faq-compact .faq-item[open] {
  background: rgba(2, 2, 2, 0.35);
}

.section--showcase,
.section--work-full {
  background: var(--linen, #faf7f2);
}

.section--testimonials-full {
  background: var(--warm, #f0e8dc) !important;
}

/* Section separation — no double gaps */
.section + .section {
  margin-top: 0;
}

.section--showcase .slider-band--showcase,
.section--work-full .slider-band--work {
  border-top: none;
}

.section--showcase,
.section--work-full,
.section--testimonials-full {
  justify-content: stretch;
  gap: 0;
}

/* Clean grey sections — no photo overlays */
#materials.section--gray {
  background: var(--sand, #f6f1ea);
  box-shadow: inset 0 1px 0 var(--line-soft, rgba(26, 26, 26, 0.08));
}

#services.section--cream {
  box-shadow: inset 0 -3px 0 rgba(77, 77, 79, 0.15);
}

/* Materials / services centered */
#materials.section--center,
#services.section--center,
#stats.section--center {
  text-align: center;
}

#materials .material-list,
#services .service-grid {
  text-align: left;
}

/* Slider — flush edges, no gap under gradient */
.section--showcase,
.section--work-full {
  justify-content: flex-start !important;
  padding-bottom: 0 !important;
}

.section--showcase .slider-band,
.section--work-full .slider-band {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  line-height: 0;
}

.section--showcase .slider-band__viewport,
.section--work-full .slider-band__viewport {
  height: clamp(340px, 56vh, 580px) !important;
  min-height: clamp(340px, 56vh, 580px);
  max-height: clamp(340px, 56vh, 580px);
  flex: none;
  overflow: hidden;
}

.section--showcase .slider-band .carousel__track,
.section--work-full .slider-band .carousel__track {
  height: 100%;
}

.section--showcase .slider-band .carousel__slide--band,
.section--work-full .slider-band .carousel__slide--band {
  height: clamp(340px, 56vh, 580px);
  min-height: 0;
}

.section--showcase .slider-band .carousel__slide--band img,
.section--work-full .slider-band .carousel__slide--band img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: cover;
  transform: none !important;
}

.slider-band__shade {
  inset: 0;
  background: linear-gradient(
    to top,
    var(--black) 0%,
    rgba(2, 2, 2, 0.92) 16%,
    rgba(2, 2, 2, 0.45) 42%,
    transparent 68%
  );
}

.slider-band__caption {
  font-size: 1rem;
  line-height: 1.35;
  text-align: left;
  padding-bottom: 1.5rem;
}


.section--showcase .section__head,
.section--work-full .section__head {
  background: var(--linen, #faf7f2);
  padding-bottom: 1rem;
}

.section--showcase + .section--cream,
.section--work-full + .section {
  border-top: 1px solid var(--line-soft, rgba(26, 26, 26, 0.12));
}

.section--showcase + .section--cream .section__inner,
#process.section--cream {
  padding-top: var(--space-section, 4rem);
}

/* Carousel nav — visible chevrons */
.carousel__nav--band {
  font-size: 1rem;
}

.carousel__nav--band .ti {
  font-size: 1.5rem !important;
  color: var(--black) !important;
}

.carousel__nav--band:hover .ti {
  color: var(--cream) !important;
}

/* Hero/slider controls — see carousel-controls.css */

/* Footer wordmark — full width (JS fine-tune in site-ui.js) */
.site-footer__wordmark {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  box-sizing: border-box;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.page-home .site-footer__wordmark {
  padding-bottom: calc(var(--nav-h, 4.25rem) + max(0.75rem, env(safe-area-inset-bottom, 0px)) + 0.5rem);
}

.site-footer__wordmark span {
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.02em;
  line-height: 0.92;
  font-weight: 700;
  color: var(--cream);
}

/* Logo on dark */
.logo--hero,
.site-footer__logo {
  filter: none;
}

/* Mega nav icons */
.lcs-nav__btn {
  color: var(--black);
}

.lcs-nav__btn .ti {
  font-size: 1.5rem !important;
  color: currentColor !important;
}

.lcs-nav__btn:hover .ti,
.lcs-nav__btn[aria-expanded='true'] .ti,
.lcs-nav__btn.is-active .ti {
  color: var(--cream) !important;
}

/* Footer social */
.site-footer__social a .ti {
  color: var(--cream) !important;
}

.site-footer__social a:hover .ti {
  color: var(--black) !important;
}

/* Material row icons */
.material-item .ti {
  font-size: 1.35rem !important;
  color: var(--cream) !important;
  flex-shrink: 0;
}

.section--cream .material-item .ti {
  color: var(--black) !important;
}

/* FAQ on grey accent */
.faq-item summary .ti {
  color: var(--cream) !important;
}

/* Chatbot — stay above nav, not cover stats */
.chatbot {
  z-index: 180;
}

.lcs-nav {
  z-index: 200;
}

@media (max-width: 900px) {
  .section--showcase .slider-band__viewport,
  .section--work-full .slider-band__viewport,
  .section--showcase .slider-band .carousel__slide--band,
  .section--work-full .slider-band .carousel__slide--band {
    height: clamp(280px, 48vh, 420px) !important;
    min-height: clamp(280px, 48vh, 420px);
    max-height: clamp(280px, 48vh, 420px);
  }
}