/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.1
 Text Domain:  woodmart
*/

/* ============================
   CLASSES START
   ============================ */

	/* --- FLEXBOX classes--- */
		/* - flex display - */
			.flex{display:flex;}
			.inline-flex{display:inline-flex;}
		/* - justify - */
			.justify-start{justify-content:flex-start;}
			.justify-center{justify-content:center;}
			.justify-end{justify-content:flex-end;}
			.justify-between{justify-content:space-between;}
			.justify-around{justify-content:space-around;}
			.justify-evenly{justify-content:space-evenly;}
		/* - item align - */
			.items-start{align-items:flex-start;}
			.items-center{align-items:center;}
			.items-end{align-items:flex-end;}
			.items-stretch{align-items:stretch;}
			.items-baseline{align-items:baseline;}
		/* -align content - */
			.content-start{align-content:flex-start;}
			.content-center{align-content:center;}
			.content-end{align-content:flex-end;}
			.content-between{align-content:space-between;}
			.content-around{align-content:space-around;}
			.content-evenly{align-content:space-evenly;}
			.content-stretch{align-content:stretch;}
		/* - flex direction - */
			.flex-row{flex-direction:row;}
			.flex-row-reverse{flex-direction:row-reverse;}
			.flex-col{flex-direction:column;}
			.flex-col-reverse{flex-direction:column-reverse;}
		/* - flex wrap - */
			.flex-wrap{flex-wrap:wrap;}
			.flex-nowrap{flex-wrap:nowrap;}
			.flex-wrap-reverse{flex-wrap:wrap-reverse;}
		/* - align self - */
			.self-start{align-self:flex-start;}
			.self-center{align-self:center;}
			.self-end{align-self:flex-end;}
			.self-stretch{align-self:stretch;}
		/* - gaps - */
			.gap-0{gap:0;}
			.gap-xs{gap:0.5rem;}
			.gap-sm{gap:1rem;}
			.gap-md{gap:1.5rem;}
			.gap-lg{gap:2rem;}
			.gap-xl{gap:3rem;}
	 /* --- FLEXBOX CLASSES end --- */

/* ============================
   CLASSES END
   ============================ */


/* ---- Product Archieve Grid ------Brian --*/


/* 1. Main Container Setup */
.product-grid-item .product-wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
	align-items: center;
}

/* 2. Top Section: Shorter Portrait Ratio */
.product-grid-item .product-element-top {
    width: 100%;
    aspect-ratio: 4 / 5 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; 
    align-items: center !important;
    /* ADDITIONS BELOW */
    min-height: 0 !important;   /* Forces box to respect ratio over image height */
    overflow: hidden !important; /* Clips anything that tries to bleed out */
}

/* 3. Image Scaling & Bottom Alignment */
.product-element-top :is(.product-image-link, .hover-img) {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: flex-end !important; 
    justify-content: center !important;
    /* ADDITION BELOW */
    min-height: 0 !important;   /* Allows the link to shrink smaller than the image */
}

/* Ensure the image scales without distorting */
.product-element-top :is(.product-image-link, .hover-img) img {
    max-height: 100% !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
    /* ADDITION BELOW */
    flex-shrink: 1 !important;  /* Tells the image it IS allowed to scale down */
}

/* 4. Bottom Section: Responsive Spacing */
.product-grid-item .product-element-bottom {
    /* Uses em to scale with font size instead of fixed pixels */
    min-height: 8em; 
    display: flex !important;
    flex-direction: column !important;
    padding-top: 10px;
    flex-grow: 1;
}

/* 5. Swatch & Price Alignment */
/* Pushes the price/swatch block to the bottom to align across products */
.product-grid-item .product-element-bottom > *:last-child,
.product-grid-item .price-wrapper,
.product-grid-item .wd-swatches-grid {
    margin-top: auto !important;
}


/* ------- end Product Archieve Grid -------*/

#menu-mobile-navigation .menu-item .woodmart-nav-link img {display: none !important;}

.badge-row {
  --badge-height: 90px;
} .badge-row .wp-block-image img {
  height: var(--badge-height);
  width: auto;
  max-width: 100%;
  object-fit: contain;
} /*-- see current deuter 'introduct freerider' block for example*/

