/*
Theme Name: Hey Shero
Theme URI: https://heyshero.com
Description: 黑金潮牌风格子主题，基于 Astra。深黑底 + 金属金点缀，衬线大标题，版式参考高端 DTC 独立站的节奏。
Author: heyshero
Template: astra
Version: 1.1.0
Text Domain: heyshero
*/

/* ==========================================================================
   1. 设计变量
   ========================================================================== */
:root {
	--hs-bg: #0a0a0b;
	--hs-bg-soft: #101013;
	--hs-surface: #16161a;
	--hs-surface-2: #1d1d22;
	--hs-line: rgba(255, 255, 255, 0.1);
	--hs-line-strong: rgba(255, 255, 255, 0.18);
	--hs-gold: #c9a227;
	--hs-gold-light: #e7c65c;
	--hs-text: #f4f4f2;
	--hs-muted: #9b9ba3;
	--hs-dim: #6c6c74;
	--hs-display: "Playfair Display", Georgia, "Times New Roman", "Songti SC", serif;
	--hs-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
	--hs-radius: 3px;
	--hs-gap: 24px;
	--hs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   2. 全局底色与排版
   ========================================================================== */
body,
.ast-separate-container,
.ast-plain-container,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single {
	background-color: var(--hs-bg);
	color: var(--hs-text);
}

body {
	font-family: var(--hs-body);
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.entry-title,
.site-title {
	color: var(--hs-text);
	font-family: var(--hs-display);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.1;
	text-transform: none;
}

h1, .entry-title { font-size: clamp(2.1rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 1.9vw, 1.4rem); }

a { color: var(--hs-gold); }
a:hover, a:focus { color: var(--hs-gold-light); }

hr { border-color: var(--hs-line); }

/* 小标题（金色字距标签） */
.hs-kicker {
	display: inline-block;
	margin: 0 0 16px;
	font-family: var(--hs-body);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--hs-gold);
}

.hs-lead {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--hs-muted);
}

/* ==========================================================================
   3. 通栏容器与区块标题
   ========================================================================== */
.hs-section { padding: 92px 0; }
.hs-section--tight { padding: 64px 0; }
.hs-section--soft { background: var(--hs-bg-soft); }
.hs-section--surface { background: var(--hs-surface); }

.hs-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.hs-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}

.hs-head h2 { margin: 0; }
.hs-head p { margin: 10px 0 0; }
.hs-head--center { flex-direction: column; align-items: center; text-align: center; }

.hs-head__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.hs-link {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--hs-muted);
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--hs-line-strong);
	white-space: nowrap;
}

.hs-link:hover { color: var(--hs-gold); text-decoration-color: var(--hs-gold); }

.hs-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 1rem;
	line-height: 1;
	color: var(--hs-text);
	background: transparent;
	border: 1px solid var(--hs-line-strong);
	border-radius: 50%;
	cursor: pointer;
	transition: color 0.2s var(--hs-ease), border-color 0.2s var(--hs-ease);
}

.hs-arrow:hover { color: var(--hs-gold); background: transparent; border-color: var(--hs-gold); }

/* ==========================================================================
   4. 顶栏与导航
   ========================================================================== */
.hs-announce {
	background: var(--hs-gold);
	color: #0a0a0b;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-align: center;
	padding: 10px 16px;
}

.site-header,
.ast-primary-header-bar,
.ast-above-header-bar {
	background-color: rgba(10, 10, 11, 0.92);
	border-bottom: 1px solid var(--hs-line);
}

.site-header .site-title a,
.site-header .site-description { color: var(--hs-text); }

.site-header .site-title {
	font-family: var(--hs-display);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
}

.ast-header-break-point .main-navigation ul li a,
.main-header-menu > .menu-item > .menu-link,
.ast-builder-menu .menu-item .menu-link {
	font-family: var(--hs-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--hs-text);
}

.main-header-menu > .menu-item > .menu-link:hover,
.ast-builder-menu .menu-item .menu-link:hover,
li.current-menu-item > .menu-link { color: var(--hs-gold); }

