/* =========================================================
   iGeeTor — 产品页与询价弹窗
   基于 Storefront，改成目录 + 询价模式
   ========================================================= */

:root {
	--igt-red: #c8000a;
	--igt-red-dark: #a30008;
	--igt-ink: #1c1d1d;
	--igt-muted: #6b7280;
	--igt-line: #e5e7eb;
	--igt-bg-soft: #f8f9fa;
}

/* ---------------------------------------------------------
   页面宽度
   ---------------------------------------------------------
   Storefront 默认 .col-full { max-width: 66.4989em }，实测算出来
   只有 1064px —— 那是按博客正文可读性（每行 65-75 字符）倒推的值，
   但详情页是两栏并排，一分为二后右栏只剩 561px，图库只有 447px。
   KST 用的是 1500px，这里对齐。

   注意 Storefront 给 .col-full 设了 box-sizing: content-box 且
   padding: 0 2.61792em，所以 max-width 指的是「内容宽度」，
   容器实际占位 = 1500 + 左右各 ~42px 内边距。
   窗口不够宽时会自然收窄，不影响响应式。 */
.col-full {
	max-width: 1500px;
}

/* ---------------------------------------------------------
   页头 logo
   ---------------------------------------------------------
   图片是 2 倍图（高 120px），显示成 60px，高分屏也清晰。
   Storefront 默认把 logo 宽度锁在 210px 以内，横排 logo 会被压扁，放开。 */
.site-header .site-branding {
	width: auto;
}

.site-header .custom-logo-link {
	display: inline-block;
	max-width: none;
}

.site-header .custom-logo-link img {
	width: auto;
	max-width: none;
	height: 60px;
}

@media (max-width: 767px) {
	.site-header .custom-logo-link img {
		height: 44px;
	}
}

/* 产品页 Documentation 区块里的 wiki 链接（排在 PDF 前面） */
.igt-wiki-links {
	margin: 0 0 1em;
	padding-left: 1.2em;
}

.igt-wiki-links li {
	margin-bottom: 0.35em;
	color: var(--igt-muted);
}

.igt-wiki-links a {
	font-weight: 600;
	color: var(--igt-red);
}

/* 页脚公司信息 */
.igt-footer-info {
	font-size: 0.85em;
	line-height: 1.7;
	color: var(--igt-muted);
}

.igt-footer-info strong {
	color: var(--igt-ink);
}

/* ---------------------------------------------------------
   按钮（首页、应用页共用）
   --------------------------------------------------------- */

.igt-btn {
	display: inline-block;
	padding: 0.85em 1.9em;
	font-size: 1em;
	font-weight: 600;
	text-decoration: none;
	border-radius: 3px;
	transition: background 0.15s ease, color 0.15s ease;
}

.igt-btn--primary {
	color: #fff;
	background: var(--igt-red);
}

.igt-btn--primary:hover {
	color: #fff;
	background: var(--igt-red-dark);
}

.igt-btn--ghost {
	color: var(--igt-ink);
	background: transparent;
	border: 1px solid var(--igt-line);
}

.igt-btn--ghost:hover {
	color: var(--igt-red);
	border-color: var(--igt-red);
}

/* ---------------------------------------------------------
   下载中心页（[igt_downloads] 短代码）
   --------------------------------------------------------- */

.igt-dl__group {
	margin: 0 0 2.5em;
}

.igt-dl__group:last-child {
	margin-bottom: 0;
}

.igt-dl__title {
	margin: 0 0 0.4em;
	font-size: 1.35em;
	font-weight: 700;
	color: var(--igt-ink);
}

.igt-dl__title::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 0.9em;
	margin-right: 0.5em;
	vertical-align: -0.1em;
	background: var(--igt-red);
}

.igt-dl__desc {
	margin: 0 0 1em;
	color: var(--igt-muted);
	font-size: 0.95em;
}

.igt-dl__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.igt-dl__item {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.75em;
	margin: 0 0 0.5em;
	padding: 0.85em 1.1em;
	background: #fff;
	border: 1px solid var(--igt-line);
	border-radius: 3px;
	transition: border-color 0.15s ease;
}

.igt-dl__item:hover {
	border-color: var(--igt-muted);
}

