/* ======================================================
   HotCherry 风格改造 CSS（变量化版本）
   换配色：只需修改下方 :root 里的 --hc-* 变量
   配合子主题 functions.php 一起使用
   ====================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&display=swap');

/* ---------- 0. 配色变量 + Flatsome 变量覆盖 ---------- */

:root {
	/* ====== 已定方案：A 黑金极简 ====== */
	--hc-primary: #b08d57;          /* 主色：按钮 / 链接 / 促销价 */
	--hc-primary-hover: #92733f;    /* 主色悬停 */
	--hc-dark: #141414;             /* 深色：标题 / 次按钮 / 页脚 */
	--hc-text: #3d3d3d;             /* 正文 */
	--hc-bg: #fafafa;               /* 页面背景 */
	--hc-border: #e4e1da;           /* 分隔线 / 边框 */
	--hc-sale: #a33b2e;             /* 促销红 */
	--hc-new: #b08d57;              /* 新品徽章（金色） */
	--hc-muted: #7a7469;            /* 次要文字 */
	--hc-footer-bg: #141414;        /* 页脚背景 */
	--hc-footer-text: #d0d0d0;      /* 页脚文字 */
	--hc-card-bg: #ffffff;          /* 商品卡背景 */
	--hc-star: #c9a24a;             /* 评分星标 */

	/* Flatsome 核心变量覆盖（后台没改也能生效） */
	--fs-color-primary: var(--hc-primary) !important;
	--fs-color-secondary: var(--hc-dark) !important;
	--fs-color-success: #4a7a52 !important;
	--fs-color-alert: var(--hc-sale) !important;
	--fs-color-base: var(--hc-text) !important;
}

/* ---------- 1. 全局设计系统 ---------- */

body {
	background-color: var(--hc-bg);
	color: var(--hc-text);
}

h1, h2, h3, h4, h5, h6,
.heading-font {
	color: var(--hc-dark);
}

/* 标题强调词：在 UX Builder 的标题里给词语加 .alt-font 类 */
.alt-font {
	font-family: 'Playfair Display', Georgia, serif;
	font-style: italic;
	font-weight: 400;
}

/* 药丸形按钮（如果后台未设圆角，这里兜底） */
.button,
button.button,
.button.primary,
.button.secondary {
	border-radius: 100px !important;
}

/* 按钮 hover：向参考站的位移动效靠拢 */
.button {
	transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.button.primary:hover {
	background-color: var(--hc-primary-hover);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(20, 20, 20, .22);
}

/* 兜底：主按钮主色、次按钮深灰 */
.button.primary {
	background-color: var(--hc-primary);
	border-color: var(--hc-primary);
	color: #fff;
}
.button.secondary {
	background-color: var(--hc-dark);
	border-color: var(--hc-dark);
	color: #fff;
}

/* ---------- 2. 顶部公告栏 ---------- */

.header-top {
	background-color: var(--hc-primary);
}
.header-top .nav > li > a,
.header-top .nav > li > span {
	color: #fff;
	font-size: .8rem;
	letter-spacing: .02em;
}

/* ---------- 3. 商品卡片（列表 / 首页） ---------- */

/* 白底圆角卡片 */
.products .product-small,
.products .product-small .col-inner {
	background-color: var(--hc-card-bg);
	border-radius: 10px;
}
.products .product-small .col-inner {
	padding: 8px;
}
@media (min-width: 768px) {
	.products .product-small .col-inner {
		padding: 20px;
	}
}

/* 图片区域圆角 + 悬停放大 */
.products .product-small .box-image {
	border-radius: 10px;
	overflow: hidden;
}
.products .product-small .box-image img {
	transition: transform .5s ease;
}
.products .product-small:hover .box-image img {
	transform: scale(1.08);
}

/* ===== 产品卡片图片：1:1 方形容器 + contain 完整显示（对齐 honeysx） ===== */
.products .product-small .box-image {
	position: relative;
	padding-top: 100% !important; /* 固定 1:1 方形容器 */
	overflow: hidden;
}
.products .product-small .box-image > a,
.products .product-small .box-image > div > a {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
}
.products .product-small .box-image img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important; /* 完整显示，永不裁剪 */
}
.products .product-small .box-image img.show-on-hover {
	object-fit: contain !important;
}