div#wd-f4d4d285 {
    justify-content: center;
}
.wp-block-columns.bottomBar > .wp-block-column,
.wp-block-columns.bottomBar > .wp-block-column > .wp-block-wd-container,
.wp-block-columns.bottomBar > .wp-block-column > .wp-block-wd-container > .wp-block-wd-icon {
  height: 100%;
}
.wp-block-columns.is-not-stacked-on-mobile.bottomBar.is-layout-flex.wp-container-core-columns-is-layout-9d6595d7.wp-block-columns-is-layout-flex{
	height:90px;
}


/* ------- sheen text effect, proudly canada == example, not active atm ------- */
.sheen-text {
  position: relative;
  display: inline-block;

  color: #212121; /* base color */
  font-weight: 600;

  /* Gradient overlay */
  background-image: linear-gradient(
    120deg,
    transparent 0%,
    rgba(198, 40, 40, 0.0) 40%,
    rgba(198, 40, 40, 0.45) 50%,
    rgba(198, 40, 40, 0.0) 60%,
    transparent 100%
  );

  background-size: 220% 100%;
  background-position: -120% 0;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: textSheen 4s ease-in-out infinite;
}

@keyframes textSheen {
  0% {
    background-position: -120% 0;
  }
  35% {
    background-position: 120% 0;
  }
  100% {
    background-position: 120% 0;
  }
}

	
/*-------- Product Swatches -------*/

/* 1. Remove radius from the main swatch container */

	.wd-swatch,
	.wd-swatch-item {
		border-radius: 0 !important;
	}

/* 2. Remove radius from the image/picture element inside the swatch */
	.wd-swatch :is(img,picture) {
		border-radius: 0 !important;
	} 

	/* --- Single Product page swatch size -----*/
	.wd-swatches-single {
				--wd-swatch-size: 70px !important;
				  }

	/* --- Product Grid ----*/
	.wd-swatches-grid:is(.wd-size-xs,.wd-size-default) {
		--wd-swatch-size: 35px !important;
		--wd-swatch-text-size: 14px;
	}

	.wd-product.wd-hover-tiled .product-wrapper {
	   box-shadow: none !important;
	}


	.wd-product.wd-hover-tiled .product-element-top {
		margin: 3% !important;
	}

	/* ------ Single product page fixes ----*/
	.single-product .wd-content-layout {
		padding-block: 40px !important; 
	}








/*HOME PAGE------------------HOME PAGE----------------------HOME PAGE*/

	/* --- landing bar with svg icons tweaks/globals --- */
	#wd-f4d4d285 h2 {
		color: #212121 !important;
		font-weight: 100;
	}
	.bottomBar circle {fill:#21212199;}

	/* ------ Home Page Product small swatches ---- Brian ---*/

	/* swatches grid inside Best Sellers block */
	#wd-2ece444f .price .amount {
		color: black !important;
	}

	
/*COLLTEX PAGE------------------COLLTEX----------------------COLLTEX PAGE*/

	img.wp-image-98058 {
		max-height: 600px;
	}

	/*------skin collection styling------*/
.skin-collection {
  /* Tokens */
  --card-radius: 14px;
  --pill-radius: 999px;

  --ink-12: rgba(0, 0, 0, 0.12);
  --ink-18: rgba(0, 0, 0, 0.18);
  --ink-14: rgba(0, 0, 0, 0.14);
  --ink-08: rgba(0, 0, 0, 0.08);

  --sheen: rgba(255, 255, 255, 0.55);

  --fill-ms: 1500ms;
  --fill-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --stagger: 120ms;

  /* Slider tokens */
  --slider-gap: 18px;
  --slider-pad: 14px;

  padding: 16px 0 8px;
}

.skin-collection__head { margin-bottom: 14px; }

