/********************************************************* 
 * woo-variant-grid.css  v1.1.6
 * - 修复：选择层悬停标题渐隐出现绿色小点（通过非悬停态无填充+透明背景解决）
 * - 动画：选择层悬停标题 从下往上渐显，移开向下渐隐
 * - 选择层网格 padding：桌面左右 8px；移动左右 3px
 *********************************************************/

/* ========== 基础 / 兼容 ========== */
form.variations_form .variations,
form.variations_form .reset_variations{ display:none!important; } /* 前端隐藏原下拉与 Clear（不删 HTML） */
html { scrollbar-gutter: stable; } /* 保持滚动条可见，减少布局抖动 */

/* ========== 顶部标签行（左：属性；右：库存） ========== */
.wvt6-bar{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin:10px 0;
}
.wvt6-attrs{ display:flex; flex-wrap:wrap; gap:16px; font-size:14px; color:#111; }
.wvt6-attr b{ font-weight:700; }
.wvt6-attr .clear{ margin-left:6px; cursor:pointer; color:#666; font-size:13px; }
.wvt6-attr .clear:hover{ color:#000; }

.wvt6-stock{ display:flex; align-items:center; gap:8px; font-size:14px; color:#111; white-space:nowrap; }
.wvt6-stock .dot{ width:10px; height:10px; border-radius:9999px; display:inline-block; background:#9ca3af; }
.wvt6-stock.instock .dot{ background:#16a34a; }      /* 绿色=有货（库存指示保留原色） */
.wvt6-stock.onbackorder .dot{ background:#d97706; }  /* 橙色=预售/缺货待补 */
.wvt6-stock.outofstock .dot{ background:#dc2626; }   /* 红色=无货 */
.wvt6-stock .txt{ font-weight:700; }

/* ========== 主网格（6+1 / 3+1 或阈值下全量） ========== */
.wvt6-wrap{ width:100%; box-sizing:border-box; margin:10px 0 16px; }
.wvt6-grid{ gap:10px; }
.wvt6-grid.desktop{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); } /* ← 由 8 列改为 7 列 */
.wvt6-grid.mobile{ display:none; grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:850px){
  .wvt6-grid.desktop{ display:none; }
  .wvt6-grid.mobile{ display:grid; }
}

.wvt6-item{ user-select:none; cursor:pointer; position:relative; }
.wvt6-item[aria-disabled="true"]{ cursor:not-allowed; opacity:.45; filter:grayscale(25%); }

.wvt6-box{
  width:100%; aspect-ratio:1/1;
  border:1px solid #e5e7eb; border-radius:8px; overflow:hidden;
  background:#fff; position:relative; transition:border-color .15s, box-shadow .15s;
}
.wvt6-img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 选中：高亮蓝绿(#00b9cd)；悬停：深灰（仅可用且未选中） */
.wvt6-item.is-active .wvt6-box{
  border-color:#00b9cd;
  box-shadow:0 0 0 1px rgba(0,185,205,.15) inset, 0 0 0 2px rgba(0,185,205,.10);
}
.wvt6-item.is-active .wvt6-box::after{
  content:"✓"; position:absolute; right:6px; top:6px; width:18px; height:18px;
  border-radius:9999px; background:#00b9cd; color:#fff; font-size:12px; line-height:18px; text-align:center;
}
.wvt6-item:not(.is-active):not([aria-disabled="true"]) .wvt6-box:hover{ border-color:#4b5563; }

/* 下方数字标题（仅显示属性值中的数字） */
.wvt6-cap{
  margin-top:6px; text-align:center; font-size:12px; color:#111;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* “+N” 占位（不可选；不显示标题；可点击打开选择层）—— 深灰遮罩 + 白字 */
.wvt6-more{ cursor:pointer; }
.wvt6-more .wvt6-cap{ display:none; }
.wvt6-more .wvt6-box::before{
  content:""; position:absolute; inset:0; background:rgba(17,17,17,.55);
}
.wvt6-more .wvt6-plus{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:18px; color:#fff;
}

/* ========== 选择层 Overlay（全量变体） ========== */
.wvt6m-layer{ --wvt6m-hl:#00b9cd; } /* 高亮色变量由 #16a34a 改为 #00b9cd */
.wvt6m-layer{
  position:fixed; inset:0; z-index:9999;
  background:rgba(17,17,17,.55); backdrop-filter:saturate(120%) blur(2px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s ease, visibility .28s step-end;
}
.wvt6m-layer.is-open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .28s ease, visibility .28s step-start; }
.wvt6m-layer.is-closing{ opacity:0; visibility:visible; pointer-events:none; }

/* 面板主体：桌面=居中上移渐显；移动=底部抽屉 */
.wvt6m-panel{
  position:absolute; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.25);
  border-radius:12px; overflow:auto;
  transition:transform .30s ease, opacity .25s ease;
}
/* —— 桌面 —— */
@media (min-width:641px){
  .wvt6m-panel{
    left:50%; top:50%; width:min(1100px,96vw); max-height:90vh;
    padding:0 0 18px; /* 头部/网格在内部各自留白 */
    transform:translate(-50%, calc(-50% + 24px)); opacity:0;
  }
  .wvt6m-layer.is-open .wvt6m-panel{ transform:translate(-50%, -50%); opacity:1; }
  .wvt6m-layer.is-closing .wvt6m-panel{ transform:translate(-50%, calc(-50% + 24px)); opacity:0; }
}
/* —— 移动（抽屉） —— */
@media (max-width:850px){
  .wvt6m-panel{
    left:0; right:0; bottom:0; top:auto; width:100vw; max-height:85vh;
    padding:0 0 14px; border-radius:12px 12px 0 0;
    transform:translateY(100%); opacity:1;
  }
  .wvt6m-layer.is-open .wvt6m-panel{ transform:translateY(0); }
  .wvt6m-layer.is-closing .wvt6m-panel{ transform:translateY(100%); }
}

/* 头部（吸顶不随滚动） */
.wvt6m-head{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px 12px; background:#fff; border-bottom:1px solid #eee;
}
.wvt6m-title{ font-size:16px; font-weight:700; color:#111; }
.wvt6m-close{ cursor:pointer; font-size:18px; line-height:1; padding:6px 10px; border-radius:6px; }
.wvt6m-close:hover{ background:#f3f4f6; }

/* 网格：桌面6列 / 移动4列；新：左右内间距（桌面 8px / 移动 3px） */
.wvt6m-grid{
  display:grid; gap:0; grid-template-columns:repeat(6, minmax(0,1fr));
  padding:12px 8px 0;   /* ← 桌面左右 8px */
}
@media(max-width:850px){
  .wvt6m-grid{
    grid-template-columns:repeat(4, minmax(0,1fr));
    padding:12px 3px 0; /* ← 移动左右 3px */
  }
}

.wvt6m-item{
  user-select:none; cursor:pointer; position:relative; background:#fff;
  border-right:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb;
}
.wvt6m-item[aria-disabled="true"]{ cursor:not-allowed; opacity:.45; filter:grayscale(25%); }
/* 桌面补左/上线（6列） */
.wvt6m-item:nth-child(6n+1){ border-left:1px solid #e5e7eb; }
.wvt6m-item:nth-child(-n+6){ border-top:1px solid #e5e7eb; }
/* 移动补左/上线（4列） */
@media(max-width:850px){
  .wvt6m-item:nth-child(4n+1){ border-left:1px solid #e5e7eb; }
  .wvt6m-item:nth-child(-n+4){ border-top:1px solid #e5e7eb; }
}

/* 无圆角内容容器 */
.wvt6m-box{ width:100%; aspect-ratio:1/1; border:none; border-radius:0; overflow:hidden; background:#fff; position:relative; z-index:1; }
.wvt6m-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s ease; will-change:transform; }

/* Hover：四边 1px（=高亮色） + 图片轻缩放 */
.wvt6m-item:not([aria-disabled="true"]):hover::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border:1px solid var(--wvt6m-hl); border-radius:0; box-shadow:none; background:transparent;
}
.wvt6m-item:not([aria-disabled="true"]):hover .wvt6m-img{ transform:scale(1.04); }

/* 选中：四边 1px（=高亮色）优先于 hover；并显示右上角对号圆标 */
.wvt6m-item.is-active::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border:1px solid var(--wvt6m-hl); border-radius:0; box-shadow:none; background:transparent;
}
.wvt6m-item.is-active:hover::before{ border:none; }
.wvt6m-item.is-active .wvt6m-box::after{
  content:"✓"; position:absolute; right:6px; top:6px; width:18px; height:18px;
  border-radius:9999px; background:var(--wvt6m-hl); color:#fff;
  font-size:12px; line-height:18px; text-align:center; z-index:4;
}

/* 左下角数字标签：白底 + 深灰字（无阴影、直角） */
.wvt6m-cap{
  position:absolute; left:0px; bottom:0px; padding:4px 6px;
  font-size:12px; color:#374151; 
 /* background:#fff;*/
  border-radius:0;
  box-shadow:none; border:none;
}

/* 悬停顶部标题条（自适应宽度、居中、背景=高亮）
   动画：进入=从下往上渐显；离开=向下渐隐；移动端/触摸端禁用
   —— 修复绿色小点：非悬停态去掉填充并设透明背景 —— */
.wvt6m-box::before{
  content:attr(data-title);
  position:absolute;
  left:50%;
  top:6px;
  transform:translate(-50%, 8px); /* 初始在下方 */
  opacity:0;

  background:transparent;         /* ← 非悬停态透明 */
  color:#fff;
  font-size:12px;
  line-height:1;
  padding:0;                      /* ← 非悬停态无填充，避免“绿色小点” */
  border-radius:4px;
  white-space:nowrap;
  pointer-events:none;
  z-index:4;

  transition:opacity .18s ease, transform .18s ease, padding .18s ease, background-color .18s ease;
}
.wvt6m-item:not([aria-disabled="true"]):hover .wvt6m-box::before{
  opacity:1;
  transform:translate(-50%, 0);
  padding:4px 8px;               /* ← 悬停时才有填充 */
  background:var(--wvt6m-hl);    /* ← 悬停时才上色 */
}
/* 移动端/无悬停环境：取消显示标题条 */
@media (max-width:850px){
  .wvt6m-box::before{ display:none !important; }
  .wvt6m-item:not([aria-disabled="true"]):hover .wvt6m-box::before{ display:none !important; }
}
@media (hover:none){
  .wvt6m-box::before{ display:none !important; }
}

/* ===== Forced Colors Mode（取代 -ms-high-contrast）可访问性补丁 ===== */
@media (forced-colors: active){
  .wvt6-item.is-active .wvt6-box{
    border-color: ButtonText !important;
    box-shadow: none !important;
  }
  .wvt6-item.is-active .wvt6-box::after{
    background: ButtonText !important;
    color: ButtonFace !important;
  }
  .wvt6m-item.is-active::after{
    border-color: ButtonText !important;
  }
  .wvt6m-item:not([aria-disabled="true"]):hover::before{
    border-color: ButtonText !important;
  }
}