/* ============================================================
   jpelf 商品详情页 · 独立样式文件
   Version: 2.0.0
   Elf Digital / jpelf.com — Shoptimizer 子主题

   ------------------------------------------------------------
   ⚠️ 设计前提：主线 style.css（当前 v2.4.18）保持不变、不再追加。
      本文件是商品详情页专用样式，独立维护。

   ⚠️ 加载顺序：必须在 style.css【之后】加载
      理由：本文件要覆盖主题默认样式。
      但本文件已剔除所有 FK Cart 规则 —— 那部分归 style.css 管
      （v2.4.6 / v2.4.11 / v2.4.18 已迭代到新版，
        若在此重复旧版 v2.3.0 规则会造成回退）。

   ⚠️ 作用域：全部选择器带 .single-product 前缀，
      即使误并入 style.css 也只影响商品详情页，不会误伤其他页面。

   ⚠️ CSS 变量：文件顶部有 :root 兜底定义。
      若 style.css 已定义相同变量，两者取值一致，无害；
      若本文件先于 style.css 加载，兜底保证变量不失效。

   ------------------------------------------------------------
   目标 DOM（2026-08-30 实测）：
     div#product-7172.product
     ├── div.product-details-wrapper
     │   ├── div.woocommerce-product-gallery
     │   └── div.summary.entry-summary
     ├── div.woocommerce-tabs
     └── section.related-wrapper
   ------------------------------------------------------------
   ============================================================ */


/* ---------- 设计令牌兜底（与 style.css 完全一致，防加载顺序问题） ---------- */
:root{
  --c-lime:#0E7C7C;
  --c-ink-green:#FFFFFF;
  --c-ink-green-bg:#0C8484;
  --c-ink:#F2F7F5;
  --c-ink-2:#FFFFFF;
  --c-ink-3:#E8F0EE;
  --c-ink-hover:#E0EAE7;
  --c-text:#0B2E2B;
  --c-muted:#5A6B68;
  --c-danger:#DC2626;
  --font-num:"Inter Tight";
}


/* ============================================================
   第 1 部分：结构骨架
   —— 传一次基本不用动
   ============================================================ */

/* ---------- 1.0 清除 WooCommerce / Shoptimizer 的 float 布局 ----------
   WooCommerce 默认：
     .woocommerce div.product div.images  { float:left;  width:48% }
     .woocommerce div.product div.summary { float:right; width:48% }
   不清除就上 Grid 会打架。这一步是前提。
   ---------------------------------------------------------------- */
.single-product .woocommerce-product-gallery,
.single-product div.product div.images{
  float:none !important;
  width:auto !important;
  margin:0 !important;
}
.single-product .summary.entry-summary,
.single-product div.product div.summary{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  clear:both !important;
}
.single-product .product-details-wrapper::after{
  content:"" !important;
  display:block !important;
  clear:both !important;
}

/* ---------- 1.1 外层三块（图+信息 / Tab / 相关商品） ---------- */
.single-product div.product{
  display:grid !important;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:
    "details"
    "tabs"
    "related";
  gap:48px 0;
}
.single-product .product-details-wrapper{ grid-area:details; min-width:0; }
.single-product .woocommerce-tabs{        grid-area:tabs;    min-width:0; }
.single-product .related-wrapper{         grid-area:related; min-width:0; }

@media (min-width:768px){
  .single-product div.product{ gap:56px 0; }
}

/* ---------- 1.2 内层「图 + 信息」左右分栏（默认 1:1） ---------- */
.single-product .product-details-wrapper{
  display:grid !important;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:
    "gallery"
    "summary";
  gap:32px;
}
.single-product .woocommerce-product-gallery{ grid-area:gallery; min-width:0; }
.single-product .summary.entry-summary{      grid-area:summary; min-width:0; }

@media (min-width:768px){
  .single-product .product-details-wrapper{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"gallery summary";
    gap:40px 48px;
    align-items:start;
  }
}

/* ---------- 1.3 溢出安全网 ---------- */
.single-product .woocommerce-product-gallery img,
.single-product .woocommerce-product-gallery__image img{
  max-width:100% !important;
  height:auto !important;
}


/* ============================================================
   第 2 部分：深色配色（原 v2.3.0 商品详情页专项，已迁移）
   —— 修复 Shoptimizer 产品页残余白底
   ============================================================ */