.skin-collection__title {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

/* ============================================================
   TRACK (replaces the old grid)
   - .skin-grid is a horizontal slider track (flex + snap)
   - Shows 3/2/1 cards responsively
   ============================================================ */

.skin-grid{
  display: flex;
  gap: var(--slider-gap);

  overflow-y: visible;
  overflow-x: auto;  

  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;

  scroll-snap-type: x mandatory;
  scroll-padding: var(--slider-pad);

  padding: 8px var(--slider-pad) var(--slider-pad);
  margin: 0 calc(var(--slider-pad) * -1);
}

.skin-grid::-webkit-scrollbar{ display: none; }

/* Default: 3 cards visible */
.skin-grid .skin-card{
  flex: 0 0 calc((100% - (var(--slider-gap) * 3)) / 4);
  scroll-snap-align: start;
}



/* Tablet: 2 cards */
@media (max-width: 980px){
  .skin-grid .skin-card{
    flex-basis: calc((100% - var(--slider-gap)) / 2);
  }
}

/* Phone: 1 card
   - if you want peek, change 100% to 90%
*/
@media (max-width: 640px){
  .skin-grid .skin-card{
    flex-basis: 100%;
  }

  .skin-collection__title{
    font-size: 30px;
  }
}

/* ============================================================
   Card styling
   ============================================================ */

.skin-card {
  --accent: #2b7cff;
  border: 1px solid var(--ink-12);
  border-radius: var(--card-radius);
  padding: 16px 16px 14px;
  background: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.skin-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
  border-color: var(--ink-18);
}

/* Remove default anchor styling for the clickable top area */
.skin-card__link,
.skin-card__link:visited,
.skin-card__link:hover,
.skin-card__link:active {
  color: inherit;
  text-decoration: none;
}

.skin-card__link { display: block; }

/* visible keyboard focus */
.skin-card__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.skin-card__top {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 130px;
  margin-bottom: 10px;
}

.skin-card__img img {
  max-width: 100%;
  max-height: 250px;
  height: auto;
  display: block;
}

.skin-card__name {
  font-size: 1.777rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 6px 0;
}

.skin-card__desc {
  font-size: 18px;
  font-weight: 100;
  line-height: 1.35;
  margin: 0 0 10px;
  opacity: 0.92;
}

/* Meta */
.skin-card__meta {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 10px 0 6px;
  border-top: 1px solid var(--ink-08);
  border-bottom: 1px solid var(--ink-08);
}

.skin-card__meta > div {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 10px;
}

.skin-card__meta dd {
  margin: 0;
  font-size: 13px;
}

/* Shared “label” style */
.skin-card__meta dt,
.stat__label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.skin-card__meta dt { opacity: 0.72; }
.stat__label { opacity: 0.78; }

/* Stats */
.skin-card__stats {
  display: grid;
  gap: 10px;
  margin: 10px 0 12px;
}

.stat {
  display: grid;
  grid-template-columns: 84px 1fr 56px;
  align-items: center;
  gap: 12px;
  --d: 0ms;
}

.stat__bar {
  height: 10px;
  border-radius: var(--pill-radius);
  background: var(--ink-08);
  overflow: hidden;
  position: relative;
}

.stat__fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: var(--pill-radius);
  background: var(--accent);
  transition: width var(--fill-ms) var(--fill-ease);
  transition-delay: var(--d);
}

/* Fill when visible */
.skin-card.is-visible .stat__fill { width: var(--w); }

/* Stagger */
.skin-card.is-visible .stat:nth-child(1) { --d: calc(var(--stagger) * 0); }
.skin-card.is-visible .stat:nth-child(2) { --d: calc(var(--stagger) * 1); }
.skin-card.is-visible .stat:nth-child(3) { --d: calc(var(--stagger) * 2); }
.skin-card.is-visible .stat:nth-child(4) { --d: calc(var(--stagger) * 3); }

.stat__value {
  font-size: 13px;
  text-align: right;
  opacity: 0.85;
}

/* ============================================================
   Badges (refactored to be responsive; prevents the “wrap glitch”)
   ============================================================ */

.skin-card__badges{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  row-gap: 10px;
  margin-top: 12px;
}

.skin-card__badges img{
  width: clamp(44px, 10vw, 64px);
  height: auto;
  display: block;
}

/* optional: preserve old max size intent */
@media (min-width: 641px){
  .skin-card__badges img{
    max-width: 90px;
  }
}

.badge { padding: 6px 10px; line-height: 1; }

