/* ==========================================================================
   Shineyoo 站点补丁 v1.0
   --------------------------------------------------------------------------
   这一份只放「设计系统里没有、但本站必须补」的东西。
   加载顺序在设计系统之后，所以这里写的规则会覆盖设计系统。

   为什么需要这一份：
     父主题 zeroY 的模板是纯骨架 —— 没有版心容器、页头被包在菜单判断里、
     WordPress 自带的区块样式被卸载、robots 指令被清空。
     设计系统假设「有人已经用 sy- 类名把结构搭好了」，
     而主题自动生成的商业页面不是那样，所以在这一层补齐。

   ⚠️ 改颜色、字体、间距请改设计系统的第 0 节（:root 变量），不要改这里。
   ========================================================================== */


/* ==========================================================================
   1. 页面骨架与版心
   ========================================================================== */

/* 版心。三组选择器，覆盖三种可能的页面结构 —— 命中一条就够：
     ① .sy-main                —— 页眉模板里的 <main class="sy-main">（正常情况）
     ② body > main:not(.sy-main)—— 万一那个 <main> 被换了类名
     ③ body > .woocommerce     —— 万一正文直接挂在 body 下、连 <main> 都没有
   为什么写三种：版心如果没生效，表现是「正文顶在屏幕最左边」，
   而这种「外层容器是谁」取决于页眉/页脚模板怎么写的，容易变。
   多写两条兜底，以后就算插件换了渲染方式，也不会再出现贴边。 */
.sy-main,
body > main:not(.sy-main),
body > .woocommerce {
	display: block;
	min-height: 50vh;          /* 内容少的时候别让页脚飘上来贴住页头 */
	width: 100%;
	max-width: var(--sy-maxw, 1400px);
	margin-left: auto;
	margin-right: auto;
	padding: 48px var(--sy-gutter, 40px) 96px;
	box-sizing: border-box;
}

/* 子主题自己那条路径（page.php）里，正文外面已经套了一层 .sy-wrap，
   左右留白会跟上面那行叠加，这里把它清零。 */
.sy-main > .sy-wrap { padding-left: 0; padding-right: 0; }

/* 页面正文：子主题的 page.php 已经套了 .sy-wrap，这里只负责上下留白 */
.sy-page__body { padding-top: 48px; padding-bottom: 96px; }
.sy-page__title { margin-bottom: 32px; }

/* WooCommerce 页面（分类页 / 单品页 / 搜索页）的外层留白 */
.sy-woo { padding-top: 40px; padding-bottom: 96px; }
.sy-woo .woocommerce { max-width: 100%; }

/* 手机端把左右留白收窄。设计系统里 --sy-gutter 默认 40px，手机上太占地方。
   只改局部，不动全局变量。 */
@media (max-width: 640px) {
	.sy-main,
	body > main:not(.sy-main),
	body > .woocommerce { padding: 32px 24px 64px; }
	.sy-page__body { padding-top: 32px; padding-bottom: 64px; }
	.sy-woo { padding-top: 24px; padding-bottom: 64px; }
}


/* ==========================================================================
   2. 修一个会让吸顶页头失效的坑
   --------------------------------------------------------------------------
   设计系统给 body 设了 overflow-x: hidden（防止手机端出现横向滚动条）。
   问题是：任何一个祖先元素只要不是 overflow: visible，就会变成滚动容器，
   页头的 position: sticky 会以它为准而不是以屏幕为准 —— 表现就是「页头不吸顶」。
   换成 overflow-x: clip：一样能挡住横向滚动，但不会创建滚动容器。
   旧浏览器不认 clip 会自动回退到上面那行 hidden，不影响。
   ========================================================================== */
body { overflow-x: clip; }

/* WordPress 登录状态下顶部那条黑色管理条，会把吸顶页头压住，这里补偏移 */
body.admin-bar .sy-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .sy-header { top: 46px; }
}


/* ==========================================================================
   3. 页头
   ========================================================================== */

/* 菜单项是 <li> 包着 <a>（WordPress 的 wp_nav_menu 只能这么输出），
   设计系统的 .sy-nav 是 flex 且直接给 <a> 写样式，这里把中间那层铺平 */
.sy-nav > li { list-style: none; margin: 0; padding: 0; }
.sy-nav > li > a { display: flex; }

/* 产品分类还没建、菜单也还没建的时候，导航会整个是空的，
   空着比显示一个占位符更干净 */
.sy-nav:empty { display: none; }

/* 没有 JS 时手机端菜单不能被藏起来（设计系统默认 display:none，
   要靠 JS 点按钮才打开）—— 否则手机用户完全打不开导航 */
@media (max-width: 1023px) {
	html:not(.sy-js) .sy-nav {
		display: flex;
		position: static;
		background: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0 0 12px;
		border-bottom: 0;
	}
	html:not(.sy-js) .sy-nav-toggle { display: none; }
}

/* 当前所在的那一项：跟悬停同一种黄色下划线，让人知道自己在哪一页 */
.sy-nav > li.is-current > a {
	color: var(--sy-amber);
	border-bottom-color: var(--sy-amber);
}

/* 页头横幅里只有三项产品线 + 一道竖线，1400px 版心放得下；
   中等屏幕收一收字号和间距，别让它挤到 logo 上去 */
@media (max-width: 1360px) {
	.sy-nav { gap: 22px; }
	.sy-nav a { font-size: 16px; }
}

/* 右侧功能区：Find Parts 是文字链（样板里就是这么放的）。
   注意要写成 a.sy-actions__text —— 设计系统里 .sy-actions a 有 border:0，
   单写类名权限不够，下划线会被清掉。 */