/* 文字区：左对齐、留白 */
.products .product-small .box-text.box-text-products {
	padding: 16px 2px 2px;
	text-align: left;
}
.products .product-small .product-title a {
	color: var(--hc-dark);
	font-size: .95rem;
	line-height: 1.35;
}
.products .product-small .product-title a:hover {
	color: var(--hc-primary);
}

/* 价格：实际价格统一金色，原价（划线价）保持灰色
   覆盖分类页、商品页、相关/交叉销售、Quick View 等全部场景 */
.product-small .price,
.product-info .price,
.related .price,
.upsells .price {
	color: var(--hc-primary);
}
.product-small .price .woocommerce-Price-amount,
.product-info .price .woocommerce-Price-amount,
.related .price .woocommerce-Price-amount,
.upsells .price .woocommerce-Price-amount {
	color: var(--hc-primary) !important;
}
.product-small .price del .woocommerce-Price-amount,
.product-info .price del .woocommerce-Price-amount,
.related .price del .woocommerce-Price-amount,
.upsells .price del .woocommerce-Price-amount {
	color: var(--hc-muted) !important;
}
.product-small .price ins,
.product-info .price ins,
.related .price ins,
.upsells .price ins {
	color: var(--hc-primary);
}

/* 商品页价格字号加大（原价与折扣价都加大） */
.product-info .price,
.product-info .price ins {
	font-size: 1.9rem;
}
.product-info .price del {
	font-size: 1.25rem;
}

/* 底部工具条（加购 + Quick View）：药丸按钮 */
.products .product-small .grid-tools {
	gap: 6px;
	padding: 8px;
	background: transparent;
}
.products .product-small .grid-tools .button,
.products .product-small .grid-tools .quick-view {
	border-radius: 100px;
	font-size: .72rem;
	padding: 8px 16px;
	line-height: 1.4;
}
.products .product-small .grid-tools .button {
	background-color: var(--hc-primary);
	color: #fff;
}
.products .product-small .grid-tools .button:hover {
	background-color: var(--hc-primary-hover);
}
.products .product-small .grid-tools .quick-view {
	background-color: #fff;
	color: var(--hc-dark);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

/* 徽章：促销 = 白底红字红边，New = 白底金边金字 */
.products .product-small .badge-inner.secondary.on-sale {
	background-color: #fff;
	color: var(--hc-sale);
	border: 1px solid var(--hc-sale);
	border-radius: 6px;
	font-size: .7rem;
	padding: 4px 8px;
}
.products .product-small .badge-inner.new-bubble-auto,
.products .product-small .badge-inner.callout-new-bg {
	background-color: #fff;
	color: var(--hc-new);
	border: 1px solid var(--hc-new);
	border-radius: 6px;
	font-size: .7rem;
	padding: 4px 8px;
}

/* 评分星星 */
.products .product-small .star-rating span::before,
.product-info .star-rating span::before {
	color: var(--hc-star);
}

/* ---------- 4. 商品详情页 ---------- */

/* 标题 */
.product-info .product-title {
	font-size: 1.8rem;
	color: var(--hc-dark);
}

/* 商品详情页：隐藏 "Tags: ..." 标签列表（保留 SKU / 分类） */
.product-info .product_meta .tagged_as {
	display: none;
}

/* 手风琴：箭头移到右侧（默认收起） */
.accordion .accordion-title {
	padding-left: 0;
	padding-right: 2.5em;
}
.accordion .toggle {
	left: auto;
	right: 0;
}

/* 库存 / 发货预估 */
.hc-stock-estimate {
	font-size: .85rem;
	color: var(--hc-text);
	padding: 10px 0 0;
}
.hc-in-stock {
	color: #4a7a52;
	font-weight: 600;
}

/* 特性标签胶囊 */
.hc-feature-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 14px 0 26px;
	margin-bottom: 8px;
}
.hc-feature-tag {
	background-color: #f3f3f3;
	color: var(--hc-dark);
	border-radius: 100px;
	font-size: .75rem;
	padding: 4px 12px;
}

