/*
 * 文件作用：
 *   lumavet 站点（Blocksy 主题）的极轻量修复样式。
 *
 * 设计原则：
 *   1. 严格不动 Blocksy 默认布局；只在"破图"场景做兜底。
 *   2. 不强加图片容器高度 —— Blocksy 用 aspect-ratio 控制比例，
 *      上次 lumavet-shop-fixes.css 强加 240px 高度反而破坏了它。
 *   3. 不接管 Blocksy 自带的卡片、Quick View、加购按钮、quantity 输入。
 *
 * 作用域：
 *   - 顶层用 `body.theme-blocksy.woocommerce`（Blocksy 主题自带 body class，
 *     WooCommerce 启用时另加 woocommerce class）
 *   - 不依赖 `pmgr-site-lumavet` body class（那个仅用于产品详情页 .pd-wrap）
 *
 * 本文件只修：
 *   1. 破图（image load error）时容器显示统一"Image unavailable"占位
 *   2. WC `.onsale` 角标不溢出卡片圆角（部分 Blocksy 模板有该问题）
 *   3. 我们自己注入的 captcha 字段在 Blocksy 注册表单里的轻微样式收敛
 */

/* ────────────────────────────────────────────────────────────────────
   1. 破图占位（核心）
      JS 监听 img.error → 给最近的图片容器加 .pmgr-img-broken class
   ──────────────────────────────────────────────────────────────────── */

body.theme-blocksy.woocommerce .pmgr-img-broken {
  position: relative;
  /* 不固定 width/height —— 让 Blocksy 自己撑容器尺寸；
     min-height 仅用于父容器自身没有任何尺寸的极端兜底 */
  min-height: 180px;
  background: #f5f5f7;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body.theme-blocksy.woocommerce .pmgr-img-broken::before {
  content: 'Image unavailable';
  color: #9a9a9f;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-align: center;
  padding: 0 12px;
  /* 防止占位文字被 img 残留遮挡 */
  position: relative;
  z-index: 1;
}

/* 破图的 img 自身隐藏（src 已被 JS 替换为 1×1 透明像素） */
body.theme-blocksy.woocommerce .pmgr-img-broken img {
  opacity: 0 !important;
}

/* ────────────────────────────────────────────────────────────────────
   2. WC SALE 角标：固定位置 + 不溢出容器圆角
      作用域限定到 lumavet（Blocksy 主题），不影响其他站
   ──────────────────────────────────────────────────────────────────── */

body.theme-blocksy.woocommerce ul.products li.product .onsale {
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
  margin: 0;
  z-index: 3;
  white-space: nowrap;
  /* 不改字号/颜色，让 Blocksy 主题或 Customizer 控制 */
}

/* ────────────────────────────────────────────────────────────────────
   3. lumavet 注册表单 captcha 字段（pmgr-site-frontend.php 注入）
      让 captcha 行在 Blocksy 弹窗 / My Account 注册表单内视觉融洽
   ──────────────────────────────────────────────────────────────────── */

body.theme-blocksy.woocommerce .pmgr-lumavet-captcha-row {
  margin-bottom: 14px;
}

body.theme-blocksy.woocommerce .pmgr-lumavet-captcha-row label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

body.theme-blocksy.woocommerce .pmgr-lumavet-captcha-row .pmgr-lumavet-captcha-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

body.theme-blocksy.woocommerce .pmgr-lumavet-captcha-row input[type="text"] {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

body.theme-blocksy.woocommerce .pmgr-lumavet-captcha-row img {
  flex: 0 0 120px;
  width: 120px;
  height: 40px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  user-select: none;
  -webkit-user-drag: none;
}