/* ---------- 2.1 Tabs 容器白底 → 透出深底 ---------- */
.single-product .woocommerce-tabs{
  background-color:transparent !important;
  background:transparent !important;
}
.single-product .woocommerce-tabs .panel,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel,
.single-product #tab-description,
.single-product #tab-additional_information{
  background:transparent !important;
  color:var(--c-text) !important;
}
.single-product .woocommerce-tabs ul.tabs li a,
.single-product .woocommerce-tabs ul.wc-tabs li a{
  color:var(--c-muted) !important;
}
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.wc-tabs li.active a{
  color:var(--c-lime) !important;
}

/* ---------- 2.2 变体下拉 / 数量框 白底 → 深底 ---------- */
.single-product .summary table.variations select,
.single-product .summary select,
.single-product .variations select,
.single-product .wqm-qty-wrapper select.qty{
  background-color:var(--c-ink-2) !important;
  color:var(--c-text) !important;
  border:1px solid rgba(255,255,255,.12) !important;
}
.single-product .summary table.variations td,
.single-product .summary table.variations th{
  color:var(--c-text) !important;
}

/* ---------- 2.3 画廊：深色卡片底 + 图片深色框 ---------- */
.single-product .woocommerce-product-gallery{
  background:var(--c-ink-2) !important;
  border:1px solid rgba(45,212,191,.18) !important;
  border-radius:24px !important;
  padding:14px;
}
.single-product .woocommerce-product-gallery__image img,
.single-product .flex-control-thumbs img,
.single-product .flex-control-thumbs li img{
  background:#1A2423 !important;
  border-radius:14px;
}
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover{
  border:2px solid var(--c-lime) !important;
}
/* 画廊放大触发钮（默认白圆） */
.single-product .woocommerce-product-gallery__trigger{
  background:var(--c-ink-3) !important;
  color:var(--c-lime) !important;
}

/* ---------- 2.4 价格：强调色 lime ---------- */
.single-product .price,
.single-product .price > .amount,
.single-product .price ins,
.single-product .price .woocommerce-Price-amount{
  color:var(--c-lime) !important;
  font-family:var(--font-num) !important;
}
/* 划线原价：日本电商惯例用红色表示折扣力度 */
.single-product .price del,
.single-product .price del .amount,
.single-product .price del .woocommerce-Price-amount,
.single-product .price del .woocommerce-Price-currencySymbol{
  color:#C62828 !important;
}

/* ---------- 2.5 面包屑 ---------- */
.single-product .woocommerce-breadcrumb,
.single-product .site-breadcrumbs{
  color:var(--c-muted) !important;
}
.single-product .woocommerce-breadcrumb a,
.single-product .site-breadcrumbs a{ color:var(--c-lime) !important; }

/* ---------- 2.6 库存状态 ---------- */
.single-product .stock.in-stock{ color:var(--c-lime) !important; }
.single-product .stock.out-of-stock{ color:var(--c-danger) !important; }


/* ============================================================
   第 2.7 部分：WooCommerce Variation Swatches 深色化
   插件：woo-variation-swatches v2.3.0
   目标：变体选择器（口味/规格）白底 → 黑底 + 绿边 + 选中墨绿
   ============================================================ */

/* --- 变体区容器 / 标签文字 --- */
.single-product .variations,
.single-product .variable-items-wrapper,
.single-product .nm-variation-row{
  background:transparent !important;
}
.single-product .variations label,
.single-product .woo-variation-item-label,
.single-product .wvs-item-label,
.single-product .group-variable-items-name{
  color:var(--c-text) !important;
  font-weight:600 !important;
}

/* --- 变体按钮：默认态（黑底 + 绿边 + 白字） --- */
.single-product .variable-item,
.single-product .button-variable-item,
.single-product .radio-variable-item{
  background:var(--c-ink-2) !important;
  border:1px solid rgba(45,212,191,.25) !important;
  border-radius:10px !important;
  color:var(--c-text) !important;
  box-shadow:none !important;
}
/* 变体按钮内容 */
.single-product .variable-item span,
.single-product .variable-item-contents,
.single-product .variable-item-span{
  color:var(--c-text) !important;
}

/* --- 变体按钮：hover（边框加亮 + 微上浮） --- */
.single-product .variable-item:hover,
.single-product .button-variable-item:hover,
.single-product .radio-variable-item:hover{
  border-color:rgba(45,212,191,.55) !important;
  background:var(--c-ink-3) !important;
  transform:translateY(-1px);
}