/* 信任行 */
.hc-trust-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	border: 1px solid var(--hc-border);
	border-radius: 10px;
	padding: 14px;
	margin: 6px 0;
}
@media (min-width: 768px) {
	.hc-trust-row {
		grid-template-columns: 1fr 1fr 1fr;
	}
}
.hc-trust-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.hc-trust-icon {
	font-size: 1.15rem;
	line-height: 1.2;
}
.hc-trust-text strong,
.hc-trust-text span {
	display: block;
}
.hc-trust-text strong {
	color: var(--hc-dark);
	font-size: .82rem;
}
.hc-trust-text span {
	color: var(--hc-muted);
	font-size: .75rem;
}

/* 支付图标行 */
.hc-payment-icons {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0;
}
.hc-payment-label {
	font-size: .78rem;
	color: var(--hc-muted);
}
.hc-payment-icons .payment-icons {
	margin: 0;
}
.hc-payment-icons .payment-icon {
	max-height: 22px;
}

/* ---------- 5. 页脚（配合后台 Footer 设置） ---------- */

.footer-1,
.footer-2 {
	background-color: var(--hc-footer-bg);
}
.footer-1 h4,
.footer-2 h4,
.footer-1 .widget-title,
.footer-2 .widget-title {
	color: #fff;
}
.footer-1,
.footer-2,
.absolute-footer {
	color: var(--hc-footer-text);
}
.footer-1 a,
.footer-2 a {
	color: var(--hc-footer-text);
}
.footer-1 a:hover,
.footer-2 a:hover {
	color: var(--hc-primary);
}

/* 隐藏 Absolute Footer（版权栏）——版权/支付图标已放进 Footer HX Block 时用 */
.absolute-footer {
	display: none !important;
}

/* ---------- 6. Footer HX Block（honeysx 结构） ---------- */

/* 顶部标题与副文案 */
.footer-hx-title {
	color: #fff;
	font-family: 'Playfair Display', Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: 1.2rem;
	margin: 0 0 8px;
}
.footer-hx-sub {
	color: #b9b2a5;
	font-size: .85rem;
	margin: 0 0 14px;
}

/* 三列标题与链接（去圆点、紧凑、hover 金色） */
.footer-hx-heading {
	color: #fff;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin: 0 0 4px;
}
.footer-hx-links {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}
.footer-hx-links li {
	margin-bottom: 9px;
}
.footer-hx-links a {
	color: #d0d0d0;
	font-size: .85rem;
}
.footer-hx-links a:hover {
	color: var(--hc-primary);
}

/* 4 列比例：第 1 列 36%，其余三列各约 21.3%（仅桌面/平板显示 4 列时生效） */
@media (min-width: 850px) {
	.footer-hx-cols .hc-foot-1 {
		flex: 0 0 36% !important;
		max-width: 36% !important;
	}
	.footer-hx-cols .hc-foot-2 {
		flex: 0 0 21.3333% !important;
		max-width: 21.3333% !important;
	}
}

/* 底部版权与链接 */
.footer-hx-bottom {
	color: #9a9488;
	font-size: .78rem;
	margin: 14px 0 0;
	text-align: center;
}
.footer-hx-bottom a {
	color: #d0d0d0;
}
.footer-hx-bottom a:hover {
	color: var(--hc-primary);
}
.footer-hx-links-line {
	margin: 8px 0 0;
	text-align: center;
	font-size: .78rem;
}
.footer-hx-links-line a {
	color: #d0d0d0;
	margin: 0 6px;
}
.footer-hx-links-line a:hover {
	color: var(--hc-primary);
}

