/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* ==================================================================
   商品卡片标题 — 14px / 字重 500 / 固定两行超出省略

   字号字重用 CSS 变量而不是直接写 font-size：Blocksy 是用
   font-size:var(--theme-font-size) 渲染的，改变量能让它在平板/手机
   媒体查询里重新赋值时仍然生效，响应式链条不会被掐断。
   本文件在 blocksy-dynamic-global-css 之后加载，同等特异性即可覆盖。

   行高同时写变量和直接值：Blocksy 若对本元素套用了
   line-height:var(--theme-line-height) 就走变量，没套用就走直接值，
   两条路都是 1.4，min-height 的计算才有确定性。
   ================================================================== */
[data-products] .woocommerce-loop-product__title,
[data-products] .woocommerce-loop-category__title {
	--theme-font-size: 14px;
	--theme-font-weight: 500;
	--theme-line-height: 1.4;
	line-height: 1.4;

	/* 超过两行截断并自动补 "…"（line-clamp 自带省略号，无需 text-overflow） */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;

	/* 锁定两行高度，标题只有一行的卡片也占两行，卡片底部才能对齐。
	   用 em 而非 px：跟随上面的 font-size，改字号不用再算一遍。 */
	min-height: 2.8em; /* 2 行 × 1.4 行高 */
}

/* Elementor Pro 的 Products 小工具从自身排版设置生成带 !important 的规则
   （在外链的 post-XXXX.css 里），字号字重覆盖不过它，只能同样用 !important。
   截断相关属性 Elementor 不会设置，正常权重即可。 */
.elementor-wc-products ul.products li.product .woocommerce-loop-product__title,
.elementor-wc-products ul.products li.product .woocommerce-loop-category__title {
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: 2.8em;
}

/* ==================================================================
   商品卡片按钮（Read more / Add to cart）

   Blocksy 没有给卡片按钮提供字体选项（只有 Title/Excerpt/Price/SKU/Stock
   五个），Customizer 里 General → Buttons 的字号是全站通用会影响结算页，
   所以只能在这里单独收敛卡片内的按钮。
   ================================================================== */
/* 标题与 Read more 按钮之间留 20px。
   Blocksy 的 [data-products] .product > * { margin-bottom: var(--product-element-spacing, 10px) }
   给卡片每个直接子元素统一 10px，这里只调标题这一个，不动图片与标题的间距。
   特异性同为 (0,2,0)，靠本文件加载在 ct-woocommerce-styles 之后取胜
   （functions.php 里 enqueue 优先级设成 100 就是为了这个）。 */
[data-products] .woocommerce-loop-product__title {
	margin-bottom: 20px;
}

[data-products] .ct-woo-card-actions .button {
	font-size: 13px;

	/* 变体商品与简单商品的按钮渲染必须一致。两者的 class 不完全相同
	   （简单商品无价格因而不可购买，缺 add_to_cart_button），圆角在这里
	   显式钉在同一个值上，两者不会再有差异。取值仍取自 Blocksy 自己的
	   变量，不改变原有观感。 */
	border-radius: var(--theme-button-border-radius, 3px);
}

/* 想让按钮整体更紧凑，取消下面这行的注释：
[data-products] .ct-woo-card-actions .button { padding: 8px 16px; }
*/

/* ==================================================================
   GTranslate 语言切换器

   dwf.js 的两个行为决定了哪些能用 CSS 解决、哪些必须改插件设置：

   1) if (switcher_open_direction == 'top')
          widget_code += gt_options_div + gt_current_div;
      展开方向是生成时的 DOM 顺序，向上展开时选项 div 被写在 selected 之前。
      正解是把插件设置的 Open direction 改成 Bottom；下面的 order 规则是
      兜底，即便设置没改也能强制选项显示在下方。

   2) if (switcher_horizontal_position != 'inline')
          widget_code = '<div class="gt_switcher_wrapper" style="position:fixed;…">'…
      .gt_switcher_wrapper 只在悬浮模式存在，菜单模式下不生成 —— 所以下面
      悬浮和菜单两套规则可以共存，互不干扰。

   另注：不要用 #gt-wrapper-XXXXXXXX / #gtranslate_menu_wrapper_XXXXX 做
   选择器，那串数字每次渲染都重新生成（实测连续几次刷新得到的都不同）。
   ================================================================== */

/* ---------- 悬浮模式（switcher_horizontal_position ≠ inline）---------- */
/* 定位是 dwf.js 以内联 style 写入的，只有 !important 压得住。 */
.gt_switcher_wrapper {
	left: 10px !important;
}

/* ---------- 菜单模式（switcher_horizontal_position = inline）---------- */
/* 插件把切换器塞进一个 position:absolute 的 div（这样展开时不会撑高 header），
   但这导致外层 <li> 宽度为 0，切换器整个溢出到右侧，压住 Blocksy 的搜索和
   购物车图标。给 <li> 预留出切换器的实际宽度即可。
   163px 是 dwf.js 里写死的 widget_width，+12px 是与搜索图标的间距。 */
.menu-item-gtranslate {
	min-width: 175px;
}

/* 绝对定位默认贴 <li> 内容区顶部，在菜单行里会偏高，这里做垂直居中。 */
.menu-item-gtranslate > div[id^="gtranslate_menu_wrapper"] {
	top: 50%;
	transform: translateY(-50%);
}

/* 兜底强制向下展开：用 order 而不是改 DOM，插件设置没改也能生效。 */
.menu-item-gtranslate .gt_switcher {
	display: flex;
	flex-direction: column;
}

.menu-item-gtranslate .gt_selected {
	order: 1;
}

.menu-item-gtranslate .gt_option {
	order: 2;
}

/* ---------- 两种模式通用：圆角 20px ---------- */
/* .gt_switcher 插件已设 overflow:hidden，圆角会把内部元素一起裁圆；
   .gt_selected a 自带 1px 边框，单独给它圆角，边框才会跟着弧线走。 */
.gt_switcher,
.gt_switcher .gt_selected,
.gt_switcher .gt_selected a,
.gt_switcher .gt_option {
	border-radius: 20px;
}