.sy-actions a.sy-actions__text {
	font-family: var(--sy-font-head);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding-bottom: 0;
	border-bottom: 2px solid transparent;
	transition: color var(--sy-ease), border-color var(--sy-ease);
}
.sy-actions a.sy-actions__text:hover { border-bottom-color: var(--sy-amber); }

.sy-actions .sy-account { display: inline-flex; align-items: center; }

/* 手机上「Find Parts」文字链收起来 —— 图标区只留账户和购物车 */
@media (max-width: 640px) {
	.sy-actions a.sy-actions__text { display: none; }
}


/* ==========================================================================
   4. 页脚
   ========================================================================== */

.sy-footer p { margin: 0 0 16px; font-size: 14px; font-weight: 500; }
.sy-footer .sy-logo { display: inline-block; margin-bottom: 20px; font-size: 24px; }
.sy-footer .sy-small { color: var(--sy-muted-dark); }
.sy-footer__bottom p { margin: 0; }


/* ==========================================================================
   5. 区块版购物车 / 结账的兜底
   --------------------------------------------------------------------------
   父主题把 WooCommerce 区块版的样式表（wc-blocks-style）卸载了。
   如果你把购物车/结账换成短代码版（推荐），下面这些规则不会生效，留着也无害。
   如果你暂时还在用区块版，这几条至少能让它成形：有版心、有间距、按钮是黑的。
   （更完整的按钮 / 输入框 / 合计样式在设计系统第 11 节里已经有了。）
   ========================================================================== */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

/* 空车状态：一个居中的大标题 + 一个按钮，别让它散在左边 */
.wc-block-cart__empty-cart__title {
	font-family: var(--sy-font-head);
	font-size: 28px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-align: center;
	margin: 40px 0 20px;
}
.wc-block-cart__empty-cart__action { text-align: center; margin-bottom: 56px; }
.wc-block-cart__empty-cart__action a {
	display: inline-block;
	text-decoration: none !important;
}

/* 「商店新品」那一段 */
.wc-block-cart .wc-block-grid,
.wp-block-woocommerce-cart .wp-block-woocommerce-product-new {
	margin-top: 32px;
}


/* ==========================================================================
   6. 经典（短代码）版购物车 / 结账 / 我的账户
   --------------------------------------------------------------------------
   WooCommerce 经典模板自己不带宽度，靠主题给；父主题不给。
   版心由外层 .sy-wrap 负责，这里只做两件模板兜不住的事。
   ========================================================================== */

/* 6a. 手机端：购物车表格一定会溢出屏幕。
   iPhone 上最窄也有 375px，而购物车表格有「商品 / 价格 / 数量 / 小计 / 删除」五列，
   塞不下。这里让它横向滚动，而不是把整页撑宽（整页撑宽会破坏所有断点）。 */
.woocommerce-cart .woocommerce > form.woocommerce-cart-form,
.woocommerce-cart .cart_totals {
	max-width: 100%;
}
@media (max-width: 780px) {
	.woocommerce-cart table.shop_table_responsive,
	.woocommerce-cart .woocommerce-cart-form__contents {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* 6b. 空车提示：居中 + 虚线框，并且把「返回商店」做成一个正经按钮 */
.woocommerce-cart .cart-empty {
	border: 2px dashed var(--sy-line);
	padding: 48px 24px;
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 24px;
}

/* 6c. 结账页的两栏在窄屏下必须变成一栏，否则右侧订单摘要会被挤出屏幕。
   （设计系统已经在 800px 断点处理了 .col2-set，这里补上订单摘要那一段。） */
@media (max-width: 900px) {
	.woocommerce-checkout .woocommerce {
		display: block;
	}
}


/* 6d. 我的账户：左导航 + 右内容，两列。
   ⚠️ 为什么不直接用设计系统里那条 grid？
   设计系统的写法是 `.woocommerce-account .woocommerce { display: grid }`，
   它靠 body 上的 woocommerce-account 类名。而父主题的 zeroy_clean_body_class()
   会把 body 类名只留下 home/single/page/archive/error404 五个 ——
   一旦那步没被撤掉，这条 grid 就整个失效，账户页会塌成「导航一行、内容一行」。
   所以下面这套写法写了两组选择器：
     · .woocommerce-account … —— body 类名还在时（已被我们保住）用这条
     · .sy-main …            —— body 类名万一又丢了，用这条兜底
   两条值一样，同时命中也没有副作用。
   顺带把上面的 grid 关掉：改成块级 + 浮动，免得两套布局打架
   （登录 / 注册页没有左导航，也会因此变成正常的一列，标题不会再被挤进窄列）。 */
.sy-main .woocommerce,
.woocommerce-account .woocommerce { display: block; }

@media (min-width: 801px) {
	.sy-main .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: left; width: 240px; margin: 0 48px 0 0;
	}
	.sy-main .woocommerce-MyAccount-content,
	.woocommerce-account .woocommerce-MyAccount-content {
		float: right; width: calc(100% - 288px);
	}
	.sy-main .woocommerce::after,
	.woocommerce-account .woocommerce::after {
		content: ""; display: table; clear: both;
	}
}
@media (max-width: 800px) {
	.sy-main .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.sy-main .woocommerce-MyAccount-content,
	.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; }
	.sy-main .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-navigation { margin: 0 0 28px; }
}


/* ==========================================================================
   7. 别让 WooCommerce 的提示条被页头压住
   ========================================================================== */
.woocommerce-notices-wrapper { position: relative; z-index: 5; }