.igt-dl__link {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	color: var(--igt-ink);
	text-decoration: none;
}

.igt-dl__link::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1.2em;
	margin-right: 0.5em;
	vertical-align: -0.2em;
	background-color: var(--igt-red);
	-webkit-mask: no-repeat center / contain;
	mask: no-repeat center / contain;
	-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm0 2.5L17.5 8H14V4.5zM8 13h8v1.5H8V13zm0 3h8v1.5H8V16zm0-6h4v1.5H8V10z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm0 2.5L17.5 8H14V4.5zM8 13h8v1.5H8V13zm0 3h8v1.5H8V16zm0-6h4v1.5H8V10z'/%3E%3C/svg%3E");
}

.igt-dl__link:hover {
	color: var(--igt-red);
	text-decoration: underline;
}

.igt-dl__meta {
	display: flex;
	gap: 0.5em;
	flex: 0 0 auto;
	font-size: 0.82em;
	color: var(--igt-muted);
}

.igt-dl__ext {
	padding: 0.15em 0.5em;
	font-weight: 600;
	letter-spacing: 0.03em;
	background: var(--igt-bg-soft);
	border-radius: 2px;
}

.igt-dl__note {
	flex: 1 1 100%;
	margin: 0.3em 0 0;
	font-size: 0.9em;
	color: var(--igt-muted);
}

.igt-dl__empty {
	padding: 1.5em;
	background: var(--igt-bg-soft);
	border-left: 3px solid var(--igt-red);
	color: var(--igt-muted);
}

/* ---------------------------------------------------------
   Downloads 区块：把链接列表做成文档条目
   --------------------------------------------------------- */

.igt-block--downloads .igt-block__body ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.igt-block--downloads .igt-block__body li {
	margin: 0 0 0.6em;
	padding: 0.9em 1.1em;
	background: #fff;
	border: 1px solid var(--igt-line);
	border-radius: 3px;
	transition: border-color 0.15s ease;
	line-height: 1.6;
}

.igt-block--downloads .igt-block__body li:hover {
	border-color: var(--igt-muted);
}

.igt-block--downloads .igt-block__body li:last-child {
	margin-bottom: 0;
}

/* 文档图标 + 链接本身 */
.igt-block--downloads .igt-block__body li > a:first-child {
	display: inline-block;
	font-weight: 600;
	color: var(--igt-ink);
	text-decoration: none;
}

.igt-block--downloads .igt-block__body li > a:first-child::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1.2em;
	margin-right: 0.5em;
	vertical-align: -0.2em;
	background-color: var(--igt-red);
	/* 文档图标，用 mask 上色，省一个图片请求 */
	-webkit-mask: no-repeat center / contain;
	mask: no-repeat center / contain;
	-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm0 2.5L17.5 8H14V4.5zM8 13h8v1.5H8V13zm0 3h8v1.5H8V16zm0-6h4v1.5H8V10z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm0 2.5L17.5 8H14V4.5zM8 13h8v1.5H8V13zm0 3h8v1.5H8V16zm0-6h4v1.5H8V10z'/%3E%3C/svg%3E");
}

.igt-block--downloads .igt-block__body li > a:first-child:hover {
	color: var(--igt-red);
	text-decoration: underline;
}

/* 破折号后面的说明文字 */
.igt-block--downloads .igt-block__body li {
	color: var(--igt-muted);
	font-size: 0.95em;
}

/* ---------------------------------------------------------
   产品筛选栏（列表页 / 分类页）
   --------------------------------------------------------- */

.igt-filters {
	margin: 0 0 2em;
	padding: 1.25em 1.5em 1.5em;
	background: var(--igt-bg-soft);
	border: 1px solid var(--igt-line);
	border-radius: 3px;
}

.igt-filters__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	margin-bottom: 1em;
}

.igt-filters__title {
	font-size: 0.95em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--igt-muted);
}

.igt-filters__clear {
	font-size: 0.9em;
	color: var(--igt-red);
	text-decoration: underline;
}

.igt-filters__clear:hover {
	color: var(--igt-red-dark);
}

.igt-filters__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 1em;
}