.ast-cart-menu-wrap .count,
.ast-header-custom-item .ast-cart-menu-wrap .count {
	background-color: var(--hs-gold);
	color: #0a0a0b;
}

/* ==========================================================================
   5. 按钮
   ========================================================================== */
.ast-button,
.ast-custom-button,
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background-color: var(--hs-gold);
	background-image: none;
	color: #0a0a0b;
	font-family: var(--hs-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border: 1px solid var(--hs-gold);
	border-radius: var(--hs-radius);
	padding: 15px 32px;
	transition: background-color 0.25s var(--hs-ease), color 0.25s var(--hs-ease), border-color 0.25s var(--hs-ease);
}

.ast-button:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: transparent;
	color: var(--hs-gold);
	border-color: var(--hs-gold);
}

/* 次级按钮：细描边 */
.wp-block-button.is-style-outline .wp-block-button__link,
.woocommerce a.button.alt.hs-ghost,
.hs-ghost {
	background-color: transparent;
	color: var(--hs-text);
	border-color: var(--hs-line-strong);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.hs-ghost:hover { color: var(--hs-gold); border-color: var(--hs-gold); background-color: transparent; }

/* ==========================================================================
   6. 首页主视觉
   ========================================================================== */
.hs-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 88vh;
	overflow: hidden;
	background-color: #000;
	border-bottom: 1px solid var(--hs-line);
}

.hs-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(10, 10, 11, 0.25) 0%,
		rgba(10, 10, 11, 0.45) 45%,
		rgba(10, 10, 11, 0.92) 100%
	);
}

.hs-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px 88px;
}

.hs-hero__title {
	max-width: 18ch;
	margin: 0 0 22px;
	font-size: clamp(2.3rem, 5.4vw, 4.2rem);
	line-height: 1.05;
	text-shadow: 0 4px 34px rgba(0, 0, 0, 0.5);
}

.hs-hero__title em { font-style: italic; color: var(--hs-gold); }

.hs-hero__text {
	max-width: 44ch;
	margin: 0 0 34px;
	font-size: 1.02rem;
	line-height: 1.75;
	color: rgba(244, 244, 242, 0.8);
}

.hs-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ==========================================================================
   7. 分类图片瓷片（纵向堆叠 · 左对齐 · 图左文右）
   ========================================================================== */
.hs-tiles {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 620px;
}

.hs-tile {
	display: flex;
	align-items: center;
	gap: 28px;
	text-decoration: none;
	padding: 14px 0;
	border-top: 1px solid var(--hs-line);
	transition: padding-left 0.3s var(--hs-ease);
}

.hs-tile:last-child { border-bottom: 1px solid var(--hs-line); }

.hs-tile:hover { padding-left: 12px; }

.hs-tile__media {
	position: relative;
	flex: 0 0 200px;
	width: 200px;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--hs-radius);
	background: var(--hs-surface);
}

.hs-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--hs-ease);
}

.hs-tile:hover .hs-tile__media img { transform: scale(1.05); }

.hs-tile__label { flex: 1; text-align: left; }

.hs-tile__label strong {
	display: block;
	font-family: var(--hs-display);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--hs-text);
}

.hs-tile__label span {
	display: block;
	margin-top: 6px;
	font-size: 0.7rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--hs-muted);
}

.hs-tile:hover .hs-tile__label strong { color: var(--hs-gold); }

/* ==========================================================================
   8. 商品横向轮播
   ========================================================================== */
.hs-carousel .woocommerce ul.products {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--hs-gap);
	margin: 0;
	padding: 0 0 6px;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-ms-overflow-style: none;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.hs-carousel .woocommerce ul.products::-webkit-scrollbar { display: none; }
.hs-carousel .woocommerce ul.products::before,
.hs-carousel .woocommerce ul.products::after { display: none; content: none; }

.hs-carousel .woocommerce ul.products li.product {
	float: none;
	width: auto;
	flex: 0 0 calc((100% - (var(--hs-gap) * 3)) / 4);
	max-width: none;
	margin: 0;
	scroll-snap-align: start;
}

/* ==========================================================================
   9. 全幅横幅
   ========================================================================== */
