/**
 * 前台樣式 - Products Variation Swatches
 *
 * @package PVS\Assets
 */

/* ===========================
   變量樣本容器
   =========================== */
.pvs-swatches {
  display: flex;
  flex-direction: column; /* 垂直排列：標題在上，樣本在下 */
  gap: 8px;
  margin: 10px 0;
  clear: both;
}

/* 樣本容器頭部 - 標籤和尺碼表按鈕 */
.pvs-swatches-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* 屬性標籤樣式 */
.pvs-swatches-label {
  font-weight: 600;
  font-size: 14px;
  color: #333;
  flex: 0 1 auto;
  margin-right: auto; /* 推送按鈕到右側 */
  margin-top: -20px;
}

/* 尺碼表按鈕樣式 */
.pvs-size-chart-button {
  font-size: 14px;
  color: #e74c3c;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
  border: 1px solid #e74c3c;
  padding: 4px 12px;
  border-radius: 4px;
  background: transparent;
  flex-shrink: 0; /* 防止按鈕被壓縮 */
  position: absolute;
  right: 40px;
  top: 190px;
}

.pvs-size-chart-button:hover {
  color: #fff;
  background: #e74c3c;
  text-decoration: none;
}

/* 樣本項目容器 - 水平排列 */
.pvs-swatches-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pvs-swatches-items .pvs-swatch-item {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

/* ===========================
   樣本項目基礎樣式
   =========================== */
.pvs-swatch-item {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 40px; /* 确保有最小高度 */
}

.pvs-swatch-content {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ddd;
  background: #fff;
  transition: all 0.2s ease;
  overflow: hidden; /* Ensure content respects border-radius */
}

.pvs-swatch-item:hover .pvs-swatch-content {
  border-color: #999;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pvs-swatch-item.selected .pvs-swatch-content {
  border-color: #000;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

/* 「停用缺貨樣本」設定啟用時（容器有 .pvs-disable-oos 類），才顯示灰暴 + 禁止點擊 */
.pvs-disable-oos .pvs-swatch-item.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===========================
   顏色樣本
   =========================== */
.pvs-swatch-color {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: block;
  box-sizing: border-box;
  transition: background 0.25s ease;
}

.pvs-swatch-item img,
.pvs-swatch-image img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.pvs-swatch-item.pvs-swatch-color.selected .pvs-swatch-content::after {
  content: "✓";
  position: absolute;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

/* ===========================
   標籤樣本 (文本顯示 - 如尺碼)
   =========================== */
.pvs-swatch-text {
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  display: block;
}

/* 文本樣本特殊樣式 */
.pvs-swatch-item.pvs-swatch-label,
.pvs-swatch-item.pvs-swatch-text {
  display: inline-flex !important; /* 確保文本樣本可見 */
}

.pvs-swatch-item.pvs-swatch-label .pvs-swatch-content,
.pvs-swatch-item.pvs-swatch-text .pvs-swatch-content {
  min-width: 40px;
  padding: 8px 12px;
  background: #fff;
  border: 2px solid #ddd;
  /* 移除固定的 border-radius,讓形狀類控制 */
}

.pvs-swatch-item.pvs-swatch-label:hover .pvs-swatch-content,
.pvs-swatch-item.pvs-swatch-text:hover .pvs-swatch-content {
  background: #f5f5f5;
  border-color: #999;
}

.pvs-swatch-item.pvs-swatch-label.selected .pvs-swatch-content,
.pvs-swatch-item.pvs-swatch-text.selected .pvs-swatch-content {
  background: #000;
  color: #fff;
  border-color: #000;
}

.pvs-swatch-item.pvs-swatch-label.selected .pvs-swatch-content {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* ===========================
   樣本尺寸變體
   =========================== */
/* 小尺寸 */
.pvs-size-small .pvs-swatch-content {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
}

.pvs-size-small .pvs-swatch-text {
  padding: 5px 10px;
  font-size: 12px;
}

/* 中尺寸 (預設) */
.pvs-size-medium .pvs-swatch-content {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}

.pvs-size-medium .pvs-swatch-text {
  padding: 8px 15px;
  font-size: 13px;
}

/* 大尺寸 */
.pvs-size-large .pvs-swatch-content {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
}

.pvs-size-large .pvs-swatch-text {
  padding: 10px 20px;
  font-size: 14px;
}

/* ===========================
   樣本形狀
   =========================== */
.pvs-shape-square .pvs-swatch-content {
  border-radius: 0 !important;
}

.pvs-shape-circle .pvs-swatch-content {
  border-radius: 50% !important;
}

.pvs-shape-rounded .pvs-swatch-content {
  border-radius: 6px !important;
}

/* ===========================
   標籤位置
   =========================== */
/* 標籤樣式 */
.pvs-swatch-label {
  font-size: 12px;
  text-align: center;
}

/* 標籤在上方 */
.pvs-label-above .pvs-swatch-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.pvs-label-above .pvs-swatch-label.pvs-label-above {
  order: -1;
  margin-top: 0;
  margin-bottom: 4px;
}

/* 標籤在內部 */
.pvs-label-inside .pvs-swatch-content {
  position: relative;
}

.pvs-label-inside .pvs-swatch-label.pvs-label-inside {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 10px;
  padding: 2px 4px;
  text-align: center;
  margin: 0;
}

/* 點擊後顯示標籤 */
.pvs-label-onclick .pvs-swatch-label {
  display: none;
}

.pvs-label-onclick .pvs-swatch-item.selected .pvs-swatch-label {
  display: block;
}

/* ===========================
   工具提示
   =========================== */
.pvs-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.pvs-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
}

.pvs-swatch:hover .pvs-tooltip {
  opacity: 1;
}

/* ===========================
   不可用狀態：「停用缺貨樣本」設定 ON 時，disabled 才顯示斜線
   out-of-stock 類不受此設定影響，始終顯示
   =========================== */
.pvs-disable-oos .pvs-swatch-item.disabled .pvs-swatch-content::before,
.pvs-swatch-item.out-of-stock .pvs-swatch-content::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -10%;
  right: -10%;
  height: 2px;
  background: #f00;
  transform: rotate(-45deg);
  z-index: 1;
}

/* ===========================
   側邊欄小工具
   =========================== */
.woocommerce-widget-layered-nav-list {
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce-widget-layered-nav-list:has(.pvs-widget-swatch-wrapper) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  padding: 0 5px !important;
  column-gap: 8px !important;
  list-style: none !important;
}

.pvs-widget-swatch-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-bottom: 5px;
}

.pvs-widget-swatch-visual {
  display: inline-block !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #ddd;
  line-height: 0;
}

.pvs-widget-swatch-link.pvs-widget-shape-circle .pvs-widget-swatch-visual,
.pvs-widget-shape-circle .pvs-widget-swatch-visual {
  border-radius: 50% !important;
}

.pvs-widget-swatch-link.pvs-widget-shape-rounded .pvs-widget-swatch-visual,
.pvs-widget-shape-rounded .pvs-widget-swatch-visual {
  border-radius: 4px !important;
}

/* PVS 只隐藏有 swatches 的 select，其他使用主题原生样式 */

/* 確保 variations 容器可見 */
table.variations,
table.variations tbody,
table.variations tr {
  display: table !important;
  visibility: visible !important;
  position: static !important;
  left: auto !important;
  height: auto !important;
  overflow: visible !important;
}

table.variations tr {
  display: table-row !important;
}

/* 確保 WooCommerce 的清除按鈕保持可見 */
.reset_variations {
  visibility: visible !important;
  display: inline-block !important;
}

.pvs-original-select,
.pvs-original-select select {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 確保 WooCommerce 預設表格佈局 */
.woocommerce-product-gallery__wrapper {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.variations_form .variations tr {
  display: grid;
  line-height: 1;
}

.variations_form .variations td,
.variations_form .variations th {
  display: ruby;
  padding: 0.5em 0;
  vertical-align: middle;
}

.variations_form .variations td.label {
  padding-right: 1em;
}

/* PVS 只隱藏有 swatches 的屬性標籤 - 由 JavaScript 動態控制 */
/* 無 swatches 的屬性標籤會由主題原生樣式顯示 */

.variations_form .variations td.value {
  vertical-align: top;
}

/* ===========================
   響應式設計
   =========================== */
@media screen and (max-width: 768px) {
  .pvs-swatches {
    gap: 6px;
  }

  .pvs-size-medium .pvs-swatch-content {
    width: 35px;
    height: 35px;
  }

  .pvs-swatch-text {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* ===========================
   與 Flatsome 主題整合
   =========================== */
.product-page-accordion .pvs-swatches {
  margin: 15px 0;
}

/* ===========================
   載入動畫
   =========================== */
@keyframes pvs-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pvs-swatches.loading .pvs-swatch-item {
  animation: pvs-pulse 1.5s ease-in-out infinite;
}

/* ===========================
   可訪問性
   =========================== */
.pvs-swatch-item:focus {
  outline: 2px solid #0073aa;
  outline-offset: 2px;
}

/* 只在「停用缺貨樣本」開啟時才視覺停用 aria-disabled 樣本 */
.pvs-disable-oos .pvs-swatch-item[aria-disabled="true"] {
  opacity: 0.3;
  cursor: not-allowed;
}

.pvs-swatch-item {
  pointer-events: auto;
}

/* 為螢幕閱讀器提供的文字 */
.pvs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===========================
   產品畫廊縮略圖樣式
   =========================== */

/* 隱藏原始 WooCommerce 縮略圖（非 PVS 的）
  只在 PVS 真的接管畫廊時生效，避免無屬性圖時影響主題原生畫廊 */
.woocommerce-product-gallery.pvs-gallery-managed
  .flex-control-thumbs
  li:not(.pvs-gallery-thumb),
.woocommerce-product-gallery.pvs-gallery-managed
  .product-thumbnails
  li:not(.pvs-gallery-thumb),
.woocommerce-product-gallery.pvs-gallery-managed
  ol.flex-control-nav
  li:not(.pvs-gallery-thumb),
.product-images.pvs-gallery-managed
  .flex-control-thumbs
  li:not(.pvs-gallery-thumb),
.product-images.pvs-gallery-managed
  .product-thumbnails
  li:not(.pvs-gallery-thumb),
.product-images.pvs-gallery-managed
  ol.flex-control-nav
  li:not(.pvs-gallery-thumb),
.product-main.pvs-gallery-managed
  .flex-control-thumbs
  li:not(.pvs-gallery-thumb),
.product-main.pvs-gallery-managed
  .product-thumbnails
  li:not(.pvs-gallery-thumb),
.product-main.pvs-gallery-managed
  ol.flex-control-nav
  li:not(.pvs-gallery-thumb),
.product-gallery.pvs-gallery-managed
  .flex-control-thumbs
  li:not(.pvs-gallery-thumb),
.product-gallery.pvs-gallery-managed
  .product-thumbnails
  li:not(.pvs-gallery-thumb),
.product-gallery.pvs-gallery-managed
  ol.flex-control-nav
  li:not(.pvs-gallery-thumb),
.images.pvs-gallery-managed .flex-control-thumbs li:not(.pvs-gallery-thumb),
.images.pvs-gallery-managed .product-thumbnails li:not(.pvs-gallery-thumb),
.images.pvs-gallery-managed ol.flex-control-nav li:not(.pvs-gallery-thumb) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* 隱藏帶有特定類的原始縮略圖（僅接管期間） */
.pvs-gallery-managed li.pvs-original-thumb {
  display: none !important;
  visibility: hidden !important;
}

/* 隱藏主題原始的縮略圖容器（JS 動態標記，見下方 .pvs-hidden-native-thumbs）
   注意：舊版曾使用 :not(.pvs-gallery-slider-wrapper .product-thumbnails) 這類
   涉及後代組合符的複雜 :not() 選擇器（CSS Selectors Level 4），
   因各瀏覽器支援度不一而被移除。改由 JS 直接加 .pvs-hidden-native-thumbs 類別。 */

/* JS 動態標記：隱藏主題額外縮圖列（例如 Flatsome 外層縮圖） */
.pvs-hidden-native-thumbs {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

/* PVS 滑動容器包裝 */
.pvs-gallery-slider-wrapper {
  position: relative;
  margin: 15px 0;
  padding: 0 40px;
}

/* Quick View 縮圖容器間距 */
.pvs-gallery-thumbs-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 10px 0 !important;
  list-style: none !important;
  margin: 0 !important;
}

/* 縮略圖容器 - 橫向滑動（使用更強的選擇器覆蓋主題樣式） */
.pvs-gallery-slider-wrapper .flex-control-thumbs,
.pvs-gallery-slider-wrapper .product-thumbnails,
.pvs-gallery-slider-wrapper ol.flex-control-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth !important;
  list-style: none !important;
  gap: 10px !important;
  padding: 5px 0 !important;

  /* 隱藏滾動條但保持滑動功能 */
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.pvs-gallery-slider-wrapper .flex-control-thumbs::-webkit-scrollbar,
.pvs-gallery-slider-wrapper .product-thumbnails::-webkit-scrollbar,
.pvs-gallery-slider-wrapper ol.flex-control-nav::-webkit-scrollbar {
  display: none;
}

/* 縮略圖項目 */
.pvs-gallery-thumb {
  flex: 0 0 auto;
  width: 64px !important;
  height: 64px !important;
  cursor: pointer;
  opacity: 0.7;
  transition:
    opacity 0.2s ease,
    border-color 0.2s ease;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  list-style: none;
  margin: 0 5px;
  padding: 0;
}

.pvs-gallery-thumb:hover {
  opacity: 1;
  border-color: #007cba;
}

.pvs-gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.pvs-gallery-thumb img.flex-active,
.pvs-gallery-thumb img.active {
  opacity: 1;
}

.pvs-gallery-thumb.active,
.pvs-gallery-thumb:has(img.flex-active),
.pvs-gallery-thumb:has(img.active) {
  border-color: #007cba;
  opacity: 1;
}

.pvs-gallery-thumb:hover img {
  transform: scale(1.05);
}

/* 左右滑動箭頭 */
.pvs-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.pvs-gallery-arrow:hover {
  background: #fff;
  border-color: #007cba;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pvs-gallery-arrow.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.pvs-gallery-arrow-left {
  left: 0;
}

.pvs-gallery-arrow-right {
  right: 0;
}

.pvs-gallery-arrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
}

.pvs-gallery-arrow-left::before {
  transform: rotate(-135deg);
  margin-left: 3px;
}

.pvs-gallery-arrow-right::before {
  transform: rotate(45deg);
  margin-right: 3px;
}

/* 響應式調整 */
@media screen and (max-width: 768px) {
  .pvs-gallery-slider-wrapper {
    padding: 0 30px;
  }

  .pvs-gallery-thumb {
    width: 50px !important;
    height: 50px !important;
    margin: 0 4px;
  }

  .pvs-gallery-arrow {
    width: 28px;
    height: 28px;
  }

  .pvs-gallery-arrow::before {
    width: 6px;
    height: 6px;
  }
}

/* ===========================
   PVS 注入縮圖 - Flatsome 主題視覺優化
   =========================== */

/* 隱藏縮圖輪播的 Flickity 分頁圓點（Flatsome 原生縮圖不顯示圓點） */
.product-thumbnails .flickity-page-dots,
.slider-nav .flickity-page-dots,
.slider-nav-small .flickity-page-dots {
  display: none !important;
}

/* PVS 注入縮圖容器 - 匹配 Flatsome .product-thumbnails a */
.product-thumbnails .pvs-injected-thumb {
  background-color: #fff;
  border: 1px solid transparent;
  display: block;
  overflow: hidden;
  cursor: pointer;
  transform: translateY(0);
  transition: border-color 0.3s ease;
  /* 防止縮圖截斷：強制 overflow clip */
  box-sizing: border-box;
}

/* PVS 注入縮圖的圖片 - 預設半透明，匹配 Flatsome 原生縮圖行為 */
.product-thumbnails .pvs-injected-thumb img {
  backface-visibility: hidden;
  margin-bottom: 0 !important;  /* 清除會造成截斷的負 margin */
  opacity: 0.5;
  transition:
    transform 0.6s,
    opacity 0.6s;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  transform: translateY(0);
}

/* hover 狀態 - 縮圖邊框 */
.product-thumbnails .pvs-injected-thumb:hover {
  border-color: rgba(0, 0, 0, 0.2);
}

/* 選中（flex-active / is-nav-selected）狀態 - 縮圖邊框 */
.product-thumbnails .pvs-injected-thumb.flex-active,
.product-thumbnails .pvs-injected-thumb.is-nav-selected {
  border-color: rgba(0, 0, 0, 0.2);
}

/* hover 及選中狀態的圖片 - 亮度全開 + 上移動畫，匹配 Flatsome is-nav-selected */
.product-thumbnails .pvs-injected-thumb:hover img {
  opacity: 1;
  transform: translateY(-5px);
}

.product-thumbnails .pvs-injected-thumb.flex-active img,
.product-thumbnails .pvs-injected-thumb.is-nav-selected img {
  opacity: 1;
  transform: translateY(-5px);
}

/* ===========================
   目錄分頁樣本 (Catalog Swatches)
   =========================== */
.pvs-catalog-swatches {
  display: flex;
  gap: 4px;
  margin: 8px 0;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
}

.pvs-catalog-swatch-item {
  width: var(--catalog-size, 20px);
  height: var(--catalog-size, 20px);
  border: 1px solid #ddd;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.pvs-catalog-swatch-item:hover,
.pvs-catalog-swatch-item.selected {
  border-color: #000;
  transform: scale(1.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pvs-catalog-swatches.pvs-catalog-shape-circle .pvs-catalog-swatch-item,
.pvs-catalog-shape-circle .pvs-catalog-swatch-item {
  border-radius: 50% !important;
}

.pvs-catalog-swatches.pvs-catalog-shape-rounded .pvs-catalog-swatch-item,
.pvs-catalog-shape-rounded .pvs-catalog-swatch-item {
  border-radius: 3px !important;
}

/* ===========================
   快速瀏覽 (Quick View)
   =========================== */
.pvs-quick-view-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  width: 100%;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 10;
  visibility: hidden;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.product-small:hover .pvs-quick-view-btn,
.product:hover .pvs-quick-view-btn {
  opacity: 1;
  visibility: visible;
  top: 50%; /* 確保位置正確 */
}

.pvs-quick-view-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 999999 !important;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: 20px;
}

.pvs-quick-view-modal.active {
  opacity: 1;
  visibility: visible;
}

.pvs-quick-view-wrapper {
  background: #fff;
  width: 95%;
  max-width: 1100px;
  max-height: 90vh;
  position: relative;
  border-radius: 4px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.pvs-quick-view-close {
  position: absolute;
  top: -10px;
  right: -45px;
  font-size: 28px;
  line-height: 1;
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  z-index: 1000;
}

.pvs-quick-view-close:hover {
  color: #000;
}

.pvs-quick-view-body {
  padding: 40px;
  overflow-y: auto;
}

.pvs-quick-view-modal .woocommerce-product-gallery {
  position: relative;
}

.pvs-quick-view-modal .pvs-gallery-prev,
.pvs-quick-view-modal .pvs-gallery-next {
  position: absolute;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: rgba(255, 255, 255, 0.92);
  color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.pvs-quick-view-modal .pvs-gallery-prev {
  left: 10px !important;
  right: auto !important;
}

.pvs-quick-view-modal .pvs-gallery-next {
  right: 10px !important;
  left: auto !important;
}

.pvs-quick-view-modal .pvs-gallery-prev:hover,
.pvs-quick-view-modal .pvs-gallery-next:hover {
  border-color: #007cba;
  background: #fff;
}

.pvs-quick-view-content {
  display: flex;
  flex-direction: row;
  gap: 40px;
}

.pvs-qv-images {
  flex: 0 0 50%;
  max-width: 50%;
}

.pvs-qv-summary {
  flex: 1;
  text-align: left;
}

.pvs-qv-summary .product-title {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 24px;
  line-height: 1.2;
}

.pvs-qv-summary .price {
  font-size: 20px;
  font-weight: 600;
  color: #111;
  margin-bottom: 20px;
}

.pvs-qv-add-to-cart {
  margin: 25px 0;
  padding: 20px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.pvs-quick-view-content .woocommerce-product-gallery {
  position: relative;
}

.pvs-quick-view-content .pvs-gallery-thumb {
  width: 51px !important;
  height: 51px !important;
  margin: 0;
}

/* QV 點擊屬性後注入的縮圖：統一 51×51 並加 10px 間距 */
.pvs-gallery-thumbs-container .pvs-injected-thumb {
  width: 51px !important;
  height: 51px !important;
  overflow: hidden;
  flex-shrink: 0;
}

.pvs-gallery-thumbs-container .pvs-injected-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.pvs-quick-view-content .pvs-gallery-prev,
.pvs-quick-view-content .pvs-gallery-next {
  position: absolute;
  bottom: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}

.pvs-quick-view-content .pvs-gallery-prev {
  left: 10px;
}

.pvs-quick-view-content .pvs-gallery-next {
  right: 10px;
}

.pvs-qv-add-to-cart .variations td.label {
  display: none !important; /* 在快速瀏覽中也隱藏標籤，配合主產品頁面風格 */
}

/* 響應式調整 */
@media screen and (max-width: 768px) {
  .pvs-quick-view-content {
    flex-direction: column;
  }
  .pvs-qv-images,
  .pvs-qv-summary {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .pvs-quick-view-body {
    padding: 20px;
  }
}