.igt-filters__field {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	margin: 0;
}

.igt-filters__label {
	font-size: 0.82em;
	font-weight: 600;
	color: var(--igt-muted);
}

.igt-filters select {
	width: 100%;
	padding: 0.55em 0.7em;
	font-size: 0.95em;
	color: var(--igt-ink);
	background: #fff;
	border: 1px solid var(--igt-line);
	border-radius: 3px;
	cursor: pointer;
}

.igt-filters select:focus {
	outline: 0;
	border-color: var(--igt-red);
}

.igt-filters__go {
	margin-top: 1em;
	padding: 0.6em 1.6em;
	font-weight: 600;
	color: #fff;
	background: var(--igt-red);
	border: 0;
	border-radius: 3px;
	cursor: pointer;
}

.igt-filters__empty {
	padding: 1.5em;
	background: var(--igt-bg-soft);
	border-left: 3px solid var(--igt-red);
	color: var(--igt-ink);
}

.igt-filters__empty a {
	color: var(--igt-red);
	text-decoration: underline;
}

@media (max-width: 600px) {
	.igt-filters {
		padding: 1em;
	}

	.igt-filters__grid {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		gap: 0.75em;
	}
}

/* ---------------------------------------------------------
   询价 CTA（取代加入购物车的位置）
   --------------------------------------------------------- */

.igt-cta {
	margin: 1.75em 0 0;
	padding-top: 1.5em;
	border-top: 1px solid var(--igt-line);
}

.igt-cta__btn {
	display: inline-block;
	padding: 0.9em 2.4em;
	font-size: 1.05em;
	font-weight: 600;
	letter-spacing: 0.02em;
	background: var(--igt-red);
	color: #fff;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	transition: background 0.2s ease;
}

.igt-cta__btn:hover,
.igt-cta__btn:focus {
	background: var(--igt-red-dark);
	color: #fff;
}

.igt-cta__link {
	display: inline-block;
	margin-left: 1.25em;
	font-size: 0.9em;
	color: var(--igt-muted);
	text-decoration: underline;
}

.igt-cta__link:hover {
	color: var(--igt-red);
}

.igt-cta__note {
	margin: 1em 0 0;
	font-size: 0.85em;
	color: var(--igt-muted);
}

/* ---------------------------------------------------------
   单页顺排的内容区块（原来的 Tab 内容）
   --------------------------------------------------------- */

.igt-block {
	margin: 3em 0 0;
	padding-top: 2.5em;
	border-top: 1px solid var(--igt-line);
	clear: both;
}

.igt-block__title {
	margin: 0 0 1.2em;
	font-size: 1.5em;
	font-weight: 700;
	color: var(--igt-ink);
}

.igt-block__title::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 0.95em;
	margin-right: 0.55em;
	vertical-align: -0.1em;
	background: var(--igt-red);
}

/* Markdown 正文里写的 ## 标题，样式对齐 .igt-block__title。
   ---------------------------------------------------------
   实测：Markdown 生成的是裸 <h2>，继承 Storefront 默认样式
   （32px / font-weight 300），而 PHP 生成的 Specifications 等
   走 .igt-block__title（24px / 700 / 带红条）—— 两套差很多。
   这里让正文里的 h2 跟后者一致，视觉上属于同一层级。 */
.igt-block__body > h2 {
	margin: 0 0 1.2em;
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.3;
	color: var(--igt-ink);
}

.igt-block__body > h2:not(:first-child) {
	margin-top: 2em;
}

.igt-block__body > h2::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 0.95em;
	margin-right: 0.55em;
	vertical-align: -0.1em;
	background: var(--igt-red);
}

.igt-block__body {
	font-size: 1em;
	line-height: 1.75;
}

.igt-block__body > *:first-child {
	margin-top: 0;
}

.igt-block__body h3 {
	margin: 1.6em 0 0.6em;
	font-size: 1.15em;
	font-weight: 600;
	color: var(--igt-ink);
}

.igt-block__body ul {
	padding-left: 1.3em;
}

.igt-block__body li {
	margin-bottom: 0.5em;
}