.hs-banner {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 62vh;
	overflow: hidden;
	background-color: #000;
	background-size: cover;
	background-position: center;
	border-top: 1px solid var(--hs-line);
	border-bottom: 1px solid var(--hs-line);
}

.hs-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(10, 10, 11, 0.88) 0%,
		rgba(10, 10, 11, 0.45) 45%,
		rgba(10, 10, 11, 0.15) 100%
	);
}

.hs-banner__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px 72px;
}

.hs-banner__inner h2 { margin: 0 0 16px; max-width: 20ch; }
.hs-banner__inner p { max-width: 40ch; margin: 0 0 30px; color: rgba(244, 244, 242, 0.8); line-height: 1.75; }

/* ==========================================================================
   10. 图文分栏（品牌故事）
   ========================================================================== */
.hs-story {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.hs-story__media {
	overflow: hidden;
	border-radius: var(--hs-radius);
	background: var(--hs-surface);
}

.hs-story__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.hs-story__body h2 { margin: 0 0 20px; }
.hs-story__body p { margin: 0 0 18px; }

/* ==========================================================================
   11. 卖点条
   ========================================================================== */
.hs-usp {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.hs-usp > div {
	padding-top: 22px;
	border-top: 1px solid var(--hs-line);
}

.hs-usp strong {
	display: block;
	margin-bottom: 8px;
	font-family: var(--hs-display);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--hs-text);
}

.hs-usp p { margin: 0; font-size: 0.86rem; line-height: 1.65; color: var(--hs-muted); }

/* ==========================================================================
   12. 买家评价
   ========================================================================== */
.hs-reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--hs-gap);
}

.hs-review {
	display: flex;
	flex-direction: column;
	background: var(--hs-surface);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-radius);
	padding: 34px 30px;
}

.hs-review__stars { color: var(--hs-gold); font-size: 0.82rem; letter-spacing: 0.25em; }
.hs-review p { flex: 1; margin: 16px 0 22px; font-size: 0.95rem; line-height: 1.8; color: var(--hs-muted); }
.hs-review cite { font-style: normal; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hs-text); }

/* ==========================================================================
   13. 邮件订阅
   ========================================================================== */
.hs-newsletter {
	text-align: center;
	background: var(--hs-bg-soft);
	border-top: 1px solid var(--hs-line);
	border-bottom: 1px solid var(--hs-line);
}

.hs-newsletter h2 { margin: 0 0 14px; }
.hs-newsletter p { margin: 0; }

.hs-newsletter form {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 30px;
}

.hs-newsletter input[type="email"] { min-width: 320px; }
.hs-newsletter__note { margin-top: 16px; font-size: 0.72rem; color: var(--hs-dim); }

/* ==========================================================================
   14. 商品网格（商店 / 分类页）
   ========================================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--hs-surface);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-radius);
	overflow: hidden;
	transition: border-color 0.3s var(--hs-ease), transform 0.3s var(--hs-ease);
}

.woocommerce ul.products li.product:hover { border-color: var(--hs-gold); transform: translateY(-4px); }

.woocommerce ul.products li.product .woocommerce-loop-product__link { display: block; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 18px 18px 6px;
	font-family: var(--hs-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hs-text);
}

.woocommerce ul.products li.product .price {
	padding: 0 18px;
	color: var(--hs-gold);
	font-size: 0.95rem;
	font-weight: 600;
}

.woocommerce ul.products li.product a img { margin: 0; }

.woocommerce ul.products li.product .button { margin: 16px 18px 18px; padding: 12px 20px; font-size: 0.68rem; }

.woocommerce .star-rating span::before,
.woocommerce .star-rating::before { color: var(--hs-gold); }

.woocommerce .woocommerce-result-count { color: var(--hs-muted); }

.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	background: var(--hs-surface);
	color: var(--hs-text);
	border: 1px solid var(--hs-line-strong);
	border-radius: var(--hs-radius);
	padding: 10px 14px;
}

/* ==========================================================================
   15. 商品详情页
   ========================================================================== */
.woocommerce div.product .product_title { letter-spacing: -0.01em; }

.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--hs-gold); font-size: 1.4rem; font-weight: 600; }

