/**
 * 修复:购物车浮层(mini-cart)被导航/头部遮挡 + 半透明穿透。
 *
 * 现象:主题(Bricks Woo Cart 元素)的购物车浮层
 *   1) z-index 低于头部导航,导致导航文字(如 "Support")压在购物车内容之上;
 *   2) 背景透明,导航与购物车内容互相穿透,读起来一团糊。
 *
 * 本文件由插件无条件加载(不依赖 pod 皮肤),抬高浮层层级 + 强制不透明背景。
 *
 * === 已在 flowercat.meealldemo.com 线上确认的真实选择器 ===
 *   - 购物车元素容器: .brxe-woocommerce-mini-cart.head__minicart
 *   - 浮层面板(off-canvas): .cart-detail.off-canvas(带动态 id 后缀 .cart-detail-xxxxx)
 *   - 触发按钮:          .mini-cart-link.bricks-woo-toggle
 *   - 内层内容:          .widget_shopping_cart_content
 *
 * 说明:z-index 仅对已定位(非 static)元素生效;主题浮层本身已定位,
 * 这里只抬高层级 + 补不透明背景,不改动其定位/位置。
 */

/* --- 真实浮层面板:抬到头部导航之上并补不透明背景 --- */
.brxe-woocommerce-mini-cart .cart-detail,
.cart-detail.off-canvas,
.cart-detail {
	z-index: 100000 !important;
	background-color: #fff !important;
}

/* 内层 WooCommerce 内容也补不透明背景,避免嵌套元素透出导航。 */
.brxe-woocommerce-mini-cart .widget_shopping_cart_content,
.cart-detail .widget_shopping_cart_content {
	background-color: #fff !important;
}

/* 购物车元素容器建立高层叠上下文,避免整体被兄弟节点(导航)盖住。 */
.brxe-woocommerce-mini-cart.head__minicart,
.brxe-woocommerce-mini-cart {
	position: relative;
	z-index: 100000;
}

/* --- 其余主题/WooCommerce 常见 mini-cart 容器的防御式兜底(非本站命中) --- */
.widget_shopping_cart,
.widget_shopping_cart_content,
.site-header-cart .widget_shopping_cart,
.wc-block-mini-cart__drawer,
.wc-block-mini-cart__contents,
.wc-block-components-drawer,
.wc-block-components-drawer__content {
	z-index: 100000 !important;
	background-color: #fff !important;
}

/* WC Blocks 抽屉遮罩层也一并抬高,避免半透明遮罩落在导航下方形成穿透感。 */
.wc-block-components-drawer__screen-overlay {
	z-index: 99999 !important;
}

/**
 * mini-cart 单品内的定制摘要(Customization/Size/Front/Accessories …)排版。
 *
 * 现象:缩略图 <img> 在标题 <a>(inline)里左浮动,定制摘要 dl.variation 紧跟其后
 * 未清除浮动,导致首行 "Customization:" 贴着/压住商品标题(标题底 199px 与 dt 顶
 * 仅差 2px,窄屏下直接重叠)。
 *
 * 修复:让整个 dl.variation 清除浮动、落到缩略图+标题下方,并留出间距。
 * 仅作用于 mini-cart 单品(.woocommerce-mini-cart-item),不影响购物车/结算页表格。
 */
.woocommerce-mini-cart-item dl.variation {
	clear: both;
	padding-top: 8px;
	margin-top: 0;
}

/**
 * 购物车页(view cart)定制摘要排版:两列"标签 | 值"规格表 + 品牌左轨 + 配件色块,
 * 与后台订单项的可读面板(Selections)观感统一。
 *
 * 现象:主题把 dl.variation 设成 display:flex,dt/dd 挤在一行读起来乱。
 * 修复:改成 CSS Grid 两列(dt→列1、紧随的 dd→列2 自动配对成行),
 * 标签灰、值加粗、隔行细线,左侧一道品牌红轨。
 * 作用域限定购物车表单(.woocommerce-cart-form),不动 mini-cart / 其它区域。
 */
.woocommerce-cart-form dl.variation {
	display: grid !important;
	grid-template-columns: max-content 1fr;
	gap: 0 14px;
	margin: 6px 0 0;
	padding: 2px 0 2px 12px;
	border-left: 2px solid #e4002b;
	font-size: 13px;
	line-height: 1.4;
}
.woocommerce-cart-form dl.variation dt,
.woocommerce-cart-form dl.variation dd {
	float: none;
	width: auto;
	margin: 0;
	padding: 6px 0;
	border-top: 1px solid #eef0f2;
}
.woocommerce-cart-form dl.variation dt {
	color: #6b6764;
	font-weight: 400;
}
.woocommerce-cart-form dl.variation dd {
	color: #1f1f1f;
	font-weight: 600;
}
.woocommerce-cart-form dl.variation dt:first-child,
.woocommerce-cart-form dl.variation dd:first-of-type {
	border-top: 0;
}
.woocommerce-cart-form dl.variation dd p {
	margin: 0;
}
/* 配件颜色真色块(值内嵌 span)。 */
.pod-cart-sw {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	border: 1px solid #d5d5d5;
	vertical-align: -2px;
	margin-left: 4px;
}