/* 规格表 —— 十六进制/数值列用等宽，方便对齐 */
.igt-block--specs .shop_attributes {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.igt-block--specs .shop_attributes tr {
	border-bottom: 1px solid var(--igt-line);
}

.igt-block--specs .shop_attributes tr:last-child {
	border-bottom: 0;
}

.igt-block--specs .shop_attributes th {
	width: 34%;
	padding: 0.85em 1em 0.85em 0;
	font-weight: 600;
	color: var(--igt-muted);
	text-align: left;
	font-style: normal;
	background: none;
}

.igt-block--specs .shop_attributes td {
	padding: 0.85em 0;
	color: var(--igt-ink);
	font-style: normal;
	font-variant-numeric: tabular-nums;
}

.igt-block--specs .shop_attributes td p {
	margin: 0;
	padding: 0;
}

@media (max-width: 600px) {
	.igt-block--specs .shop_attributes th {
		width: 45%;
		font-size: 0.9em;
	}

	.igt-block--specs .shop_attributes td {
		font-size: 0.9em;
	}
}

/* ---------------------------------------------------------
   询价弹窗
   --------------------------------------------------------- */

body.igt-modal-open {
	overflow: hidden;
}

.igt-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 5vh 1rem;
	overflow-y: auto;
}

.igt-modal[hidden] {
	display: none;
}

.igt-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 17, 20, 0.6);
}

