/*
Theme Name: Elessi Theme Child
Theme URI: https://elessi.nasatheme.com
Description: This is a child theme for Elessi Theme
Author: NasaTheme team
Author URI: https://nasatheme.com
Template: elessi-theme
Version: 1.0
*/


/*************** ADD YOUR CUSTOM CSS IN THIS AREA ***************/
/* ── Tshirt layer system ───────────────────────────────────────────────── */

/* Wrapper holds both layers stacked on top of each other */
.tshirt-layer-wrapper {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
}

/* Bottom layer: canvas with tinted blank shirt */
.tshirt-layer-wrapper canvas {
  display: block;
  width: 100%;
  height: auto;
}

/* Top layer: design PNG with transparent background */
.tshirt-layer-wrapper .tshirt-design-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Fix Elessi slick slider clipping */
.nasa-single-product-main-image .slick-list,
.nasa-single-product-main-image .slick-track,
.nasa-single-product-main-image .slick-slide,
.nasa-single-product-main-image .slick-slide > div,
.nasa-single-product-main-image .nasa-item-main-image-wrap,
.nasa-single-product-main-image .item-wrap {
  height: auto !important;
  overflow: visible !important;
  max-height: none !important;
}

/* Force wrapper to maintain square aspect ratio */
.tshirt-layer-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* 1:1 ratio — change to match your image ratio */
  height: 0;
}

.tshirt-layer-wrapper canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.tshirt-layer-wrapper .tshirt-design-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Hide gallery until our canvas is ready to prevent flicker */
.nasa-single-product-main-image {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.nasa-single-product-main-image.tshirt-ready {
  opacity: 1;
}

/* Shift design layer down on hoodie to account for hood */
.tshirt-layer-wrapper.shirt-type-hoodie .tshirt-design-layer {
  top: 18% !important;
  height: 92% !important;
}