/* ============================================================
   PDP — WooCommerce single-product skin
   所有选择器锚定 WooCommerce 原生类名，子主题里后加载即可覆盖
   ============================================================ */
.pdp-main{padding:30px 0 0}
.woocommerce-breadcrumb{margin:0 0 24px;font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.woocommerce-breadcrumb a{color:var(--muted)}
.woocommerce-breadcrumb a:hover{color:var(--coral)}

.product{padding-bottom:10px}
.pdp-grid{
  display:grid;grid-template-columns:1.04fr .96fr;gap:36px;align-items:start;
  padding-bottom:36px;
}
/* 关键：grid item 默认 min-width:auto，会用内容 min-content 当宽度下限。
   图廊里「4 列缩略图」的 min-content 合计约 438px > 手机列宽 342px，
   会把整列顶宽 → 页面横向溢出 → 被 body{overflow-x:hidden} 静默裁掉，
   同时把 position:fixed 的 WA 气泡按文档宽度右移推出屏幕（溢出多少推多少）。
   加 min-width:0 解除该下限，让内部 grid 按容器宽度重新分配。 */
.pdp-grid>*{min-width:0}
@media(max-width:1020px){
  .pdp-grid{grid-template-columns:minmax(0,1fr);gap:22px;padding-bottom:28px}
}

/* ---------- gallery ---------- */
.woocommerce-product-gallery{position:relative;margin:0}
.woocommerce-product-gallery__image{position:relative}
.woocommerce-product-gallery__image>span,
.woocommerce-product-gallery__image>a{display:block}

/* 主图区：横向滑动切换（老板要求「主图左右滑动可以切换」）。
   用原生 scroll-snap 而不是 JS 轮播 —— 触摸拖动、触控板横扫、
   鼠标拖动都直接可用，且不依赖任何轮播库（线上的 flexslider 实测没加载，
   靠它永远出不来）。一张占满一屏，滑一次正好切一张。 */
.woocommerce-product-gallery__wrapper{
  display:flex;margin:0;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  cursor:grab;
  /* 拖动看下一张时别顺手把图片/文字选中了（会拖出一片蓝色选区） */
  user-select:none;-webkit-user-select:none;
}
.woocommerce-product-gallery__wrapper:active{cursor:grabbing}
/* 关掉图片的原生拖拽：Chrome 里按住图片会启动「拖拽图片」，pointermove 被抢走 */
.woocommerce-product-gallery__image img{-webkit-user-drag:none}
.woocommerce-product-gallery__wrapper::-webkit-scrollbar{display:none}
/* min-width:0 必须写：flex 子项默认 min-width:auto，会被图片固有宽度顶住，
   窄屏时把容器顶宽 → 页面横向溢出。 */
.woocommerce-product-gallery__image{
  flex:0 0 100%;min-width:0;scroll-snap-align:start;
  border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(150deg,#F7F0E7,#ECE1D2);border:1px solid var(--line);
}
.woocommerce-product-gallery__image img{
  width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;
}
.wpg-frame{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(150deg,#F7F0E7,#ECE1D2);border:1px solid var(--line);
  aspect-ratio:1;display:grid;place-items:center;
}
.wpg-frame svg{width:100%;height:100%}
.wpg-flag{
  position:absolute;top:18px;left:18px;z-index:3;
  background:var(--ink);color:var(--sun);border-radius:999px;padding:9px 16px;
  font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
}
.wpg-tools{position:absolute;right:16px;bottom:16px;z-index:3;display:flex;gap:8px}
.wpg-tools button{
  width:38px;height:38px;border-radius:50%;background:#fff;color:var(--ink);
  display:grid;place-items:center;box-shadow:0 8px 22px rgba(20,17,16,.16);
}
/* ---------- 缩略图：一排 4 个 × 2 排 = 8 个，多的整条横向滑动 ----------
   ⚠️ 下面每个选择器都带 `body.woocommerce div.product div.images` 前缀，不是啰嗦，
   WooCommerce 自带的规则是（实测抓它的 woocommerce.css 得到的原文）：
     .woocommerce div.product div.images .flex-control-thumbs{overflow:hidden;zoom:1;margin:0;padding:0}
     .woocommerce div.product div.images .flex-control-thumbs li{width:25%;float:left;margin:0;list-style:none;position:relative}
     .woocommerce div.product div.images .flex-control-thumbs li img{opacity:.5;cursor:pointer;margin:0}
     .woocommerce div.product .woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1){clear:left}
   只写 `ol.flex-control-thumbs li` 特异性差一截，**根本压不住**。2026-09-21 实测后果：
   桌面 138px 的网格格子里只渲染出 35×35 的缩略图（被 width:25% 命中）、
   float:left 让元素脱离 grid 轨道、overflow:hidden 把「多于 8 张横向滑动」吃掉、
   img 那层 opacity:.5 让缩略图发灰。
   **覆盖框架样式必须连它的选择器一起抄全。**
   不带前缀的那份保留给设计稿本地预览用（设计稿里没有 .woocommerce 祖先）。 */
/* repeat(4,1fr) 的 1fr 实际是 minmax(auto,1fr) —— 列的下限会被图片的
   固有宽度顶住，窄屏放不下就把容器顶宽、页面横向溢出。
   必须写成 minmax(0,1fr) 显式解除下限。 */
ol.flex-control-thumbs,
body.woocommerce div.product div.images .flex-control-thumbs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  list-style:none;margin:14px 0 0;padding:0;
  overflow:visible;
}
/* :nth-child(n) 是为了压过 WC 那条 `--columns-4 … li:nth-child(4n+1){clear:left}`
   （它多一个伪类，纯前缀拼不过）；clear 不清掉会把 grid 流打断。 */
ol.flex-control-thumbs li,
body.woocommerce div.product div.images .flex-control-thumbs li:nth-child(n){
  margin:0;min-width:0;width:auto;float:none;clear:none;position:relative;
}
ol.flex-control-thumbs li button,
ol.flex-control-thumbs li img,
body.woocommerce div.product div.images .flex-control-thumbs li img{
  width:100%;aspect-ratio:1;border-radius:var(--radius);display:block;
  border:1.5px solid var(--line);background:#F7F0E7;overflow:hidden;opacity:1;
  transition:border-color .2s,transform .2s var(--ease);
}
ol.flex-control-thumbs li button{padding:0;cursor:pointer}
ol.flex-control-thumbs li:hover img,
body.woocommerce div.product div.images .flex-control-thumbs li:hover img{
  transform:translateY(-2px);
}
ol.flex-control-thumbs li.is-active img,
ol.flex-control-thumbs li img.flex-active,
body.woocommerce div.product div.images .flex-control-thumbs li.is-active img,
body.woocommerce div.product div.images .flex-control-thumbs li img.flex-active{
  border-color:var(--ink);
}
/* is-scroll：缩略图超过 8 张（4 列 × 2 行）时，整条可以左右滑动看后面的。
   grid-auto-flow:column 让它先竖着填满 2 行、再往右开新列 ——
   「一排 4 个、共 2 排」和「多了能横向移动」同时成立。
   第 9 项起的列宽用 grid-auto-columns 显式给定，与前 4 列（minmax(0,1fr)）
   的算法保持一致，否则新列会按内容宽度乱掉。
   用类名而不是 :has() —— 脚本按图片数量加类，老浏览器也认。 */
ol.flex-control-thumbs.is-scroll,
body.woocommerce div.product div.images .flex-control-thumbs.is-scroll{
  grid-auto-flow:column;
  grid-template-rows:repeat(2,auto);
  /* ⚠️ 必须把显式列清掉。容器上还有 repeat(4,minmax(0,1fr))，而在**可滚动**容器里
     fr 列是按「剩余空间」分配的 —— auto 列先把宽度占满、剩余为 0，
     实测前 4 列被压成 0px（那几张缩略图整块消失），第 5 列起才是正常宽度。
     清成 none 之后，所有列统一由 grid-auto-columns 给宽，列宽才一致。 */
  grid-template-columns:none;
  grid-auto-columns:calc((100% - 36px) / 4);
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
ol.flex-control-thumbs.is-scroll::-webkit-scrollbar,
body.woocommerce div.product div.images .flex-control-thumbs.is-scroll::-webkit-scrollbar{display:none}

/* ---------- summary ---------- */
.summary.entry-summary{padding-top:4px}
.summary .pdp-eyebrow{
  font-size:11px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;
  color:var(--coral);display:block;margin-bottom:12px;
}
h1.product_title.entry-title{
  font-family:'Archivo Black','Arial Black',Impact,sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:-.015em;line-height:1.02;
  font-size:clamp(25px,2.55vw,34px);margin:0 0 10px;
}
.pdp-rating{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;font-size:12.5px;color:var(--muted)}
.pdp-rating .sep{opacity:.4}

.pdp-price-row{display:flex;align-items:flex-end;gap:12px;margin:0 0 4px}
p.price{
  margin:0;font-size:38px;font-weight:800;letter-spacing:-.025em;line-height:1;
  color:var(--ink);display:flex;align-items:baseline;
}
p.price .woocommerce-Price-currencySymbol{font-size:.6em;position:relative;top:-.06em}
p.price small.woocommerce-price-suffix{font-size:13px;font-weight:600;color:var(--muted);margin-left:8px}
.pdp-unit{font-size:13px;font-weight:600;color:var(--muted);padding-bottom:6px}
.pdp-vat{font-size:12px;color:var(--muted);margin:0 0 14px}

.woocommerce-product-details__short-description{
  font-size:14px;line-height:1.58;color:#4A423D;margin:0 0 16px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.woocommerce-product-details__short-description strong{color:var(--ink);font-weight:700}

/* ---------- variations ---------- */
form.cart{margin:0;display:flex;flex-direction:column;gap:0}
table.variations{width:100%;border-collapse:collapse;margin:0 0 20px}
table.variations tr{display:block;padding:0 0 18px}
table.variations th.label{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 0 11px;text-align:left;font-weight:700;font-size:13px;
  letter-spacing:.01em;text-transform:none;color:var(--ink);
}
table.variations th.label label{margin:0}
table.variations th.label .pdp-sizelink{
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line);
}
table.variations th.label .pdp-sizelink:hover{color:var(--coral);border-bottom-color:var(--coral)}
table.variations td.value{display:block;padding:0}
/* 原生 select 保留在 DOM 里（表单提交要用），视觉上由 swatch 接管 */
table.variations select{position:relative;width:100%;height:auto;opacity:1;pointer-events:auto}
.pdp-switches{display:flex;gap:10px;flex-wrap:wrap}
.swatch{
  flex:1 1 0;min-width:104px;text-align:left;
  border:1.5px solid var(--line);border-radius:var(--radius);
  background:#fff;padding:12px 14px;transition:all .2s var(--ease);
}
.swatch b{display:block;font-size:13.5px;font-weight:800;letter-spacing:.01em}
.swatch small{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:3px;line-height:1.4}
.swatch .pw{display:block;font-size:12.5px;font-weight:800;margin-top:7px;color:var(--ink)}
.swatch:hover{border-color:rgba(20,17,16,.34)}
.swatch.on{border-color:var(--ink);background:var(--ink)}
.swatch.on b{color:#fff}
.swatch.on small{color:var(--muted-dark)}
.swatch.on .pw{color:var(--sun)}

.woocommerce-variation.single_variation{margin:0 0 6px}
.pdp-stock{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  color:#1E7A4C;margin-bottom:16px;
}
.pdp-stock i{width:8px;height:8px;border-radius:50%;background:#25A35A;flex:none}

/* ---------- quantity + add to cart ---------- */
.pdp-buy-row{display:flex;gap:12px;align-items:stretch;margin:0 0 12px}
.quantity{display:flex;align-items:center;flex:none}
.quantity label{display:none}
.quantity .qty-wrap{
  display:grid;grid-template-columns:44px 58px 44px;align-items:center;
  border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:#fff;height:56px;
}
.quantity button.pdp-step{
  width:44px;height:54px;font-size:19px;font-weight:700;color:var(--ink);
  display:grid;place-items:center;line-height:1;
}
.quantity button.pdp-step:hover{background:var(--paper-2)}
input.qty{
  width:58px;height:54px;border:0;text-align:center;font-size:15px;font-weight:800;
  background:transparent;color:var(--ink);-moz-appearance:textfield;
}
input.qty::-webkit-outer-spin-button,
input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

button.single_add_to_cart_button{
  flex:1 1 auto;height:56px;border-radius:999px;background:var(--coral);color:#fff;
  font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:background .25s,transform .2s var(--ease);
}
button.single_add_to_cart_button:hover{background:var(--ink)}
button.single_add_to_cart_button:active{transform:scale(.985)}
/* PayPal 结算占位：保持视觉层级，但明确标记尚未接通真实网关。 */
.pdp-paypal-placeholder{
  width:100%;min-height:56px;margin:0 0 14px;padding:8px 18px;
  border:0;border-radius:999px;background:#ffc439;color:#003087;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:13px;font-weight:800;letter-spacing:.02em;text-align:center;
  cursor:not-allowed;opacity:.96;
}
.pdp-paypal-placeholder .paypal-mark{font-size:18px;letter-spacing:-.08em;line-height:1}
.pdp-paypal-placeholder .paypal-mark b{font-weight:800;color:#003087}
.pdp-paypal-placeholder .paypal-mark strong{font-weight:800;color:#009cde}
.pdp-paypal-placeholder small{font-size:10px;font-weight:600;letter-spacing:0;color:#365078}

.pdp-wa{
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:52px;border-radius:999px;border:1.5px solid var(--line);
  font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);margin:0 0 20px;transition:border-color .2s,color .2s;
}
.pdp-wa:hover{border-color:#25A35A;color:#1E7A4C}
.pdp-wa svg{flex:none}

/* ---------- free-shipping meter ---------- */
.pdp-meter{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;margin:0 0 20px;
}
.pdp-meter .m-top{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12.5px;font-weight:700;margin-bottom:10px;gap:12px;
}
.pdp-meter .m-top span{color:var(--ink)}
.pdp-meter .m-top b{color:var(--coral);font-weight:800}
.pdp-meter .bar{height:7px;border-radius:99px;background:rgba(20,17,16,.10);overflow:hidden}
.pdp-meter .bar i{
  display:block;height:100%;width:25%;border-radius:99px;
  background:linear-gradient(90deg,var(--sun),var(--coral));
  transition:width .35s var(--ease);
}
.pdp-meter.done .m-top b{color:#1E7A4C}

/* ---------- trust grid ---------- */
.pdp-trust{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin:0 0 22px;
}
.pdp-trust div{background:#fff;padding:14px 15px;display:flex;gap:11px;align-items:flex-start}
.pdp-trust svg{flex:none;margin-top:2px}
.pdp-trust b{display:block;font-size:12.5px;font-weight:800;line-height:1.3}
.pdp-trust span{display:block;font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:2px}

.pdp-shipnote{font-size:12.5px;color:var(--muted);line-height:1.7;margin:0}
.pdp-shipnote b{color:var(--ink)}
.pdp-pay{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;
  padding:12px 0 0;border-top:1px solid var(--line);
}
.pdp-pay .lbl{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--muted)}
/* PayPal 仍是视觉占位，不暗示已接通真实网关；旁边明确写出保护与卡支付。 */
.pdp-pay .pay-note{flex:1 1 100%;font-size:11px;line-height:1.45;color:var(--muted)}
.pdp-pay .pay-note strong{color:var(--ink)}
/* 动态 WooCommerce 商品页使用的紧凑信任/支付占位。 */
.pdp-live-trust{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  margin:14px 0 0;padding:10px 0;border-top:1px solid var(--line);
}
.pdp-live-trust span{font-size:11px;line-height:1.35;color:var(--muted)}
.pdp-live-trust b{display:block;color:var(--ink);font-size:11.5px;margin-bottom:2px}
.pdp-live-payment{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding-top:10px;border-top:1px solid var(--line);margin-top:4px;
}
.pdp-live-payment .live-label{font-size:9.5px;font-weight:800;letter-spacing:.1em;color:var(--muted)}
.pdp-live-payment .live-chip{height:26px;min-width:46px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--ink)}
.pdp-live-payment .live-chip.paypal{color:#003087;font-size:11px}
.pdp-live-payment small{flex:1 1 100%;font-size:10.5px;line-height:1.4;color:var(--muted)}
@media(max-width:520px){
  .pdp-live-trust{grid-template-columns:1fr;gap:6px;padding:9px 0}
  .pdp-live-trust span{display:flex;gap:5px;align-items:baseline}
  .pdp-live-trust b{display:inline}
  .pdp-live-payment .live-chip{min-width:42px;padding:0 7px}
}

/* ---------- tabs (WooCommerce 原生 woocommerce-tabs) ---------- */
.woocommerce-tabs{border-top:1px solid var(--line);padding:0 0 30px}
ul.wc-tabs{
  display:flex;justify-content:center;gap:18px;flex-wrap:wrap;
  list-style:none;margin:0;padding:18px 0 0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
ul.wc-tabs::-webkit-scrollbar{display:none}
ul.wc-tabs li{margin:0;flex:none}
ul.wc-tabs li a{
  display:block;padding:0 0 16px;font-size:12.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  border-bottom:2px solid transparent;white-space:nowrap;
}
ul.wc-tabs li a:hover{color:var(--ink)}
ul.wc-tabs li.active a{color:var(--ink);border-bottom-color:var(--coral)}
.woocommerce-Tabs-panel{display:block;padding:22px 0 0}
/* 描述区在页面居中。WC 自带 `.woocommerce div.product .woocommerce-tabs .panel{margin:0 0 2em}`
   特异性高于单类选择器，会把 margin-left/right:auto 压成 0 → 必须抄全 WC 前缀并加 body 提权。 */
body.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel{
  max-width:760px;margin-left:auto;margin-right:auto;
}
/* 两个标签共用同一条居中内容列，切换后宽度与起点不跳动。 */
body.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel--additional_information{max-width:760px}
.woocommerce-Tabs-panel.is-open{display:block}
.woocommerce-Tabs-panel h2{display:none}
.woocommerce-Tabs-panel p{font-size:14px;line-height:1.65;color:#4A423D;margin:0 0 12px}
/* 描述区插图：块级 + 自动左右外边距 = 在版面内居中（老板要求电脑端居中） */
body.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel img{
  display:block;margin-left:auto;margin-right:auto;max-width:100%;height:auto;
  border-radius:var(--radius-lg);margin-bottom:12px}
.woocommerce-Tabs-panel h3{
  font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:15px;letter-spacing:-.01em;margin:22px 0 9px;
}
.woocommerce-Tabs-panel ul{margin:0 0 18px;padding-left:20px}
.woocommerce-Tabs-panel li{font-size:14px;line-height:1.6;color:#4A423D;margin-bottom:6px}
.woocommerce-Tabs-panel a{color:var(--coral);font-weight:700}
.pdp-spec{width:100%;border-collapse:collapse;font-size:14px}
.pdp-spec th,.pdp-spec td{
  text-align:left;padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top;
}
.pdp-spec th{width:210px;font-weight:700;color:var(--ink)}
.pdp-spec td{color:#4A423D}
@media(max-width:640px){
  .pdp-spec th,.pdp-spec td{display:block;width:auto;border:0;padding:2px 0}
  .pdp-spec tr{display:block;padding:11px 0;border-bottom:1px solid var(--line)}
}

/* ---------- packs cross-sell ---------- */
.pdp-packs{background:var(--paper-3);padding:64px 0}
.pdp-packs .head{max-width:640px;margin:0 auto 32px;text-align:center}
.pdp-packs .head h2{font-size:clamp(24px,3vw,34px);margin:14px 0 10px}
.pdp-packs .head p{font-size:14.5px;color:#5C544E;line-height:1.7;margin:0}
.pdp-packs .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:1000px){.pdp-packs .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.pdp-packs .grid{grid-template-columns:minmax(0,1fr)}}
.ppack{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px 22px;display:flex;flex-direction:column;
  transition:transform .25s var(--ease),box-shadow .25s;
}
.ppack:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,17,16,.09)}
.ppack .tag{
  align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--coral);margin-bottom:12px;
}
.ppack h3{font-size:15px;margin:0 0 6px;font-weight:800;letter-spacing:.01em}
.ppack .big{font-family:'Archivo Black',sans-serif;font-size:30px;letter-spacing:-.02em;line-height:1;margin:0 0 6px}
.ppack .big span{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:0}
.ppack ul{list-style:none;margin:16px 0 20px;padding:0}
.ppack li{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:#5C544E;line-height:1.5;margin-bottom:9px}
.ppack li svg{flex:none;margin-top:3px}
.ppack .go{
  margin-top:auto;height:46px;border-radius:999px;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  transition:background .25s;
}
.ppack .go:hover{background:var(--coral)}

/* ---------- size guide ---------- */
.pdp-sizeguide{padding:66px 0}
.pdp-sizeguide .wrap2{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
.pdp-sizeguide .wrap2>*{min-width:0}
@media(max-width:960px){.pdp-sizeguide .wrap2{grid-template-columns:1fr;gap:30px}}
/* 4 列尺寸表内容宽度约 400px，窄屏放不下 → 交给外层横滚，不要顶破布局 */
.sg-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;
}
.sg-scroll .sg-table{border:0;border-radius:0;min-width:400px}
.pdp-sizeguide h2{font-size:clamp(26px,3.2vw,38px);margin:14px 0 16px}
.pdp-sizeguide p{font-size:15px;line-height:1.75;color:#4A423D;margin:0 0 18px}
.sg-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.sg-table th,.sg-table td{padding:14px 18px;text-align:left;font-size:13.5px;border-bottom:1px solid var(--line)}
.sg-table tr:last-child th,.sg-table tr:last-child td{border-bottom:0}
.sg-table thead th{background:var(--ink);color:#fff;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.sg-table tbody th{font-weight:800;width:38%}
.sg-table tbody td{color:#4A423D}
.sg-visual{background:linear-gradient(150deg,#F7F0E7,#ECE1D2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px}

/* ---------- FAQ ---------- */
.pdp-faq{padding:0 0 70px}
.pdp-faq .head{max-width:660px;margin:0 auto 30px;text-align:center}
.pdp-faq .head h2{font-size:clamp(24px,3vw,34px);margin:12px 0 0}
.pdp-faq .list{max-width:860px;margin:0 auto}
.pdp-faq details{border-bottom:1px solid var(--line);padding:4px 0}
.pdp-faq details summary{
  list-style:none;cursor:pointer;padding:21px 44px 21px 0;position:relative;
  font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.45;
}
.pdp-faq details summary::-webkit-details-marker{display:none}
.pdp-faq details summary::after{
  content:'';position:absolute;right:12px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease);
}
.pdp-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.pdp-faq details p{font-size:14.5px;line-height:1.78;color:#4A423D;margin:0 0 22px;max-width:760px}

/* ---------- related ---------- */
section.related{margin:0;padding:60px 0 76px;border-top:1px solid var(--line)}
section.related>h2{
  font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:-.02em;font-size:clamp(22px,2.8vw,30px);margin:0 0 26px;
}
ul.products{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
  list-style:none;margin:0;padding:0;
}
@media(max-width:1000px){ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
ul.products li.product{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s;
  display:flex;flex-direction:column;
}
ul.products li.product:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(20,17,16,.09)}
.rp-thumb{aspect-ratio:1;background:linear-gradient(150deg,#F7F0E7,#ECE1D2);display:grid;place-items:center;overflow:hidden}
.rp-thumb svg{width:78%;height:78%}
.rp-body{padding:16px 17px 19px;display:flex;flex-direction:column;flex:1}
.rp-body h3{font-size:13.5px;font-weight:800;margin:0 0 6px;line-height:1.35}
.rp-price{font-size:14px;font-weight:800;margin:0 0 12px}
.rp-price span{font-size:11.5px;font-weight:600;color:var(--muted)}
.rp-go{
  margin-top:auto;height:40px;border-radius:999px;border:1.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  transition:background .25s,color .25s;
}
.rp-go:hover{background:var(--ink);color:#fff}

@media(max-width:520px){
  .pdp-trust{grid-template-columns:minmax(0,1fr)}
  .pdp-buy-row{flex-direction:column}
  .quantity .qty-wrap{width:100%;grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr)}
  /* 窄屏两段卖点各自成行，否则换行后 · 会孤零零留在上一行末尾 */
  .pdp-rating{flex-direction:column;align-items:flex-start;gap:3px}
  .pdp-rating .sep{display:none}
  .pdp-pay{gap:6px}
  .pdp-pay .pay-chip{min-width:48px;padding:0 9px}
  .pdp-pay .pay-note{margin-top:2px}
  /* 手机端顺序：数量 / 加购在上，PayPal 结算占位紧跟其后。 */
  .pdp-paypal-placeholder{min-height:54px;margin-bottom:12px;padding:7px 14px;font-size:12.5px}
  .pdp-paypal-placeholder small{font-size:9.5px}
  /* 两个详情按钮同一行，不再上下堆叠。 */
  ul.wc-tabs{gap:8px;flex-wrap:nowrap;overflow:visible}
  ul.wc-tabs li{flex:1 1 0;min-width:0}
  ul.wc-tabs li a{padding:0 8px 14px;font-size:10.5px;letter-spacing:.02em;text-align:center}
}

/* 手机端主图做真正的 edge-to-edge：商品信息仍保留 24px 内边距，
   只有主图横向冲出内容列，占满设备屏幕宽度。 */
@media(max-width:640px){
  .woocommerce-product-gallery__wrapper{
    position:relative;
    left:50%;
    width:100vw;
    margin-left:0;
    margin-right:0;
    transform:translateX(-50%);
    border-radius:0;
  }
  .woocommerce-product-gallery__image{
    border-left:0;
    border-right:0;
    border-radius:0;
  }
  ul.wc-tabs{
    justify-content:center;
    gap:20px;
    flex-wrap:nowrap;
    overflow-x:visible;
  }
  ul.wc-tabs li a{
    font-size:12.5px;
    letter-spacing:0;
    text-transform:none;
  }
}

/* 商品详情标签：只显示两项时始终居中排列；两面板共用同一条内容列。 */
body.woocommerce div.product .woocommerce-tabs ul.tabs,
body.woocommerce-page div.product .woocommerce-tabs ul.tabs,
body.woocommerce div.product .woocommerce-tabs ul.wc-tabs,
body.woocommerce-page div.product .woocommerce-tabs ul.wc-tabs{
  display:flex;justify-content:center;gap:18px;flex-wrap:wrap;
}
body.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel,
body.woocommerce-page div.product .woocommerce-tabs .woocommerce-Tabs-panel,
body.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel--additional_information,
body.woocommerce-page div.product .woocommerce-tabs .woocommerce-Tabs-panel--additional_information{
  max-width:760px;margin-left:auto;margin-right:auto;
}

/* 手机端按截图把两个详情标签压在同一行；内容仍共用同一列。 */
@media (max-width: 520px) {
  body.woocommerce div.product .woocommerce-tabs ul.tabs,
  body.woocommerce-page div.product .woocommerce-tabs ul.tabs,
  body.woocommerce div.product .woocommerce-tabs ul.wc-tabs,
  body.woocommerce-page div.product .woocommerce-tabs ul.wc-tabs{
    gap:8px;flex-wrap:nowrap;overflow:visible;
  }
  body.woocommerce div.product .woocommerce-tabs ul.tabs li,
  body.woocommerce-page div.product .woocommerce-tabs ul.tabs li,
  body.woocommerce div.product .woocommerce-tabs ul.wc-tabs li,
  body.woocommerce-page div.product .woocommerce-tabs ul.wc-tabs li{
    flex:1 1 0;min-width:0;
  }
  body.woocommerce div.product .woocommerce-tabs ul.tabs li a,
  body.woocommerce-page div.product .woocommerce-tabs ul.tabs li a,
  body.woocommerce div.product .woocommerce-tabs ul.wc-tabs li a,
  body.woocommerce-page div.product .woocommerce-tabs ul.wc-tabs li a{
    box-sizing:border-box !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:0 5px 14px !important;
    font-size:10px !important;
    letter-spacing:0 !important;
    text-align:center !important;
    white-space:nowrap !important;
  }
}


/* =========================================================
   ↑ 以上为设计稿商品页第 2 段样式原文（静态原型皮肤）
   ↓ 以下为「静态原型 → WooCommerce 动态页」的适配补丁。
     每条补丁的原因写在生成器里「商品页皮肤」那一段的注释里，改动前先读那三条。
   ========================================================= */

/* 补丁 3：手机端加购按钮全宽。
   线上没有设计稿的 .pdp-buy-row，WC 把按钮包在
   .woocommerce-variation-add-to-cart 里，按钮会收缩到 200px。 */
/* 补丁 4：商品页紧凑化与信任信息。
   真实商品页没有静态原型里的 pdp-eyebrow / pdp-trust / pdp-pay，
   因此这里仅覆盖动态 DOM 已存在的标题、简介、购买区和 tabs，
   不伪造付款已接通的状态。 */
body.woocommerce-page div.product .summary.entry-summary,
body.woocommerce div.product .summary.entry-summary{
  min-width:0;
}
body.woocommerce-page div.product h1.product_title,
body.woocommerce div.product h1.product_title{
  font-size:clamp(25px,2.55vw,34px) !important;
  line-height:1.02 !important;
  letter-spacing:-.015em !important;
  margin:0 0 10px !important;
}
body.woocommerce-page div.product .woocommerce-product-details__short-description,
body.woocommerce div.product .woocommerce-product-details__short-description{
  font-size:14px !important;
  line-height:1.58 !important;
  margin:0 0 16px !important;
  padding-bottom:16px !important;
}
body.woocommerce-page div.product .woocommerce-tabs .panel,
body.woocommerce div.product .woocommerce-tabs .panel{
  max-width:760px;
  margin-left:auto !important;
  margin-right:auto !important;
}
@media (max-width: 1020px) {
  /* 手机端购买区按截图重排：第一行整宽购物车，第二行数量 + PayPal。 */
  body.woocommerce-page .single_variation_wrap .woocommerce-variation-add-to-cart,
  body.woocommerce .single_variation_wrap .woocommerce-variation-add-to-cart {
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:stretch !important;
    gap:10px !important;
    width:100% !important;
  }
  body.woocommerce-page .single_variation_wrap button.single_add_to_cart_button,
  body.woocommerce .single_variation_wrap button.single_add_to_cart_button {
    order:1 !important;
    flex:0 0 100% !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }
  body.woocommerce-page .single_variation_wrap .quantity,
  body.woocommerce .single_variation_wrap .quantity {
    order:2 !important;
    flex:0 0 74px !important;
    width:74px !important;
    margin:0 !important;
  }
  body.woocommerce-page .single_variation_wrap .quantity .qty,
  body.woocommerce .single_variation_wrap .quantity .qty {
    width:74px !important;
    height:56px !important;
    border:1.5px solid var(--line) !important;
    border-radius:999px !important;
    background:#fff !important;
  }
  body.woocommerce-page .single_variation_wrap .pdp-paypal-placeholder,
  body.woocommerce .single_variation_wrap .pdp-paypal-placeholder {
    order:3 !important;
    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
  }
}