.igt-modal__panel {
	position: relative;
	width: 100%;
	max-width: 620px;
	padding: 2.5em;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

.igt-modal__close {
	position: absolute;
	top: 0.6em;
	right: 0.8em;
	width: 1.8em;
	height: 1.8em;
	font-size: 1.6em;
	line-height: 1;
	color: var(--igt-muted);
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.igt-modal__close:hover {
	color: var(--igt-ink);
}

.igt-modal__title {
	margin: 0 0 0.4em;
	font-size: 1.5em;
	font-weight: 700;
	color: var(--igt-ink);
}

.igt-modal__lead {
	margin: 0 0 1.5em;
	font-size: 0.95em;
	color: var(--igt-muted);
}

.igt-modal__lead:empty {
	display: none;
}

/* 表单字段 */
.igt-modal__form label {
	display: block;
	margin-bottom: 1em;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--igt-ink);
}

.igt-modal__form input[type="text"],
.igt-modal__form input[type="email"],
.igt-modal__form input[type="tel"],
.igt-modal__form input[type="number"],
.igt-modal__form textarea {
	width: 100%;
	margin-top: 0.4em;
	padding: 0.7em 0.9em;
	font-size: 1em;
	font-weight: 400;
	color: var(--igt-ink);
	background: #fff;
	border: 1px solid var(--igt-line);
	border-radius: 3px;
}

.igt-modal__form input:focus,
.igt-modal__form textarea:focus {
	outline: 0;
	border-color: var(--igt-red);
}

.igt-modal__form textarea {
	min-height: 7em;
	resize: vertical;
}

.igt-modal__form input[type="submit"] {
	width: 100%;
	padding: 0.9em;
	font-size: 1.05em;
	font-weight: 600;
	color: #fff;
	background: var(--igt-red);
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	transition: background 0.2s ease;
}

.igt-modal__form input[type="submit"]:hover {
	background: var(--igt-red-dark);
}

@media (max-width: 600px) {
	.igt-modal {
		padding: 0;
	}

	.igt-modal__panel {
		min-height: 100%;
		padding: 3.5em 1.25em 2em;
		border-radius: 0;
	}
}

/* =========================================================
   详情页两栏：左图固定跟随滚动，右栏内容顺排
   ---------------------------------------------------------
   实测（headless Chrome 量计算样式）发现的三个坑：

   1. div.product 自带 overflow:hidden —— sticky 的经典杀手。
      祖先只要不是 visible，position:sticky 就退化成普通定位。
      必须显式改回 visible。

   2. Storefront 的规则带 .single-product 前缀：
        .single-product div.product .images { width:41.17%; float:left }
      权重 3 类 + 1 元素。要压过它，选择器也得带 .single-product。

   3. 图库和右栏各占一行（gridTemplateRows 实测两行），
      所以上下堆叠。必须显式指定 grid-column / grid-row
      才能真正并排。

   结构（右栏由 functions.php 包了一层 .igt-col）：
     div.product
       div.images   <- 左栏，sticky
       div.igt-col  <- 右栏
   ========================================================= */

/* sticky 前提：祖先链上不能有滚动容器。
   ---------------------------------------------------------
   实测（headless Chrome 滚动测试）确认的根因：Storefront 有
     body  { overflow-x: hidden }
     .site { overflow-x: hidden }
   只声明 overflow-x:hidden 时，浏览器会把 overflow-y 计算成 auto
   而不是 visible（实测读到 "hidden auto"），祖先因此变成滚动容器，
   后代的 position:sticky 全部失效 —— 这是 CSS 的一个经典陷阱。

   overflow-x: clip 同样裁剪横向溢出，但不创建滚动容器，sticky 能正常工作。 */
body,
body.single-product,
.site,
.hfeed.site {
	overflow-x: clip;
}

.single-product div.product,
.woocommerce div.product {
	overflow: visible;
}

@media (min-width: 768px) {

	.single-product div.product,
	.woocommerce.single-product div.product {
		display: grid;
		grid-template-columns: 42% minmax(0, 1fr);
		grid-template-rows: auto;
		column-gap: 3.5rem;
		align-items: start;
		overflow: visible;
	}

	/* 左栏：显式放到第 1 列第 1 行，并清掉 Storefront 的 float/width。
	   选择器带 .single-product 才压得过 Storefront 同权重的规则。 */
	.single-product div.product .images,
	.single-product div.product .woocommerce-product-gallery {
		grid-column: 1;
		grid-row: 1;
		float: none;
		width: auto;
		max-width: 100%;
		margin: 0;
		position: sticky;
		top: 2rem;
		align-self: start;
		overflow: visible;
	}

	/* 右栏：显式放到第 2 列第 1 行 */
	.single-product div.product .igt-col {
		grid-column: 2;
		grid-row: 1;
		float: none;
		width: auto;
		margin: 0;
		min-width: 0;
	}

	.single-product div.product .igt-col div.summary {
		float: none;
		width: auto;
		margin: 0;
	}

	/* 跨整幅宽度的块另起一行 */
	.single-product div.product > .up-sells,
	.single-product div.product > .post-edit-link {
		grid-column: 1 / -1;
		grid-row: auto;
		width: auto;
		float: none;
	}
}

/* 视口偏矮时图库自己滚，避免底部被切掉 */
@media (min-width: 768px) and (max-height: 720px) {
	.woocommerce div.product div.images,
	.woocommerce-page div.product div.images {
		max-height: calc(100vh - 4rem);
		overflow-y: auto;
	}
}

/* ---------------------------------------------------------
   图库外观：整体一个边框，缩略图竖排在主图左侧
   ---------------------------------------------------------
   要压过的 WooCommerce 规则（都在 woocommerce.css）：
     .flex-control-thumbs li          { width:25%; float:left }
     .flex-control-thumbs li img      { opacity:.5 }
     __image:nth-child(n+2)           { width:25%; display:inline-block }
   所以下面一律带 div.product div.images 前缀。
   --------------------------------------------------------- */

.woocommerce div.product div.images {
	padding: 1.25rem;
	border: 1px solid var(--igt-line);
	border-radius: 3px;
	background: #fff;
	box-sizing: border-box;
	/* 这里不要写 position —— 本条选择器权重（3类+2元素）高于媒体查询里
	   .single-product div.product .images 的 position:sticky（3类+1元素），
	   写了会把 sticky 压掉。定位上下文由 WooCommerce 自带的
	   position:relative 提供，桌面端则由 sticky 本身提供。 */
}

/* WooCommerce 给图库加了内联 style="opacity:0"，等 JS 初始化完才清掉。
   JS 没跑或跑挂时整块就一直是白的 —— 这里强制可见，避免白屏。 */
.woocommerce div.product div.images.woocommerce-product-gallery {
	opacity: 1 !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
}

/* 主图：只管图片本身撑满，不去动幻灯片元素的 float/width ——
   FlexSlider 初始化后会给它们写内联 width/float 做轮播，
   在这里覆盖会把轮播布局搞坏（实测会导致 wrapper 高度塌成 0）。 */
.single-product div.product .images .woocommerce-product-gallery__image img,
.single-product div.product .images .woocommerce-product-gallery__wrapper img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	margin: 0;
}

