/* xxxxx WooCommerce Swatch – Frontend Styles */


.xxxxx-hidden-select {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  border: none !important;
  background: none !important;
  pointer-events: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

ul.xxxxx-swatch {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row !important;
  flex-direction: row !important;
  -webkit-flex-wrap: wrap;
  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;
  transition: all 0.15s ease;
  /* 모바일에서 텍스트 선택 방지 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* 클릭 시 파란색 라인 제거 및 깜빡임 방지 */
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  /* 포커스 시 깜빡임 방지 */
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 브라우저 기본 동작 차단 */
  -webkit-focus-ring-color: transparent;
  -webkit-user-drag: none;
}

.xxxxx-swatch .swatch-item:hover {
  transform: scale(1.1);
  z-index: 1;
}

.xxxxx-swatch .swatch-item:focus,
.xxxxx-swatch .swatch-item:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: none !important;
  border: 1px solid var(--xxxxx-sw-border,#ccc) !important;
}

.xxxxx-swatch .swatch-item.selected {
  box-shadow: 0 0 0 2px #000 !important;
  outline: none !important;
  border-color: #000 !important;
  transform: scale(1.05);
  z-index: 2;
}

/* 상품 페이지에서만 disabled 스타일 적용 */
.single-product .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;
}

/* 아카이브에서는 disabled 스타일 무시 */
.xxxxx-archive-swatches .swatch-item.disabled::after {
  display: none !important;
}