/* 深色区里的订阅表单：药丸输入框 + 金色按钮 */
.section.dark .wpcf7-form p {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}
.section.dark .wpcf7-form input[type="email"] {
	flex: 1;
	min-width: 160px;
	border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, .25);
	background: transparent;
	color: #fff;
	padding: 10px 16px;
}
.section.dark .wpcf7-form input[type="submit"] {
	border-radius: 100px;
	background: var(--hc-primary);
	color: #fff;
	border: none;
	padding: 10px 22px;
	cursor: pointer;
}
.section.dark .wpcf7-form input[type="submit"]:hover {
	background: var(--hc-primary-hover);
}

/* 社交图标与支付图标在深色区的观感 */
.section.dark .follow-icons a {
	color: #fff;
	border-color: rgba(255, 255, 255, .3);
}
.section.dark .follow-icons a:hover {
	color: var(--hc-primary);
	border-color: var(--hc-primary);
}
.section.dark .payment-icons .payment-icon {
	opacity: .85;
}

/* ---------- 7. 首页区块（hotcherry 风格） ---------- */

.hc-eyebrow {
	color: var(--hc-primary);
	letter-spacing: .28em;
	font-size: .75rem;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.hc-hero-title {
	color: #fff;
	font-family: 'Playfair Display', Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: 2.8rem;
	line-height: 1.12;
	margin: 0 0 12px;
}
.hc-hero-sub {
	color: #cfc9bd;
	font-size: .95rem;
	max-width: 520px;
	margin: 0 0 26px;
}
.hc-trust-box {
	border: 1px solid var(--hc-border);
	border-radius: 10px;
	padding: 14px;
	text-align: center;
	background: var(--hc-card-bg);
}
.hc-trust-box .hc-trust-icon {
	font-size: 1.4rem;
}
.hc-trust-box strong {
	display: block;
	color: var(--hc-dark);
	margin: 6px 0 2px;
	font-size: .85rem;
}
.hc-trust-box span {
	color: var(--hc-muted);
	font-size: .78rem;
}
.hc-review {
	text-align: center;
	color: var(--hc-muted);
	font-size: .85rem;
}
.hc-review .hc-stars {
	color: var(--hc-star);
	letter-spacing: 3px;
	font-size: 1.1rem;
	margin-bottom: 4px;
}
.hc-cat-tile {
	background: var(--hc-dark);
	color: #fff;
	border-radius: 12px;
	padding: 28px 16px;
	text-align: center;
	display: block;
	transition: transform .3s ease, box-shadow .3s ease;
}
.hc-cat-tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(20, 20, 20, .18);
}
.hc-cat-tile b {
	font-family: 'Playfair Display', Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: 1.25rem;
	color: var(--hc-primary);
	display: block;
	margin-bottom: 4px;
}
.hc-cat-tile span {
	color: #cfc9bd;
	font-size: .78rem;
}
.hc-promo-tile {
	background: var(--hc-dark);
	color: #fff;
	border-radius: 12px;
	padding: 30px 18px;
	text-align: center;
}
.hc-promo-tile b {
	font-family: 'Playfair Display', Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: 1.5rem;
	color: var(--hc-primary);
	display: block;
	margin-bottom: 4px;
}
.hc-promo-tile span {
	color: #cfc9bd;
	font-size: .8rem;
}
.hc-section-head {
	margin-bottom: 18px;
}
.hc-section-head h2 {
	font-size: 1.35rem;
	font-weight: 500;
	color: var(--hc-dark);
	margin: 0;
}
.hc-section-head a {
	color: var(--hc-primary-hover);
	font-size: .8rem;
}
.hc-seo-text {
	color: var(--hc-muted);
	font-size: .82rem;
	line-height: 1.7;
}