:root {
	
	--w: auto;
	--max-w: 100%;
	--h: auto;
	--min-h: 0;
	
	--padding: 0;
	--padding-x: 0;
	--padding-y: 0;
	--gap: 1rem;
	
	--font-size: inherit;
	--line-height: inherit;
	--text-align: left;
	
	--bg-color: transparent;
	--bg-image: none;
	--bg-size: cover;
	--bg-position: center;
	
	--color: inherit;
	--heading-color: inherit;
	--button-bg: #000;
	--button-color: #fff;
	
	--slide-height: 450px;
	--slide-width: 100%;
	
	--bg-repeat: no-repeat;
	--bg-attachment: scroll;
	
	--radius: 0;
	--shadow: none;
	
	--opacity: 1;
	
	--transition: all .3s ease;
	
	--margin: 0;
	
	--swiper-height: 450px;
	--swiper-height-mobile: 300px;
	--swiper-height-tablet: 500px;
	--swiper-height-desktop: 500px;

}


/* Base module style */
.module {
  width: var(--w);
  max-width: var(--max-w);
  height: var(--h);
  min-height: var(--min-h);

  padding: var(--padding);
  padding-left: var(--padding-x);
  padding-right: var(--padding-x);
  padding-top: var(--padding-y);
  padding-bottom: var(--padding-y);

  gap: var(--gap);

  color: var(--color);
  background-color: var(--bg-color);
  background-image: var(--bg-image);
  background-size: var(--bg-size);
  background-position: var(--bg-position);

  font-size: var(--font-size);
  line-height: var(--line-height);
  text-align: var(--text-align);
}

/* alignment helpers */
.module.align-left   { --text-align: left; }
.module.align-center { --text-align: center; }
.module.align-right  { --text-align: right; }

/* Height presets */
.module.height-small  { --h: 300px; }
.module.height-medium { --h: 450px; }
.module.height-large  { --h: 650px; }

/* Background helpers */
.module.bg-dark  { --color:#fff; --bg-color:#000; }
.module.bg-light { --color:#000; --bg-color:#fff; }


/**** slider ****/

.module-slider .swiper,
.module-slider .swiper-wrapper,
.module-slider .swiper-slide {
  height: 100%;
}

.module-slider .swiper {
  height: var(--swiper-height-mobile);
}

@media (min-width:768px) {
  .module-slider .swiper {
	height: var(--swiper-height-tablet);
  }
}

@media (min-width:992px) {
  .module-slider .swiper {
	height: var(--swiper-height-desktop);
  }
}


/********* card collection *********/

.card-collection.layout-masonry .card-collection-wrapper .row {
  column-count: 3;
  column-gap: 1rem;
}

.card-collection.layout-masonry .image-wrapper {
  break-inside: avoid;
  margin-bottom: 1rem;
}

/* thumb container defines height by aspect ratio */
.card-collection .cc-thumb{
  width: 100%;
  display: block;
  aspect-ratio: var(--cc-thumb-aspect, 4/3);
  overflow: hidden;
  position: relative; /* useful for spinners */
}

/* make the link fill the thumb area */
.card-collection .cc-thumb .media-wrap{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

/* override any existing fixed heights on card-img-top */
.card-collection .cc-thumb .card-img-top{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* spinner overlay stays centered within thumb */
.card-collection .cc-thumb .image-spinner{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 1;
  pointer-events: none;
}

/* hide spinner once loaded */
.card-collection .cc-thumb .media-wrap.loaded .image-spinner{
  opacity: 0;
}


/* optional: responsive */
@media (max-width: 991px) {
  .card-collection.layout-masonry .card-collection-wrapper .row { column-count: 2; }
}
@media (max-width: 575px) {
  .card-collection.layout-masonry .card-collection-wrapper .row { column-count: 1; }
}



/***************** tabs *******************/

.tab-drag-handle { cursor: grab; user-select: none; }
  .tab-item.sorting { opacity: 0.85; }
  .tab-sort-placeholder {
	border: 2px dashed #ccc;
	margin-bottom: 1rem;
	border-radius: 6px;
	background: rgba(0,0,0,0.02);
  }