/* xxxxx WooCommerce Swatch – Frontend Styles */

.xxxxx-hidden-select {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

ul.xxxxx-swatch {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row !important;
  flex-wrap: wrap;
  /* 간격: 관리자 설정(인라인 :root 변수) 값을 그대로 사용 */
  gap: var(--xxxxx-sw-gap,6px);
}

.xxxxx-swatch .swatch-item {
  width: var(--xxxxx-sw-size,32px);
  height: var(--xxxxx-sw-size,32px);
  border: 1px solid var(--xxxxx-sw-border,#ccc);
  border-radius: var(--xxxxx-sw-radius,4px);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-size: cover;
}

.xxxxx-swatch .swatch-item.selected {
  box-shadow: 0 0 0 2px #000;
}

.xxxxx-swatch .swatch-item.disabled::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.5);
  pointer-events: none;
}

.xxxxx-swatch .swatch-item.disabled {
  cursor: not-allowed;
}

.xxxxx-swatch .swatch-label {
  font-size: 12px;
  line-height: 1;
  padding: 2px 4px;
  text-align: center;
}

/* Tooltip */
.xxxxx-swatch-tooltip {
  position: absolute;
  z-index: 9999;
  background: var(--xxxxx-tip-bg,#fff);
  color: var(--xxxxx-tip-color,#000);
  border: 1px solid var(--xxxxx-sw-border,#ccc);
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.3;
  box-shadow: var(--xxxxx-tip-shadow,0 2px 4px rgba(0,0,0,0.2));
  border-radius: var(--xxxxx-tip-radius,4px);
  display: none;
  transition: opacity .2s ease;
}
.xxxxx-swatch-tooltip img {
  max-width: var(--xxxxx-tip-preview-size,80px);
  max-height: var(--xxxxx-tip-preview-size,80px);
  display: block;
  margin-top: 4px;
}

/* Tooltip preview common */
.xxxxx-swatch-tooltip .preview{
  width: var(--xxxxx-tip-preview-size,80px);
  height: var(--xxxxx-tip-preview-size,80px);
  display: block;
  margin: 0 auto 4px;
  border:1px solid #e5e5e5;
  box-sizing:border-box;
  background-size:cover;
  background-position:center;
}

/* Stock behavior cross */
.xxxxx-swatch .swatch-item.disabled.cross::before,
.xxxxx-swatch .swatch-item.disabled.cross::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:140%;
  height:2px;
  background:red;
  transform-origin:center;
  pointer-events:none;
  z-index:2;
}

.xxxxx-swatch .swatch-item.disabled.cross::before{ transform:translate(-50%,-50%) rotate(45deg); }
.xxxxx-swatch .swatch-item.disabled.cross::after{ transform:translate(-50%,-50%) rotate(-45deg); }

/* cross 모드에서는 흐림 오버레이 숨기기 */
.xxxxx-swatch .swatch-item.disabled.cross {
  opacity:1;
}
.xxxxx-swatch .swatch-item.disabled.cross::after,
.xxxxx-swatch .swatch-item.disabled.cross::before{
  z-index:2;
}

.xxxxx-archive-swatches.xxxxx-loading{opacity:0.6;pointer-events:none;position:relative;}
.xxxxx-archive-swatches.xxxxx-loading::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.5) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" stroke="%23aaa" stroke-width="4" fill="none" stroke-dasharray="113" stroke-dashoffset="75"><animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1s" repeatCount="indefinite"/></circle></svg>') center center no-repeat;background-size:40px;}

/* Hide theme select2/fancy wrappers for variation selects */
.variations .fancy-select-wrap,
.xxxxx-hidden-select + .select2-container {
  display: none !important;
}

/* --- Archive(카테고리/목록) 스와치 위치 & 정렬 --- */
.woocommerce ul.products li.product .xxxxx-archive-swatches {
  display: flex;
  justify-content: center;
  margin-top: 8px; /* 상품과 스와치 사이 여백 */
}

/* 아카이브 스와치 간격 기본값도 변수로 제어 (상황에 따라 덮어쓸 수 있음) */
.woocommerce ul.products li.product .xxxxx-archive-swatches ul.xxxxx-swatch {
  gap: var(--xxxxx-sw-gap,6px);
}

/* 카드 내부 바닥에 고정 배치 (Salient 테마 등에서 리스트 여백 최소화) */
.woocommerce ul.products li.product{
  position:relative;
}

.woocommerce ul.products li.product .xxxxx-archive-swatches{
  display:flex;
  justify-content:center;
  margin-top:8px;
}

.xxxxx-swatch-tooltip::after{
  content:"";
  position:absolute;
  bottom:-6px;
  left:50%;
  transform:translateX(-50%);
  width:0;height:0;
  border:6px solid transparent;
  border-top-color:var(--xxxxx-tip-bg,#fff);
}

.xxxxx-swatch-tooltip .tooltip-label{
  display:block;
  text-align:center;
}

/* 텍스트 라벨 전용 스타일 */
.xxxxx-swatch .swatch-item.type-label{
  width:auto;
  height:auto;
  min-width:calc(var(--xxxxx-sw-size,32px) + 8px);
  padding:4px 6px;
  border-radius:4px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

.xxxxx-swatch .swatch-item.type-label .swatch-label{
  font-size:12px;
  line-height:1;
}

.xxxxx-swatch .swatch-item.type-label.selected{
  box-shadow:0 0 0 2px #000;
}

/* Archive swatch below image */
li.product .woocommerce-LoopProduct-link{display:block;}
/* More link */
.xxxxx-more-link{display:inline-block;margin-left:2px;font-size:12px;color:#0071e3;vertical-align:middle;}

@media (min-width:601px){
 .xxxxx-more-link{display:none;}
}

@media (max-width:600px){
 .xxxxx-more-link{display:inline-block;align-self:center;line-height:1;}
 .xxxxx-archive-swatches{display:flex;align-items:center;}
}

/* ---------------------------------------------------
   Single product Related / Upsells 영역 강제 가로 배열  
--------------------------------------------------- */
.single-product .related .xxxxx-archive-swatches ul.xxxxx-swatch,
.single-product .upsells  .xxxxx-archive-swatches ul.xxxxx-swatch{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap;
  justify-content:center;
}

/* ---------------------------------------------------
   Theme 오버라이드 방지용 강제 스타일 (높은 특이도 + !important)
--------------------------------------------------- */
.xxxxx-swatch{
  list-style:none !important;
  margin:8px 0 0 !important; /* 라벨과 간격 복원 */
  padding:0 !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  gap:var(--xxxxx-sw-gap,6px) !important;
  justify-content:flex-start !important; /* 기본 왼쪽 정렬 */
}
.xxxxx-swatch .swatch-item:not(.type-label){
  width:var(--xxxxx-sw-size,32px) !important;
  height:var(--xxxxx-sw-size,32px) !important;
  border-radius:var(--xxxxx-sw-radius,4px) !important;
  margin:0 !important;
  padding:0 !important;
  display:flex;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 var(--xxxxx-sw-size,32px) !important;
}

/* Archive 리스트(카탈로그) 카드 안 스와치는 중앙 정렬 유지 */
.woocommerce ul.products li.product .xxxxx-archive-swatches ul.xxxxx-swatch{
  justify-content:center !important;
}