.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-tabs .panel { color: var(--hs-muted); line-height: 1.8; }

.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button { padding: 17px 44px; }

.woocommerce div.product .quantity .qty {
	background: var(--hs-surface);
	color: var(--hs-text);
	border: 1px solid var(--hs-line-strong);
	border-radius: var(--hs-radius);
	padding: 15px 10px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--hs-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--hs-muted);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--hs-gold); }

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li { border-color: var(--hs-line); }

/* ==========================================================================
   16. 购物车 / 结算
   ========================================================================== */
.woocommerce table.shop_table {
	background: var(--hs-surface);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-radius);
	color: var(--hs-text);
}

.woocommerce table.shop_table th {
	background: var(--hs-surface-2);
	color: var(--hs-text);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border-color: var(--hs-line);
}

.woocommerce table.shop_table td { border-color: var(--hs-line); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection {
	background: var(--hs-bg-soft);
	color: var(--hs-text);
	border: 1px solid var(--hs-line-strong);
	border-radius: var(--hs-radius);
	padding: 12px 14px;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--hs-gold); outline: none; }

.woocommerce form .form-row label { color: var(--hs-muted); font-size: 0.84rem; }

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout-review-order {
	background: var(--hs-surface);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-radius);
	padding: 24px;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--hs-surface-2);
	color: var(--hs-text);
	border-top-color: var(--hs-gold);
}

.woocommerce-message::before,
.woocommerce-info::before { color: var(--hs-gold); }

/* ==========================================================================
   17. 通用表单
   ========================================================================== */
input[type="text"], input[type="email"], input[type="search"], textarea, select {
	background: var(--hs-bg-soft);
	color: var(--hs-text);
	border: 1px solid var(--hs-line-strong);
	border-radius: var(--hs-radius);
	padding: 13px 16px;
}

input::placeholder, textarea::placeholder { color: var(--hs-dim); }

/* ==========================================================================
   18. 页脚
   ========================================================================== */
.site-footer,
.ast-footer-copyright,
.site-footer .ast-footer-copyright {
	background-color: #070708;
	color: var(--hs-muted);
	border-top: 1px solid var(--hs-line);
}

.site-footer a { color: var(--hs-text); }
.site-footer a:hover { color: var(--hs-gold); }

/* ==========================================================================
   19. 首页通栏（覆盖 Astra 定宽容器）
   ========================================================================== */
.hs-front .site-content > .ast-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.hs-front .site-content { margin-top: 0; }

.hs-front #content,
.hs-front .ast-container,
.hs-front .ast-separate-container { background: transparent; }

.hs-front #primary { padding: 0; margin: 0; }

/* ==========================================================================
   20. 响应式
   ========================================================================== */
@media (max-width: 1024px) {
	.hs-section { padding: 72px 0; }
	.hs-story { grid-template-columns: 1fr; gap: 36px; }
	.hs-carousel .woocommerce ul.products li.product { flex: 0 0 calc((100% - (var(--hs-gap) * 2)) / 3); }
	.hs-usp { grid-template-columns: repeat(2, 1fr); gap: 26px; }
	.hs-reviews { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	.hs-hero { min-height: 72vh; }
	.hs-hero__inner { padding-bottom: 56px; }
	.hs-section { padding: 56px 0; }
	.hs-section--tight { padding: 44px 0; }
	.hs-tiles { max-width: 100%; gap: 0; }
	.hs-tile { gap: 18px; padding: 16px 0; }
	.hs-tile__media { flex: 0 0 120px; width: 120px; }
	.hs-tile__label strong { font-size: 1.2rem; }
	.hs-carousel .woocommerce ul.products li.product { flex: 0 0 78%; }
	.hs-banner { min-height: 54vh; }
	.hs-banner__inner { padding-bottom: 48px; }
	.hs-usp { grid-template-columns: 1fr; }
	.hs-head { flex-direction: column; align-items: flex-start; }
	.hs-head__actions { display: none; }
	.hs-newsletter input[type="email"] { min-width: 100%; }
	.woocommerce ul.products li.product .button { width: auto; }
}