/* ============================================================
   Sheen (JS toggles .is-sheening)
   ============================================================ */

.skin-card .stat__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--sheen), transparent);
  transform: translateX(-120%);
  pointer-events: none;
  opacity: 0;
}

.skin-card.is-sheening .stat__bar::after,
.stat.is-sheening .stat__bar::after {
  opacity: 0.75;
  animation: barSheen var(--fill-ms) ease forwards;
}

@keyframes barSheen { to { transform: translateX(120%); } }

/* Reset bars (used for replay) */
.skin-card.is-reset .stat__fill {
  width: 0% !important;
  transition: none !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .skin-card,
  .stat__fill {
    transition: none !important;
  }
  .skin-card.is-sheening .stat__bar::after {
    animation: none !important;
  }
}

/* ============================================================
   Slider controls (wrap .skin-grid in .skin-slider OR JS adds it)
   ============================================================ */

.skin-slider{
  position: relative;
}

.skin-slider__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;

  border: 0;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  border-radius: 999px;

  width: 42px;
  height: 42px;
  cursor: pointer;

  display: grid;
  place-items: center;

  font-size: 26px;
  line-height: 1;
}

.skin-slider__btn--prev{ left: 8px; }
.skin-slider__btn--next{ right: 8px; }


/*COLLTEX END------ COLLTEX END--------- COLLTEX END------*/



/*Trezeta -------------------- Trezeta ---------------- Trezeta*/
.ws-desktop-height {
/*     height: 425.5px; */
}



/*-About us------------------About us--------------About us-*/
.page-id-104216 .wd-page-title.page-title.page-title-default.title-size-default.title-design-centered.color-scheme-light {
    display: none;
}

/* div#wd-ce6872e6 {
    height: 25vw;
    min-height: 600px;
    max-height: 600px;
} */



/* ---------------------------------- Cody's experiements ---------------------------------- */

 	
		
	/*deuter lite air container*/
	#wd-65b4ac55 {
		padding-inline: 0 !important;
	} 
	/*deuter air lite bg overlay*/
	#wd-65b4ac55 > .wd-bg-overlay{
	  background-image: linear-gradient(
		to right,
		rgba(6,147,227,0) 0%,
		rgba(6,147,227,0) 50%,
		rgba(32,49,66,1) 90%
	  ) !important;
	}
	
	/* -- removes odd 20px of a margin variable being applied to bottom of woocommerce containers --*/
	.wp-block-woocommerce-single-product.woocommerce {
		margin-bottom: 0;
	}







/*---------- Responsive queries ----------*/

	@media (max-width: 768.98px) {
		#wd-8473ae54 h2 br {display:none;}
		.hide, #wd-3c8f7e31 h2:first-of-type .hide{display:none;}
		.bottomBar .wp-block-column {
			justify-content: center !important;
		}
		
		#wd-3c8f7e31 .wp-block-columns.is-not-stacked-on-mobile {
			width: 100vw;
			justify-content: space-around;
		}
		
		#wd-caf7bf14 .wd-arrow-inner {color: white !important;}
		#wd-353bfaee {--wd-aspect-ratio: 1 / 1;}
		
		#wd-545f6584 .wp-block-wd-container:not(#wd-6551bfcf, #wd-9516bcb0, #wd-105d0331){
			padding-inline:15px !important;
			padding: 20px 0;
		}
				
		/* --- footer alignment, if block editor sucks --- 
		#wd-5a8188ed * {
			text-align: center;
			align-self: center;
		}
		*/
		
		/*deu top about border, need to class this with the other brand page spots, instead of calling multiple IDs*/ 
			#wd-e5c906a7 {border-style:none !important;}

		/*together we care - deu*/ #wd-4c2c5e88{margin-right: 0 !important;}
		/*pop cat - deu*/ #wd-cb73ea21{padding: 0 !important;}
		/*air lite background*/	
			#wd-65b4ac55 > .wd-bg-overlay{ 
				background-image: linear-gradient(
					to bottom,
					rgba(6,147,227,0) 0%,
					rgba(6,147,227,0) 50%,
					rgba(32,49,66,1) 90%
				) !important;
			}
	}