/* Shared gallery styles — mirrors the merch.html lifestyle slider pattern */

/* Grid gallery (masonry columns) */
.cms-grid {
  columns: 3;
  column-gap: 15px;
  padding: 32px 80px 40px;
}
.cms-grid .gal-item {
  break-inside: avoid;
  margin-bottom: 15px;
}
.cms-grid .gal-item img {
  width: 100%;
  cursor: zoom-in;
  transition: transform 0.35s ease;
  display: block;
}
.cms-grid .gal-item img:hover { transform: scale(1.02); }
@media (max-width: 860px) {
  .cms-grid { columns: 2; padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 540px) {
  .cms-grid { columns: 1; padding-left: 20px; padding-right: 20px; }
}

/* Slider gallery (horizontal scroll with controls) */
.lfs-slideshow {
  display: flex; gap: 12px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  height: 560px; scrollbar-width: none; -ms-overflow-style: none;
  margin-top: 8px;
}
.lfs-slideshow::-webkit-scrollbar { display: none; }
.lfs-img-wrap {
  height: 100%; flex-shrink: 0;
  overflow: hidden; scroll-snap-align: start;
  cursor: zoom-in; border-radius: 2px;
}
.lfs-img-wrap img {
  height: 100%; width: auto; display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.lfs-img-wrap:hover img { transform: scale(1.04); }
.lfs-controls-bar {
  display: flex; justify-content: flex-end;
  gap: 6px; margin-top: 18px; padding: 0 80px;
}
.lfs-btn {
  background: #000; color: #fff; border: none;
  width: 52px; height: 52px;
  font-size: 22px; font-weight: 900;
  cursor: pointer; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; letter-spacing: -0.02em;
  transition: background 0.15s, transform 0.1s;
}
.lfs-btn:hover { background: #222; transform: scale(1.06); }
@media (max-width: 860px) { .lfs-slideshow { height: 420px; } .lfs-controls-bar { padding: 0 32px; } }
@media (max-width: 640px) { .lfs-slideshow { height: 320px; } .lfs-controls-bar { padding: 0 20px; } }

/* Inserted-section wrapper */
.cms-section {
  padding: 80px 80px 0;
}
.cms-section .cms-section-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 16px;
}
.cms-section .cms-section-desc {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
  color: #000;
  max-width: 720px;
  margin-bottom: 32px;
}
@media (max-width: 860px) { .cms-section { padding: 60px 32px 0; } }
@media (max-width: 540px) { .cms-section { padding: 48px 20px 0; } }