/* --- 变体按钮：选中态（墨绿底 + lime 字 + 实心绿边） --- */
.single-product .variable-item.selected,
.single-product .variable-item.woo-selected-variation-item-name,
.single-product .button-variable-item.selected,
.single-product .radio-variable-item.selected{
  background:#D8E8E4 !important;
  border-color:#0E7C7C !important;
  color:#0E7C7C !important;
  box-shadow:0 0 12px rgba(45,212,191,.25), inset 0 0 8px rgba(45,212,191,.08) !important;
}
.single-product .variable-item.selected span,
.single-product .variable-item.selected .variable-item-contents,
.single-product .variable-item.selected .variable-item-span{
  color:#0E7C7C !important;
}

/* --- 变体按钮：禁用态（灰底 + 灰字 + 虚线边） --- */
.single-product .variable-item.disabled,
.single-product .variation-disabled.variable-item,
.single-product .disabled.radio-variable-item{
  background:rgba(19,20,26,.5) !important;
  border:1px dashed rgba(255,255,255,.12) !important;
  color:var(--c-muted) !important;
  opacity:.5;
  cursor:not-allowed;
  transform:none !important;
}

/* --- 变体下拉（fallback select，未用 WVS 时） --- */
.single-product .variations table.variations td.value select,
.single-product .variation-select,
.single-product .select-wrapper .select-styled,
.single-product .woo-variation-raw-select{
  background:var(--c-ink-2) !important;
  color:var(--c-text) !important;
  border:1px solid rgba(45,212,191,.25) !important;
  border-radius:8px !important;
  padding:10px 14px !important;
}

/* --- "清除选择" 按钮 --- */
.single-product .reset_variations,
.single-product .clear-selection{
  color:var(--c-muted) !important;
  font-size:13px !important;
}
.single-product .reset_variations:hover,
.single-product .clear-selection:hover{
  color:var(--c-lime) !important;
}


/* ============================================================
   第 3 部分：布局变体（全部注释，按需启用）
   —— 这是你反复调的地方
   ============================================================

   速查：
     左右比例  → .product-details-wrapper 的 grid-template-columns
                 1fr 1fr=1:1 | 4fr 6fr=图小 | 6fr 4fr=图大
     上下顺序  → div.product 的 grid-template-areas
     左右镜像  → grid-template-areas:"summary gallery"
   ============================================================ */

/* --- 变体 A：图小信息大（4:6） --- */
/*
@media (min-width:768px){
  .single-product .product-details-wrapper{
    grid-template-columns:minmax(0,4fr) minmax(0,6fr);
  }
}
*/

/* --- 变体 B：图大信息小（6:4） --- */
/*
@media (min-width:768px){
  .single-product .product-details-wrapper{
    grid-template-columns:minmax(0,6fr) minmax(0,4fr);
  }
}
*/

/* --- 变体 C：信息在左、图在右（镜像） --- */
/*
@media (min-width:768px){
  .single-product .product-details-wrapper{
    grid-template-areas:"summary gallery";
  }
}
*/

/* --- 变体 D：Tab 挪到相关商品后面 --- */
/*
.single-product div.product{
  grid-template-areas:
    "details"
    "related"
    "tabs";
}
*/

/* --- 变体 E：加购区移动端吸底 --- */
/*
@media (max-width:767px){
  .single-product form.cart{
    position:sticky;
    bottom:0;
    z-index:20;
    background:rgba(10,11,14,.96);
    backdrop-filter:blur(8px);
    padding:12px 16px;
    margin:16px -16px -8px;
    border-top:1px solid rgba(45,212,191,.25);
  }
}
*/

/* --- 变体 F：Tab 加卡片底（与深色主题统一） --- */
/*
.single-product .woocommerce-tabs{
  background:rgba(14,15,19,.6) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:20px;
  padding:8px 24px 24px;
}
*/

/* --- 变体 G：相关商品与 Tab 并排（≥1024px） --- */
/*
@media (min-width:1024px){
  .single-product div.product{
    grid-template-columns:minmax(0,2fr) minmax(0,1fr);
    grid-template-areas:
      "details details"
      "tabs    related";
    gap:56px 40px;
  }
}
*/

/* --- 变体 H：图区吸顶（长信息页） --- */
/*
@media (min-width:768px){
  .single-product .woocommerce-product-gallery{
    position:sticky;
    top:100px;
  }
}
*/