/* 仅在 FlexSlider 未接管时兜底：此时 wrapper 还是 div.images 的直接子元素，
   一堆幻灯片会竖着平铺，只显示第一张。FlexSlider 一旦接管，wrapper 会被
   移进 .flex-viewport，下面这条自然不再匹配。 */
.single-product div.product .images > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n + 2) {
	display: none;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image img,
.woocommerce div.product div.images img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* 放大镜按钮 */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	top: 1.6rem;
	right: 1.6rem;
	z-index: 3;
}

@media (min-width: 768px) {

	/* 图库容器。
	   实测（headless Chrome 读计算样式）确认的冲突：Storefront 的
	     .storefront-full-width-content.single-product div.product .images
	   是 4 个类，比我这条 3 个类权重高，它的 width:39.13% 赢了 ——
	   39.13% × 446.86px = 174.8px，正是实测塌掉的宽度。
	   对方最高 6 个类（缩略图那条），继续加类是无底洞，这里用
	   !important 明确收口，只针对布局属性。

	   另外不能把这个 div 设成 Grid 再给主图列 minmax(0,1fr)：
	   .images 和 .woocommerce-product-gallery 是同一个元素，它是
	   shrink-to-fit，1fr 会去取内容宽度，而内容宽度又来自 FlexSlider
	   的测量，形成循环依赖，实测会收敛到 29px 把整块压塌。
	   所以给它定宽，缩略图排在主图下方（见文件末尾的缩略图条样式）。 */
	.single-product div.product .images,
	.single-product div.product .woocommerce-product-gallery {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin: 0 !important;
		box-sizing: border-box;
	}
}

/* ---------------------------------------------------------
   缩略图条：主图下方横向排列，超宽时横向滚动
   ---------------------------------------------------------
   要覆盖的 WooCommerce/Storefront 规则（权重最高 6 个类，
   所以布局属性一律带 !important，理由同上面图库容器那段）：
     .flex-control-thumbs      { overflow: hidden }
     .flex-control-thumbs li   { width: 8.57%~25%; float: left }
     .flex-control-thumbs li img { opacity: .5 }
   --------------------------------------------------------- */

.woocommerce div.product div.images .flex-control-thumbs {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 0.5rem;
	width: 100% !important;
	margin: 0.85rem 0 0 !important;
	padding: 0 0 0.4rem;
	list-style: none;

	/* 横向滚动 */
	overflow-x: auto !important;
	overflow-y: hidden !important;
	overscroll-behavior-x: contain;

	/* 这里刻意不用 scroll-behavior:smooth 和 scroll-snap ——
	   滚轮处理是靠 scrollLeft += delta 逐步累加的，配上 smooth 会让
	   每次滚轮都重启一次动画（发涩），而且 scrollLeft 读回的是动画
	   中间值，导致「是否已到两端」的判断失准，到边后放不开页面滚动。
	   实测确认过：加了 smooth 时 delta=120 读回只有 8。 */

	/* 滚动条做细一点，别抢视觉 */
	scrollbar-width: thin;
	scrollbar-color: var(--igt-line) transparent;
}

.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar {
	height: 6px;
}

.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar-track {
	background: transparent;
}

.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 3px;
}

.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar-thumb:hover {
	background: var(--igt-muted);
}

.woocommerce div.product div.images .flex-control-thumbs li {
	flex: 0 0 auto !important;
	width: 84px !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	padding: 0;
	list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 3px;
	border: 1px solid var(--igt-line);
	border-radius: 2px;
	opacity: 1 !important;
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color 0.15s ease;
}

.woocommerce div.product div.images .flex-control-thumbs li img:hover {
	border-color: var(--igt-muted);
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
	border-color: var(--igt-ink);
	border-width: 2px;
	padding: 2px;
}

/* 窄屏缩略图小一点 */
@media (max-width: 767px) {
	.woocommerce div.product div.images .flex-control-thumbs li {
		width: 68px !important;
	}
}