.xxxxx-archive-swatches .swatch-item.disabled {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 상품 페이지에서만 disabled 커서 적용 */
.single-product .xxxxx-swatch .swatch-item.disabled {
  cursor: not-allowed;
}

/* 아카이브에서는 disabled 커서 무시 */
.xxxxx-archive-swatches .swatch-item.disabled {
  cursor: pointer !important;
}

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

/* 선택된 옵션명 표시 */
.xxxxx-selected-option {
  font-size: 13px !important;
  color: #666 !important;
  font-weight: normal !important;
  display: inline !important;
}

/* 강제 적용 */
label .xxxxx-selected-option,
.value label .xxxxx-selected-option,
.variations .value label .xxxxx-selected-option {
  font-size: 13px !important;
  color: #666 !important;
  font-weight: normal !important;
  display: inline !important;
}

/* ===== NEW SHAPE STYLES ===== */

/* Round shape style */
.xxxxx-swatch.shape-round .swatch-item:not(.type-label) {
  border-radius: 50% !important;
}

/* Square shape style */
.xxxxx-swatch.shape-square .swatch-item:not(.type-label) {
  border-radius: 0 !important;
}

/* Default shape style (slightly rounded) */
.xxxxx-swatch.shape-default .swatch-item:not(.type-label),
.xxxxx-swatch:not(.shape-round):not(.shape-square) .swatch-item:not(.type-label) {
  border-radius: var(--xxxxx-sw-radius,4px) !important;
}

/* ===== IMAGE SIZE VARIANTS ===== */

/* Small size */
.xxxxx-swatch.size-small .swatch-item:not(.type-label) {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
}

/* Medium size (default) */
.xxxxx-swatch.size-medium .swatch-item:not(.type-label) {
  width: var(--xxxxx-sw-size,32px) !important;
  height: var(--xxxxx-sw-size,32px) !important;
  flex: 0 0 var(--xxxxx-sw-size,32px) !important;
}

/* Large size */
.xxxxx-swatch.size-large .swatch-item:not(.type-label) {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
}

/* ===== TOOLTIP ENHANCEMENTS ===== */

/* Enhanced tooltip with better positioning */
.xxxxx-swatch.has-tooltip .swatch-item {
  position: relative;
}

.xxxxx-swatch.has-tooltip .swatch-item:hover::before {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--xxxxx-tip-bg,#fff);
  color: var(--xxxxx-tip-color,#000);
  border: 1px solid var(--xxxxx-sw-border,#ccc);
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.3;
  box-shadow: var(--xxxxx-tip-shadow,0 2px 8px rgba(0,0,0,0.15));
  border-radius: var(--xxxxx-tip-radius,4px);
  white-space: nowrap;
  z-index: 9999;
  opacity: 0;
  animation: xxxxx-tooltip-show 0.2s ease forwards;
}

.xxxxx-swatch.has-tooltip .swatch-item:hover::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: var(--xxxxx-tip-bg,#fff);
  z-index: 9999;
  opacity: 0;
  animation: xxxxx-tooltip-show 0.2s ease forwards;
}

@keyframes xxxxx-tooltip-show {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 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: 8px 10px;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: var(--xxxxx-tip-shadow,0 4px 12px rgba(0,0,0,0.2));
  border-radius: var(--xxxxx-tip-radius,6px);
  display: none;
  pointer-events: none; /* 마우스 이벤트 통과 */
  white-space: nowrap;
  max-width: 200px;
  text-align: center;
}

.xxxxx-swatch-tooltip img {
  max-width: var(--xxxxx-tip-preview-size,80px);
  max-height: var(--xxxxx-tip-preview-size,80px);
  display: block;
  margin: 0 auto 6px;
}

/* 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 6px;
  border:1px solid #e5e5e5;
  box-sizing:border-box;
  background-size:cover;
  background-position:center;
  border-radius: 4px;
}

/* 이미지 프리뷰 특별 처리 */
.xxxxx-swatch-tooltip img.preview {
  width: auto;
  height: auto;
  max-width: var(--xxxxx-tip-preview-size,80px);
  max-height: var(--xxxxx-tip-preview-size,80px);
  margin: 0 auto 6px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
}

/* Tooltip label */
.xxxxx-swatch-tooltip .tooltip-label {
  font-weight: 500;
  display: block !important;
  margin-top: 2px;
  margin-bottom: 0;
  color: inherit;
  font-size: 12px;
  text-align: center;
  line-height: 1.3;
  white-space: normal;
  word-break: keep-all;
}

/* PC에서 CSS 툴팁도 깜빡임 방지 */
@media (min-width: 769px) {
  .xxxxx-swatch .swatch-item::before,
  .xxxxx-swatch .swatch-item::after {
    pointer-events: none;
  }
}

/* 모바일에서 툴팁 최적화 */
@media (max-width: 768px) {
  .xxxxx-swatch-tooltip {
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    max-width: 250px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    border: 1px solid #ddd;
    background: #fff !important;
    /* 선택된 옵션 위에 명확히 표시 */
    animation: xxxxx-tooltip-show 0.2s ease-out;
  }
  
  .xxxxx-swatch-tooltip .preview {
    width: var(--xxxxx-tip-preview-size, 60px);
    height: var(--xxxxx-tip-preview-size, 60px);
    margin: 0 auto 6px;
    border-radius: 4px;
  }
  
  .xxxxx-swatch-tooltip img {
    max-width: var(--xxxxx-tip-preview-size, 60px);
    max-height: var(--xxxxx-tip-preview-size, 60px);
    margin: 0 auto 6px;
    border-radius: 4px;
  }
  
  .xxxxx-swatch-tooltip img.preview {
    width: auto;
    height: auto;
    max-width: var(--xxxxx-tip-preview-size, 60px);
    max-height: var(--xxxxx-tip-preview-size, 60px);
    margin: 0 auto 6px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
  }
  
  .xxxxx-swatch-tooltip .tooltip-label {
    font-weight: 600;
    display: block !important;
    margin-top: 2px;
    margin-bottom: 0;
    color: #333;
    font-size: 13px;
    text-align: center;
    line-height: 1.3;
    white-space: normal;
    word-break: keep-all;
  }
  
  /* 모바일에서는 CSS 툴팁 비활성화 */
  .xxxxx-swatch .swatch-item::before,
  .xxxxx-swatch .swatch-item::after {
    display: none !important;
  }
  
  /* 툴팁 애니메이션 */
  @keyframes xxxxx-tooltip-show {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* 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 select.xxxxx-hidden-select + .select2-container,
.xxxxx-hidden-select + .select2-container {
  display: none !important;
}

/* fancy-select-wrap는 스와치가 있는 select만 숨김 */
.variations .xxxxx-hidden-select + .fancy-select-wrap {
  display: none !important;
}

/* WooCommerce 클리어 버튼 표시 보장 */
.variations .reset_variations,
.variations .clear_variations,
.variations a.reset_variations {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Additional select hiding for compatibility */
select.xxxxx-hidden-select {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  border: none !important;
  background: none !important;
  pointer-events: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 !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;}
}

/* 아카이브: 툴팁이 꺼진 경우 hover 효과/포인터 비활성화 */
.xxxxx-archive-swatches ul.xxxxx-swatch:not(.has-tooltip) .swatch-item {
  cursor: default !important;
}
.xxxxx-archive-swatches ul.xxxxx-swatch:not(.has-tooltip) .swatch-item:hover {
  transform: none !important;
}

/* ---------------------------------------------------
   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;
}

/* ===== ENHANCED TYPE STYLES ===== */

/* Bicolor gradient improvements */
.xxxxx-swatch .swatch-item.type-bicolor {
  background-size: 200% 200% !important;
  background-position: center !important;
}

/* Image type improvements */
.xxxxx-swatch .swatch-item.type-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Color type improvements */
.xxxxx-swatch .swatch-item.type-color {
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--xxxxx-sw-border,#ccc);
}

.xxxxx-swatch .swatch-item.type-color.selected {
  box-shadow: 0 0 0 1px var(--xxxxx-sw-border,#ccc), 0 0 0 3px #000;
}

/* ---------------------------------------------------
   Theme 오버라이드 방지용 강제 스타일 (높은 특이도 + !important)
--------------------------------------------------- */
.xxxxx-swatch{
  list-style:none !important;
  margin:8px 0 0 !important; /* 라벨과 간격 복원 */
  padding:0 !important;
  display:-webkit-box !important;
  display:-webkit-flex !important;
  display:flex !important;
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
  -webkit-flex-direction:row !important;
  flex-direction:row !important;
  -webkit-flex-wrap:wrap !important;
  flex-wrap:wrap !important;
  gap:var(--xxxxx-sw-gap,6px) !important;
  -webkit-box-pack:start !important;
  -webkit-justify-content:flex-start !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;
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

.xxxxx-swatch .swatch-item:focus {
  outline: 2px solid #005cee;
  outline-offset: 2px;
}

.xxxxx-swatch .swatch-item[aria-checked="true"] {
  box-shadow: 0 0 0 2px #000;
}

/* ===== MOBILE RESPONSIVENESS ===== */

@media (max-width: 768px) {
  /* 모바일에서는 관리자 설정값을 사용 (CSS 변수) */
  .xxxxx-swatch .swatch-item:not(.type-label) {
    width: var(--xxxxx-sw-size, 28px) !important;
    height: var(--xxxxx-sw-size, 28px) !important;
    flex: 0 0 var(--xxxxx-sw-size, 28px) !important;
  }
}

/* --- Flex gap 미지원 브라우저(일부 인앱 WebView 등) 폴백 --- */
@supports not (gap: 1rem) {
  .xxxxx-swatch {
    gap: 0 !important;
  }
  .xxxxx-swatch .swatch-item {
    margin: calc(var(--xxxxx-sw-gap,6px) / 2) 0 0 calc(var(--xxxxx-sw-gap,6px) / 2) !important;
  }
  .xxxxx-swatch {
    margin-left: calc(var(--xxxxx-sw-gap,6px) / -2) !important;
  }
}