/* ==========================================================================
   YourPacking 组件样式
   页头 / 页脚 / 导航 / 商品卡 / 搜索条 / 波浪横幅
   ========================================================================== */

/* ==========================================================================
   页头
   ========================================================================== */
.yp-header {
	position: relative;
	background: var(--yp-white);
	border-bottom: 0;
	z-index: 60;
}

.yp-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: var(--yp-header-h);
	gap: var(--yp-sp-5);
}

/* ---------- 左侧：主导航 ---------- */
.yp-nav { justify-self: start; }

.yp-nav__list {
	display: flex;
	align-items: center;
	gap: var(--yp-sp-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.yp-nav__list > li { position: relative; }

.yp-nav__list > li > a {
	display: inline-block;
	font-family: var(--yp-font-body);
	font-weight: 500;
	font-size: var(--yp-fs-sm);
	line-height: 1;
	text-transform: uppercase;
	color: var(--yp-black);
	padding: 10px 0;
	white-space: nowrap;
}

.yp-nav__list > li > a:hover { color: var(--yp-grey-700); }

/* 当前页 */
.yp-nav__list > .current-menu-item > a { text-decoration: none; font-weight: 700; }

/* 下拉：白底黑字（参考站是干净的白底卡片） */
.yp-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 210px;
	margin: 0;
	padding: var(--yp-sp-2) 0;
	list-style: none;
	background: var(--yp-white);
	border: 1px solid var(--yp-grey-200);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 20;
}
.yp-nav__list > li:hover > .sub-menu,
.yp-nav__list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.yp-nav .sub-menu li a {
	display: block;
	padding: 10px 20px;
	font-size: var(--yp-fs-sm);
	font-weight: 500;
	color: var(--yp-black);
	text-transform: none;
	white-space: nowrap;
}
.yp-nav .sub-menu li a:hover { background: var(--yp-grey-50); }

/* 有子菜单时加一个小箭头 */
.yp-nav__list > .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 8px; height: 8px;
	margin-left: 7px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

/* ---------- 中间：Logo ---------- */
.yp-logo { justify-self: center; }
.yp-logo img { max-height: 86px; width: auto; }
.yp-logo__text {
	font-family: var(--yp-font-head);
	font-weight: 900;
	font-size: var(--yp-fs-lg);
	text-transform: uppercase;
}

/* ---------- 右侧：CTA + 图标 ---------- */
.yp-header__actions {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 18px;
}

.yp-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 24px;
	border: 2px solid var(--yp-black);
	border-radius: var(--yp-radius-pill);
	background: var(--yp-white);
	color: var(--yp-black);
	font-family: var(--yp-font-head);
	font-weight: 900;
	font-size: var(--yp-fs-xs);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}
.yp-cta:hover { background: var(--yp-black); color: var(--yp-white); }

.yp-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--yp-black);
	cursor: pointer;
}
.yp-icon:hover { color: var(--yp-grey-700); }

.yp-cart-count {
	position: absolute;
	top: -2px; right: -4px;
	min-width: 17px; height: 17px;
	padding: 0 4px;
	border-radius: var(--yp-radius-pill);
	background: var(--yp-black);
	color: var(--yp-white);
	font-family: var(--yp-font-body);
	font-weight: 700;
	font-size: 10px;
	line-height: 17px;
	text-align: center;
}
.yp-cart-count[data-count="0"] { display: none; }

/* 结账页：只留居中 logo */
.yp-header--minimal .yp-header__inner {
	grid-template-columns: 1fr;
	justify-items: center;
	min-height: 74px;
}
.yp-header--minimal .yp-logo { justify-self: center; }

/* ---------- 通栏搜索条 ---------- */
.yp-searchbar {
	position: fixed;
	top: 0; left: 0; right: 0;
	background: var(--yp-white);
	border-bottom: 2px dashed var(--yp-black);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
	z-index: 9999;
}
.yp-searchbar__form {
	display: flex;
	align-items: center;
	gap: var(--yp-sp-4);
	max-width: var(--yp-max-width);
	margin-inline: auto;
	padding: 14px var(--yp-gutter);
}
.yp-searchbar__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 0;
	border: 0;
	outline: none;
	background: transparent;
	color: var(--yp-black);
	font-family: var(--yp-font-body);
	font-size: 17px;
}
.yp-searchbar__close {
	flex: 0 0 auto;
	width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; background: none; color: var(--yp-black); cursor: pointer;
}

/* ==========================================================================
   波浪横幅
   ========================================================================== */
.yp-hero {
	position: relative;
	background-color: var(--yp-ink);
	color: var(--yp-white);
	text-align: center;
	padding-block: var(--yp-sp-9);
	overflow: visible;
}

.yp-hero__inner {
	max-width: var(--yp-content-width);
	margin-inline: auto;
	padding-inline: var(--yp-gutter);
}

.yp-hero h1, .yp-hero h2 { color: var(--yp-white); margin-bottom: 0; }

.yp-hero__lead {
	max-width: 620px;
	margin: var(--yp-sp-5) auto 0;
	color: var(--yp-white);
	font-size: var(--yp-fs-sm);
	line-height: 1.6;
	opacity: .92;
}
.yp-hero__lead a { color: var(--yp-white); text-decoration: underline; white-space: nowrap; }

.yp-hero .yp-btn { margin-top: var(--yp-sp-5); }

/* 上下白色波浪（黑底上压出波浪边缘）*/
.yp-hero.yp-wave-top::before,
.yp-banner.yp-wave-top::before,
.yp-newsletter.yp-wave-top::before,
.yp-footer.yp-wave-top::before {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%2060%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2030%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20L1200%200%20L0%200%20Z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E");
}
.yp-hero.yp-wave-bottom::after,
.yp-banner.yp-wave-bottom::after,
.yp-newsletter.yp-wave-bottom::after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%2060%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2030%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20L1200%2060%20L0%2060%20Z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E");
}

/* ==========================================================================
   商品卡
   ========================================================================== */
.yp-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 56px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yp-card { display: flex; flex-direction: column; }

.yp-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--yp-grey-100);
	margin-bottom: var(--yp-sp-4);
}
.yp-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
}

.yp-card__title {
	font-family: var(--yp-font-body);
	font-weight: 600;
	font-size: var(--yp-fs-sm);
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
	margin: 0 0 var(--yp-sp-2);
	min-height: 2.6em;
}
.yp-card__title a { color: var(--yp-black); }

.yp-card__price {
	margin-top: auto;
	font-size: var(--yp-fs-base);
	font-weight: 700;
	color: var(--yp-black);
}
.yp-card__price del { color: var(--yp-grey-500); font-weight: 500; margin-right: 6px; }

/* 无库存：黑色圆形 SOLD OUT */
.yp-card--soldout .yp-card__media::after {
	content: "SOLD OUT";
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	display: flex; align-items: center; justify-content: center;
	width: 104px; height: 104px;
	border-radius: 50%;
	background: var(--yp-black);
	color: var(--yp-white);
	font-family: var(--yp-font-head);
	font-weight: 900;
	font-size: var(--yp-fs-xs);
	line-height: 1.1;
	text-transform: uppercase;
	z-index: 5;
}

/* ==========================================================================
   Catalog 工具条（FILTER / SORT）
   ========================================================================== */
.yp-catalog__head { text-align: center; margin-bottom: var(--yp-sp-6); }
.yp-catalog__title {
	font-family: var(--yp-font-head);
	font-weight: 900;
	font-size: clamp(var(--yp-fs-4xl), 6vw, var(--yp-fs-7xl));
	line-height: var(--yp-lh-head);
	text-transform: uppercase;
	margin: 0;
}

.yp-catalog__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--yp-sp-4);
	margin-bottom: var(--yp-sp-6);
}

.yp-sort { position: relative; display: inline-flex; align-items: center; }
.yp-sort__label {
	position: absolute;
	left: 22px;
	font-family: var(--yp-font-head);
	font-weight: 900;
	font-size: var(--yp-fs-xs);
	text-transform: uppercase;
	pointer-events: none;
}
.yp-sort select {
	appearance: none;
	padding: 12px 44px 12px 76px;
	border: 2px solid var(--yp-black);
	border-radius: var(--yp-radius-pill);
	background: var(--yp-white);
	color: var(--yp-black);
	font-family: var(--yp-font-body);
	font-weight: 500;
	font-size: var(--yp-fs-xs);
	line-height: 1;
	cursor: pointer;
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 1024px) {
	.yp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 22px; }
	.yp-footer__main { grid-template-columns: 1fr; gap: var(--yp-sp-6); }
}

@media (max-width: 921px) {
	.yp-header__inner {
		grid-template-columns: auto 1fr auto;
		min-height: 64px;
	}
	.yp-nav { display: none; }               /* 手机端导航走抽屉，下一步做 */
	.yp-logo { justify-self: center; }
	.yp-cta { display: none; }
	.yp-header__actions { gap: 14px; }
}

@media (max-width: 767px) {
	.yp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; }
	.yp-footer__cols { grid-template-columns: 1fr; gap: var(--yp-sp-5); }
	.yp-footer__bar-inner { flex-direction: column; gap: 6px; }
	.yp-catalog__bar { flex-direction: column; align-items: stretch; }
	.yp-sort, .yp-sort select { width: 100%; }
}


/* ==========================================================================
   商品分类网格（首页 / Catalog 页）
   参考站是「无盒子、图片居中、粗体大写文字」的干净样式
   ========================================================================== */
.yp-cats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 56px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yp-cats__item { text-align: center; }

.yp-cats__link {
	display: block;
	color: var(--yp-black);
	text-decoration: none;
}

.yp-cats__media {
	display: block;
	margin: 0 auto var(--yp-sp-4);
}
.yp-cats__media img {
	width: 100%;
	max-width: 240px;
	height: auto;
	margin-inline: auto;
	object-fit: contain;
	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}

.yp-cats__name {
	display: block;
	font-family: var(--yp-font-head);
	font-weight: 900;
	font-size: var(--yp-fs-sm);
	line-height: 1.12;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--yp-black);
}

@media (max-width: 1024px) {
	.yp-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 24px; }
}
@media (max-width: 767px) {
	.yp-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 18px; }
	.yp-cats__media { margin-bottom: var(--yp-sp-3); }
	.yp-cats__name { font-size: var(--yp-fs-xs); }
}

/* ==========================================================================
   数量选择器（购物车 / 结算页）
   ========================================================================== */
.yp-qty {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 4px;
	border: 1.5px solid var(--yp-black);
	border-radius: var(--yp-radius-pill);
	background: var(--yp-white);
}
.yp-qty__btn {
	width: 32px; height: 32px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0; border: 0; border-radius: 50%;
	background: transparent; color: var(--yp-black);
	font-size: 16px; line-height: 1; cursor: pointer;
	transition: background-color .12s ease, color .12s ease;
}
.yp-qty__btn:hover { background: var(--yp-black); color: var(--yp-white); }
.yp-qty input.qty {
	width: 74px !important;
	min-width: 74px !important;
	padding: 4px 2px !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--yp-black) !important;
	font-family: var(--yp-font-body);
	font-size: var(--yp-fs-sm);
	font-weight: 500;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
.yp-qty input.qty::-webkit-outer-spin-button,
.yp-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ==========================================================================
   分页
   ========================================================================== */
.yp-pagination {
	display: flex;
	justify-content: center;
	gap: var(--yp-sp-2);
	margin-top: var(--yp-sp-7);
	list-style: none;
	padding: 0;
}
.yp-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px;
	padding: 0 12px;
	border: 1.5px solid var(--yp-black);
	border-radius: var(--yp-radius-pill);
	font-family: var(--yp-font-head);
	font-weight: 900;
	font-size: var(--yp-fs-xs);
	color: var(--yp-black);
}
.yp-pagination .page-numbers.current,
.yp-pagination .page-numbers:hover { background: var(--yp-black); color: var(--yp-white); }


/* ==========================================================================
   商品页：阶梯价 + 加购
   ========================================================================== */
.yp-buybox { margin-top: var(--yp-sp-5); }

.yp-tiers { display: grid; gap: 10px; margin-bottom: var(--yp-sp-5); }

.yp-tier {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "qty rate total" "unit unit unit";
	align-items: center;
	gap: 4px var(--yp-sp-4);
	padding: 14px 20px;
	border: 2px solid var(--yp-grey-300);
	border-radius: var(--yp-radius-md);
	background: var(--yp-white);
	cursor: pointer;
	transition: border-color .15s ease;
}
.yp-tier:hover { border-color: var(--yp-grey-700); }
.yp-tier.is-active { border-color: var(--yp-black); }
.yp-tier input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.yp-tier__qty { grid-area: qty; font-weight: 700; font-size: var(--yp-fs-sm); }
.yp-tier__rate {
	grid-area: rate;
	justify-self: end;
	font-family: var(--yp-font-head);
	font-weight: 900;
	font-size: var(--yp-fs-xs);
	text-transform: uppercase;
}
.yp-tier__total { grid-area: total; font-weight: 700; font-size: var(--yp-fs-base); }
.yp-tier__unit { grid-area: unit; font-size: var(--yp-fs-xs); color: var(--yp-grey-700); }

.yp-buybox__row { display: flex; gap: var(--yp-sp-3); align-items: stretch; }
.yp-buybox__row .yp-btn { flex: 1 1 auto; }
.yp-buybox__note { margin-top: var(--yp-sp-3); font-size: var(--yp-fs-xs); color: var(--yp-grey-700); }

/* ==========================================================================
   购物车侧边栏（自己实现）
   ========================================================================== */
.yp-drawer { position: fixed; inset: 0; z-index: 100000; pointer-events: none; }
.yp-drawer.is-open { pointer-events: auto; }

.yp-drawer__overlay {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, .45);
	opacity: 0; transition: opacity .2s ease;
}
.yp-drawer.is-open .yp-drawer__overlay { opacity: 1; }

.yp-drawer__panel {
	position: absolute; top: 0; right: 0;
	width: min(460px, 92vw);
	height: 100%;
	display: flex; flex-direction: column;
	background: var(--yp-white);
	transform: translateX(100%);
	transition: transform .25s ease;
	overflow-y: auto;
}
.yp-drawer.is-open .yp-drawer__panel { transform: translateX(0); }

.yp-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 24px var(--yp-sp-5) 14px;
}
.yp-drawer__title {
	font-family: var(--yp-font-head); font-weight: 900;
	font-size: var(--yp-fs-xl); line-height: 1;
	text-transform: uppercase; margin: 0;
}
.yp-drawer__ship {
	margin: 0 var(--yp-sp-5);
	padding-bottom: var(--yp-sp-4);
	border-bottom: 2px solid var(--yp-black);
	text-align: center;
	font-size: var(--yp-fs-sm);
}
.yp-drawer__body { padding: var(--yp-sp-5); }

.yp-drawer__items { list-style: none; margin: 0; padding: 0; }
.yp-drawer__item {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: var(--yp-sp-4);
	padding: var(--yp-sp-5) 0;
	border-bottom: 1px solid var(--yp-grey-200);
}
.yp-drawer__thumb img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--yp-radius-sm); }
.yp-drawer__name { display: block; font-weight: 600; font-size: var(--yp-fs-sm); line-height: 1.35; margin-bottom: 6px; }
.yp-drawer__price { display: block; font-size: var(--yp-fs-sm); color: var(--yp-grey-700); margin-bottom: 12px; }
.yp-drawer__remove { display: inline-block; margin-top: 10px; font-size: var(--yp-fs-xs); color: var(--yp-grey-700); text-decoration: underline; }
.yp-drawer__remove:hover { color: var(--yp-black); }

.yp-drawer__note { margin: var(--yp-sp-6) 0; }
.yp-drawer__note label { display: block; font-size: var(--yp-fs-sm); margin-bottom: var(--yp-sp-2); }
.yp-drawer__note textarea {
	width: 100%; min-height: 84px; padding: 13px 18px;
	border: 1.5px solid var(--yp-grey-300); border-radius: var(--yp-radius-md);
	font-family: var(--yp-font-body); font-size: var(--yp-fs-sm);
	resize: vertical;
}

.yp-drawer__total {
	display: flex; justify-content: space-between; align-items: baseline;
	padding-bottom: var(--yp-sp-5); margin-bottom: var(--yp-sp-5);
	border-bottom: 1px solid var(--yp-grey-200);
	font-family: var(--yp-font-head); font-weight: 900;
	font-size: var(--yp-fs-sm); text-transform: uppercase;
}
.yp-drawer__total strong { font-size: var(--yp-fs-lg); }
.yp-drawer__empty { text-align: center; color: var(--yp-grey-700); padding: var(--yp-sp-8) 0; }

/* ==========================================================================
   结账页提示 + 感谢页付款引导
   ========================================================================== */
.yp-notice {
	border: 2px solid var(--yp-black);
	border-radius: var(--yp-radius-lg);
	padding: var(--yp-sp-5) var(--yp-sp-5);
	margin-bottom: var(--yp-sp-6);
}
.yp-notice strong {
	display: block;
	font-family: var(--yp-font-head); font-weight: 900;
	font-size: var(--yp-fs-sm); text-transform: uppercase;
	margin-bottom: 10px;
}
.yp-notice p { font-size: var(--yp-fs-sm); line-height: 1.6; margin-bottom: 8px; }

.yp-pay {
	max-width: 860px;
	margin: var(--yp-sp-7) auto 0;
	border: 2px solid var(--yp-black);
	border-radius: var(--yp-radius-lg);
	padding: var(--yp-sp-6);
	text-align: center;
}
.yp-pay__title {
	font-family: var(--yp-font-head); font-weight: 900;
	font-size: var(--yp-fs-2xl); line-height: 1;
	text-transform: uppercase; margin: 0 0 var(--yp-sp-4);
}
.yp-pay__lead { font-size: var(--yp-fs-sm); margin-bottom: var(--yp-sp-5); }
.yp-pay__amount {
	display: inline-flex; align-items: baseline; gap: 12px;
	padding: 14px 34px; margin-bottom: var(--yp-sp-5);
	border-radius: var(--yp-radius-pill);
	background: var(--yp-black); color: var(--yp-white);
}
.yp-pay__label { font-size: var(--yp-fs-xs); text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.yp-pay__num { font-family: var(--yp-font-head); font-weight: 900; font-size: var(--yp-fs-4xl); line-height: 1; }
.yp-pay__note {
	text-align: left; margin-top: var(--yp-sp-6);
	padding: var(--yp-sp-5);
	border-radius: var(--yp-radius-md);
	background: var(--yp-grey-100);
	font-size: var(--yp-fs-sm); line-height: 1.65;
}
.yp-pay__note ul { margin: 0; padding-left: 20px; }
.yp-pay__note li { margin-bottom: 8px; }
.yp-pay__note a { text-decoration: underline; }

/* 结账页：极简页头 + 单栏 */
.yp-header--minimal .yp-header__inner { border-bottom: 0; }
body.woocommerce-checkout form.checkout {
	display: flex; flex-direction: column;
	max-width: 860px; margin-inline: auto;
}
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout #order_review {
	float: none; width: 100%;
}
body.woocommerce-checkout #customer_details { order: 1; }
body.woocommerce-checkout #order_review_heading { order: 2; margin-top: var(--yp-sp-6); }
body.woocommerce-checkout #order_review { order: 3; }
body.woocommerce-checkout #order_review .shop_table {
	width: 100%; border-collapse: collapse;
}
body.woocommerce-checkout #order_review .shop_table th,
body.woocommerce-checkout #order_review .shop_table td {
	padding: 14px 0; border-bottom: 1px solid var(--yp-grey-200); text-align: left;
}
body.woocommerce-checkout #order_review .shop_table td.product-total,
body.woocommerce-checkout #order_review .shop_table th.product-total { text-align: right; }
body.woocommerce-checkout #place_order { margin-top: var(--yp-sp-5); width: 100%; }

/* ==========================================================================
   ★ 结账页的提交按钮：WooCommerce 默认是紫色（#a46497），换成 logo 绿
   ── 白字压在这个绿上对比度只有 2.5:1，所以字用黑色（6.8:1，看得清）
   ========================================================================== */
body.woocommerce-checkout #place_order,
body.woocommerce-checkout #place_order.button.alt {
	background: #4eb960 !important;
	border: 2px solid #4eb960 !important;
	color: var(--yp-black) !important;
	font-weight: 900 !important;
}
body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout #place_order:focus {
	background: #3fa653 !important;
	border-color: #3fa653 !important;
	color: var(--yp-black) !important;
}
body.woocommerce-checkout .woocommerce-billing-fields > h3 { display: none; }
body.woocommerce-checkout .woocommerce-additional-fields { display: none; }
body.woocommerce-checkout .woocommerce-account-fields { display: none; }
body.woocommerce-checkout [class*="mailpoet"] { display: none; }
body.woocommerce-checkout ul.wc_payment_methods { display: none; }


/* ==========================================================================
   Contact 表单
   ========================================================================== */
.yp-contact { max-width: 640px; margin-inline: auto; }

.yp-contact__notice {
	padding: var(--yp-sp-4) var(--yp-sp-5);
	margin-bottom: var(--yp-sp-5);
	border-radius: var(--yp-radius-md);
	font-size: var(--yp-fs-sm);
	line-height: 1.6;
}
.yp-contact__notice--ok { background: var(--yp-black); color: var(--yp-white); }
.yp-contact__notice--err { background: var(--yp-grey-100); border: 2px solid var(--yp-black); }
.yp-contact__notice a { color: inherit; text-decoration: underline; }

.yp-contact__form .yp-btn { width: 100%; margin-top: var(--yp-sp-4); }

/* ==========================================================================
   404
   ========================================================================== */
.yp-404__code {
	font-family: var(--yp-font-head);
	font-weight: 900;
	font-size: clamp(80px, 18vw, 200px);
	line-height: .9;
	margin: 0 0 var(--yp-sp-4);
}
.yp-404__lead { font-size: var(--yp-fs-lg); margin-bottom: var(--yp-sp-6); }

/* ==========================================================================
   普通页面 / 文章内容
   ========================================================================== */
.yp-page__title { margin-bottom: var(--yp-sp-7); }
.yp-page__content { font-size: var(--yp-fs-base); line-height: 1.7; }
.yp-page__content h2 { margin-top: var(--yp-sp-7); }
.yp-page__content h3 { margin-top: var(--yp-sp-6); text-transform: none; font-size: var(--yp-fs-lg); }
.yp-page__content a { text-decoration: underline; }
.yp-page__content img { border-radius: var(--yp-radius-md); }
.yp-page__content ul, .yp-page__content ol { padding-left: 22px; }
.yp-page__content li { margin-bottom: 8px; }


/* ==========================================================================
   手机端导航（汉堡 + 抽屉）
   ========================================================================== */
.yp-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.yp-burger span {
	display: block;
	width: 22px;
	height: 2px;
	margin-inline: auto;
	background: var(--yp-black);
	transition: transform .2s ease, opacity .2s ease;
}
.yp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.yp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.yp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.yp-mobnav { position: fixed; inset: 0; z-index: 100001; pointer-events: none; }
.yp-mobnav.is-open { pointer-events: auto; }
.yp-mobnav__overlay {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, .45);
	opacity: 0; transition: opacity .2s ease;
}
.yp-mobnav.is-open .yp-mobnav__overlay { opacity: 1; }
.yp-mobnav__panel {
	position: absolute; top: 0; left: 0;
	width: min(360px, 88vw);
	height: 100%;
	display: flex; flex-direction: column;
	background: var(--yp-white);
	transform: translateX(-100%);
	transition: transform .25s ease;
	overflow-y: auto;
}
.yp-mobnav.is-open .yp-mobnav__panel { transform: translateX(0); }

.yp-mobnav__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 22px var(--yp-sp-5) 16px;
	border-bottom: 2px solid var(--yp-black);
}
.yp-mobnav__title {
	font-family: var(--yp-font-head); font-weight: 900;
	font-size: var(--yp-fs-lg); line-height: 1; text-transform: uppercase;
}
.yp-mobnav__panel ul { list-style: none; margin: 0; padding: 0; }
.yp-mobnav__panel ul li { border-bottom: 1px solid var(--yp-grey-200); }
.yp-mobnav__panel ul li a {
	display: block;
	padding: 16px var(--yp-sp-5);
	font-family: var(--yp-font-head);
	font-weight: 900;
	font-size: var(--yp-fs-base);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--yp-black);
}
.yp-mobnav__panel ul.sub-menu li a {
	padding-left: calc(var(--yp-sp-5) + 16px);
	font-family: var(--yp-font-body);
	font-weight: 500;
	font-size: var(--yp-fs-sm);
	text-transform: none;
	color: var(--yp-grey-700);
}
.yp-mobnav__foot { margin-top: auto; padding: var(--yp-sp-5); }
.yp-mobnav__contact {
	margin: var(--yp-sp-4) 0 0;
	text-align: center;
	font-size: var(--yp-fs-xs);
	color: var(--yp-grey-700);
}
.yp-mobnav__contact a { text-decoration: underline; }

@media (max-width: 921px) { .yp-burger { display: flex; } }
@media (min-width: 922px) { .yp-mobnav { display: none; } }


/* ==========================================================================
   首页横向轮播（NEW PRODUCT / NEWEST ADDITIONS）
   参考站的样子：大标题居中 + 一排商品横向滚动 + 左下 VIEW ALL + 右下左右箭头
   纯 CSS + 原生 JS，不用任何轮播插件
   ========================================================================== */
.yp-showcase { overflow: hidden; }

.yp-showcase__title {
	text-align: center !important;
	margin: 0 0 var(--yp-sp-7) !important;
}

/* 可横向滚动的视口 */
.yp-showcase__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.yp-showcase__viewport::-webkit-scrollbar { display: none; }

.yp-showcase__track {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	gap: var(--yp-sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.yp-showcase__item {
	flex: 0 0 auto;
	width: calc((100% - var(--yp-sp-5) * 3) / 4);   /* ★ 一行正好 4 个 */
	scroll-snap-align: start;
}

/* 控制条：左 VIEW ALL，右箭头 */
.yp-showcase__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--yp-sp-4);
	margin-top: var(--yp-sp-6);
}

.yp-showcase__arrows { display: flex; gap: 10px; }

.yp-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 2px solid var(--yp-black);
	border-radius: 50%;
	background: var(--yp-white);
	color: var(--yp-black);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
.yp-arrow:hover { background: var(--yp-black); color: var(--yp-white); }
.yp-arrow[disabled] { opacity: .3; cursor: default; }
.yp-arrow[disabled]:hover { background: var(--yp-white); color: var(--yp-black); }

@media (max-width: 1024px) {
	.yp-showcase__item { width: calc((100% - var(--yp-sp-5) * 2) / 3); }
}
@media (max-width: 767px) {
	.yp-showcase__item { width: calc((100% - var(--yp-sp-5)) / 2); }
	.yp-showcase__controls { flex-direction: column-reverse; align-items: stretch; gap: var(--yp-sp-4); }
	.yp-showcase__controls .yp-btn { width: 100%; }
	.yp-showcase__arrows { justify-content: center; }
}


/* 轮播卡片图片锁定（防止大图撑破布局） */
.yp-showcase__item .yp-card__media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.yp-showcase__item .yp-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yp-cats__title {
	text-align: center !important;
	margin: 0 0 var(--yp-sp-7) !important;
}


/* ==========================================================================
   ★ 关键修复：去掉 WooCommerce 的清除浮动伪元素
   ul.products::before / ::after 在 CSS Grid 里会被当成两个「格子」，
   导致第一个商品被挤到第 2 格、第一格永远空着。
   ========================================================================== */
ul.yp-grid::before,
ul.yp-grid::after,
ul.yp-grid.products::before,
ul.yp-grid.products::after,
.yp-grid::before,
.yp-grid::after {
	content: none !important;
	display: none !important;
}

/* 同理，分类网格也处理一下 */
ul.yp-cats::before,
ul.yp-cats::after { content: none !important; display: none !important; }


/* ==========================================================================
   商品网格：flex 版
   ── CSS Grid 会被某些插件的伪元素/隐藏节点抢格子，flex + 明确宽度没有这个问题
   ========================================================================== */
.yp-grid {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 56px 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.yp-grid > li {
	flex: 0 0 auto !important;
	width: calc((100% - 28px * 3) / 4) !important;
	min-width: 0 !important;
	float: none !important;
}
.yp-grid > li:nth-child(4n + 1) { clear: left; }

@media (max-width: 1024px) {
	.yp-grid { gap: 44px 22px !important; }
	.yp-grid > li { width: calc((100% - 22px * 2) / 3) !important; }
	.yp-grid > li:nth-child(4n + 1) { clear: none; }
	.yp-grid > li:nth-child(3n + 1) { clear: left; }
}
@media (max-width: 767px) {
	.yp-grid { gap: 36px 16px !important; }
	.yp-grid > li { width: calc((100% - 16px) / 2) !important; }
	.yp-grid > li:nth-child(3n + 1) { clear: none; }
	.yp-grid > li:nth-child(2n + 1) { clear: left; }
}

/* 过滤器面板（插件的过滤器挂在这里，默认收起） */
.yp-filterpanel {
	position: fixed;
	top: 0; left: 0;
	width: min(420px, 92vw);
	height: 100%;
	background: var(--yp-white);
	z-index: 100002;
	overflow-y: auto;
	box-shadow: 6px 0 30px rgba(0, 0, 0, .18);
	transform: translateX(-102%);
	transition: transform .25s ease;
	padding: var(--yp-sp-5);
}
.yp-filterpanel.is-open { transform: translateX(0); }

.yp-filterpanel__head {
	display: flex; align-items: center; justify-content: space-between;
	padding-bottom: var(--yp-sp-4);
	margin-bottom: var(--yp-sp-5);
	border-bottom: 2px solid var(--yp-black);
}
.yp-filterpanel__title {
	font-family: var(--yp-font-head); font-weight: 900;
	font-size: var(--yp-fs-3xl); line-height: 1;
	text-transform: uppercase; margin: 0;
}
.yp-filterpanel__body { font-size: var(--yp-fs-sm); }

/* 插件过滤器控件的黑白化 */
.yp-filterpanel__body h3,
.yp-filterpanel__body h4,
.yp-filterpanel__body .widget-title {
	font-family: var(--yp-font-body) !important;
	font-weight: 500 !important;
	font-size: var(--yp-fs-sm) !important;
	text-transform: none !important;
	margin: var(--yp-sp-5) 0 var(--yp-sp-3) !important;
}
.yp-filterpanel__body button,
.yp-filterpanel__body input[type="submit"],
.yp-filterpanel__body .button {
	display: block;
	width: 100%;
	padding: 16px 20px;
	border: 2px solid var(--yp-black) !important;
	border-radius: var(--yp-radius-pill) !important;
	background: var(--yp-black) !important;
	color: var(--yp-white) !important;
	font-family: var(--yp-font-head) !important;
	font-weight: 900 !important;
	font-size: var(--yp-fs-sm) !important;
	text-transform: uppercase;
	cursor: pointer;
}
.yp-filterpanel__body input[type="text"],
.yp-filterpanel__body input[type="number"],
.yp-filterpanel__body select {
	width: 100%;
	padding: 12px 18px;
	border: 2px solid var(--yp-black) !important;
	border-radius: var(--yp-radius-pill) !important;
	background: var(--yp-white) !important;
	color: var(--yp-black) !important;
	font-size: var(--yp-fs-sm);
}


/* ==========================================================================
   黑色主张横幅（全宽 · 上下波浪 · 大字居中）
   ========================================================================== */
.yp-banner {
	position: relative;
	background-color: var(--yp-ink);
	background-image: radial-gradient(ellipse at 50% 40%, #2a2a2a 0%, #000000 70%);
	color: var(--yp-white);
	text-align: center;
	padding-block: var(--yp-sp-9);
	margin-block: var(--yp-sp-8);
	overflow: visible;
}
.yp-banner__inner {
	max-width: 900px;
	margin-inline: auto;
	padding-inline: var(--yp-gutter);
}
.yp-banner__title {
	font-family: var(--yp-font-head);
	font-weight: 900;
	font-size: clamp(var(--yp-fs-2xl), 4.2vw, var(--yp-fs-4xl));
	line-height: 1.02;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--yp-white);
	margin: 0 0 var(--yp-sp-4);
}
.yp-banner__lead {
	max-width: 560px;
	margin: 0 auto;
	font-size: var(--yp-fs-sm);
	line-height: 1.6;
	color: var(--yp-white);
	opacity: .9;
}
.yp-banner__lead + .yp-banner__lead { margin-top: var(--yp-sp-3); }
.yp-banner .yp-btn { margin-top: var(--yp-sp-5); }

@media (max-width: 767px) {
	.yp-banner { padding-block: var(--yp-sp-8); margin-block: var(--yp-sp-7); }
}

.yp-newsletter__quote {
	max-width: 560px;
	margin: 0 auto var(--yp-sp-3);
	font-size: var(--yp-fs-sm);
	font-style: italic;
	line-height: 1.6;
	color: var(--yp-black);
}


/* ---------- 邮件订阅（参考站样式：灰底 + 上下波浪 + 斜体引言 + 黑胶囊按钮）---------- */
.yp-newsletter {
	position: relative;
	background: var(--yp-grey-100) !important;
	padding-block: var(--yp-sp-9) !important;
	text-align: center;
	overflow: visible;
}
.yp-newsletter__inner { position: relative; z-index: 2; }
.yp-newsletter__title {
	font-family: var(--yp-font-head); font-weight: 900;
	font-size: clamp(var(--yp-fs-3xl), 5vw, var(--yp-fs-5xl));
	line-height: 1; text-transform: uppercase;
	margin: 0 0 var(--yp-sp-4) !important;
}
.yp-newsletter__quote {
	max-width: 620px;
	margin: 0 auto var(--yp-sp-3) !important;
	font-size: var(--yp-fs-sm);
	font-style: italic;
	line-height: 1.6;
	color: var(--yp-black);
}
.yp-newsletter__lead {
	font-size: var(--yp-fs-sm);
	color: var(--yp-grey-700);
	margin: 0 0 var(--yp-sp-5) !important;
}
.yp-newsletter__form {
	display: flex; gap: 10px;
	max-width: 520px; margin-inline: auto;
}
.yp-newsletter__form input[type="email"] {
	flex: 1 1 auto; min-width: 0;
	padding: 16px 24px;
	border: 2px solid var(--yp-black) !important;
	border-radius: var(--yp-radius-pill) !important;
	background: var(--yp-white) !important;
	color: var(--yp-black) !important;
	font-family: var(--yp-font-body);
	font-size: var(--yp-fs-sm);
	outline: none;
}
.yp-newsletter__form .yp-btn {
	flex: 0 0 auto;
	background: var(--yp-black) !important;
	border-color: var(--yp-black) !important;
	color: var(--yp-white) !important;
}
.yp-newsletter__form .yp-btn:hover { background: var(--yp-white) !important; color: var(--yp-black) !important; }
.yp-newsletter__done {
	font-family: var(--yp-font-body) !important;
	font-weight: 500 !important;
	font-size: var(--yp-fs-base) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: var(--yp-black) !important;
	margin: 0 !important;
}

@media (max-width: 767px) {
	.yp-newsletter { padding-block: var(--yp-sp-8) !important; }
	.yp-newsletter__form { flex-direction: column; }
	.yp-newsletter__form .yp-btn { width: 100%; }
}

/* ---------- 免责声明（黑底白字通栏）---------- */
.yp-disclaimer {
	background: var(--yp-black) !important;
	color: var(--yp-white) !important;
	padding-block: var(--yp-sp-5) !important;
	text-align: center;
}
.yp-disclaimer p { font-size: var(--yp-fs-sm); margin: 0; }
.yp-disclaimer strong {
	text-transform: uppercase;
	font-family: var(--yp-font-head); font-weight: 900;
}

/* ---------- FAQ 折叠 ---------- */
.yp-faq { border-top: 2px solid var(--yp-black); }
.yp-faq__item { border-bottom: 1px solid var(--yp-grey-200); }
.yp-faq__q {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 20px 0;
	font-family: var(--yp-font-head); font-weight: 900;
	font-size: var(--yp-fs-base);
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}
.yp-faq__q::-webkit-details-marker { display: none; }
.yp-faq__q::marker { content: ""; }
.yp-faq__q::after { content: "+"; font-size: 22px; line-height: 1; flex: 0 0 auto; }
.yp-faq__item[open] .yp-faq__q::after { content: "\2212"; }
.yp-faq__a { padding: 0 0 20px; font-size: var(--yp-fs-sm); line-height: 1.7; color: var(--yp-grey-700); }
.yp-faq__a p { margin: 0; }

/* ==========================================================================
   轮播的「留白框」
   ── 内边距放在这一层（在滚动容器外面），这样第 5 个商品会被裁掉，
      不会露在两侧的留白里
   ========================================================================== */
.yp-showcase__frame {
	max-width: var(--yp-max-width);
	margin-inline: auto;
	padding-inline: var(--yp-gutter);
	overflow: hidden;
}


/* logo 尺寸 */
.yp-logo img { max-height: 86px !important; width: auto !important; }
.yp-header--minimal .yp-logo img { max-height: 68px !important; }
@media (max-width: 921px) { .yp-logo img { max-height: 54px !important; } }
.yp-footer__logo img { max-height: 76px !important; width: auto !important; }

/* 页头高度跟着放开，别把 logo 挤掉 */
.yp-header__inner { min-height: 108px; }
@media (max-width: 921px) { .yp-header__inner { min-height: 68px; } }

/* ==========================================================================
   页脚（黑底 · 对齐参考站）
   ========================================================================== */
.yp-footer {
	background: var(--yp-ink) !important;
	color: var(--yp-white) !important;
	border: 0 !important;
}

.yp-footer__main {
	display: grid;
	grid-template-columns: 1.15fr 1fr 1fr 0.9fr;
	gap: var(--yp-sp-7) var(--yp-sp-6);
	align-items: start;
	padding-block: var(--yp-sp-8) !important;
}

/* 左：免责声明 */
.yp-footer__claim {
	font-family: var(--yp-font-head);
	font-weight: 900;
	font-size: var(--yp-fs-lg);
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--yp-white);
	margin: 0 0 var(--yp-sp-5);
}
.yp-footer__claim em {
	font-style: normal;
	color: #ff1a1a;                    /* ★ 参考站的红色强调 */
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}

.yp-footer__copy {
	font-size: var(--yp-fs-xs);
	line-height: 1.65;
	color: rgba(255, 255, 255, .72);
	margin: 0 0 var(--yp-sp-5);
	max-width: 44em;
}

.yp-footer__social {
	display: flex;
	gap: 14px;
	list-style: none;
	margin: 0 0 var(--yp-sp-5);
	padding: 0;
}
.yp-footer__social a {
	display: inline-flex;
	color: var(--yp-white);
	opacity: .85;
	transition: opacity .15s;
}
.yp-footer__social a:hover { opacity: 1; }

.yp-footer__c { font-size: var(--yp-fs-xs); color: rgba(255, 255, 255, .72); margin: 0; }

/* 中：链接列 */
.yp-footer__cols { display: contents; }
.yp-footer__title {
	font-family: var(--yp-font-body);
	font-weight: 500;
	font-size: var(--yp-fs-base);
	text-transform: none;
	color: var(--yp-white);
	margin: 0 0 var(--yp-sp-4);
}
.yp-footer__list { list-style: none; margin: 0; padding: 0; }
.yp-footer__list li { margin-bottom: 12px; }
.yp-footer__list a {
	font-size: var(--yp-fs-sm);
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
}
.yp-footer__list a:hover { color: var(--yp-white); text-decoration: underline; }

.yp-footer__wholesale {
	display: inline-block;
	margin-top: var(--yp-sp-4);
	font-family: var(--yp-font-head);
	font-weight: 900;
	font-size: var(--yp-fs-sm);
	text-transform: uppercase;
	color: var(--yp-white) !important;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* 右：大 logo */
.yp-footer__brandmark { justify-self: end; }
.yp-footer__brandmark img { max-height: 150px !important; width: auto; }
.yp-footer__name {
	font-family: var(--yp-font-head); font-weight: 900;
	font-size: var(--yp-fs-3xl); text-transform: uppercase;
}

@media (max-width: 1024px) {
	.yp-footer__main { grid-template-columns: 1fr 1fr; }
	.yp-footer__brandmark { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 767px) {
	.yp-footer__main { grid-template-columns: 1fr; gap: var(--yp-sp-6); }
	.yp-footer__brandmark img { max-height: 100px !important; }
	.yp-footer__claim { font-size: var(--yp-fs-base); }
}


/* hero 标题字号 */
.yp-hero h1 {
	font-size: clamp(2.4rem, 6.6vw, 5.4rem) !important;
	line-height: 1.02 !important;
	letter-spacing: 0 !important;
}
@media (max-width: 767px) {
	.yp-hero h1 { font-size: clamp(1.9rem, 9vw, 2.8rem) !important; }
}


/* logo 再放大 */
.yp-logo img { max-height: 124px !important; width: auto !important; }
.yp-header__inner { min-height: 152px; }
.yp-header--minimal .yp-logo img { max-height: 84px !important; }
@media (max-width: 1024px) {
	.yp-logo img { max-height: 92px !important; }
	.yp-header__inner { min-height: 116px; }
}
@media (max-width: 921px) {
	.yp-logo img { max-height: 64px !important; }
	.yp-header__inner { min-height: 82px; }
}


/* 分类名不要下划线（page.php 里的正文链接样式会漏进来） */
.yp-cats__link,
.yp-cats__link:hover,
.yp-cats__link:focus,
.yp-cats__name,
.yp-page__content .yp-cats__link,
.yp-page__content .yp-cats__name {
	text-decoration: none !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}
.yp-cats__name { text-decoration: none !important; }


/* ==========================================================================
   分类网格：一行 6 个 + 统一图片框（保证对齐）
   ========================================================================== */
.yp-cats {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	gap: 52px 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	align-items: start !important;
}

.yp-cats__item { text-align: center; }

/* 图片放进统一的正方形框，用 contain 完整显示，不再撑破对齐 */
.yp-cats__media {
	display: block !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
	margin: 0 auto var(--yp-sp-4) !important;
	overflow: hidden !important;
	background: transparent !important;
}
.yp-cats__media img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: center !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* 名字固定两行高度，长名字也不会把下面顶开 */
.yp-cats__name {
	display: block !important;
	min-height: 2.3em !important;
	font-family: var(--yp-font-head) !important;
	font-weight: 900 !important;
	font-size: var(--yp-fs-sm) !important;
	line-height: 1.15 !important;
	text-transform: uppercase !important;
	color: var(--yp-black) !important;
	text-decoration: none !important;
}

@media (max-width: 1200px) {
	.yp-cats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 44px 22px !important; }
}
@media (max-width: 900px) {
	.yp-cats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px) {
	.yp-cats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 34px 16px !important; }
	.yp-cats__name { font-size: var(--yp-fs-xs) !important; }
}


/* 导航不要下划线（当前项、悬停、下拉项都不加） */
.yp-nav__list > li > a,
.yp-nav__list > li > a:hover,
.yp-nav__list > li > a:focus,
.yp-nav__list > .current-menu-item > a,
.yp-nav .sub-menu li a,
.yp-nav .sub-menu li a:hover,
.yp-mobnav__panel ul li a,
.yp-mobnav__list li a {
	text-decoration: none !important;
	border-bottom: 0 !important;
}
.yp-nav__list > .current-menu-item > a { font-weight: 700 !important; }


/* ==========================================================================
   分类：图片填满方框（原来 contain 缩得太小，显得空）+ 更宽的间距
   ========================================================================== */
.yp-cats {
	gap: 64px 32px !important;
}

/* 图框改成竖一点的比例，配合 cover 让图片更有存在感 */
.yp-cats__media {
	aspect-ratio: 5 / 4 !important;
	margin-bottom: var(--yp-sp-5) !important;
}

.yp-cats__media img {
	object-fit: cover !important;
	object-position: center !important;
}

.yp-cats__name {
	font-size: var(--yp-fs-base) !important;
	line-height: 1.2 !important;
	min-height: 2.4em !important;
	letter-spacing: 0 !important;
}

/* 含分类网格的页面用全宽，不要被 1200px 的正文栏限制住 */
.yp-page__content:has(.yp-cats) {
	max-width: var(--yp-max-width) !important;
}

@media (max-width: 1200px) {
	.yp-cats { gap: 52px 26px !important; }
}
@media (max-width: 767px) {
	.yp-cats { gap: 40px 18px !important; }
	.yp-cats__media { margin-bottom: var(--yp-sp-4) !important; }
	.yp-cats__name { font-size: var(--yp-fs-sm) !important; }
}


/* ==========================================================================
   分类页全宽 —— 限制在父级 .yp-container--narrow，之前只改了子元素没用
   ========================================================================== */
.yp-container:has(.yp-cats),
.yp-page__content:has(.yp-cats),
.yp-page:has(.yp-cats) {
	max-width: var(--yp-max-width) !important;
	width: 100% !important;
}

/* 图框再放大一点：正方形 + cover，尽量撑满列宽 */
.yp-cats__media {
	aspect-ratio: 1 / 1 !important;
}

/* 列宽拉满 */
.yp-cats {
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	gap: 56px 28px !important;
}


/* ==========================================================================
   分类网格：flex 版 —— 最后一行不满时自动居中（grid 做不到）
   ========================================================================== */
.yp-cats {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	gap: 56px 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.yp-cats__item {
	flex: 0 0 auto !important;
	width: calc((100% - 28px * 5) / 6) !important;   /* 一行 6 个 */
	min-width: 0 !important;
	float: none !important;
}

@media (max-width: 1200px) {
	.yp-cats { gap: 48px 24px !important; }
	.yp-cats__item { width: calc((100% - 24px * 3) / 4) !important; }
}
@media (max-width: 900px) {
	.yp-cats__item { width: calc((100% - 24px * 2) / 3) !important; }
}
@media (max-width: 767px) {
	.yp-cats { gap: 40px 16px !important; }
	.yp-cats__item { width: calc((100% - 16px) / 2) !important; }
}


/* ==========================================================================
   分类页：左右留白对称，且和页头对齐
   ── 之前父级是全宽 + 子级也是全宽 → 双层内边距，左右看起来不对称
   ========================================================================== */
.yp-page:has(.yp-cats) .yp-container,
.yp-container:has(.yp-cats),
.yp-page__content:has(.yp-cats) {
	max-width: var(--yp-max-width) !important;
	padding-inline: 0 !important;          /* 先全部清零 */
}

/* 只保留最外层一层内边距，数值和页头一致 → 左右完全对称 */
.yp-page:has(.yp-cats) > .yp-container,
.yp-page:has(.yp-cats) > .yp-container.yp-container--narrow {
	padding-inline: var(--yp-gutter) !important;
}

/* 网格自己不再加内边距 */
.yp-cats {
	max-width: 100% !important;
	margin-inline: auto !important;
	padding-inline: 0 !important;
}


/* ==========================================================================
   分类页：外圈留白 = 格子间距（28px），视觉上才均匀
   ── 之前外圈 40px、内圈 28px，外圈偏大显得两边空
   ========================================================================== */
.yp-page:has(.yp-cats) > .yp-container,
.yp-page:has(.yp-cats) > .yp-container.yp-container--narrow,
.yp-page:has(.yp-cats) .yp-container {
	padding-inline: 28px !important;
	max-width: 1920px !important;
}

.yp-cats {
	gap: 56px 28px !important;
	padding-inline: 0 !important;
	margin-inline: auto !important;
	max-width: 100% !important;
}

/* 图片框加大：正方形 + cover，产品图尽量撑满 */
.yp-cats__media {
	aspect-ratio: 1 / 1 !important;
	margin-bottom: var(--yp-sp-4) !important;
}
.yp-cats__item {
	width: calc((100% - 28px * 5) / 6) !important;
}

@media (max-width: 1200px) {
	.yp-page:has(.yp-cats) > .yp-container,
	.yp-page:has(.yp-cats) .yp-container { padding-inline: 24px !important; }
	.yp-cats { gap: 48px 24px !important; }
	.yp-cats__item { width: calc((100% - 24px * 3) / 4) !important; }
}
@media (max-width: 767px) {
	.yp-page:has(.yp-cats) > .yp-container,
	.yp-page:has(.yp-cats) .yp-container { padding-inline: 16px !important; }
	.yp-cats { gap: 40px 16px !important; }
	.yp-cats__item { width: calc((100% - 16px) / 2) !important; }
}


/* 最后一行左对齐（不要自动居中） */
.yp-cats { justify-content: flex-start !important; }


/* ==========================================================================
   ★ SHOP STYLES 页面：最终居中修正（放在文件最后，覆盖前面所有尝试）
   ── 之前为了让网格变宽改了好几次 max-width，层叠出多层内边距，导致偏左。
      这里统一收敛：容器 max-width + margin auto 居中，只保留一层内边距。
   ========================================================================== */
.yp-page:has(.yp-cats) > .yp-container,
.yp-page:has(.yp-cats) .yp-container,
.yp-page:has(.yp-cats) .yp-container--narrow,
.yp-container:has(.yp-cats) {
	max-width: 1440px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 28px !important;
	padding-right: 28px !important;
	width: 100% !important;
	float: none !important;
	left: auto !important;
	right: auto !important;
}

/* 内容层不再加任何宽度/内边距，交给上面那层 */
.yp-page:has(.yp-cats) .yp-page__content,
.yp-page__content:has(.yp-cats) {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* 网格自身居中，左右留白由容器决定 */
.yp-cats {
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 !important;
	justify-content: flex-start !important;
}

/* 标题也跟着容器居中 */
.yp-page:has(.yp-cats) .yp-page__title,
.yp-page:has(.yp-cats) h1 {
	text-align: center !important;
}

@media (max-width: 767px) {
	.yp-page:has(.yp-cats) > .yp-container,
	.yp-page:has(.yp-cats) .yp-container,
	.yp-page:has(.yp-cats) .yp-container--narrow,
	.yp-container:has(.yp-cats) {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}


/* ==========================================================================
   ★★ SHOP STYLES 页面（page-id-613）：用页面 ID 精确定位，不依赖 :has()
   ── 之前全用 :has() 选择器，层叠混乱。这里直接锁死这一页。
   ========================================================================== */
body.page-id-613 .yp-main { width: 100%; }

body.page-id-613 .yp-page,
body.page-id-613 .yp-section {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* 唯一一层容器：居中 + 左右等宽留白 */
body.page-id-613 .yp-container,
body.page-id-613 .yp-container--narrow,
body.page-id-613 .yp-container.yp-container--narrow {
	width: 100% !important;
	max-width: 1400px !important;
	margin-left: auto !important;      /* ★ 居中 */
	margin-right: auto !important;     /* ★ 居中 */
	padding-left: 30px !important;     /* ★ 左右必须一样 */
	padding-right: 30px !important;
	float: none !important;
	position: static !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
}

/* 内容层清零，避免叠加出第二层内边距 */
body.page-id-613 .yp-page__content,
body.page-id-613 .entry-content {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
}

body.page-id-613 .yp-page__title {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 网格自身 */
body.page-id-613 .yp-cats {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 !important;
	gap: 56px 28px !important;
}
body.page-id-613 .yp-cats__item {
	flex: 0 0 auto !important;
	width: calc((100% - 28px * 5) / 6) !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

@media (max-width: 1200px) {
	body.page-id-613 .yp-cats__item { width: calc((100% - 24px * 3) / 4) !important; }
	body.page-id-613 .yp-cats { gap: 48px 24px !important; }
}
@media (max-width: 900px) {
	body.page-id-613 .yp-cats__item { width: calc((100% - 24px * 2) / 3) !important; }
}
@media (max-width: 767px) {
	body.page-id-613 .yp-container,
	body.page-id-613 .yp-container--narrow { padding-left: 16px !important; padding-right: 16px !important; }
	body.page-id-613 .yp-cats__item { width: calc((100% - 16px) / 2) !important; }
	body.page-id-613 .yp-cats { gap: 40px 16px !important; }
}


/* ==========================================================================
   FAQ 的 + / − 号：改用 CSS 画 1.5px 细线（原来用文字 +，标题字体太粗）
   ========================================================================== */
.yp-faq__q::after {
	content: "" !important;
	display: block !important;
	flex: 0 0 auto !important;
	width: 18px !important;
	height: 18px !important;
	font-size: 0 !important;
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor) !important;
	background-position: center center, center center !important;
	background-size: 18px 1.5px, 1.5px 18px !important;
	background-repeat: no-repeat !important;
	transition: transform .2s ease;
}

/* 展开时只留横线（变成减号） */
.yp-faq__item[open] .yp-faq__q::after {
	background-image: linear-gradient(currentColor, currentColor) !important;
	background-size: 18px 1.5px !important;
}

/* 也顺手把 details 自带的三角彻底去掉 */
.yp-faq__q { list-style: none !important; }
.yp-faq__q::-webkit-details-marker { display: none !important; }
.yp-faq__q::marker { content: "" !important; }


/* 订阅成功提示：普通样式（不要大写加粗） */
.yp-newsletter__done {
	font-family: var(--yp-font-body) !important;
	font-weight: 500 !important;
	font-size: var(--yp-fs-base) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: var(--yp-black) !important;
	margin: 0 !important;
}


/* ==========================================================================
   ★★ SHOP STYLES 最终布局：铺满整宽 + 大间距（对齐参考站）
   ── 用百分比 + space-between，不再依赖 calc(100%) 的解析
   ========================================================================== */
body.page-id-613 .yp-page,
body.page-id-613 .yp-section {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.page-id-613 .yp-container,
body.page-id-613 .yp-container--narrow {
	width: 100% !important;
	max-width: 100% !important;          /* ★ 铺满，不再限 1400px */
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 56px !important;       /* 左右严格相等 */
	padding-right: 56px !important;
}

body.page-id-613 .yp-page__content { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }

body.page-id-613 .yp-cats {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: space-between !important;   /* ★ 两端对齐，均分剩余空间 */
	align-items: flex-start !important;
	gap: 64px 0 !important;                      /* 横向间距由 space-between 负责 */
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.page-id-613 .yp-cats__item {
	flex: 0 0 15% !important;                    /* ★ 6 个 × 15% = 90%，剩下的由 space-between 分 */
	max-width: 15% !important;
	width: 15% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* 最后一行只有 3 个时，不要被 space-between 拉散 */
body.page-id-613 .yp-cats::after {
	content: "" !important;
	flex: 0 0 15% !important;
	max-width: 15% !important;
	height: 0 !important;
}

@media (max-width: 1200px) {
	body.page-id-613 .yp-container,
	body.page-id-613 .yp-container--narrow { padding-left: 32px !important; padding-right: 32px !important; }
	body.page-id-613 .yp-cats__item,
	body.page-id-613 .yp-cats::after { flex: 0 0 22% !important; max-width: 22% !important; width: 22% !important; }
}
@media (max-width: 767px) {
	body.page-id-613 .yp-container,
	body.page-id-613 .yp-container--narrow { padding-left: 16px !important; padding-right: 16px !important; }
	body.page-id-613 .yp-cats { gap: 40px 0 !important; justify-content: space-between !important; }
	body.page-id-613 .yp-cats__item,
	body.page-id-613 .yp-cats::after { flex: 0 0 47% !important; max-width: 47% !important; width: 47% !important; }
}


/* ==========================================================================
   页脚里的 FAQ（黑底，白字，细线 +/−）
   ========================================================================== */
.yp-footer__faq { min-width: 0; }

.yp-footer__faqlist { margin-top: 4px; }

.yp-footer__faqitem {
	border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.yp-footer__faqitem summary {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 11px 0;
	font-family: var(--yp-font-body);
	font-weight: 500;
	font-size: var(--yp-fs-sm);
	line-height: 1.35;
	color: var(--yp-white);
	cursor: pointer;
	list-style: none;
}
.yp-footer__faqitem summary::-webkit-details-marker { display: none; }
.yp-footer__faqitem summary::marker { content: ""; }
.yp-footer__faqitem summary::after {
	content: "";
	flex: 0 0 auto;
	width: 14px; height: 14px;
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-position: center center, center center;
	background-size: 14px 1.2px, 1.2px 14px;
	background-repeat: no-repeat;
}
.yp-footer__faqitem[open] summary::after {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 14px 1.2px;
}
.yp-footer__faqitem p {
	margin: 0 0 12px;
	font-size: var(--yp-fs-xs);
	line-height: 1.6;
	color: rgba(255, 255, 255, .72);
}

/* 页脚改成 4 列：免责声明 / 菜单 / Help / FAQ，logo 单独一行右对齐 */
.yp-footer__main {
	grid-template-columns: 1.1fr 0.7fr 0.8fr 1.4fr !important;
}
@media (max-width: 1200px) {
	.yp-footer__main { grid-template-columns: 1fr 1fr !important; }
	.yp-footer__brandmark { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 767px) {
	.yp-footer__main { grid-template-columns: 1fr !important; }
}


/* ==========================================================================
   ★★★ 分类网格：回到左对齐紧凑版（第二行跟第一行左对齐，不拉散）
   ========================================================================== */
body.page-id-613 .yp-cats {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;     /* ★ 回到左对齐 */
	align-items: flex-start !important;
	gap: 56px 28px !important;                  /* 横向间距用 gap，不用 space-between */
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* 去掉上次加的垫片 */
body.page-id-613 .yp-cats::after { content: none !important; display: none !important; }

body.page-id-613 .yp-cats__item {
	flex: 0 0 auto !important;
	width: calc((100% - 28px * 5) / 6) !important;   /* 一行正好 6 个 */
	max-width: calc((100% - 28px * 5) / 6) !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.page-id-613 .yp-container,
body.page-id-613 .yp-container--narrow {
	max-width: 1400px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 30px !important;
	padding-right: 30px !important;
}

@media (max-width: 1200px) {
	body.page-id-613 .yp-cats { gap: 48px 24px !important; }
	body.page-id-613 .yp-cats__item {
		width: calc((100% - 24px * 3) / 4) !important;
		max-width: calc((100% - 24px * 3) / 4) !important;
	}
}
@media (max-width: 900px) {
	body.page-id-613 .yp-cats__item {
		width: calc((100% - 24px * 2) / 3) !important;
		max-width: calc((100% - 24px * 2) / 3) !important;
	}
}
@media (max-width: 767px) {
	body.page-id-613 .yp-container,
	body.page-id-613 .yp-container--narrow { padding-left: 16px !important; padding-right: 16px !important; }
	body.page-id-613 .yp-cats { gap: 40px 16px !important; }
	body.page-id-613 .yp-cats__item {
		width: calc((100% - 16px) / 2) !important;
		max-width: calc((100% - 16px) / 2) !important;
	}
}


/* ==========================================================================
   ★ 页脚最终布局：免责声明 | 菜单 | FAQ | logo（logo 在原 Help 的位置）
   ========================================================================== */
.yp-footer__main {
	display: grid !important;
	grid-template-columns: 1.15fr 0.65fr 1.5fr 0.85fr !important;
	gap: var(--yp-sp-7) var(--yp-sp-6) !important;
	align-items: start !important;
}
.yp-footer__cols { display: contents !important; }
.yp-footer__brandmark {
	justify-self: start !important;
	align-self: start !important;
	grid-column: 4 !important;
}
.yp-footer__brandmark img { max-height: 130px !important; }
.yp-footer__faq { grid-column: 3 !important; }

@media (max-width: 1200px) {
	.yp-footer__main { grid-template-columns: 1fr 1fr !important; }
	.yp-footer__brandmark { grid-column: 2 !important; justify-self: end !important; }
	.yp-footer__faq { grid-column: auto !important; }
}
@media (max-width: 767px) {
	.yp-footer__main { grid-template-columns: 1fr !important; }
	.yp-footer__brandmark { grid-column: 1 !important; justify-self: start !important; }
	.yp-footer__brandmark img { max-height: 96px !important; }
}


/* ==========================================================================
   ★ 首页 SHOP STYLES 与 /products/ 页面完全一致
   ========================================================================== */
.yp-cats-section,
body.page-id-613 .yp-container,
body.page-id-613 .yp-container--narrow {
	width: 100% !important;
	max-width: 1400px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 30px !important;
	padding-right: 30px !important;
}

/* 网格：两页统一 */
.yp-cats,
body.page-id-613 .yp-cats {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	gap: 56px 28px !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
.yp-cats::after,
body.page-id-613 .yp-cats::after { content: none !important; display: none !important; }

.yp-cats__item,
body.page-id-613 .yp-cats__item {
	flex: 0 0 auto !important;
	width: calc((100% - 28px * 5) / 6) !important;
	max-width: calc((100% - 28px * 5) / 6) !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* 首页那个标题也居中 */
.yp-cats-section .yp-cats__title { text-align: center !important; margin: 0 0 var(--yp-sp-7) !important; }

@media (max-width: 1200px) {
	.yp-cats, body.page-id-613 .yp-cats { gap: 48px 24px !important; }
	.yp-cats__item, body.page-id-613 .yp-cats__item {
		width: calc((100% - 24px * 3) / 4) !important;
		max-width: calc((100% - 24px * 3) / 4) !important;
	}
}
@media (max-width: 900px) {
	.yp-cats__item, body.page-id-613 .yp-cats__item {
		width: calc((100% - 24px * 2) / 3) !important;
		max-width: calc((100% - 24px * 2) / 3) !important;
	}
}
@media (max-width: 767px) {
	.yp-cats-section,
	body.page-id-613 .yp-container,
	body.page-id-613 .yp-container--narrow { padding-left: 16px !important; padding-right: 16px !important; }
	.yp-cats, body.page-id-613 .yp-cats { gap: 40px 16px !important; }
	.yp-cats__item, body.page-id-613 .yp-cats__item {
		width: calc((100% - 16px) / 2) !important;
		max-width: calc((100% - 16px) / 2) !important;
	}
}


/* ==========================================================================
   ★★★★ 分类网格：全宽放大版（首页 + /products/ 同时生效）
   ── 之前限宽 1400px，整片显得小气。改成跟随页面全宽。
   ========================================================================== */
.yp-cats-section,
body.page-id-613 .yp-container,
body.page-id-613 .yp-container--narrow,
.yp-cats-section.yp-container {
	width: 100% !important;
	max-width: var(--yp-max-width) !important;   /* 1820px，和其他区块一致 */
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--yp-gutter) !important;   /* 40px，和页头一致 */
	padding-right: var(--yp-gutter) !important;
}

/* 网格：一行 6 个，间距放宽 */
.yp-cats,
body.page-id-613 .yp-cats {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	gap: 72px 32px !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
.yp-cats__item,
body.page-id-613 .yp-cats__item {
	flex: 0 0 auto !important;
	width: calc((100% - 32px * 5) / 6) !important;
	max-width: calc((100% - 32px * 5) / 6) !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* 图框放大一点 */
.yp-cats__media,
body.page-id-613 .yp-cats__media {
	aspect-ratio: 1 / 1 !important;
	margin-bottom: var(--yp-sp-5) !important;
}
.yp-cats__name,
body.page-id-613 .yp-cats__name {
	font-size: var(--yp-fs-base) !important;
	min-height: 2.4em !important;
}

@media (max-width: 1200px) {
	.yp-cats, body.page-id-613 .yp-cats { gap: 56px 24px !important; }
	.yp-cats__item, body.page-id-613 .yp-cats__item {
		width: calc((100% - 24px * 3) / 4) !important;
		max-width: calc((100% - 24px * 3) / 4) !important;
	}
}
@media (max-width: 900px) {
	.yp-cats__item, body.page-id-613 .yp-cats__item {
		width: calc((100% - 24px * 2) / 3) !important;
		max-width: calc((100% - 24px * 2) / 3) !important;
	}
}
@media (max-width: 767px) {
	.yp-cats-section,
	body.page-id-613 .yp-container,
	body.page-id-613 .yp-container--narrow,
	.yp-cats-section.yp-container { padding-left: 16px !important; padding-right: 16px !important; }
	.yp-cats, body.page-id-613 .yp-cats { gap: 40px 16px !important; }
	.yp-cats__item, body.page-id-613 .yp-cats__item {
		width: calc((100% - 16px) / 2) !important;
		max-width: calc((100% - 16px) / 2) !important;
	}
}


/* 订阅按钮：强制黑底白字 */
.yp-newsletter__form .yp-btn,
.yp-newsletter__form button[type="submit"] {
	background: var(--yp-black) !important;
	background-color: var(--yp-black) !important;
	border-color: var(--yp-black) !important;
	color: var(--yp-white) !important;
	font-family: var(--yp-font-head) !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	padding: 18px 44px !important;
	border-radius: var(--yp-radius-pill) !important;
}
.yp-newsletter__form .yp-btn:hover,
.yp-newsletter__form button[type="submit"]:hover {
	background: var(--yp-white) !important;
	background-color: var(--yp-white) !important;
	color: var(--yp-black) !important;
}


/* ==========================================================================
   波浪与相邻色块之间的 1px 白缝修复
   ── 原因有两处：
      1) 伪元素是 inline 级，行高会撑出零点几像素 → 强制 display: block
      2) SVG 描边抗锯齿会在曲线边缘留下半透明像素 → 让相邻区块压过来 1px
   ========================================================================== */
.yp-wave-top::before,
.yp-wave-bottom::after {
	display: block !important;
	line-height: 0 !important;
	font-size: 0 !important;
	vertical-align: bottom !important;
}

/* 波浪压出边界 1px，确保完全贴合 */
.yp-wave-top::before { top: -1px !important; }
.yp-wave-bottom::after { bottom: -1px !important; }

/* 相邻的整块区域也压过来 1px，把可能的缝盖住 */
.yp-footer {
	margin-top: -1px !important;
	display: block !important;
	line-height: normal !important;
}
.yp-banner,
.yp-newsletter,
.yp-hero {
	display: block !important;
	line-height: normal !important;
}

/* 波浪所在的 section 本身不能有 margin/padding 造成空隙 */
.yp-newsletter.yp-wave-bottom,
.yp-hero.yp-wave-bottom,
.yp-banner.yp-wave-bottom { margin-bottom: 0 !important; }

/* 页脚内部第一层也去掉可能的上边距 */
.yp-footer__main { padding-top: var(--yp-sp-8) !important; }


/* ==========================================================================
   ★ 灰底区块 → 黑色页脚：波浪曲线以下填「黑色」
   ── 这样黑色页脚的顶边就是波浪形，而不是一条平直的黑带
      （原来波浪填白色，黑页脚在下面直直开始，交界处就成了直线）
   ========================================================================== */
.yp-newsletter.yp-wave-bottom::after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%2060%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2030%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20L1200%2060%20L0%2060%20Z%27%20fill%3D%27%23000000%27%2F%3E%3C%2Fsvg%3E") !important;
	background-repeat: repeat-x !important;
	background-position: bottom left !important;
	background-size: 1200px 46px !important;
	height: 46px !important;
	bottom: -1px !important;
	z-index: 3 !important;
}

/* 页脚不再需要上移压边（已经是波浪顶边了） */
.yp-footer { margin-top: 0 !important; }

/* 其它白底场景保持原来的白色波浪 */
.yp-hero.yp-wave-bottom::after,
.yp-banner.yp-wave-bottom::after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%2060%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2030%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20L1200%2060%20L0%2060%20Z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E") !important;
	background-size: 1200px 46px !important;
	height: 46px !important;
}

@media (max-width: 767px) {
	.yp-newsletter.yp-wave-bottom::after,
	.yp-hero.yp-wave-bottom::after,
	.yp-banner.yp-wave-bottom::after { height: 32px !important; background-size: 800px 32px !important; }
}


/* ==========================================================================
   输入框聚焦：去掉浏览器/插件给的虚线轮廓，换成细描边高亮
   ========================================================================== */
.yp-newsletter__form input[type="email"],
.yp-newsletter__form input[type="email"]:focus,
.yp-newsletter__form input[type="email"]:focus-visible,
.yp-newsletter__form input[type="email"]:active,
.yp-field input:focus,
.yp-field input:focus-visible,
.yp-field textarea:focus,
.yp-field textarea:focus-visible,
.yp-field select:focus,
.yp-field select:focus-visible,
.yp-searchbar__input:focus,
.yp-searchbar__input:focus-visible,
.yp-drawer__note textarea:focus,
.yp-qty input.qty:focus,
input:focus,
textarea:focus,
select:focus,
button:focus,
a:focus {
	outline: none !important;
	outline-offset: 0 !important;
}

/* 用柔和的外发光代替虚线框 */
.yp-newsletter__form input[type="email"]:focus,
.yp-newsletter__form input[type="email"]:focus-visible {
	border-color: var(--yp-black) !important;
	box-shadow: 0 0 0 3px rgba(17, 17, 17, .16) !important;
}
.yp-field input:focus,
.yp-field textarea:focus,
.yp-field select:focus {
	border-color: var(--yp-black) !important;
	box-shadow: 0 0 0 3px rgba(17, 17, 17, .16) !important;
}

/* 键盘可达性：只在纯键盘操作时给按钮/链接一个可见焦点 */
button:focus-visible,
a:focus-visible {
	box-shadow: 0 0 0 3px rgba(17, 17, 17, .2) !important;
}


/* ==========================================================================
   ★ 聚焦时显示虚线框 —— 参考站的样式
   ========================================================================== */
.yp-newsletter__form input[type="email"]:focus,
.yp-newsletter__form input[type="email"]:focus-visible,
.yp-field input:focus,
.yp-field input:focus-visible,
.yp-field textarea:focus,
.yp-field textarea:focus-visible,
.yp-field select:focus,
.yp-field select:focus-visible,
.yp-searchbar__input:focus,
.yp-searchbar__input:focus-visible,
.yp-drawer__note textarea:focus,
.yp-qty input.qty:focus {
	outline: 2px dashed var(--yp-black) !important;
	outline-offset: 4px !important;
	box-shadow: none !important;
	border-color: var(--yp-black) !important;
}

/* 按钮/链接聚焦也用同样的虚线，保持一致 */
button:focus-visible,
a:focus-visible,
input[type="submit"]:focus-visible {
	outline: 2px dashed var(--yp-black) !important;
	outline-offset: 3px !important;
	box-shadow: none !important;
}


/* ==========================================================================
   搜索打开时：隐藏页头和公告条，只留那条通栏搜索框
   ── 用 visibility 而不是 display，避免页面高度跳变
   ========================================================================== */
html.yp-searching .yp-header__inner,
html.yp-searching .yp-mobnav,
html.yp-searching .yp-drawer {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

html.yp-searching .yp-header {
	border-bottom: 0 !important;
	box-shadow: none !important;
}

/* 搜索框本身固定在顶部，铺满整宽 */
html.yp-searching .yp-searchbar {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* 搜索框去掉多余阴影，改成干净的一条 */
.yp-searchbar {
	box-shadow: none !important;
	border-bottom: 2px dashed var(--yp-black) !important;
}
.yp-searchbar__form {
	padding-top: 18px !important;
	padding-bottom: 18px !important;
}
.yp-searchbar__input {
	outline: none !important;
	box-shadow: none !important;
}


/* 搜索打开时保留公告条（只藏页头，不藏上面那行字） */
html.yp-searching .yp-announce {
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	display: block !important;
}


/* ==========================================================================
   ★ 搜索框从公告条下面开始（原来 fixed top:0 把公告条盖住了）
   ========================================================================== */
.yp-searchbar {
	top: var(--yp-announce-h, 42px) !important;
}

/* 公告条本身在搜索时保持可见，并压在最上层 */
html.yp-searching .yp-announce {
	position: relative !important;
	z-index: 10000 !important;
	visibility: visible !important;
	opacity: 1 !important;
	display: block !important;
}

/* 隐藏页头时保留它的高度，避免页面跳动 */
html.yp-searching .yp-header__inner {
	min-height: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}


/* ==========================================================================
   ★ 搜索条本身不要虚线（只保留输入框聚焦时那一圈虚线）
   ========================================================================== */
.yp-searchbar,
html.yp-searching .yp-searchbar {
	border-bottom: 0 !important;      /* 去掉下面那条多余的虚线 */
	border: 0 !important;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .08) !important;   /* 换成极淡的分隔线 */
	background: var(--yp-white) !important;
}


/* ==========================================================================
   商品详情页布局（原来完全没写样式，图片撑满整屏）
   ========================================================================== */
.single-product .yp-main { width: 100%; }

/* 面包屑 */
.woocommerce-breadcrumb {
	max-width: 1400px;
	margin: 0 auto;
	padding: 16px var(--yp-gutter) 0;
	font-size: var(--yp-fs-xs);
	color: var(--yp-grey-700);
}
.woocommerce-breadcrumb a { color: var(--yp-grey-700); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--yp-black); text-decoration: underline; }

/* 主容器：左图右信息 */
.single-product div.product {
	display: grid !important;
	grid-template-columns: 1.05fr 1fr;
	gap: 56px 64px;
	align-items: start;
	max-width: 1400px;
	margin: 0 auto;
	padding: 40px var(--yp-gutter) var(--yp-sp-8);
}
.single-product div.product::before,
.single-product div.product::after { content: none !important; display: none !important; }

/* 左：图片 */
.single-product div.product .woocommerce-product-gallery {
	grid-column: 1 !important;
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	position: relative;
}
.single-product div.product .woocommerce-product-gallery img {
	width: 100% !important;
	height: auto !important;
	display: block;
	border-radius: var(--yp-radius-md);
}
.single-product div.product .woocommerce-product-gallery__wrapper { margin: 0 !important; }
.single-product div.product .flex-control-thumbs {
	display: flex; flex-wrap: wrap; gap: 10px;
	margin: 14px 0 0 !important; padding: 0 !important; list-style: none;
}
.single-product div.product .flex-control-thumbs li { width: 76px !important; margin: 0 !important; }
.single-product div.product .flex-control-thumbs img { border-radius: var(--yp-radius-sm); cursor: pointer; }
.single-product div.product .flex-control-thumbs img.flex-active { outline: 2px solid var(--yp-black); }

/* 右：信息 */
.single-product div.product .summary {
	grid-column: 2 !important;
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}
.single-product div.product .product_title {
	font-family: var(--yp-font-head);
	font-weight: 900;
	/* 2026-09-22：整行太大（原来最大 43px，长标题要占三行），降一号：24–32px */
	font-size: clamp(var(--yp-fs-xl), 2.6vw, var(--yp-fs-3xl));
	line-height: 1.05;
	text-transform: uppercase;
	margin: 0 0 var(--yp-sp-4);
}
.single-product div.product .price {
	font-family: var(--yp-font-body);
	font-weight: 700;
	font-size: var(--yp-fs-xl);
	color: var(--yp-black);
	margin: 0 0 var(--yp-sp-4);
	display: block;
}
.single-product div.product .woocommerce-product-details__short-description {
	font-size: var(--yp-fs-sm);
	line-height: 1.7;
	color: var(--yp-grey-700);
	margin-bottom: var(--yp-sp-5);
}
.single-product div.product .product_meta {
	font-size: var(--yp-fs-xs);
	color: var(--yp-grey-700);
	margin-top: var(--yp-sp-5);
	padding-top: var(--yp-sp-4);
	border-top: 1px solid var(--yp-grey-200);
}
.single-product div.product .product_meta a { color: var(--yp-grey-700); }

/* 宽屏里图片别太大 */
@media (min-width: 1500px) {
	.single-product div.product { grid-template-columns: 1fr 1fr; }
}

/* 平板/手机：改单列 */
@media (max-width: 900px) {
	.single-product div.product {
		grid-template-columns: 1fr !important;
		gap: 32px;
		padding-top: 24px;
	}
	.single-product div.product .woocommerce-product-gallery,
	.single-product div.product .summary { grid-column: 1 !important; }
}

/* 商品描述标签页 */
.single-product .woocommerce-tabs {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--yp-gutter) var(--yp-sp-8);
}
.single-product .woocommerce-tabs ul.tabs {
	display: flex; flex-wrap: wrap; gap: 28px;
	list-style: none; margin: 0 0 var(--yp-sp-5) !important; padding: 0 !important;
	border-bottom: 2px solid var(--yp-black);
}
.single-product .woocommerce-tabs ul.tabs li { margin: 0 !important; }
.single-product .woocommerce-tabs ul.tabs li a {
	display: block; padding: 12px 0;
	font-family: var(--yp-font-head); font-weight: 900;
	font-size: var(--yp-fs-sm); text-transform: uppercase;
	color: var(--yp-grey-500) !important;
	text-decoration: none !important;
}
.single-product .woocommerce-tabs ul.tabs li.active a { color: var(--yp-black) !important; }
.single-product .woocommerce-tabs .panel { font-size: var(--yp-fs-sm); line-height: 1.75; }
.single-product .woocommerce-tabs .panel h2 { font-size: var(--yp-fs-lg); text-transform: none; }

/* 相关商品 */
.related.products,
.upsells.products {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--yp-gutter) var(--yp-sp-8);
}
.related.products > h2,
.upsells.products > h2 {
	text-align: center;
	margin-bottom: var(--yp-sp-6);
}


/* ==========================================================================
   商品描述折叠面板（黑线 + 细箭头，默认收起）
   ========================================================================== */
.yp-accordion {
	max-width: 1400px;
	margin: 0 auto;
	padding: var(--yp-sp-6) var(--yp-gutter) var(--yp-sp-8);
}

.yp-accordion__item { border-top: 2px solid var(--yp-black); }

.yp-accordion__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	font-family: var(--yp-font-body);
	font-weight: 500;
	font-size: var(--yp-fs-lg);
	line-height: 1.2;
	color: var(--yp-black);
	cursor: pointer;
	list-style: none;
	border-bottom: 2px solid var(--yp-black);
}
.yp-accordion__q::-webkit-details-marker { display: none; }
.yp-accordion__q::marker { content: ""; }

/* 右侧细箭头（默认向下，展开朝上） */
.yp-accordion__q::after {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border-right: 1.6px solid var(--yp-black);
	border-bottom: 1.6px solid var(--yp-black);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}
.yp-accordion__item[open] .yp-accordion__q::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.yp-accordion__a {
	padding: var(--yp-sp-5) 0 var(--yp-sp-6);
	font-size: var(--yp-fs-base);
	line-height: 1.75;
	color: var(--yp-grey-700);
}
.yp-accordion__a p { margin: 0 0 1em; }
.yp-accordion__a p:last-child { margin-bottom: 0; }
.yp-accordion__a img { border-radius: var(--yp-radius-md); margin-block: var(--yp-sp-4); }

@media (max-width: 767px) {
	.yp-accordion__q { font-size: var(--yp-fs-base); padding: 16px 0; }
	.yp-accordion__a { font-size: var(--yp-fs-sm); }
}


/* ==========================================================================
   ★ 相关商品 / 推荐商品：一行 3 个（原来是一列堆叠）
   ========================================================================== */
.related.products,
.upsells.products {
	max-width: 1400px !important;
	margin: 0 auto !important;
	padding: 0 var(--yp-gutter) var(--yp-sp-8) !important;
}

.related.products > h2,
.upsells.products > h2 {
	text-align: center !important;
	font-family: var(--yp-font-head) !important;
	font-weight: 900 !important;
	font-size: clamp(var(--yp-fs-2xl), 3.4vw, var(--yp-fs-4xl)) !important;
	line-height: 1.05 !important;
	text-transform: uppercase !important;
	margin: 0 0 var(--yp-sp-7) !important;
}

/* 列表本身 */
.related.products ul.products,
.upsells.products ul.products,
.related.products ul.products.columns-4,
.upsells.products ul.products.columns-4 {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	gap: 56px 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.related.products ul.products::before,
.related.products ul.products::after,
.upsells.products ul.products::before,
.upsells.products ul.products::after { content: none !important; display: none !important; }

/* 每个商品：一行 3 个 */
.related.products ul.products li.product,
.upsells.products ul.products li.product {
	flex: 0 0 auto !important;
	width: calc((100% - 28px * 2) / 3) !important;
	max-width: calc((100% - 28px * 2) / 3) !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	display: flex !important;
	flex-direction: column !important;
	text-align: center !important;
}

/* 图片：统一正方形 */
.related.products ul.products li.product a img,
.upsells.products ul.products li.product a img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	margin: 0 0 var(--yp-sp-4) !important;
	border-radius: 0 !important;
}

/* 标题：大写居中 */
.related.products ul.products li.product .yp-card__title,
.upsells.products ul.products li.product .yp-card__title,
.related.products ul.products li.product .woocommerce-loop-product__title,
.upsells.products ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--yp-font-body) !important;
	font-weight: 500 !important;
	font-size: var(--yp-fs-sm) !important;
	line-height: 1.35 !important;
	text-transform: uppercase !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	margin: 0 0 var(--yp-sp-3) !important;
	min-height: 0 !important;
}
.related.products ul.products li.product .price,
.upsells.products ul.products li.product .price {
	font-family: var(--yp-font-body) !important;
	font-weight: 700 !important;
	font-size: var(--yp-fs-base) !important;
	color: var(--yp-black) !important;
	text-align: center !important;
	margin: 0 !important;
}

/* 隐藏卡片上的「加入购物车」按钮，保持干净 */
.related.products ul.products li.product .button,
.upsells.products ul.products li.product .button { display: none !important; }

@media (max-width: 900px) {
	.related.products ul.products li.product,
	.upsells.products ul.products li.product {
		width: calc((100% - 24px) / 2) !important;
		max-width: calc((100% - 24px) / 2) !important;
	}
	.related.products ul.products,
	.upsells.products ul.products { gap: 44px 24px !important; }
}
@media (max-width: 560px) {
	.related.products ul.products li.product,
	.upsells.products ul.products li.product {
		width: 100% !important;
		max-width: 100% !important;
	}
}


/* ==========================================================================
   ★★ 相关商品：改用 > li 选择器
   ── 之前写 li.product，但我们的卡片是 li.yp-card（去掉了 WooCommerce 的 class），
      所以选择器完全没匹配上，列表就还是一列。
   ========================================================================== */
section.related.products,
section.upsells.products {
	max-width: 1400px !important;
	margin: 0 auto !important;
	padding: 0 var(--yp-gutter) var(--yp-sp-8) !important;
	display: block !important;
}

section.related.products > h2,
section.upsells.products > h2 {
	text-align: center !important;
	font-family: var(--yp-font-head) !important;
	font-weight: 900 !important;
	font-size: clamp(var(--yp-fs-2xl), 3.4vw, var(--yp-fs-4xl)) !important;
	line-height: 1.05 !important;
	text-transform: uppercase !important;
	margin: 0 0 var(--yp-sp-7) !important;
}

section.related.products > ul,
section.upsells.products > ul,
section.related.products > ul.products,
section.upsells.products > ul.products {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	gap: 56px 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
section.related.products > ul::before,
section.related.products > ul::after,
section.upsells.products > ul::before,
section.upsells.products > ul::after { content: none !important; display: none !important; }

/* ★ 关键：用 > li，不依赖任何 class */
section.related.products > ul > li,
section.upsells.products > ul > li {
	flex: 0 0 auto !important;
	width: calc((100% - 28px * 2) / 3) !important;
	max-width: calc((100% - 28px * 2) / 3) !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	display: flex !important;
	flex-direction: column !important;
	text-align: center !important;
}

section.related.products > ul > li a,
section.upsells.products > ul > li a { text-decoration: none !important; }

section.related.products > ul > li img,
section.upsells.products > ul > li img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	margin: 0 0 var(--yp-sp-4) !important;
}

section.related.products > ul > li .yp-card__title,
section.upsells.products > ul > li .yp-card__title,
section.related.products > ul > li h2,
section.upsells.products > ul > li h2 {
	font-family: var(--yp-font-body) !important;
	font-weight: 500 !important;
	font-size: var(--yp-fs-sm) !important;
	line-height: 1.35 !important;
	text-transform: uppercase !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	margin: 0 0 var(--yp-sp-3) !important;
	min-height: 0 !important;
	order: 2 !important;
}
section.related.products > ul > li .yp-card__title a,
section.upsells.products > ul > li .yp-card__title a { color: var(--yp-black) !important; }

section.related.products > ul > li .yp-card__price,
section.upsells.products > ul > li .yp-card__price,
section.related.products > ul > li .price,
section.upsells.products > ul > li .price {
	font-family: var(--yp-font-body) !important;
	font-weight: 700 !important;
	font-size: var(--yp-fs-base) !important;
	color: var(--yp-black) !important;
	text-align: center !important;
	margin: 0 !important;
	order: 3 !important;
}
section.related.products > ul > li .yp-card__media,
section.upsells.products > ul > li .yp-card__media { order: 1 !important; }

section.related.products > ul > li .button,
section.upsells.products > ul > li .button { display: none !important; }

@media (max-width: 900px) {
	section.related.products > ul > li,
	section.upsells.products > ul > li {
		width: calc((100% - 24px) / 2) !important;
		max-width: calc((100% - 24px) / 2) !important;
	}
	section.related.products > ul,
	section.upsells.products > ul { gap: 44px 24px !important; }
}
@media (max-width: 560px) {
	section.related.products > ul > li,
	section.upsells.products > ul > li { width: 100% !important; max-width: 100% !important; }
}


/* ==========================================================================
   ★ 商品页：数量框和「ADD TO CART」按钮等高对齐
   ── 之前数量框固定 40px、按钮更高，两者没对齐
   ========================================================================== */
.yp-buybox__row {
	display: flex !important;
	align-items: stretch !important;   /* 关键：两个子元素拉伸到同高 */
	gap: var(--yp-sp-3) !important;
}

.yp-buybox__row .yp-qty {
	height: auto !important;
	min-height: 58px !important;
	padding: 0 6px !important;
	align-self: stretch !important;
}

.yp-buybox__row .yp-btn,
.yp-buybox__row button[type="submit"],
.yp-buybox__row .single_add_to_cart_button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: auto !important;
	min-height: 58px !important;
	padding: 0 42px !important;
	line-height: 1 !important;
	align-self: stretch !important;
}

/* 数量框里的按钮和输入框也居中 */
.yp-buybox__row .yp-qty__btn { align-self: center !important; }
.yp-buybox__row .yp-qty input.qty {
	align-self: center !important;
	height: auto !important;
	line-height: 1.2 !important;
}

@media (max-width: 560px) {
	.yp-buybox__row { flex-direction: column !important; }
	.yp-buybox__row .yp-qty,
	.yp-buybox__row .yp-btn { width: 100% !important; }
}


/* ==========================================================================
   ★ Description 折叠面板：移到右栏（加购按钮下方）
   ========================================================================== */
.single-product div.product .summary .yp-accordion,
div.product .summary .yp-accordion {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: var(--yp-sp-5) 0 0 !important;
}

.summary .yp-accordion__item { border-top: 0 !important; }

.summary .yp-accordion__q {
	padding: 16px 0 !important;
	font-size: var(--yp-fs-base) !important;
	border-top: 1px solid var(--yp-grey-200) !important;
	border-bottom: 2px solid var(--yp-black) !important;
}

.summary .yp-accordion__a {
	padding: var(--yp-sp-4) 0 0 !important;
	font-size: var(--yp-fs-sm) !important;
	border-bottom: 0 !important;
}

/* 加购区下面留一点间距 */
.single-product div.product .summary .yp-buybox { margin-bottom: var(--yp-sp-4) !important; }


/* ==========================================================================
   ★ Description 折叠面板：收起时上下各一条黑线
   ========================================================================== */
.summary .yp-accordion__item,
.single-product div.product .summary .yp-accordion__item {
	border-top: 2px solid var(--yp-black) !important;
	border-bottom: 0 !important;
	margin-top: var(--yp-sp-5) !important;
}

.summary .yp-accordion__q,
.single-product div.product .summary .yp-accordion__q {
	border-top: 0 !important;
	border-bottom: 2px solid var(--yp-black) !important;
	padding: 18px 0 !important;
	font-size: var(--yp-fs-base) !important;
}


/* ==========================================================================
   搜索结果页（大标题 + 搜索框 + 商品网格）
   ========================================================================== */
.yp-searchpage { padding-block: var(--yp-sp-8); }

.yp-searchpage__inner {
	max-width: var(--yp-content-width);
	margin: 0 auto;
	padding-inline: var(--yp-gutter);
	text-align: center;
}

.yp-searchpage__title {
	font-family: var(--yp-font-head);
	font-weight: 900;
	font-size: clamp(var(--yp-fs-4xl), 6vw, var(--yp-fs-7xl));
	line-height: var(--yp-lh-head);
	text-transform: uppercase;
	margin: 0 0 var(--yp-sp-6);
}

/* 搜索框：胶囊 + 聚焦虚线 */
.yp-searchpage__form {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 620px;
	margin: 0 auto var(--yp-sp-6);
}
.yp-searchpage__input {
	width: 100%;
	padding: 18px 62px 18px 28px;
	border: 2px solid var(--yp-black);
	border-radius: var(--yp-radius-pill);
	background: var(--yp-white);
	color: var(--yp-black);
	font-family: var(--yp-font-body);
	font-size: var(--yp-fs-base);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.yp-searchpage__input:focus {
	outline: 2px dashed var(--yp-black) !important;
	outline-offset: 4px !important;
	box-shadow: none !important;
}
.yp-searchpage__input::-webkit-search-cancel-button { display: none; }

.yp-searchpage__submit {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--yp-black);
	cursor: pointer;
}
.yp-searchpage__submit:hover { background: var(--yp-grey-100); }

.yp-searchpage__count {
	font-size: var(--yp-fs-sm);
	color: var(--yp-grey-700);
	margin: 0;
}
.yp-searchpage__count strong { color: var(--yp-black); }

.yp-searchpage__results {
	max-width: var(--yp-max-width);
	margin: var(--yp-sp-7) auto 0;
	padding-inline: var(--yp-gutter);
}

/* 结果网格用和商品列表一致的规则 */
.yp-searchpage__results .yp-grid {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	gap: 56px 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.yp-searchpage__results .yp-grid > li {
	flex: 0 0 auto !important;
	width: calc((100% - 28px * 3) / 4) !important;
	max-width: calc((100% - 28px * 3) / 4) !important;
	margin: 0 !important;
}

.yp-searchpage__empty {
	text-align: center;
	font-size: var(--yp-fs-base);
	color: var(--yp-grey-700);
	padding-block: var(--yp-sp-7);
}
.yp-searchpage__empty a { text-decoration: underline; }

@media (max-width: 1024px) {
	.yp-searchpage__results .yp-grid { gap: 44px 22px !important; }
	.yp-searchpage__results .yp-grid > li {
		width: calc((100% - 22px * 2) / 3) !important;
		max-width: calc((100% - 22px * 2) / 3) !important;
	}
}
@media (max-width: 767px) {
	.yp-searchpage { padding-block: var(--yp-sp-7); }
	.yp-searchpage__input { padding: 15px 56px 15px 22px; font-size: var(--yp-fs-sm); }
	.yp-searchpage__results .yp-grid { gap: 36px 16px !important; }
	.yp-searchpage__results .yp-grid > li {
		width: calc((100% - 16px) / 2) !important;
		max-width: calc((100% - 16px) / 2) !important;
	}
}


/* ==========================================================================
   ★ 购物车侧边栏加宽
   ========================================================================== */
.yp-drawer__panel {
	width: min(580px, 94vw) !important;
}
.yp-drawer__head { padding: 28px 32px 16px !important; }
.yp-drawer__ship { margin: 0 32px !important; }
.yp-drawer__body { padding: 24px 32px 32px !important; }

/* 商品行：缩略图大一点，信息区更宽松 */
.yp-drawer__item { grid-template-columns: 96px 1fr !important; gap: 20px !important; }
.yp-drawer__thumb img { width: 96px !important; height: 96px !important; }
.yp-drawer__name { font-size: var(--yp-fs-base) !important; line-height: 1.4 !important; }
.yp-drawer__price { font-size: var(--yp-fs-sm) !important; }

/* 小屏仍然铺满 */
@media (max-width: 767px) {
	.yp-drawer__panel { width: 100vw !important; }
	.yp-drawer__head { padding: 22px 20px 14px !important; }
	.yp-drawer__ship { margin: 0 20px !important; }
	.yp-drawer__body { padding: 20px !important; }
	.yp-drawer__item { grid-template-columns: 76px 1fr !important; gap: 14px !important; }
	.yp-drawer__thumb img { width: 76px !important; height: 76px !important; }
}


/* ==========================================================================
   ★ 购物车侧边栏里的数量框：改小一点
   ========================================================================== */
.yp-drawer .yp-qty {
	height: 34px !important;
	min-height: 34px !important;
	padding: 0 3px !important;
}
.yp-drawer .yp-qty__btn {
	width: 26px !important;
	height: 26px !important;
	font-size: 14px !important;
}
.yp-drawer .yp-qty input.qty {
	width: 54px !important;
	min-width: 54px !important;
	font-size: var(--yp-fs-sm) !important;
	padding: 2px 0 !important;
}
.yp-drawer__remove { font-size: var(--yp-fs-xs) !important; }


/* ==========================================================================
   ★ Specifications 折叠面板：去掉上面的黑线（只保留下面那条）
   ========================================================================== */
.summary .yp-specs,
.single-product div.product .summary .yp-specs,
.yp-accordion__item.yp-specs {
	border-top: 0 !important;
	margin-top: var(--yp-sp-4) !important;
}
.summary .yp-specs .yp-accordion__q,
.yp-specs .yp-accordion__q {
	border-top: 0 !important;
	border-bottom: 2px solid var(--yp-black) !important;
}


/* ==========================================================================
   ★ 相关商品 YOU MAY ALSO LIKE：一行 6 个
   ========================================================================== */
section.related.products > ul,
section.upsells.products > ul,
section.related.products > ul.products,
section.upsells.products > ul.products {
	gap: 48px 24px !important;
}

section.related.products > ul > li,
section.upsells.products > ul > li {
	flex: 0 0 auto !important;
	width: calc((100% - 24px * 5) / 6) !important;
	max-width: calc((100% - 24px * 5) / 6) !important;
}

/* 卡片更紧凑一点 */
section.related.products > ul > li .yp-card__title,
section.upsells.products > ul > li .yp-card__title,
section.related.products > ul > li h2,
section.upsells.products > ul > li h2 {
	font-size: var(--yp-fs-xs) !important;
	line-height: 1.35 !important;
}

/* 没有图片时的占位也要显示出来 */
section.related.products > ul > li .yp-ph,
section.upsells.products > ul > li .yp-ph {
	display: block !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	background-color: var(--yp-grey-100) !important;
	border-radius: var(--yp-radius-sm);
}

@media (max-width: 1200px) {
	section.related.products > ul > li,
	section.upsells.products > ul > li {
		width: calc((100% - 22px * 3) / 4) !important;
		max-width: calc((100% - 22px * 3) / 4) !important;
	}
}
@media (max-width: 900px) {
	section.related.products > ul > li,
	section.upsells.products > ul > li {
		width: calc((100% - 20px * 2) / 3) !important;
		max-width: calc((100% - 20px * 2) / 3) !important;
	}
}
@media (max-width: 560px) {
	section.related.products > ul > li,
	section.upsells.products > ul > li {
		width: calc((100% - 14px) / 2) !important;
		max-width: calc((100% - 14px) / 2) !important;
	}
}


/* ==========================================================================
   ★★ 相关商品：强制撑满容器 + 图片放大到合适尺寸
   ── 之前 ul 宽度塌了（flex 容器没撑满），所以卡片和图片都很小
   ========================================================================== */
section.related.products,
section.upsells.products {
	width: 100% !important;
	max-width: 1400px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--yp-gutter) !important;
	padding-right: var(--yp-gutter) !important;
	display: block !important;
}

section.related.products > ul,
section.upsells.products > ul,
section.related.products > ul.products,
section.upsells.products > ul.products {
	width: 100% !important;
	max-width: 100% !important;
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	gap: 52px 26px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* 一行 6 个，每个约 200px（1400px 容器下） */
section.related.products > ul > li,
section.upsells.products > ul > li {
	flex: 0 0 auto !important;
	width: calc((100% - 26px * 5) / 6) !important;
	max-width: calc((100% - 26px * 5) / 6) !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	display: flex !important;
	flex-direction: column !important;
	text-align: center !important;
}

/* 图片铺满卡片宽度 */
section.related.products > ul > li a,
section.upsells.products > ul > li a { display: block !important; }

section.related.products > ul > li img,
section.upsells.products > ul > li img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	object-position: center !important;
	margin: 0 0 var(--yp-sp-4) !important;
	display: block !important;
}

/* 标题：14px，最多三行，不再挤成一行一个词 */
section.related.products > ul > li .yp-card__title,
section.upsells.products > ul > li .yp-card__title,
section.related.products > ul > li h2,
section.upsells.products > ul > li h2 {
	font-family: var(--yp-font-body) !important;
	font-weight: 500 !important;
	font-size: var(--yp-fs-sm) !important;
	line-height: 1.4 !important;
	text-transform: uppercase !important;
	text-align: center !important;
	margin: 0 0 var(--yp-sp-3) !important;
	min-height: 0 !important;
	overflow-wrap: break-word !important;
	word-break: normal !important;
}

section.related.products > ul > li .yp-card__price,
section.upsells.products > ul > li .yp-card__price,
section.related.products > ul > li .price,
section.upsells.products > ul > li .price {
	font-family: var(--yp-font-body) !important;
	font-weight: 700 !important;
	font-size: var(--yp-fs-base) !important;
	color: var(--yp-black) !important;
	text-align: center !important;
	margin: 0 !important;
}

section.related.products > ul > li .button,
section.upsells.products > ul > li .button { display: none !important; }

@media (max-width: 1200px) {
	section.related.products > ul,
	section.upsells.products > ul { gap: 44px 22px !important; }
	section.related.products > ul > li,
	section.upsells.products > ul > li {
		width: calc((100% - 22px * 3) / 4) !important;
		max-width: calc((100% - 22px * 3) / 4) !important;
	}
}
@media (max-width: 900px) {
	section.related.products > ul > li,
	section.upsells.products > ul > li {
		width: calc((100% - 20px * 2) / 3) !important;
		max-width: calc((100% - 20px * 2) / 3) !important;
	}
}
@media (max-width: 560px) {
	section.related.products > ul,
	section.upsells.products > ul { gap: 34px 14px !important; }
	section.related.products > ul > li,
	section.upsells.products > ul > li {
		width: calc((100% - 14px) / 2) !important;
		max-width: calc((100% - 14px) / 2) !important;
	}
}


/* ==========================================================================
   ★★★ 购物车抽屉最终宽度（按你画的红色框）
   ========================================================================== */
.yp-drawer__panel {
	width: min(880px, 96vw) !important;
	max-width: 96vw !important;
}

/* 三栏比例：图 / 信息 / 价格 */
.yp-drawer__item {
	grid-template-columns: 150px minmax(0, 1fr) 130px !important;
	gap: 32px !important;
	align-items: center !important;
}
.yp-drawer__thumb img {
	width: 150px !important;
	height: 150px !important;
	object-fit: contain !important;
}

/* 标题大一点 */
.yp-drawer__name {
	font-size: var(--yp-fs-lg) !important;
	line-height: 1.35 !important;
	margin-bottom: 10px !important;
}

/* 折扣说明和数量框同一行更好看 */
.yp-drawer__save {
	font-size: var(--yp-fs-base) !important;
	margin-bottom: 14px !important;
}

.yp-drawer .yp-qty {
	height: 44px !important;
	min-height: 44px !important;
	padding: 0 6px !important;
}
.yp-drawer .yp-qty__btn { width: 34px !important; height: 34px !important; font-size: 16px !important; }
.yp-drawer .yp-qty input.qty { width: 74px !important; min-width: 74px !important; font-size: var(--yp-fs-base) !important; }
.yp-drawer__remove { font-size: var(--yp-fs-sm) !important; margin-left: 12px !important; }

/* 右侧价格 */
.yp-drawer__figures { min-width: 130px !important; }
.yp-drawer__figures del { font-size: var(--yp-fs-lg) !important; }
.yp-drawer__now { font-size: var(--yp-fs-2xl) !important; }

/* 头部与内边距 */
.yp-drawer__head { padding: 34px 48px 20px !important; }
.yp-drawer__title { font-size: var(--yp-fs-2xl) !important; }
.yp-drawer__ship { margin: 0 48px !important; font-size: var(--yp-fs-base) !important; padding-bottom: var(--yp-sp-5) !important; }
.yp-drawer__body { padding: 28px 48px 0 !important; }
.yp-drawer__total { font-size: var(--yp-fs-lg) !important; }
.yp-drawer__total strong { font-size: var(--yp-fs-2xl) !important; }
.yp-drawer__body > .yp-btn { min-height: 62px !important; font-size: var(--yp-fs-base) !important; margin-bottom: var(--yp-sp-6) !important; }

/* 改数量按钮紧跟数量框 */
.yp-drawer__info .yp-qty { display: inline-flex !important; vertical-align: middle; }
.yp-drawer__info .yp-drawer__remove { display: inline-block !important; vertical-align: middle; }

@media (max-width: 767px) {
	.yp-drawer__panel { width: 100vw !important; max-width: 100vw !important; }
	.yp-drawer__item { grid-template-columns: 100px minmax(0, 1fr) auto !important; gap: 16px !important; }
	.yp-drawer__thumb img { width: 100px !important; height: 100px !important; }
	.yp-drawer__name { font-size: var(--yp-fs-base) !important; }
	.yp-drawer__head { padding: 22px 20px 14px !important; }
	.yp-drawer__ship { margin: 0 20px !important; }
	.yp-drawer__body { padding: 20px 20px 0 !important; }
	.yp-drawer__now { font-size: var(--yp-fs-lg) !important; }
	.yp-drawer__figures { min-width: auto !important; }
}


/* ==========================================================================
   ★★★ 相关商品 / 推荐商品：跨满整行
   ── 商品页主容器是两栏 Grid，related 区块也成了网格子项，
      被塞进第一栏 → 只有半栏宽，卡片和图片都被压小
   ========================================================================== */
.single-product div.product > .related,
.single-product div.product > .upsells,
.single-product div.product > section.related,
.single-product div.product > section.upsells,
div.product > section.related,
div.product > section.upsells,
section.related.products,
section.upsells.products {
	grid-column: 1 / -1 !important;     /* ★ 跨满两栏 */
	width: 100% !important;
	max-width: 1400px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--yp-gutter) !important;
	padding-right: var(--yp-gutter) !important;
	display: block !important;
	float: none !important;
}

/* 网格：一行 6 个 */
section.related.products > ul,
section.upsells.products > ul,
section.related.products > ul.products,
section.upsells.products > ul.products {
	width: 100% !important;
	max-width: 100% !important;
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	gap: 52px 26px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

section.related.products > ul > li,
section.upsells.products > ul > li {
	flex: 0 0 auto !important;
	width: calc((100% - 26px * 5) / 6) !important;
	max-width: calc((100% - 26px * 5) / 6) !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	display: flex !important;
	flex-direction: column !important;
	text-align: center !important;
}

section.related.products > ul > li a,
section.upsells.products > ul > li a { display: block !important; }

section.related.products > ul > li img,
section.upsells.products > ul > li img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	margin: 0 0 var(--yp-sp-4) !important;
	display: block !important;
}

section.related.products > ul > li .yp-card__title,
section.upsells.products > ul > li .yp-card__title,
section.related.products > ul > li h2,
section.upsells.products > ul > li h2 {
	font-family: var(--yp-font-body) !important;
	font-weight: 500 !important;
	font-size: var(--yp-fs-sm) !important;
	line-height: 1.4 !important;
	text-transform: uppercase !important;
	text-align: center !important;
	margin: 0 0 var(--yp-sp-3) !important;
	min-height: 0 !important;
	overflow-wrap: break-word !important;
}
section.related.products > ul > li .yp-card__title a,
section.upsells.products > ul > li .yp-card__title a { color: var(--yp-black) !important; }

section.related.products > ul > li .yp-card__price,
section.upsells.products > ul > li .yp-card__price,
section.related.products > ul > li .price,
section.upsells.products > ul > li .price {
	font-family: var(--yp-font-body) !important;
	font-weight: 700 !important;
	font-size: var(--yp-fs-base) !important;
	color: var(--yp-black) !important;
	text-align: center !important;
	margin: 0 !important;
}

section.related.products > ul > li .button,
section.upsells.products > ul > li .button { display: none !important; }

.single-product .related > h2,
.single-product .upsells > h2 {
	text-align: center !important;
	margin: 0 0 var(--yp-sp-7) !important;
}

@media (max-width: 1200px) {
	section.related.products > ul,
	section.upsells.products > ul { gap: 44px 22px !important; }
	section.related.products > ul > li,
	section.upsells.products > ul > li {
		width: calc((100% - 22px * 3) / 4) !important;
		max-width: calc((100% - 22px * 3) / 4) !important;
	}
}
@media (max-width: 900px) {
	section.related.products > ul > li,
	section.upsells.products > ul > li {
		width: calc((100% - 20px * 2) / 3) !important;
		max-width: calc((100% - 20px * 2) / 3) !important;
	}
}
@media (max-width: 560px) {
	section.related.products > ul,
	section.upsells.products > ul { gap: 34px 14px !important; }
	section.related.products > ul > li,
	section.upsells.products > ul > li {
		width: calc((100% - 14px) / 2) !important;
		max-width: calc((100% - 14px) / 2) !important;
	}
}


/* ==========================================================================
   ★★★ 抽屉中栏：改成纵向排列（对齐参考站）
   标题 → 规格 → 折扣说明 → 数量框 → Remove，各自一行
   ========================================================================== */
.yp-drawer__info {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: center !important;
	gap: 0 !important;
	min-width: 0 !important;
}

.yp-drawer__name {
	display: block !important;
	margin: 0 0 8px !important;
}

/* 规格 / 变体那行（如果有） */
.yp-drawer__variant,
.yp-drawer__info .variation {
	display: block !important;
	margin: 0 0 8px !important;
	font-size: var(--yp-fs-sm) !important;
	color: var(--yp-grey-700) !important;
}

/* 折扣说明 */
.yp-drawer__save {
	display: block !important;
	margin: 0 0 14px !important;
}

/* 数量框：自己一行，左对齐 */
.yp-drawer__info .yp-qty {
	display: inline-flex !important;
	margin: 0 0 12px !important;
	align-self: flex-start !important;
}

/* Remove：再一行 */
.yp-drawer__info .yp-drawer__remove {
	display: inline-block !important;
	margin: 0 !important;
	align-self: flex-start !important;
}

/* 整体行高松一点 */
.yp-drawer__item { align-items: center !important; }


/* 右栏第三行：这一行的总价（单价 × 数量） */
.yp-drawer__line {
	display: block;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--yp-grey-200);
	font-family: var(--yp-font-head);
	font-weight: 900;
	font-size: var(--yp-fs-xl);
	color: var(--yp-black);
	white-space: nowrap;
}
.yp-drawer__figures { align-items: flex-end !important; }
.yp-drawer__figures del { order: 1; }
.yp-drawer__now    { order: 2; }
.yp-drawer__line   { order: 3; }


/* ==========================================================================
   ★ 右栏：总原价（划线）+ 折后总价
   ========================================================================== */
.yp-drawer__figures del {
	font-size: var(--yp-fs-lg) !important;
	color: var(--yp-grey-500) !important;
	font-weight: 500 !important;
	text-decoration-thickness: 1.5px;
}
.yp-drawer__line {
	margin-top: 10px !important;
	padding-top: 10px !important;
	border-top: 1px solid var(--yp-grey-200) !important;
	font-family: var(--yp-font-head) !important;
	font-weight: 900 !important;
	font-size: var(--yp-fs-2xl) !important;
	color: var(--yp-black) !important;
	white-space: nowrap;
}
/* 已经没有这一行了，保险起见隐藏 */
.yp-drawer__now { display: none !important; }


/* ==========================================================================
   ★ 抽屉里的商品名：再小一号
   ========================================================================== */
.yp-drawer__name,
.yp-drawer__info .yp-drawer__name {
	font-size: var(--yp-fs-base) !important;   /* 21px → 16px */
	line-height: 1.4 !important;
	font-weight: 600 !important;
	margin-bottom: 8px !important;
}
@media (max-width: 767px) {
	.yp-drawer__name,
	.yp-drawer__info .yp-drawer__name { font-size: var(--yp-fs-sm) !important; }
}


/* ==========================================================================
   ★★ 清掉商品页右栏多余的横线
   ── 隐藏简短描述后，它的分隔线还留着
   ========================================================================== */
.single-product div.product .summary > * {
	border-top: 0 !important;
	border-bottom: 0 !important;
}

/* 只保留折叠面板自己的上下两条线 */
.single-product div.product .summary .yp-accordion__item {
	border-top: 2px solid var(--yp-black) !important;
	border-bottom: 0 !important;
}
.single-product div.product .summary .yp-accordion__q {
	border-bottom: 2px solid var(--yp-black) !important;
}

/* 明确藏掉这些遗留元素 */
.woocommerce-product-details__short-description,
.single-product .product_meta,
.single-product .yp-trust,
.single-product .yp-shipinfo,
.single-product .summary hr,
.single-product .woocommerce-tabs hr {
	display: none !important;
	border: 0 !important;
}

/* 描述/规格面板里的表格线保留 */
.single-product .yp-specs__table th,
.single-product .yp-specs__table td { border-bottom: 1px solid var(--yp-grey-200) !important; }

/* 购物车抽屉里的分隔线保留 */
.yp-drawer__item { border-bottom: 1px solid var(--yp-grey-200) !important; }
.yp-drawer__figures del,
.yp-drawer__line { border-top: 1px solid var(--yp-grey-200) !important; }
.yp-drawer__line { border-top-width: 1px !important; }


/* ==========================================================================
   ★ Description / Specifications 折叠面板：往上移，减少和加购区的距离
   ========================================================================== */
.single-product div.product .summary .yp-accordion,
.single-product div.product .summary .yp-accordion__item,
.summary .yp-accordion__item {
	margin-top: 6px !important;
	padding-top: 0 !important;
}

.single-product div.product .summary .yp-accordion {
	padding-top: 4px !important;
}

/* 加购区下方的提示文字收紧 */
.yp-buybox__note { margin-top: 8px !important; margin-bottom: 0 !important; }
.yp-buybox { margin-bottom: 8px !important; }

/* 加购区自己的下边距也收掉 */
.single-product div.product .summary .yp-buybox,
.single-product div.product .summary form.cart { margin-bottom: 6px !important; }

/* 折叠面板上面的线紧贴内容 */
.summary .yp-accordion__q { padding-top: 14px !important; padding-bottom: 14px !important; }

/* Specifications 跟在 Description 后面，间距也收紧 */
.summary .yp-specs { margin-top: 0 !important; }


/* ==========================================================================
   ★ 商品页主价格改成绿色（和 logo 呼应）
   ========================================================================== */
.single-product div.product .summary .price,
.single-product div.product .summary .price .woocommerce-Price-amount,
.single-product div.product .summary .price ins,
.single-product div.product .summary .price del {
	color: #4eb960 !important;
}
.single-product div.product .summary .price del {
	opacity: .55;
}

/* 阶梯价里的单价和小计也一起绿（可选，保持一致） */
.single-product .yp-tier__total,
.single-product .yp-tier.is-active .yp-tier__total {
	color: #4eb960 !important;
}


/* ==========================================================================
   ★ 商品页：主价格绿（logo 绿）+ 阶梯价小计黄（logo 黄）
   ========================================================================== */
/* 主价格 —— 保持绿色 */
.single-product div.product .summary .price,
.single-product div.product .summary .price .woocommerce-Price-amount {
	color: #4eb960 !important;
}

/* 阶梯价的小计 —— logo 黄色 */
.single-product .yp-tier__total,
.single-product .yp-tier.is-active .yp-tier__total,
.single-product .yp-tier__total .woocommerce-Price-amount {
	color: #e8d94a !important;      /* logo 黄，白底上也能看清 */
}

/* 单价那行保持灰色 */
.single-product .yp-tier__unit { color: var(--yp-grey-700) !important; }


/* ==========================================================================
   ★★★ 购物车抽屉里的价格配色
   · 第一个（划线总原价）  → 绿色
   · 第二个（折后总价）    → logo 黄
   ========================================================================== */
.yp-drawer__figures del,
.yp-drawer__figures del .woocommerce-Price-amount {
	color: #4eb960 !important;          /* 绿色 */
	opacity: 1 !important;
	font-weight: 600 !important;
}

.yp-drawer__line,
.yp-drawer__line .woocommerce-Price-amount {
	color: #e8d94a !important;          /* logo 黄 */
	font-weight: 900 !important;
}

/* ==========================================================================
   商品页阶梯价改回绿色（刚才改错地方了）
   ========================================================================== */
.single-product .yp-tier__total,
.single-product .yp-tier.is-active .yp-tier__total,
.single-product .yp-tier__total .woocommerce-Price-amount {
	color: #4eb960 !important;
}


/* ==========================================================================
   ★★★ 购物车抽屉：去掉所有灰色分隔线
   ========================================================================== */
.yp-drawer__item,
.yp-drawer__item:last-child,
.yp-drawer__line,
.yp-drawer__figures del,
.yp-drawer__total,
.yp-drawer__total strong,
.yp-drawer__note,
.yp-drawer__body,
.yp-drawer__panel {
	border-top: 0 !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

/* 保留头部标题下面那条黑线（参考站也有） */
.yp-drawer__ship { border-bottom: 2px solid var(--yp-black) !important; }

/* 去掉线之后，用间距区分区块 */
.yp-drawer__item { padding: var(--yp-sp-5) 0 !important; }
.yp-drawer__total { padding-bottom: 0 !important; margin-bottom: var(--yp-sp-5) !important; }
.yp-drawer__note { margin-top: 0 !important; }


/* ==========================================================================
   ★ 购物车折后总价：用 logo 原色黄 #f6f588
   ========================================================================== */
.yp-drawer__line,
.yp-drawer__line .woocommerce-Price-amount {
	color: #f6f588 !important;
	font-weight: 900 !important;
	/* 白底上这个黄很浅，加一点描边保证能看清 */
	-webkit-text-stroke: 0.4px rgba(0, 0, 0, .35);
	text-shadow: 0 0 1px rgba(0, 0, 0, .25);
}


/* ==========================================================================
   ★ 购物车折后总价：黑底 + logo 黄字
   ========================================================================== */
.yp-drawer__line,
.yp-drawer__line .woocommerce-Price-amount {
	background: #000000 !important;
	color: #f6f588 !important;
	font-weight: 900 !important;
	-webkit-text-stroke: 0 !important;
	text-shadow: none !important;
}

.yp-drawer__line {
	display: inline-block !important;
	padding: 9px 18px !important;
	border-radius: 999px !important;
	border: 0 !important;
	margin-top: 10px !important;
	font-family: var(--yp-font-head) !important;
	font-size: var(--yp-fs-xl) !important;
	line-height: 1 !important;
	white-space: nowrap;
}

/* 黑底块右对齐 */
.yp-drawer__figures { align-items: flex-end !important; }


/* ==========================================================================
   ★ 购物车折后总价：黑底改直角（不要胶囊，像 logo 那样）
   ========================================================================== */
.yp-drawer__line {
	border-radius: 0 !important;
	padding: 8px 16px !important;
	display: inline-block !important;
	box-shadow: none !important;
}


/* ==========================================================================
   ★ 购物车折后总价：去掉黑底，只留 logo 黄字
   ========================================================================== */
.yp-drawer__line,
.yp-drawer__line .woocommerce-Price-amount {
	background: transparent !important;
	background-color: transparent !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #f6f588 !important;
	font-family: var(--yp-font-head) !important;
	font-weight: 900 !important;
	font-size: var(--yp-fs-2xl) !important;
	line-height: 1 !important;
	display: block !important;
	margin-top: 10px !important;
	-webkit-text-stroke: 0.4px rgba(0, 0, 0, .35);
	text-shadow: 0 0 1px rgba(0, 0, 0, .2);
}
.yp-drawer__figures { align-items: flex-end !important; }


/* ==========================================================================
   ★ 购物车折后总价：也改成绿色
   ========================================================================== */
.yp-drawer__line,
.yp-drawer__line .woocommerce-Price-amount {
	color: #4eb960 !important;
	-webkit-text-stroke: 0 !important;
	text-shadow: none !important;
}
.yp-drawer__figures del,
.yp-drawer__figures del .woocommerce-Price-amount {
	color: #4eb960 !important;
}


/* ==========================================================================
   ★ 变量商品：变体选择器样式（选口味 → 换图 + 换价）
   ========================================================================== */
.yp-variable-box { margin-top: var(--yp-sp-5); }

/* 标签 */
.yp-variable-box .woocommerce-variation-availability,
.yp-variable-box .stock { font-size: var(--yp-fs-sm); }

/* 下拉框：和站点其他输入框一致 */
.yp-variable-box table.variations {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--yp-sp-4) !important;
}
.yp-variable-box table.variations tr { display: block; margin-bottom: 14px; }
.yp-variable-box table.variations th,
.yp-variable-box table.variations td {
	display: block;
	padding: 0 !important;
	text-align: left !important;
}
.yp-variable-box table.variations th.label label {
	display: block;
	font-family: var(--yp-font-head);
	font-weight: 900;
	font-size: var(--yp-fs-sm);
	text-transform: uppercase;
	margin-bottom: 8px;
}
.yp-variable-box table.variations select {
	width: 100% !important;
	max-width: 100% !important;
	padding: 16px 48px 16px 22px !important;
	border: 2px solid var(--yp-black) !important;
	border-radius: var(--yp-radius-pill) !important;
	background-color: var(--yp-white) !important;
	color: var(--yp-black) !important;
	font-family: var(--yp-font-body) !important;
	font-size: var(--yp-fs-base) !important;
	line-height: 1.3 !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 18px center !important;
	background-size: 16px 16px !important;
	cursor: pointer;
	outline: none !important;
}
.yp-variable-box table.variations select:focus {
	outline: 2px dashed var(--yp-black) !important;
	outline-offset: 4px !important;
}

/* 选中后显示的变体价格 */
.yp-variable-box .woocommerce-variation-price {
	margin: 0 0 var(--yp-sp-4) !important;
	padding: 0 !important;
}
.yp-variable-box .woocommerce-variation-price .price,
.yp-variable-box .woocommerce-variation-price .price .woocommerce-Price-amount {
	color: #4eb960 !important;
	font-family: var(--yp-font-body) !important;
	font-weight: 700 !important;
	font-size: var(--yp-fs-xl) !important;
}

/* 变体描述 */
.yp-variable-box .woocommerce-variation-description p {
	font-size: var(--yp-fs-sm);
	color: var(--yp-grey-700);
	line-height: 1.6;
	margin: 0 0 var(--yp-sp-4);
}

/* 重量/尺寸等 */
.yp-variable-box .woocommerce-variation-availability p { margin: 0 0 12px; }

/* 加购区：数量框 + 按钮 */
.yp-variable-box .woocommerce-variation-add-to-cart,
.yp-variable-box .single_variation_wrap .woocommerce-variation-add-to-cart {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	gap: 12px !important;
	margin-top: var(--yp-sp-4) !important;
}
.yp-variable-box .quantity {
	display: inline-flex !important;
	align-items: center !important;
	height: auto !important;
	min-height: 58px !important;
	border: 1.5px solid var(--yp-black) !important;
	border-radius: var(--yp-radius-pill) !important;
	padding: 0 6px !important;
	background: var(--yp-white) !important;
}
.yp-variable-box .quantity input.qty {
	width: 82px !important;
	min-width: 82px !important;
	height: auto !important;
	border: 0 !important;
	background: transparent !important;
	text-align: center !important;
	font-size: var(--yp-fs-base) !important;
	-moz-appearance: textfield;
	appearance: textfield;
}
.yp-variable-box .quantity input.qty::-webkit-outer-spin-button,
.yp-variable-box .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.yp-variable-box .single_add_to_cart_button,
.yp-variable-box button.button.alt {
	flex: 1 1 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 58px !important;
	padding: 0 42px !important;
	border: 2px solid var(--yp-black) !important;
	border-radius: var(--yp-radius-pill) !important;
	background: var(--yp-black) !important;
	color: var(--yp-white) !important;
	font-family: var(--yp-font-head) !important;
	font-weight: 900 !important;
	font-size: var(--yp-fs-sm) !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	cursor: pointer;
}
.yp-variable-box .single_add_to_cart_button:hover,
.yp-variable-box button.button.alt:hover {
	background: var(--yp-white) !important;
	color: var(--yp-black) !important;
}
.yp-variable-box .single_add_to_cart_button.disabled,
.yp-variable-box .single_add_to_cart_button:disabled {
	opacity: .4 !important;
	cursor: not-allowed;
}

/* 缺货提示 */
.yp-variable-box .woocommerce-variation-availability .out-of-stock { color: var(--yp-black) !important; }

@media (max-width: 560px) {
	.yp-variable-box .woocommerce-variation-add-to-cart { flex-direction: column !important; }
	.yp-variable-box .quantity { width: 100% !important; justify-content: center !important; }
	.yp-variable-box .single_add_to_cart_button { width: 100% !important; }
}


/* 变量商品的折扣档位说明 */
.yp-tier-note {
	margin-top: var(--yp-sp-5);
	padding-top: var(--yp-sp-4);
	border-top: 1px solid var(--yp-grey-200);
}
.yp-tier-note__title {
	font-family: var(--yp-font-head);
	font-weight: 900;
	font-size: var(--yp-fs-sm);
	text-transform: uppercase;
	margin: 0 0 var(--yp-sp-3) !important;
}
.yp-tier-note__list { list-style: none; margin: 0 0 var(--yp-sp-3) !important; padding: 0 !important; }
.yp-tier-note__list li {
	display: flex;
	justify-content: space-between;
	padding: 9px 0;
	border-bottom: 1px solid var(--yp-grey-200);
	font-size: var(--yp-fs-sm);
}
.yp-tier-note__list li span { color: var(--yp-grey-700); }
.yp-tier-note__list li strong { color: #4eb960; font-weight: 700; }
.yp-tier-note__hint {
	font-size: var(--yp-fs-xs);
	color: var(--yp-grey-700);
	margin: 0 !important;
}


/* ==========================================================================
   ★★ 档位单选框：参考站样式（圆点 / 数量+折扣 / 价格+划线原价）
   ========================================================================== */
.yp-tiers .yp-tier {
	display: grid !important;
	grid-template-columns: 26px 1fr auto !important;
	align-items: center !important;
	gap: 16px !important;
	padding: 18px 24px !important;
	border: 2px solid var(--yp-black) !important;
	border-radius: var(--yp-radius-md) !important;
	background: var(--yp-white) !important;
	cursor: pointer;
	transition: background-color .15s ease;
}
.yp-tiers .yp-tier + .yp-tier { margin-top: 12px; }
.yp-tiers .yp-tier.is-active { background: var(--yp-grey-100) !important; }

.yp-tiers .yp-tier input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* 圆点 */
.yp-tier__dot {
	display: block;
	width: 22px; height: 22px;
	border: 2px solid var(--yp-black);
	border-radius: 50%;
	position: relative;
}
.yp-tier.is-active .yp-tier__dot::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--yp-black);
}

.yp-tier__left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.yp-tier__qty {
	font-family: var(--yp-font-body);
	font-weight: 700;
	font-size: var(--yp-fs-base);
	color: var(--yp-black);
	text-transform: none;
}
.yp-tier__rate {
	font-family: var(--yp-font-body);
	font-weight: 500;
	font-size: var(--yp-fs-sm);
	color: var(--yp-grey-700);
	text-transform: none;
}

.yp-tier__prices {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
	text-align: right;
	white-space: nowrap;
}
.yp-tier__total {
	font-family: var(--yp-font-body);
	font-weight: 700;
	font-size: var(--yp-fs-lg);
	color: var(--yp-black);
}
.yp-tier__was {
	font-family: var(--yp-font-body);
	font-size: var(--yp-fs-sm);
	color: var(--yp-grey-500);
	text-decoration: line-through;
}

/* 旧的四列布局规则作废，避免打架 */
.yp-tiers .yp-tier__unit { display: none !important; }

@media (max-width: 560px) {
	.yp-tiers .yp-tier { padding: 14px 16px !important; gap: 12px !important; }
	.yp-tier__total { font-size: var(--yp-fs-base); }
}


/* ==========================================================================
   ★ 变量商品：隐藏「FLAVOR」标签，收掉旧的档位说明
   ========================================================================== */
.yp-variable-box table.variations th.label,
.yp-variable-box table.variations th,
.yp-variable-box .variations th.label label {
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
.yp-variable-box table.variations tr { margin-bottom: 0 !important; }

/* 旧版的「Buy more, save more」列表不再显示 */
.yp-tier-note { display: none !important; }

/* 档位块和下拉框之间留点空 */
.yp-tiers--variable { margin-top: var(--yp-sp-4) !important; }

/* 下拉框聚焦时不要虚线（和参考站一致） */
.yp-variable-box table.variations select:focus,
.yp-variable-box table.variations select:focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
}


/* ==========================================================================
   ★★ 档位单选框：收紧行高（原来太胖了）
   ========================================================================== */
.yp-tiers .yp-tier {
	padding: 12px 22px !important;
	gap: 14px !important;
	border-radius: 10px !important;
}
.yp-tiers .yp-tier + .yp-tier { margin-top: 10px !important; }

/* 左边：数量 + 折扣，两行贴紧 */
.yp-tier__left { gap: 2px !important; }
.yp-tier__qty { font-size: var(--yp-fs-base) !important; line-height: 1.25 !important; }
.yp-tier__rate { font-size: var(--yp-fs-sm) !important; line-height: 1.2 !important; }

/* 右边：价格 + 划线原价，两行贴紧 */
.yp-tier__prices { gap: 1px !important; }
.yp-tier__total { font-size: var(--yp-fs-lg) !important; line-height: 1.2 !important; }
.yp-tier__was { font-size: var(--yp-fs-sm) !important; line-height: 1.2 !important; }

/* 圆点略小 */
.yp-tier__dot { width: 20px !important; height: 20px !important; }

/* 变量商品的档位块整体间距 */
.yp-tiers--variable { margin: var(--yp-sp-4) 0 !important; }

@media (max-width: 560px) {
	.yp-tiers .yp-tier { padding: 10px 16px !important; gap: 12px !important; }
	.yp-tier__total { font-size: var(--yp-fs-base) !important; }
}


/* ==========================================================================
   ★★ NEWEST ADDITIONS 轮播 → 黑色横幅：中间空白太高，收紧
   ========================================================================== */
.yp-showcase {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}
.yp-showcase__foot {
	margin-top: var(--yp-sp-6) !important;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}
.yp-showcase__scroll,
.yp-showcase__track { padding-bottom: 0 !important; }

/* 黑色横幅的上边距也收掉 */
.yp-banner {
	margin-top: 0 !important;
	padding-top: var(--yp-sp-8) !important;
}
.yp-banner.yp-wave-top::before { margin-top: 0 !important; }

/* 轮播区块整体的下边距 */
section.yp-showcase + section,
.yp-showcase + .yp-banner { margin-top: 0 !important; }

/* 波浪紧贴 */
.yp-banner.yp-wave-top { margin-top: 0 !important; }

@media (max-width: 767px) {
	.yp-showcase__foot { margin-top: var(--yp-sp-5) !important; }
	.yp-banner { padding-top: var(--yp-sp-7) !important; }
}


/* ==========================================================================
   ★ NEWEST ADDITIONS 底部补一点空间（VIEW ALL 按钮被波浪挡住了一点）
   ========================================================================== */
.yp-showcase {
	padding-bottom: 34px !important;
}
.yp-showcase__foot {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}
.yp-showcase + .yp-banner { margin-top: 0 !important; }

@media (max-width: 767px) {
	.yp-showcase { padding-bottom: 26px !important; }
}


/* ==========================================================================
   ★ 变量商品：隐藏数量输入框（数量由档位单选框决定）
   ========================================================================== */
.yp-variable-box .quantity,
.yp-variable-box .woocommerce-variation-add-to-cart .quantity,
.yp-variable-box input.qty {
	display: none !important;
}

/* 按钮占满整行 */
.yp-variable-box .woocommerce-variation-add-to-cart {
	display: block !important;
}
.yp-variable-box .single_add_to_cart_button {
	width: 100% !important;
	min-height: 62px !important;
}

/* 提示文字也不显示（PHP 已删，这里兜底） */
.yp-variable-box + .yp-buybox__note,
.yp-variable-box .yp-buybox__note { display: none !important; }


/* ==========================================================================
   ★★★ 简单商品：和变量商品统一
   · 隐藏数量框（数量由档位单选框决定）
   · ADD TO CART 整行满宽
   · 档位和按钮竖排
   ========================================================================== */
.single-product .yp-buybox__row,
.single-product .yp-buybox form.cart,
.single-product .yp-buybox .cart {
	display: block !important;
}
.single-product .yp-buybox .yp-qty,
.single-product .yp-buybox .quantity,
.single-product .yp-buybox input.qty {
	display: none !important;
}

.single-product .yp-buybox .yp-btn,
.single-product .yp-buybox button[type="submit"],
.single-product .yp-buybox .single_add_to_cart_button {
	display: flex !important;
	width: 100% !important;
	min-height: 62px !important;
	align-items: center !important;
	justify-content: center !important;
	margin-top: var(--yp-sp-4) !important;
}

/* 档位块下面留一点空 */
.single-product .yp-tiers { margin: var(--yp-sp-4) 0 !important; }

/* 那两个商品的隐藏说明也去掉 */
.single-product .yp-buybox__note { display: none !important; }


/* ==========================================================================
   ★ 隐藏变量商品的「Clear」链接
   ========================================================================== */
.reset_variations,
a.reset_variations,
.yp-variable-box .reset_variations {
	display: none !important;
	visibility: hidden !important;
}


/* ==========================================================================
   ★ 搜索结果里的「页面」卡片（没图片的那种）居中显示
   ========================================================================== */
.yp-searchpage__results .yp-grid {
	justify-content: center !important;
}

/* 页面类结果：居中、限制宽度、像个卡片 */
.yp-searchpage__results .yp-card:not(:has(img)) {
	flex: 0 0 auto !important;
	width: min(560px, 100%) !important;
	max-width: min(560px, 100%) !important;
	margin-inline: auto !important;
	padding: var(--yp-sp-5) var(--yp-sp-5) !important;
	border: 2px solid var(--yp-black) !important;
	border-radius: var(--yp-radius-md) !important;
	text-align: center !important;
}
.yp-searchpage__results .yp-card:not(:has(img)) .yp-card__title {
	text-align: center !important;
	font-family: var(--yp-font-head) !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	font-size: var(--yp-fs-lg) !important;
	margin: 0 0 var(--yp-sp-3) !important;
}
.yp-searchpage__results .yp-card:not(:has(img)) .yp-card__price {
	text-align: center !important;
	color: var(--yp-grey-700) !important;
	font-weight: 500 !important;
}

/* 商品结果仍然左对齐（和分类网格一致） */
.yp-searchpage__results .yp-card:has(img) { width: calc((100% - 28px * 3) / 4) !important; max-width: calc((100% - 28px * 3) / 4) !important; }
.yp-searchpage__results .yp-grid:has(.yp-card:has(img)) { justify-content: flex-start !important; }


/* ==========================================================================
   ★★★ 搜索结果 / 商品网格：一律左对齐（不居中）
   ── 之前为了让页面卡片居中，给整个网格加了 justify-content: center，
      结果商品不多时也被居中了。
   ========================================================================== */
.yp-searchpage__results .yp-grid,
.yp-searchpage__results .yp-grid:has(img),
.yp-grid,
ul.products {
	justify-content: flex-start !important;
}

/* 页面卡片（没图片的）单独居中，不影响网格 */
.yp-searchpage__results .yp-card:not(:has(img)) {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 商品卡片恢复 4 列宽度 */
.yp-searchpage__results .yp-card:has(img) {
	flex: 0 0 auto !important;
	width: calc((100% - 28px * 3) / 4) !important;
	max-width: calc((100% - 28px * 3) / 4) !important;
}

@media (max-width: 1024px) {
	.yp-searchpage__results .yp-card:has(img) {
		width: calc((100% - 22px * 2) / 3) !important;
		max-width: calc((100% - 22px * 2) / 3) !important;
	}
}
@media (max-width: 767px) {
	.yp-searchpage__results .yp-card:has(img) {
		width: calc((100% - 16px) / 2) !important;
		max-width: calc((100% - 16px) / 2) !important;
	}
}


/* ==========================================================================
   ★ 隐藏「N results for "xxx"」那行
   ========================================================================== */
.yp-searchpage__count,
.yp-searchpage__inner > .yp-searchpage__count {
	display: none !important;
}


/* ==========================================================================
   ★ 商品图缩略图：选中态的黑框要完整显示（原来被裁掉上下）
   ========================================================================== */
.single-product div.product .flex-control-thumbs,
.single-product div.product .flex-control-thumbs li,
.woocommerce-product-gallery .flex-control-thumbs,
.woocommerce-product-gallery .flex-control-thumbs li {
	overflow: visible !important;
}

/* 改用内描边，不再用 outline（outline 会被 overflow 裁掉） */
.single-product div.product .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	outline: 0 !important;
	outline-offset: 0 !important;
	border: 2px solid var(--yp-black) !important;
	box-shadow: none !important;
}

.single-product div.product .flex-control-thumbs img,
.woocommerce-product-gallery .flex-control-thumbs img {
	border: 2px solid transparent !important;
	border-radius: var(--yp-radius-sm) !important;
	box-sizing: border-box !important;
}

/* 缩略图容器留一点内边距，避免贴边 */
.single-product div.product .flex-control-thumbs,
.woocommerce-product-gallery .flex-control-thumbs {
	padding: 4px !important;
	gap: 10px !important;
}


/* ==========================================================================
   ★ 变量商品：口味按钮（替代下拉框）
   ========================================================================== */
.yp-variable-box table.variations select {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
	overflow: hidden !important;
}
.yp-variable-box table.variations td.value { position: relative !important; }

.yp-vbtns {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin: 0 0 var(--yp-sp-4) !important;
}

.yp-vbtn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 12px 22px !important;
	border: 2px solid var(--yp-black) !important;
	border-radius: 999px !important;
	background: var(--yp-white) !important;
	color: var(--yp-black) !important;
	font-family: var(--yp-font-body) !important;
	font-weight: 600 !important;
	font-size: var(--yp-fs-sm) !important;
	line-height: 1 !important;
	text-transform: none !important;
	cursor: pointer !important;
	transition: background-color .15s ease, color .15s ease !important;
}
.yp-vbtn:hover { background: var(--yp-grey-100) !important; }
.yp-vbtn.is-active {
	background: var(--yp-black) !important;
	color: var(--yp-white) !important;
}

@media (max-width: 560px) {
	.yp-vbtn { padding: 10px 16px !important; font-size: var(--yp-fs-xs) !important; }
	.yp-vbtns { gap: 8px !important; }
}


/* ==========================================================================
   ★ 阶梯价的数字「减瘦」
   ── 原来 .yp-tier__total 是 font-weight:700 + 大字号，笔画太肥，
      和细线的划线原价／参考站的字重不搭。降到 500（正文常规偏中等），
      字号不动，只把笔画收细。
   ========================================================================== */
.yp-tiers .yp-tier__total,
.single-product .yp-tier__total,
.single-product .yp-tier.is-active .yp-tier__total,
.single-product .yp-tier__total .woocommerce-Price-amount {
	font-weight: 500 !important;
	letter-spacing: -0.01em !important;
}

/* 划线原价跟着更轻一点，别抢视线 */
.yp-tiers .yp-tier__was,
.single-product .yp-tier__was {
	font-weight: 400 !important;
}


/* ==========================================================================
   ★★★ 结账页订单摘要：参考站的卡片式（2026-09-22）
   · 每件商品一行：缩略图 + 数量角标 / 名称 + 口味 + 优惠行 / 划线原价 + 绿色实付
   · 折扣码输入框 / Subtotal · N items / Shipping / Total / Total savings
   ========================================================================== */

/* 容器：圆角卡片 */
body.woocommerce-checkout #order_review {
	padding: 22px 24px;
	border: 1.5px solid var(--yp-grey-200);
	border-radius: 14px;
	background: var(--yp-white);
}
body.woocommerce-checkout #order_review .shop_table,
body.woocommerce-checkout #order_review .shop_table tbody,
body.woocommerce-checkout #order_review .shop_table tfoot { display: block; width: 100%; }
body.woocommerce-checkout #order_review .shop_table thead { display: none; }

/* 商品行：三栏网格 */
body.woocommerce-checkout #order_review .shop_table tbody tr.cart_item {
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr) auto;
	grid-template-areas: "media text prices";
	gap: 18px;
	align-items: start;
	padding: 18px 0;
	border-bottom: 1px solid var(--yp-grey-200);
}
body.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td {
	padding: 0 !important;
	border: 0 !important;
	vertical-align: top;
}
/* 名称格里我们塞了两段，让它们直接落进网格 */
body.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.product-name { display: contents; }
/* WooCommerce 自带的「× 100」和变体 dl 我们自己做，隐藏掉避免重复 */
body.woocommerce-checkout #order_review .shop_table tbody tr.cart_item .product-quantity,
body.woocommerce-checkout #order_review .shop_table tbody tr.cart_item dl.variation { display: none !important; }

/* 缩略图 + 数量角标 */
body.woocommerce-checkout #order_review .yp-sum__media {
	grid-area: media; position: relative; display: block; line-height: 0;
}
body.woocommerce-checkout #order_review .yp-sum__media img {
	width: 78px; height: 78px; object-fit: cover;
	border: 1px solid var(--yp-grey-200); border-radius: 12px; background: var(--yp-grey-100);
}
body.woocommerce-checkout #order_review .yp-sum__qty {
	position: absolute; top: -9px; left: -9px;
	min-width: 28px; height: 28px; padding: 0 7px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px; background: var(--yp-black); color: var(--yp-white);
	font-family: var(--yp-font-body); font-size: 12px; font-weight: 700; line-height: 1;
}

/* 文字栏 */
body.woocommerce-checkout #order_review .yp-sum__text {
	grid-area: text; display: flex; flex-direction: column; gap: 5px; min-width: 0;
}
body.woocommerce-checkout #order_review .yp-sum__name {
	font-family: var(--yp-font-body); font-weight: 600;
	font-size: var(--yp-fs-sm); line-height: 1.35; color: var(--yp-black);
}
body.woocommerce-checkout #order_review .yp-sum__variant {
	font-size: var(--yp-fs-sm); color: var(--yp-grey-500); line-height: 1.3;
}
body.woocommerce-checkout #order_review .yp-sum__save {
	display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
	font-size: var(--yp-fs-xs); font-weight: 600; letter-spacing: .02em;
	color: var(--yp-grey-500); text-transform: uppercase;
}
body.woocommerce-checkout #order_review .yp-sum__save::before {
	content: ""; width: 15px; height: 15px; flex: 0 0 15px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.6' cy='7.6' r='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.6' cy='7.6' r='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 右侧价格 */
body.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.product-total {
	grid-area: prices; text-align: right !important;
}
body.woocommerce-checkout #order_review .yp-sum__prices {
	display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap;
}
body.woocommerce-checkout #order_review .yp-sum__prices del,
body.woocommerce-checkout #order_review .yp-sum__prices del .woocommerce-Price-amount {
	color: var(--yp-grey-500) !important; font-size: var(--yp-fs-sm) !important; text-decoration: line-through;
}
body.woocommerce-checkout #order_review .yp-sum__now,
body.woocommerce-checkout #order_review .yp-sum__now .woocommerce-Price-amount {
	color: #4eb960 !important; font-weight: 700 !important; font-size: var(--yp-fs-base) !important;
}

/* 折扣码行：2026-09-22 按你的要求去掉（PHP 里也不再输出，这里兜底隐藏） */
body.woocommerce-checkout #order_review .yp-sum__coupon-row { display: none !important; }

/* 底部汇总行 */
body.woocommerce-checkout #order_review .shop_table tfoot tr {
	display: flex !important; align-items: center; justify-content: space-between;
	gap: 16px; padding: 11px 0 !important; border: 0 !important;
}
body.woocommerce-checkout #order_review .shop_table tfoot th,
body.woocommerce-checkout #order_review .shop_table tfoot td {
	padding: 0 !important; border: 0 !important; text-align: left !important;
	font-weight: 500 !important; font-size: var(--yp-fs-base) !important; color: var(--yp-black);
}
body.woocommerce-checkout #order_review .shop_table tfoot td { text-align: right !important; }
body.woocommerce-checkout #order_review .shop_table tfoot tr:first-child { padding-top: 14px !important; }
body.woocommerce-checkout #order_review .shop_table tfoot tr.order-total {
	margin-top: 4px; padding-top: 14px !important; border-top: 1px solid var(--yp-grey-200) !important;
}
body.woocommerce-checkout #order_review .shop_table tfoot tr.order-total th,
body.woocommerce-checkout #order_review .shop_table tfoot tr.order-total td,
body.woocommerce-checkout #order_review .shop_table tfoot tr.order-total .woocommerce-Price-amount {
	font-family: var(--yp-font-head) !important; font-weight: 900 !important; font-size: var(--yp-fs-2xl) !important;
}
/* 一共省了多少 */
body.woocommerce-checkout #order_review .shop_table tfoot tr.yp-sum__savings th,
body.woocommerce-checkout #order_review .shop_table tfoot tr.yp-sum__savings td,
body.woocommerce-checkout #order_review .shop_table tfoot tr.yp-sum__savings .woocommerce-Price-amount {
	color: var(--yp-black) !important; font-weight: 700 !important;
}
body.woocommerce-checkout #order_review .shop_table tfoot tr.yp-sum__savings th {
	display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase;
	letter-spacing: .03em; font-size: var(--yp-fs-sm) !important;
}
body.woocommerce-checkout #order_review .shop_table tfoot tr.yp-sum__savings th::before {
	content: ""; width: 16px; height: 16px; flex: 0 0 16px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.6' cy='7.6' r='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.6' cy='7.6' r='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (max-width: 560px) {
	body.woocommerce-checkout #order_review { padding: 16px; }
	body.woocommerce-checkout #order_review .shop_table tbody tr.cart_item { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; }
	body.woocommerce-checkout #order_review .yp-sum__media img { width: 64px; height: 64px; }
	body.woocommerce-checkout #order_review .shop_table tfoot tr.order-total th,
	body.woocommerce-checkout #order_review .shop_table tfoot tr.order-total td,
	body.woocommerce-checkout #order_review .shop_table tfoot tr.order-total .woocommerce-Price-amount { font-size: var(--yp-fs-xl) !important; }
}


/* ==========================================================================
   ★★ 结账页：提示框 + Email/WhatsApp 合并成同一个框（2026-09-22）
   ========================================================================== */
body.woocommerce-checkout .yp-checkout-card {
	max-width: 860px;
	margin: 0 auto var(--yp-sp-6);
	padding: var(--yp-sp-5);
	border: 2px solid var(--yp-black);
	border-radius: var(--yp-radius-lg);
	background: var(--yp-white);
}
/* 卡片里的提示：不要自己的边框，也不画分隔线（2026-09-22 按你的要求去掉那条灰线） */
body.woocommerce-checkout .yp-checkout-card .yp-notice {
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 0 var(--yp-sp-5) !important;
	border-bottom: 0 !important;
}
body.woocommerce-checkout .yp-checkout-card .yp-notice p:last-child { margin-bottom: 0 !important; }
body.woocommerce-checkout .yp-checkout-card #customer_details { margin: 0 !important; }
body.woocommerce-checkout .yp-checkout-card #customer_details .col-1,
body.woocommerce-checkout .yp-checkout-card #customer_details .col-2 { width: 100% !important; float: none !important; }


/* 优惠行：图标和文字之间要间距，但「(−$36.00)」里面不要多出空格
   （之前用 inline-flex + gap，把价格 span 也当成 flex 项了） */
body.woocommerce-checkout #order_review .yp-sum__save {
	display: inline !important; gap: 0 !important;
}
body.woocommerce-checkout #order_review .yp-sum__save::before {
	display: inline-block !important; vertical-align: -2px; margin-right: 5px;
}


/* ==========================================================================
   ★ 感谢页付款引导：分步骤说明（小标题 + 有序列表 + 例子）
   ========================================================================== */
.yp-pay__note .yp-pay__h {
	font-family: var(--yp-font-head); font-weight: 900;
	font-size: var(--yp-fs-sm); text-transform: uppercase; letter-spacing: .02em;
	margin: var(--yp-sp-5) 0 10px;
}
.yp-pay__note .yp-pay__h:first-child { margin-top: 0; }
.yp-pay__note p { margin-bottom: 10px; }
.yp-pay__note p:last-child { margin-bottom: 0; }
.yp-pay__note ol { margin: 0 0 var(--yp-sp-4); padding-left: 22px; }
.yp-pay__note ol li { margin-bottom: 8px; }
.yp-pay__note ol li:last-child { margin-bottom: 0; }


/* ★ TOTAL SAVINGS 这一行：金额跟着标签放左边（原来被 justify-content 推到最右边） */
body.woocommerce-checkout #order_review .shop_table tfoot tr.yp-sum__savings {
	justify-content: flex-start !important;
	gap: 12px !important;
}
body.woocommerce-checkout #order_review .shop_table tfoot tr.yp-sum__savings td {
	flex: 0 0 auto !important;
	text-align: left !important;
}


/* ★ 结账提交按钮：圆角再圆一点（WooCommerce 默认只有 3px） */
body.woocommerce-checkout #place_order,
body.woocommerce-checkout #place_order.button.alt {
	border-radius: var(--yp-radius-md) !important;
}

/* ★ 提示框的 ⚠️ 图标放大一点 */
.yp-notice__icon {
	font-size: 1.5em;
	line-height: 1;
	vertical-align: -0.12em;
	margin-right: 6px;
}


/* ★ 隐私说明挪到提交按钮下面：间距上下调换一下 */
body.woocommerce-checkout .woocommerce-privacy-policy-text {
	margin: var(--yp-sp-4) 0 0 !important;
}


/* ★ terms 包装层：里面只剩占位就会空着，隐藏掉（以后真加了条款勾选框就不隐藏） */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper:not(:has(input[type="checkbox"])) {
	display: none !important;
}


/* ==========================================================================
   ★★ 结账页地址栏（渲染在提交按钮上面）：六列网格
   Country / Company / Address / Apartment / Phone = 整行（span 6）
   First / Last = 各占半行（span 3）；City / State / ZIP = 各占三分之一（span 2）
   ========================================================================== */
body.woocommerce-checkout #order_review .yp-sum__address {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px 12px;
	margin-top: var(--yp-sp-5);
	padding-top: var(--yp-sp-5);
	border-top: 1px solid var(--yp-grey-200);
}
body.woocommerce-checkout #order_review .yp-sum__address-title {
	grid-column: 1 / -1;
	margin: 0 0 2px !important;
	font-family: var(--yp-font-head); font-weight: 900;
	font-size: var(--yp-fs-sm); text-transform: uppercase; letter-spacing: .02em;
}
body.woocommerce-checkout #order_review .yp-sum__address .form-row {
	float: none !important; width: 100% !important;
	margin: 0 !important; padding: 0 !important;
}
body.woocommerce-checkout #order_review .yp-sum__address .form-row-wide { grid-column: span 6; }
body.woocommerce-checkout #order_review .yp-sum__address .form-row-first,
body.woocommerce-checkout #order_review .yp-sum__address .form-row-last { grid-column: span 3; }
body.woocommerce-checkout #order_review .yp-sum__address .yp-addr-third { grid-column: span 2; }

/* 标签在上、输入框在下，和上面 Email/WhatsApp 一致 */
body.woocommerce-checkout #order_review .yp-sum__address label {
	display: block; margin: 0 0 6px;
	font-size: var(--yp-fs-sm); font-weight: 600; color: var(--yp-black);
}
body.woocommerce-checkout #order_review .yp-sum__address .required { color: #c0392b; }
body.woocommerce-checkout #order_review .yp-sum__address input.input-text,
body.woocommerce-checkout #order_review .yp-sum__address select,
body.woocommerce-checkout #order_review .yp-sum__address textarea {
	width: 100% !important; height: 52px; padding: 0 16px !important;
	border: 1.5px solid var(--yp-grey-200) !important; border-radius: var(--yp-radius-md) !important;
	background: var(--yp-white) !important; color: var(--yp-black) !important;
	font-size: var(--yp-fs-sm) !important; box-shadow: none !important;
}
body.woocommerce-checkout #order_review .yp-sum__address select {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 15px 15px !important;
}
body.woocommerce-checkout #order_review .yp-sum__address input.input-text:focus,
body.woocommerce-checkout #order_review .yp-sum__address select:focus {
	border-color: var(--yp-black) !important;
	outline: none !important;
}
body.woocommerce-checkout #order_review .yp-sum__address .woocommerce-input-wrapper { display: block; width: 100%; }

@media (max-width: 560px) {
	body.woocommerce-checkout #order_review .yp-sum__address { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.woocommerce-checkout #order_review .yp-sum__address .form-row-wide,
	body.woocommerce-checkout #order_review .yp-sum__address .form-row-first,
	body.woocommerce-checkout #order_review .yp-sum__address .form-row-last,
	body.woocommerce-checkout #order_review .yp-sum__address .yp-addr-third { grid-column: span 2; }
}


/* ★ 地址栏现在在 #payment 里，去把 WooCommerce 给这个灰框的底色/内边距去掉，
     否则地址字段会压在一片灰上（整个结账卡片本来就是白的） */
body.woocommerce-checkout #order_review #payment {
	background: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
}
body.woocommerce-checkout #order_review #payment .form-row.place-order { padding: 0 !important; }
body.woocommerce-checkout #order_review #payment ul.wc_payment_methods { padding: 0 !important; }


/* ==========================================================================
   ★★★ 结账页改成参考站（mylarpackaging 那种 Shopify 结账）的两栏布局
   · 左栏：提示 + Contact（Email / WhatsApp）+ Delivery address
   · 右栏：Your order（商品 / 折扣码 / Subtotal / Shipping / Total / Total savings
           + 提交按钮 + 隐私说明），滚动时吸顶
   · 窄屏自动堆成一栏
   ========================================================================== */
body.woocommerce-checkout form.checkout {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
	gap: 36px;
	max-width: 1180px !important;
	align-items: start;
}
body.woocommerce-checkout .yp-checkout-card {
	grid-column: 1;
	grid-row: 1;
	max-width: none !important;
	margin: 0 !important;
}
body.woocommerce-checkout #order_review_heading { display: none !important; }
body.woocommerce-checkout #order_review {
	grid-column: 2;
	grid-row: 1;
	position: sticky;
	top: 22px;
	margin: 0 !important;
}
/* 右栏卡片顶部加「Your order」标题
   ── 2026-09-22 按用户要求去掉（卡片直接以商品列表开头，参考站也没有这个标题）
body.woocommerce-checkout #order_review::before {
	content: "Your order";
	display: block;
	font-family: var(--yp-font-head); font-weight: 900;
	font-size: var(--yp-fs-lg); line-height: 1.1; text-transform: uppercase;
	margin: 0 0 14px;
}
*/

/* —— 左栏：Contact + Delivery 的字段网格 —— */
body.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px 12px;
}
body.woocommerce-checkout #customer_details .form-row {
	float: none !important; width: 100% !important;
	margin: 0 !important; padding: 0 !important;
}
body.woocommerce-checkout #customer_details .form-row-wide { grid-column: span 6; }
body.woocommerce-checkout #customer_details .form-row-first,
body.woocommerce-checkout #customer_details .form-row-last { grid-column: span 3; }
body.woocommerce-checkout #customer_details .form-row.yp-addr-third { grid-column: span 2; }

/* 「Delivery address」小标题：用国家那个字段的 ::before 画出来，顺便加一条分隔线 */
body.woocommerce-checkout #customer_details #billing_country_field::before {
	content: "Delivery address";
	display: block;
	margin: 18px 0 4px;
	padding-top: 18px;
	border-top: 1px solid var(--yp-grey-200);
	font-family: var(--yp-font-head); font-weight: 900;
	font-size: var(--yp-fs-sm); text-transform: uppercase; letter-spacing: .02em;
}

/* 标签在上、输入框在下 */
body.woocommerce-checkout #customer_details .form-row label {
	display: block; margin: 0 0 6px;
	font-size: var(--yp-fs-sm); font-weight: 600; color: var(--yp-black);
}
body.woocommerce-checkout #customer_details .form-row .required { color: #c0392b; }
body.woocommerce-checkout #customer_details .form-row input.input-text,
body.woocommerce-checkout #customer_details .form-row select,
body.woocommerce-checkout #customer_details .form-row textarea {
	width: 100% !important; height: 52px; padding: 0 16px !important;
	border: 1.5px solid var(--yp-grey-200) !important; border-radius: var(--yp-radius-md) !important;
	background: var(--yp-white) !important; color: var(--yp-black) !important;
	font-size: var(--yp-fs-sm) !important; box-shadow: none !important;
}
body.woocommerce-checkout #customer_details .form-row select {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 15px 15px !important;
}
body.woocommerce-checkout #customer_details .form-row input.input-text:focus,
body.woocommerce-checkout #customer_details .form-row select:focus {
	border-color: var(--yp-black) !important; outline: none !important;
}
body.woocommerce-checkout #customer_details .woocommerce-input-wrapper { display: block; width: 100%; }
/* MailPoet 那个勾选框贴着地址栏下面 */
body.woocommerce-checkout .woocommerce-billing-fields > .woocommerce-form__label { margin-top: 14px !important; }

/* 折扣码行：恢复样式（PHP 里 wp_summary_coupon_row 输出） */
body.woocommerce-checkout #order_review .yp-sum__coupon-row > td {
	padding: 18px 0 0 !important; border: 0 !important;
}
body.woocommerce-checkout #order_review .yp-sum__coupon { display: flex; gap: 10px; }
body.woocommerce-checkout #order_review .yp-sum__coupon input[type="text"] {
	flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 20px;
	border: 1.5px solid var(--yp-grey-200) !important; border-radius: var(--yp-radius-md) !important;
	background: var(--yp-white) !important; font-size: var(--yp-fs-sm) !important;
}
body.woocommerce-checkout #order_review .yp-sum__coupon button {
	flex: 0 0 auto; height: 52px; padding: 0 26px;
	border: 1.5px solid var(--yp-black) !important; border-radius: var(--yp-radius-md) !important;
	background: var(--yp-white) !important; color: var(--yp-black) !important;
	font-family: var(--yp-font-body) !important; font-weight: 700 !important;
	font-size: var(--yp-fs-sm) !important; text-transform: none !important; cursor: pointer;
}
body.woocommerce-checkout #order_review .yp-sum__chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 16px; margin-right: 8px;
	border-radius: 999px; background: var(--yp-grey-100);
	font-size: var(--yp-fs-xs); font-weight: 700; letter-spacing: .04em;
}
body.woocommerce-checkout #order_review .yp-sum__chip a { text-decoration: none; font-size: 16px; line-height: 1; }

@media (max-width: 780px) {
	body.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 24px;
	}
	body.woocommerce-checkout .yp-checkout-card,
	body.woocommerce-checkout #order_review { grid-column: 1 !important; grid-row: auto !important; position: static; }
	body.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.woocommerce-checkout #customer_details .form-row-wide,
	body.woocommerce-checkout #customer_details .form-row-first,
	body.woocommerce-checkout #customer_details .form-row-last,
	body.woocommerce-checkout #customer_details .form-row.yp-addr-third { grid-column: span 2; }
}


/* ==========================================================================
   ★★ 右栏商品列表可滚动：金额区（折扣码/小计/运费/总计/优惠）永远露在外面
   参考站就是这个效果（列表里还能看到「Scroll for more items」的提示）
   ========================================================================== */
body.woocommerce-checkout #order_review .shop_table tbody {
	display: block;
	max-height: 300px;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	padding-right: 6px;
}
body.woocommerce-checkout #order_review .shop_table tbody::-webkit-scrollbar { width: 8px; }
body.woocommerce-checkout #order_review .shop_table tbody::-webkit-scrollbar-track { background: var(--yp-grey-100); border-radius: 999px; }
body.woocommerce-checkout #order_review .shop_table tbody::-webkit-scrollbar-thumb { background: var(--yp-black); border-radius: 999px; }
body.woocommerce-checkout #order_review .shop_table tbody { scrollbar-width: thin; scrollbar-color: var(--yp-black) var(--yp-grey-100); }
/* 最后一行下面留点空隙，免得贴着提示条 */
body.woocommerce-checkout #order_review .shop_table tbody tr.cart_item:last-child { border-bottom: 0 !important; }

/* 「Scroll for more items」提示：JS 插在 #order_review 里，绝对定位贴住列表底边 */
body.woocommerce-checkout #order_review { position: sticky; }
body.woocommerce-checkout #order_review .yp-sum__more {
	position: absolute; left: 50%; transform: translateX(-50%);
	display: none; pointer-events: none;
	padding: 7px 16px; border-radius: 999px;
	background: var(--yp-black); color: var(--yp-white);
	font-size: var(--yp-fs-xs); font-weight: 700; letter-spacing: .02em;
	white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
body.woocommerce-checkout #order_review.yp-has-more .yp-sum__more { display: inline-flex; align-items: center; gap: 8px; }


/* ★ 警示文案单独一个框：横跨整页，放在两栏上面（提示框本身就是 .yp-notice 的样式） */
body.woocommerce-checkout form.checkout > .yp-notice {
	grid-column: 1 / -1 !important;
	grid-row: 1 !important;
	margin: 0 0 10px !important;
	background: var(--yp-white);
}
body.woocommerce-checkout .yp-checkout-card { grid-row: 2 !important; }
body.woocommerce-checkout #order_review { grid-row: 2 !important; }
/* 卡片里不再需要那条分隔线了（提示已经搬出去） */
body.woocommerce-checkout .yp-checkout-card .yp-notice { display: none !important; }

@media (max-width: 780px) {
	body.woocommerce-checkout form.checkout > .yp-notice { grid-row: auto !important; }
	body.woocommerce-checkout .yp-checkout-card,
	body.woocommerce-checkout #order_review { grid-row: auto !important; }
	body.woocommerce-checkout #order_review { position: static !important; }
}


/* ==========================================================================
   ★ 右栏「YOUR ORDER」：所有细灰线去掉，改用留白分段（参考站就没有线）
   ★ 顺便把卡片压矮一些，这样它在视口里能完整显示、吸顶也更有意义
   ========================================================================== */
body.woocommerce-checkout #order_review .shop_table,
body.woocommerce-checkout #order_review .shop_table thead th,
body.woocommerce-checkout #order_review .shop_table tbody tr.cart_item,
body.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td,
body.woocommerce-checkout #order_review .shop_table tfoot tr,
body.woocommerce-checkout #order_review .shop_table tfoot th,
body.woocommerce-checkout #order_review .shop_table tfoot td,
body.woocommerce-checkout #order_review .yp-sum__coupon-row > td,
body.woocommerce-checkout #order_review .yp-sum__address,
body.woocommerce-checkout #order_review .yp-sum__address .form-row,
body.woocommerce-checkout #order_review ul.wc_payment_methods,
body.woocommerce-checkout #order_review #payment,
body.woocommerce-checkout #order_review .form-row.place-order {
	border-top: 0 !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}
/* 不用线了，行距给足 */
body.woocommerce-checkout #order_review .shop_table tbody tr.cart_item { padding: 14px 0 !important; }
body.woocommerce-checkout #order_review .shop_table tfoot tr { padding: 9px 0 !important; }
body.woocommerce-checkout #order_review .shop_table tfoot tr.order-total { margin-top: 6px !important; }

/* 商品列表矮一点：保证「金额 + 提交按钮」在屏幕里 */
body.woocommerce-checkout #order_review .shop_table tbody { max-height: 236px !important; }

/* 卡片压紧一点 */
body.woocommerce-checkout #order_review { padding: 20px !important; }
body.woocommerce-checkout #order_review::before { margin-bottom: 10px !important; }
body.woocommerce-checkout #order_review .single_add_to_cart_button,
body.woocommerce-checkout #place_order { margin-top: var(--yp-sp-4) !important; }
body.woocommerce-checkout #order_review .woocommerce-privacy-policy-text { margin-top: 12px !important; font-size: var(--yp-fs-xs) !important; }


/* 上面那条「Total 上面一根灰线」的旧规则带 !important，这里用更具体的选择器压掉 */
body.woocommerce-checkout #order_review .shop_table tfoot tr.order-total,
body.woocommerce-checkout #order_review .shop_table tfoot tr.order-total th,
body.woocommerce-checkout #order_review .shop_table tfoot tr.order-total td {
	border-top: 0 !important;
	border-bottom: 0 !important;
}
/* 金额区压紧一点，卡片更矮 → 吸顶能顶更久 */
body.woocommerce-checkout #order_review .shop_table tbody { max-height: 210px !important; }
body.woocommerce-checkout #order_review .shop_table tfoot tr.order-total { padding-top: 6px !important; margin-top: 2px !important; }


/* ==========================================================================
   ★★ 右栏订单摘要：整页滚动都不动（JS 加上 .yp-pinned 时用 fixed）
   ── sticky 只能在网格行里滑动，左栏和摘要差不多高时顶不了多远，
      所以位置由 JS 按左栏右边缘算好，这里只负责 fixed 的样式。
   ========================================================================== */
body.woocommerce-checkout #order_review.yp-pinned {
	position: fixed !important;
	z-index: 40 !important;
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .10);
}
/* 卡片内部滚动时，商品列表的限高就别再叠一层了 */
body.woocommerce-checkout #order_review.yp-pinned .shop_table tbody { max-height: 190px !important; }


/* ==========================================================================
   ★ 最后剩下的竖线：① .shop_table 自己的左右边框 ② 两层滚动条
   ── 边框去掉；滚动条隐藏但保留滚动，靠「Scroll for more items」提示
   ========================================================================== */
body.woocommerce-checkout #order_review .shop_table {
	border-left: 0 !important;
	border-right: 0 !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
}
body.woocommerce-checkout #order_review,
body.woocommerce-checkout #order_review .shop_table tbody {
	scrollbar-width: none;      /* Firefox */
	-ms-overflow-style: none;   /* 老 Edge */
}
body.woocommerce-checkout #order_review::-webkit-scrollbar,
body.woocommerce-checkout #order_review .shop_table tbody::-webkit-scrollbar {
	width: 0 !important;
	height: 0 !important;
	background: transparent !important;
}


/* ==========================================================================
   ★ 商品列表的滚动条：按参考站那样显示出来（细的深色滑块 + 浅灰轨道）
   ── 上一版把滚动条藏了，现在只隐藏「卡片自己」那条，列表这条放出来
   ========================================================================== */
body.woocommerce-checkout #order_review .shop_table tbody {
	scrollbar-width: thin !important;
	scrollbar-color: var(--yp-black) var(--yp-grey-100) !important;
	padding-right: 10px !important;
}
body.woocommerce-checkout #order_review .shop_table tbody::-webkit-scrollbar {
	width: 8px !important;
	height: 8px !important;
	background: transparent !important;
	display: block !important;
}
body.woocommerce-checkout #order_review .shop_table tbody::-webkit-scrollbar-track {
	background: var(--yp-grey-100) !important;
	border-radius: 999px !important;
}
body.woocommerce-checkout #order_review .shop_table tbody::-webkit-scrollbar-thumb {
	background: var(--yp-black) !important;
	border-radius: 999px !important;
	min-height: 40px !important;
}
/* 卡片自己那条还是不要（否则右边会出现两条） */
body.woocommerce-checkout #order_review::-webkit-scrollbar { width: 0 !important; height: 0 !important; }


/* ★ 聚焦时不要再变黑框：和旁边没聚焦的字段长得一样（你要求） */
body.woocommerce-checkout #customer_details .form-row input.input-text:focus,
body.woocommerce-checkout #customer_details .form-row select:focus,
body.woocommerce-checkout #customer_details .form-row textarea:focus,
body.woocommerce-checkout #order_review .yp-sum__address input:focus,
body.woocommerce-checkout #order_review .yp-sum__address select:focus {
	border-color: var(--yp-grey-200) !important;
	box-shadow: none !important;
	outline: none !important;
}


/* ==========================================================================
   ★★★ 左栏字段改成参考站那样：字放在框里（标签只留给读屏软件）
   · Contact / Delivery 两个小标题
   · 文本框用 placeholder 显示字段名，标签视觉隐藏（无障碍保留）
   · 下拉框（国家 / 州）用小标签压在框内左上角，值在下面
   ========================================================================== */

/* 1) 标签视觉隐藏（读屏仍然读得到） */
body.woocommerce-checkout #customer_details .form-row > label {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	padding: 0 !important; margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* 2) 输入框：字大一点、上下居中，符合参考站手感 */
body.woocommerce-checkout #customer_details .form-row input.input-text,
body.woocommerce-checkout #customer_details .form-row select {
	height: 56px !important;
	font-size: var(--yp-fs-base) !important;
}
body.woocommerce-checkout #customer_details .form-row input.input-text::placeholder {
	color: var(--yp-grey-500) !important;
	opacity: 1;
}

/* 3) 下拉框：框里左上角放小标签，只针对国家和州 */
body.woocommerce-checkout #customer_details #billing_country_field,
body.woocommerce-checkout #customer_details #billing_state_field { position: relative; }
body.woocommerce-checkout #customer_details #billing_country_field > label,
body.woocommerce-checkout #customer_details #billing_state_field > label {
	position: absolute !important;
	left: 17px; top: 8px;
	width: auto !important; height: auto !important;
	margin: 0 !important; padding: 0 !important;
	clip: auto !important; overflow: visible !important;
	font-size: 12px !important; font-weight: 400 !important;
	line-height: 1.2 !important; color: var(--yp-grey-500) !important;
	z-index: 3;
}
body.woocommerce-checkout #customer_details #billing_country_field select,
body.woocommerce-checkout #customer_details #billing_state_field select {
	padding-top: 22px !important;
	font-weight: 600 !important;
}

/* 4) Contact / Delivery 小标题（用第一个字段的 ::before 画） */
body.woocommerce-checkout #customer_details #billing_email_field::before,
body.woocommerce-checkout #customer_details #billing_country_field::before {
	display: block;
	font-family: var(--yp-font-head);
	font-weight: 900;
	font-size: var(--yp-fs-xl);
	line-height: 1.1;
	text-transform: none;
	letter-spacing: 0;
	color: var(--yp-black);
}
body.woocommerce-checkout #customer_details #billing_email_field::before { content: "Contact"; margin: 0 0 14px; }
body.woocommerce-checkout #customer_details #billing_country_field::before {
	content: "Delivery";
	margin: 26px 0 14px;
	padding-top: 0;
	border-top: 0;
}
/* 这两条 ::before 是网格里的独立整行 */
body.woocommerce-checkout #customer_details #billing_email_field::before,
body.woocommerce-checkout #customer_details #billing_country_field::before { grid-column: 1 / -1; }


/* ==========================================================================
   ★ 缩放/窄屏时右栏不要那么早塌掉（原来 980px 就塌成一栏，浏览器一放大
     侧边栏就「消失」了）。改成 780px 才塌，中间再加两档收窄。
   ========================================================================== */
@media (max-width: 1100px) {
	body.woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr) minmax(0, 370px) !important; gap: 26px !important; }
}
@media (max-width: 900px) {
	body.woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr) minmax(0, 330px) !important; gap: 20px !important; }
	body.woocommerce-checkout #order_review { padding: 16px !important; }
	body.woocommerce-checkout #customer_details #billing_email_field::before,
	body.woocommerce-checkout #customer_details #billing_country_field::before { font-size: var(--yp-fs-lg); }
}


/* ==========================================================================
   ★ 修正上一版框内标签的两个问题：
   · 小标题改成真节点（.yp-shop__heading），不再用字段里的 ::before
   · 国家 / 州的小标签压在框内左上角，值在下面
   ========================================================================== */
body.woocommerce-checkout #customer_details #billing_email_field::before,
body.woocommerce-checkout #customer_details #billing_country_field::before { content: none !important; }

body.woocommerce-checkout #customer_details .yp-shop__heading {
	grid-column: 1 / -1;
	margin: 0 0 6px !important;
	font-family: var(--yp-font-head);
	font-weight: 900;
	font-size: var(--yp-fs-xl);
	line-height: 1.15;
	text-transform: none;
	color: var(--yp-black);
}
body.woocommerce-checkout #customer_details .yp-shop__heading--delivery { margin-top: 22px !important; }

/* 下拉框：小标签在框内左上，值往下让位 */
body.woocommerce-checkout #customer_details #billing_country_field,
body.woocommerce-checkout #customer_details #billing_state_field { position: relative; }
body.woocommerce-checkout #customer_details #billing_country_field > label,
body.woocommerce-checkout #customer_details #billing_state_field > label {
	position: absolute !important;
	left: 17px; top: 9px;
	width: auto !important; height: auto !important;
	margin: 0 !important; padding: 0 !important;
	clip: auto !important; overflow: visible !important;
	font-size: 12px !important; font-weight: 400 !important;
	line-height: 1.2 !important; color: var(--yp-grey-500) !important;
	z-index: 3;
}
body.woocommerce-checkout #customer_details #billing_country_field .woocommerce-input-wrapper,
body.woocommerce-checkout #customer_details #billing_state_field .woocommerce-input-wrapper { display: block; position: relative; }
body.woocommerce-checkout #customer_details #billing_country_field select,
body.woocommerce-checkout #customer_details #billing_state_field select {
	height: 60px !important;
	padding: 24px 16px 0 !important;
	font-size: var(--yp-fs-base) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	background-position: right 14px center !important;
}
/* 所有框统一圆角（参考站那种） */
body.woocommerce-checkout #customer_details .form-row input.input-text,
body.woocommerce-checkout #customer_details .form-row select,
body.woocommerce-checkout #customer_details .form-row textarea {
	border-radius: var(--yp-radius-md) !important;
}


/* ==========================================================================
   ★★ 购物车抽屉：金额 + CHECK OUT 固定在底部（参考站那样）
   ── 原来它们跟着商品列表一起滚，要滑到底才看得到。
      抽屉本身就是滚动容器（.yp-drawer__body），用 position: sticky; bottom 钉住即可。
   ========================================================================== */
.yp-drawer .yp-drawer__total {
	position: sticky !important;
	bottom: 74px;
	z-index: 5;
	background: var(--yp-white);
	padding-top: 14px !important;
	margin-bottom: 12px !important;
}
.yp-drawer .yp-drawer__body > .yp-btn {
	position: sticky !important;
	bottom: 0;
	z-index: 6;
	background: var(--yp-black) !important;
	padding-bottom: 0 !important;
	margin-bottom: 18px !important;
}
/* 钉住的两块下面渐隐，滚动时不会和上面的内容糊在一起 */
.yp-drawer .yp-drawer__total::before {
	content: "";
	position: absolute; left: 0; right: 0; top: -18px; height: 18px;
	background: linear-gradient(to top, var(--yp-white), rgba(255,255,255,0));
	pointer-events: none;
}


/* 微调：钉住的两块用 bottom 偏移（不用 margin），保证按钮完整显示、不顶到屏幕最下沿 */
.yp-drawer .yp-drawer__total {
	bottom: 92px !important;
	margin-bottom: 0 !important;
}
.yp-drawer .yp-drawer__body > .yp-btn {
	bottom: 18px !important;
	margin-bottom: 0 !important;
}


/* CHECK OUT 按钮：字色明确成白色（黑底黑字会看不见）＋钉住区域给个白底 */
.yp-drawer .yp-drawer__body > .yp-btn {
	color: var(--yp-white) !important;
	background: var(--yp-black) !important;
}
.yp-drawer .yp-drawer__body > .yp-btn .yp-btn,
.yp-drawer .yp-drawer__body > .yp-btn span { color: var(--yp-white) !important; }


/* 钉住区域再补一块白底：商品从下面滚过时不会从缝隙里露出来 */
.yp-drawer .yp-drawer__body > .yp-btn { position: sticky !important; }
.yp-drawer .yp-drawer__body > .yp-btn::before {
	content: "";
	position: absolute; left: 0; right: 0; top: -16px; height: 16px;
	background: var(--yp-white);
	pointer-events: none;
}
.yp-drawer .yp-drawer__total::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: -12px; height: 12px;
	background: var(--yp-white);
	pointer-events: none;
}


/* ==========================================================================
   ★ 抽屉底部对齐参考站：CHECK OUT 改成「白底 + 黑边」描边样式（原来是实心黑），
     钉住区域整片白底，商品不会从按钮下面露出来
   ========================================================================== */
.yp-drawer .yp-drawer__body > .yp-btn {
	background: var(--yp-white) !important;
	color: var(--yp-black) !important;
	border: 2px solid var(--yp-black) !important;
	font-weight: 900 !important;
}
.yp-drawer .yp-drawer__body > .yp-btn:hover,
.yp-drawer .yp-drawer__body > .yp-btn:focus {
	background: var(--yp-grey-100) !important;
	color: var(--yp-black) !important;
}
/* 从 TOTAL 下面一直到抽屉底，全铺白底（按钮 z-index 更高，仍显示在黑框上） */
.yp-drawer .yp-drawer__total::after {
	content: "";
	position: absolute; left: 0; right: 0;
	bottom: -92px; height: 92px;
	background: var(--yp-white);
	pointer-events: none;
	z-index: -1;
}
.yp-drawer .yp-drawer__body > .yp-btn::before { display: none !important; }


/* ==========================================================================
   ★★ 抽屉滚动结构对齐参考站（2026-09-22 最后一改）
   ── 原来滚动条在「整个面板」上（.yp-drawer__panel overflow-y:auto），
      头部和底部会一起滚。改成：
        面板 overflow:hidden（不滚）
        头部 / 免运提示 flex:0 0 auto（固定）
        中间 .yp-drawer__body flex:1 + overflow-y:auto（只有列表滚）
        TOTAL / CHECK OUT 在 body 里 sticky 到底部（钉住）
   ========================================================================== */
.yp-drawer__panel {
	overflow: hidden !important;
	height: 100vh !important;
	max-height: 100vh !important;
}
.yp-drawer__head,
.yp-drawer__ship { flex: 0 0 auto !important; }
.yp-drawer__body {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
}


/* ==========================================================================
   ★★★ 抽屉底部（TOTAL + CHECK OUT）改成结构上固定（2026-09-22 最终版）
   ── 之前用 position: sticky，依赖「谁是滚动容器」，实际效果不稳定；
      现在 PHP 里把它挪到滚动区外面（#yp-drawer-foot），物理上不可能跟着列表滚。
   ========================================================================== */
.yp-drawer__foot {
	flex: 0 0 auto !important;
	padding: 16px 48px 24px !important;
	background: var(--yp-white);
	border-top: 1px solid var(--yp-grey-200);
}
.yp-drawer__foot .yp-drawer__total {
	position: static !important;
	bottom: auto !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
	background: transparent !important;
}
.yp-drawer__foot .yp-drawer__total::before,
.yp-drawer__foot .yp-drawer__total::after { display: none !important; }
.yp-drawer__foot > .yp-btn {
	position: static !important;
	bottom: auto !important;
	margin: 0 !important;
	background: var(--yp-white) !important;
	color: var(--yp-black) !important;
	border: 2px solid var(--yp-black) !important;
	font-weight: 900 !important;
}
.yp-drawer__foot > .yp-btn:hover,
.yp-drawer__foot > .yp-btn:focus { background: var(--yp-grey-100) !important; }
.yp-drawer__foot > .yp-btn::before { display: none !important; }

@media (max-width: 767px) {
	.yp-drawer__foot { padding: 12px 20px 18px !important; }
}


/* ==========================================================================
   ★ 按规格对齐（2026-09-22）
   1) 抽屉里的现价改成「绿色加粗」（原来用的是黄色）
   2) 抽屉列表滚动条改成灰色（规格要求）
   3) 结账页显示 Payment 区块（原来被 CSS 藏了）
   ========================================================================== */
.yp-drawer__line,
.yp-drawer__line .woocommerce-Price-amount {
	color: #4eb960 !important;
	font-weight: 800 !important;
	-webkit-text-stroke: 0 !important;
	text-shadow: none !important;
}
.yp-drawer__figures del,
.yp-drawer__figures del .woocommerce-Price-amount {
	color: #4eb960 !important;
	font-weight: 500 !important;
	opacity: .85 !important;
}
.yp-drawer__body::-webkit-scrollbar { width: 8px !important; }
.yp-drawer__body::-webkit-scrollbar-track { background: var(--yp-grey-100) !important; border-radius: 999px !important; }
.yp-drawer__body::-webkit-scrollbar-thumb { background: #c9c9c9 !important; border-radius: 999px !important; }
.yp-drawer__body { scrollbar-width: thin !important; scrollbar-color: #c9c9c9 var(--yp-grey-100) !important; }

body.woocommerce-checkout ul.wc_payment_methods {
	display: block !important;
	padding: 0 !important;
	margin: 0 0 12px !important;
	list-style: none !important;
}
body.woocommerce-checkout ul.wc_payment_methods li { margin: 0 0 10px !important; }


/* ==========================================================================
   ★★★ 完整购物车页面（规格第三部分，2026-09-22）
   顶部黑色免运横幅 + YOUR CART 大标题；表格（Product | Quantity | Total）；
   底部左「Add a note to your order」、右金额区 + 大号 CHECK OUT
   ========================================================================== */
body.woocommerce-cart .yp-page__content > .woocommerce { max-width: 1180px; margin-inline: auto; }
body.woocommerce-cart .entry-title,
body.woocommerce-cart .yp-page__head { display: none !important; }

/* 顶部黑色横幅 */
.yp-cart-hero {
	background: var(--yp-black);
	color: var(--yp-white);
	border-radius: var(--yp-radius-lg, 18px);
	padding: 26px 28px 24px;
	text-align: center;
	margin: 0 0 30px;
}
.yp-cart-hero__ship { margin: 0 0 10px !important; font-size: var(--yp-fs-base); color: var(--yp-white); }
.yp-cart-hero__title {
	margin: 0 !important;
	font-family: var(--yp-font-head); font-weight: 900;
	font-size: var(--yp-fs-4xl); line-height: 1; text-transform: uppercase;
	color: var(--yp-white);
}

/* 表格：三列（商品 / 数量 / 合计） */
body.woocommerce-cart table.shop_table.cart { border: 0 !important; border-collapse: separate !important; width: 100%; }
body.woocommerce-cart table.shop_table.cart thead th {
	border: 0 !important; border-bottom: 1px solid var(--yp-grey-200) !important;
	padding: 12px 0 !important; text-align: left !important;
	font-family: var(--yp-font-body); font-size: var(--yp-fs-sm); font-weight: 600; color: var(--yp-grey-500);
}
body.woocommerce-cart table.shop_table.cart thead th.product-price,
body.woocommerce-cart table.shop_table.cart thead th.product-remove,
body.woocommerce-cart table.shop_table.cart thead th.product-thumbnail { visibility: hidden !important; }
body.woocommerce-cart table.shop_table.cart thead th.product-quantity { text-align: center !important; }
body.woocommerce-cart table.shop_table.cart thead th.product-subtotal { text-align: right !important; }

/* 每一行：× / 图 / 信息 / 数量 / 合计 */
body.woocommerce-cart table.shop_table.cart tr.cart_item {
	display: grid !important;
	grid-template-columns: 26px 130px minmax(0, 1fr) auto auto;
	gap: 22px; align-items: center;
	padding: 20px 0 !important;
	border-bottom: 1px solid var(--yp-grey-200) !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td {
	display: block !important; width: auto !important;
	padding: 0 !important; border: 0 !important; vertical-align: middle !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-price { display: none !important; }
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove a.remove {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 999px;
	background: var(--yp-grey-100) !important; color: var(--yp-black) !important;
	text-decoration: none; font-size: 18px; line-height: 1;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove a.remove:hover { background: var(--yp-black) !important; color: var(--yp-white) !important; }
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail img {
	width: 130px !important; height: 130px !important; object-fit: cover;
	border: 1px solid var(--yp-grey-200); border-radius: 12px; background: var(--yp-grey-100);
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity { text-align: center; }
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal {
	text-align: right; min-width: 130px;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal .yp-sum__now,
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal .yp-sum__now .woocommerce-Price-amount {
	color: #4eb960 !important; font-weight: 800 !important; font-size: var(--yp-fs-xl) !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal del,
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal del .woocommerce-Price-amount {
	color: var(--yp-grey-500) !important; font-size: var(--yp-fs-sm) !important;
}

/* 商品名那一格：缩略图角标 + 名称 + 口味 + 优惠行（复用结账页的 .yp-sum__* 结构） */
body.woocommerce-cart table.shop_table.cart td.product-name { display: flex !important; flex-direction: column; gap: 6px; }
body.woocommerce-cart table.shop_table.cart td.product-name .yp-sum__media { display: none; }
body.woocommerce-cart table.shop_table.cart td.product-name .yp-sum__name { font-weight: 600; font-size: var(--yp-fs-base); }
body.woocommerce-cart table.shop_table.cart td.product-name a { color: var(--yp-black); text-decoration: none; }
body.woocommerce-cart table.shop_table.cart td.product-name .yp-sum__variant { color: var(--yp-grey-500); font-size: var(--yp-fs-sm); }

/* 数量选择器（药丸 + 加减，JS 注入按钮） */
body.woocommerce-cart .yp-qty--cart {
	display: inline-flex !important; align-items: center;
	border: 1.5px solid var(--yp-black); border-radius: 999px;
	padding: 0 6px; background: var(--yp-white); min-height: 52px;
}
body.woocommerce-cart .yp-qty--cart input.qty {
	width: 76px !important; border: 0 !important; background: transparent !important;
	text-align: center !important; font-size: var(--yp-fs-base) !important;
	-moz-appearance: textfield; appearance: textfield;
}
body.woocommerce-cart .yp-qty--cart input.qty::-webkit-outer-spin-button,
body.woocommerce-cart .yp-qty--cart input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.woocommerce-cart .yp-qty--cart .yp-qty__btn {
	width: 40px; height: 40px; border: 0; border-radius: 999px;
	background: transparent; color: var(--yp-black);
	font-size: 20px; line-height: 1; cursor: pointer;
}
body.woocommerce-cart .yp-qty--cart .yp-qty__btn:hover { background: var(--yp-grey-100); }

/* 底部：左备注 / 右金额 */
body.woocommerce-cart .cart-collaterals {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
	gap: 80px; align-items: start;
	margin-top: 34px;
}
body.woocommerce-cart .cart-collaterals .yp-cart-note { grid-column: 1; }
body.woocommerce-cart .cart-collaterals .cart_totals { grid-column: 2; width: 100% !important; float: none !important; }
body.woocommerce-cart .cart-collaterals .cart_totals h2 { display: none !important; }
body.woocommerce-cart .cart-collaterals .cart_totals table { border: 0 !important; width: 100%; }
body.woocommerce-cart .cart-collaterals .cart_totals tr { display: flex !important; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0 10px 40px !important; border: 0 !important; }
body.woocommerce-cart .cart-collaterals .cart_totals th,
body.woocommerce-cart .cart-collaterals .cart_totals td { padding: 0 !important; border: 0 !important; font-size: var(--yp-fs-base) !important; font-weight: 500 !important; text-align: left !important; }
body.woocommerce-cart .cart-collaterals .cart_totals tr.order-total th,
body.woocommerce-cart .cart-collaterals .cart_totals tr.order-total td,
body.woocommerce-cart .cart-collaterals .cart_totals tr.order-total .woocommerce-Price-amount {
	font-family: var(--yp-font-head) !important; font-weight: 900 !important; font-size: var(--yp-fs-2xl) !important;
}
body.woocommerce-cart .yp-cart-hint { margin: 0 0 6px; text-align: right; font-size: var(--yp-fs-sm); color: var(--yp-grey-500); }
body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout { padding: 18px 0 0 !important; }
body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button {
	display: flex !important; align-items: center; justify-content: center;
	width: 100% !important; min-height: 62px; margin: 0 !important;
	border: 2px solid var(--yp-black) !important; border-radius: 999px !important;
	background: var(--yp-white) !important; color: var(--yp-black) !important;
	font-family: var(--yp-font-head) !important; font-weight: 900 !important;
	font-size: var(--yp-fs-base) !important; text-transform: uppercase !important; text-decoration: none !important;
}
body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button:hover { background: var(--yp-grey-100) !important; }

/* 备注框 */
body.woocommerce-cart .yp-cart-note label {
	display: block; margin-bottom: 10px;
	font-family: var(--yp-font-body); font-weight: 600; font-size: var(--yp-fs-base);
}
body.woocommerce-cart .yp-cart-note textarea {
	width: 100%; min-height: 130px; padding: 16px 18px;
	border: 1.5px solid var(--yp-grey-200); border-radius: var(--yp-radius-md);
	background: var(--yp-white); font-size: var(--yp-fs-sm); line-height: 1.5; resize: vertical;
}
body.woocommerce-cart .yp-cart-note textarea:focus { border-color: var(--yp-grey-200); outline: none; }
body.woocommerce-cart .yp-cart-note button {
	margin-top: 12px; padding: 12px 26px;
	border: 2px solid var(--yp-black); border-radius: 999px;
	background: var(--yp-white); color: var(--yp-black);
	font-weight: 700; font-size: var(--yp-fs-sm); cursor: pointer;
}
body.woocommerce-cart .yp-cart-note button:hover { background: var(--yp-grey-100); }

/* Update cart 那一行：有加减按钮自动更新，平时用不到，收起来 */
body.woocommerce-cart table.shop_table.cart tr td.actions { padding: 22px 0 0 !important; border: 0 !important; }
body.woocommerce-cart table.shop_table.cart tr td.actions button[name="update_cart"] {
	padding: 12px 26px; border: 2px solid var(--yp-black); border-radius: 999px;
	background: var(--yp-white); color: var(--yp-black); font-weight: 700; cursor: pointer;
}

@media (max-width: 780px) {
	body.woocommerce-cart .cart-collaterals { grid-template-columns: minmax(0, 1fr) !important; gap: 24px; }
	body.woocommerce-cart .cart-collaterals .yp-cart-note,
	body.woocommerce-cart .cart-collaterals .cart_totals { grid-column: 1 !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item { grid-template-columns: 22px 90px minmax(0, 1fr) auto !important; gap: 12px; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail img { width: 90px !important; height: 90px !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity { grid-column: 3 / -1; text-align: left; }
	.yp-cart-hero { padding: 20px; }
	.yp-cart-hero__title { font-size: var(--yp-fs-2xl); }
}


/* ★ 抽屉底部 CHECK OUT：大写（规格里写的是 CHECK OUT），并且它现在的链接是完整购物车页 */
.yp-drawer__foot > .yp-btn { text-transform: uppercase !important; letter-spacing: .02em !important; }


/* ==========================================================================
   ★ 结账页：支付方式区块与说明去掉（店里没有真实网关，那段中文说明也不合适）
   ── 用 CSS 隐藏（保留 input，提交表单结构和支付方式字段不受影响）
   ========================================================================== */
body.woocommerce-checkout #payment ul.wc_payment_methods,
body.woocommerce-checkout #payment .payment_box,
body.woocommerce-checkout #payment div.payment_method_bacs { display: none !important; }
body.woocommerce-checkout #order_review #payment { margin: 0 !important; }

/* 极简页头（结账页）也要显示购物车图标 */
body.woocommerce-checkout .yp-header__actions { justify-content: flex-end; }


/* ==========================================================================
   ★ State 字段照参考站来：不要浮动标签，用下拉框自己的占位文字「State」
   （浮动标签压住选项文字的重叠问题就在这一处）
   ========================================================================== */
body.woocommerce-checkout #customer_details #billing_state_field > label {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	margin: -1px !important; padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
}
body.woocommerce-checkout #customer_details #billing_state_field select {
	height: 56px !important;
	padding: 0 44px 0 16px !important;   /* 竖向居中，和旁边的 City / ZIP 完全一致 */
	font-weight: 500 !important;
}


/* ==========================================================================
   ★★ 国家/地区字段：彻底改掉重叠问题
   ── 之前用 position:absolute 把一个浮动标签压在 select 上，靠 padding 避让，
      但在真实浏览器里没躲开（文字还是叠在一起）。
      现在照参考站的做法：**整个字段框 = 一个盒子**，标签是盒子里普通的一行，
      下拉框在它下面且无边框。没有任何绝对定位，结构上不可能重叠。
   ========================================================================== */
body.woocommerce-checkout #customer_details #billing_country_field {
	border: 1.5px solid var(--yp-grey-200) !important;
	border-radius: var(--yp-radius-md) !important;
	background: var(--yp-white) !important;
	padding: 9px 16px 7px !important;
}
body.woocommerce-checkout #customer_details #billing_country_field > label {
	position: static !important;
	display: block !important;
	width: auto !important; height: auto !important;
	margin: 0 0 1px !important; padding: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	font-size: 12px !important; font-weight: 400 !important;
	line-height: 1.2 !important; color: var(--yp-grey-500) !important;
}
body.woocommerce-checkout #customer_details #billing_country_field .woocommerce-input-wrapper { display: block !important; }
body.woocommerce-checkout #customer_details #billing_country_field select {
	height: 30px !important;
	min-height: 0 !important;
	padding: 0 26px 0 0 !important;
	border: 0 !important;
	background-color: transparent !important;
	box-shadow: none !important;
	font-size: var(--yp-fs-base) !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	background-position: right 0 center !important;
	background-size: 15px 15px !important;
}


/* ==========================================================================
   ★ 国家/地区字段：撤掉「整框变盒子」，改回普通输入框 + 把行高拉高（用户要求）
   ── 标签绝对定位在顶部（10px），下拉框高 72px 且上内边距 20px，
      值大约落在 43px 处，和标签（10–22px）拉开 20px 以上，不可能重叠。
   ========================================================================== */
body.woocommerce-checkout #customer_details #billing_country_field {
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	border-radius: 0 !important;
}
body.woocommerce-checkout #customer_details #billing_country_field > label {
	position: absolute !important;
	left: 18px !important; top: 10px !important;
	display: block !important;
	width: auto !important; height: auto !important;
	margin: 0 !important; padding: 0 !important;
	overflow: visible !important; clip: auto !important;
	font-size: 12px !important; font-weight: 400 !important;
	line-height: 1.2 !important; color: var(--yp-grey-500) !important;
	z-index: 3;
}
body.woocommerce-checkout #customer_details #billing_country_field .woocommerce-input-wrapper { display: block !important; position: relative; }
body.woocommerce-checkout #customer_details #billing_country_field select {
	height: 72px !important;
	min-height: 72px !important;
	line-height: 1.3 !important;
	padding: 20px 44px 0 16px !important;
	border: 1.5px solid var(--yp-grey-200) !important;
	border-radius: var(--yp-radius-md) !important;
	background-color: var(--yp-white) !important;
	font-size: var(--yp-fs-base) !important;
	font-weight: 600 !important;
	background-position: right 14px center !important;
	background-size: 15px 15px !important;
}
body.woocommerce-checkout #customer_details #billing_country_field select:focus { border-color: var(--yp-grey-200) !important; box-shadow: none !important; }


/* ==========================================================================
   ★★★ 结账页右栏订单摘要：**不吸顶**（用户 2026-09-24：「算了不要吸顶的功能了」）
   ── 之前试过 JS fixed 钉住 + 纯 CSS sticky，用户都不要了 → 卡片回到普通文档流，
      跟着页面正常滚动。
   ── 这里强制 static，顺便把可能残留的 .yp-pinned（老 JS 加过的类）和 sticky 一起压掉。
   ========================================================================== */
body.woocommerce-checkout form.checkout,
body.woocommerce-checkout .yp-checkout-card,
body.woocommerce-checkout .yp-checkout-card #customer_details { overflow: visible !important; }

body.woocommerce-checkout #order_review,
body.woocommerce-checkout #order_review.yp-pinned {
	position: relative !important;   /* ⚠️ 不能是 static：
	                                    「Scroll for more items」提示是**绝对定位**在这个卡片里的，
	                                    改成 static 会让它失去定位上下文、飘到页面别的地方去 */
	top: auto !important;
	left: auto !important;
	width: auto !important;
	max-height: none !important;
	z-index: auto !important;
	box-shadow: none !important;
}


/* ==========================================================================
   ★★★ 国家/地区重叠的真正原因：这个下拉框被 Select2 接管了
   WooCommerce 在结账页用 Select2 渲染国家/城市这类下拉（可搜索），
   可见的盒子是 .select2-selection--single，原生的 <select> 是隐藏的 ——
   所以之前怎么给原生 select 加高/加 padding 都没用。
   下面直接给 Select2 的盒子加样式：72px 高 + 上内边距 20px，值落在标签下面。
   ========================================================================== */
body.woocommerce-checkout #customer_details #billing_country_field .select2-container { width: 100% !important; }

body.woocommerce-checkout #customer_details #billing_country_field .select2-selection--single {
	height: 72px !important;
	border: 1.5px solid var(--yp-grey-200) !important;
	border-radius: var(--yp-radius-md) !important;
	background-color: var(--yp-white) !important;
	padding-top: 20px !important;
	box-shadow: none !important;
}
body.woocommerce-checkout #customer_details #billing_country_field .select2-selection--single .select2-selection__rendered {
	height: 30px !important; line-height: 30px !important;
	padding: 0 16px !important; margin: 0 !important;
	font-size: var(--yp-fs-base) !important; font-weight: 600 !important;
	color: var(--yp-black) !important;
}
body.woocommerce-checkout #customer_details #billing_country_field .select2-selection--single .select2-selection__arrow {
	height: 30px !important; top: 20px !important; right: 10px !important;
}
body.woocommerce-checkout #customer_details #billing_country_field .select2-selection--single .select2-selection__placeholder {
	color: var(--yp-grey-500) !important;
}
/* 下拉面板（展开后的搜索框和列表）也跟着站点风格 */
body.woocommerce-checkout .select2-dropdown {
	border: 1.5px solid var(--yp-grey-200) !important;
	border-radius: var(--yp-radius-md) !important;
	background: var(--yp-white) !important;
}
body.woocommerce-checkout .select2-search--dropdown .select2-search__field {
	border: 1.5px solid var(--yp-grey-200) !important;
	border-radius: 10px !important;
	padding: 10px 12px !important;
}
body.woocommerce-checkout .select2-results__option--highlighted[aria-selected] {
	background-color: var(--yp-black) !important;
	color: var(--yp-white) !important;
}


/* ==========================================================================
   ★ 结账页（极简页头）：购物车图标放到页头最右边，Logo 保持居中（用户要求）
   ── 2026-09-22 用户要求：购物车图标不要挨着 logo，要挪到页头最右边
      （截图里画了红框 + 向右的箭头）。所以这里恢复成三列网格：
      第 1 列空着，第 2 列居中 logo，第 3 列放图标并靠右。
   ========================================================================== */
body.woocommerce-checkout .yp-header--minimal .yp-header__inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
	align-items: center !important;
	justify-items: stretch !important;
	gap: 14px !important;
}
body.woocommerce-checkout .yp-header--minimal .yp-logo {
	grid-column: 2 !important;
	justify-self: center !important;
}
body.woocommerce-checkout .yp-header--minimal .yp-header__actions {
	grid-column: 3 !important;
	justify-self: end !important;
	justify-content: flex-end !important;
	align-items: center !important;
	margin: 0 !important;
}
body.woocommerce-checkout .yp-header--minimal .yp-icon--cart { margin: 0 !important; }


/* ==========================================================================
   ★ State（以及其它被 Select2 接管的地址字段）：圆角和高度对齐普通输入框
   ── 现在只有国家那一格是 72px（因为有小标签），其它一律 56px + 12px 圆角。
   ========================================================================== */
body.woocommerce-checkout #customer_details .select2-container { width: 100% !important; }
body.woocommerce-checkout #customer_details .select2-selection--single {
	height: 56px !important;
	border: 1.5px solid var(--yp-grey-200) !important;
	border-radius: var(--yp-radius-md) !important;
	background-color: var(--yp-white) !important;
	padding-top: 0 !important;
	box-shadow: none !important;
}
body.woocommerce-checkout #customer_details .select2-selection--single .select2-selection__rendered {
	height: 53px !important; line-height: 53px !important;
	padding: 0 16px !important; margin: 0 !important;
	font-size: var(--yp-fs-base) !important; font-weight: 500 !important;
	color: var(--yp-black) !important;
}
body.woocommerce-checkout #customer_details .select2-selection--single .select2-selection__arrow {
	height: 53px !important; top: 0 !important; right: 10px !important;
}
/* 国家那格仍然要 72px（上面有浮动小标签），放最后覆盖通用规则 */
body.woocommerce-checkout #customer_details #billing_country_field .select2-selection--single {
	height: 72px !important;
	padding-top: 20px !important;
}
body.woocommerce-checkout #customer_details #billing_country_field .select2-selection--single .select2-selection__rendered {
	height: 30px !important; line-height: 30px !important; font-weight: 600 !important;
}
body.woocommerce-checkout #customer_details #billing_country_field .select2-selection--single .select2-selection__arrow {
	height: 30px !important; top: 20px !important;
}

/* 原生 select（没被 Select2 接管时）也保持一致 */
body.woocommerce-checkout #customer_details #billing_state_field select {
	height: 56px !important;
	border: 1.5px solid var(--yp-grey-200) !important;
	border-radius: var(--yp-radius-md) !important;
	padding: 0 44px 0 16px !important;
}


/* ==========================================================================
   ★ Logo 再放大一号（用户要求）
   ── 普通页头 124 → 148px；结账页（极简页头）84 → 108px；
      平板 / 手机按比例跟上，行高同步加高，避免挤压。
   ========================================================================== */
.yp-logo img { max-height: 148px !important; }
.yp-header__inner { min-height: 178px; }
.yp-header--minimal .yp-logo img { max-height: 108px !important; }
.yp-header--minimal .yp-header__inner { min-height: 132px; }

@media (max-width: 1024px) {
	.yp-logo img { max-height: 110px !important; }
	.yp-header__inner { min-height: 134px; }
	.yp-header--minimal .yp-logo img { max-height: 88px !important; }
}
@media (max-width: 921px) {
	.yp-logo img { max-height: 78px !important; }
	.yp-header__inner { min-height: 96px; }
	.yp-header--minimal .yp-logo img { max-height: 70px !important; }
}


/* ★ 国家那格：值不要加粗、再往下挪一点（用户要求） */
body.woocommerce-checkout #customer_details #billing_country_field .select2-selection--single {
	height: 80px !important;
	padding-top: 28px !important;
}
body.woocommerce-checkout #customer_details #billing_country_field .select2-selection--single .select2-selection__rendered {
	height: 30px !important; line-height: 30px !important;
	font-weight: 400 !important;      /* 原来是 600（半粗），改成常规 */
	padding: 0 16px !important;
}
body.woocommerce-checkout #customer_details #billing_country_field .select2-selection--single .select2-selection__arrow {
	height: 30px !important; top: 28px !important;
}
/* State 的值同样不加粗，保持一致 */
body.woocommerce-checkout #customer_details .select2-selection--single .select2-selection__rendered { font-weight: 400 !important; }
body.woocommerce-checkout #customer_details #billing_state_field select { font-weight: 400 !important; }


/* ★ 结账页（极简页头）的 Logo 改成和主页一样大（用户要求） */
.yp-header--minimal .yp-logo img { max-height: 148px !important; }
.yp-header--minimal .yp-header__inner { min-height: 178px; }
@media (max-width: 1024px) {
	.yp-header--minimal .yp-logo img { max-height: 110px !important; }
	.yp-header--minimal .yp-header__inner { min-height: 134px; }
}
@media (max-width: 921px) {
	.yp-header--minimal .yp-logo img { max-height: 78px !important; }
	.yp-header--minimal .yp-header__inner { min-height: 96px; }
}

/* ==========================================================================
   ★ YP-LOGO-FALLBACK（2026-09-28：后台那张 logo 图片被删，页头/页脚/登录页
      一起退回成「yourpacking」一串纯文字）
   ── 代码侧：has_custom_logo() 为 false 时，header.php / footer.php /
      inc/login-otp.php 改成直接输出 yp_logo_img()（见 inc/helpers.php），
      不再退回文字。
   ── 这里给兜底出来的 <img> 定尺寸。方图如果按上面 .yp-logo img 的 148px
      上限走，会顶成 148×148，比原来扁平的 logo 大太多；所以兜底图统一
      用「高度固定、宽度自适应」，保持原始比例。
   ========================================================================== */
.yp-logo img.yp-logo-img       { height: 70px !important; max-height: 70px !important; width: auto !important; }
.yp-header--minimal .yp-logo img.yp-logo-img { height: 76px !important; max-height: 76px !important; }
.yp-footer__brandmark img.yp-logo-img { height: 96px !important; max-height: 96px !important; width: auto !important; }
@media (max-width: 1024px) {
	.yp-logo img.yp-logo-img { height: 58px !important; max-height: 58px !important; }
	.yp-footer__brandmark img.yp-logo-img { height: 84px !important; max-height: 84px !important; }
}
@media (max-width: 921px) {
	.yp-logo img.yp-logo-img,
	.yp-header--minimal .yp-logo img.yp-logo-img { height: 46px !important; max-height: 46px !important; }
	.yp-footer__brandmark img.yp-logo-img { height: 72px !important; max-height: 72px !important; }
}


/* ★ 结账页标题（SHOP CHECKOUT）缩小一点（用户要求）
   ── 站点全局 h1 最大到 64px，这里单独压到 27–40px。 */
body.woocommerce-checkout h1.yp-page__title,
body.woocommerce-checkout .yp-page__title {
	font-size: clamp(var(--yp-fs-2xl), 3.4vw, 40px) !important;
	line-height: 1.1 !important;
	margin: 0 0 22px !important;
}
@media (max-width: 780px) {
	body.woocommerce-checkout h1.yp-page__title { font-size: var(--yp-fs-2xl) !important; }
}


/* ==========================================================================
   ★ 页头图标（尤其购物车那个按钮）放大一点（用户要求）
   ── 图标按钮容器 26 → 34px，SVG 跟着放到 30px，角标同步放大。
   ========================================================================== */
.yp-icon { width: 34px !important; height: 34px !important; }
.yp-icon svg { width: 30px !important; height: 30px !important; }
.yp-cart-count {
	min-width: 21px !important; height: 21px !important;
	padding: 0 5px !important;
	font-size: 12px !important; line-height: 21px !important;
	top: -4px !important; right: -6px !important;
}
@media (max-width: 921px) {
	.yp-icon { width: 30px !important; height: 30px !important; }
	.yp-icon svg { width: 26px !important; height: 26px !important; }
	.yp-cart-count { min-width: 19px !important; height: 19px !important; font-size: 11px !important; line-height: 19px !important; }
}


/* ★ 数量角标从缩略图左上角移到右上角（用户要求） */
body.woocommerce-checkout #order_review .yp-sum__qty {
	left: auto !important;
	right: -9px !important;
	top: -9px !important;
}
/* 购物车页如果也用到这个角标，同样靠右 */
body.woocommerce-cart .yp-sum__qty { left: auto !important; right: -9px !important; }


/* ★ 结账页标题往上提一点（用户要求）：收掉上方的留白 */
body.woocommerce-checkout .yp-main { padding-top: 0 !important; }
body.woocommerce-checkout .yp-page { padding-top: 0 !important; }
body.woocommerce-checkout .yp-page__content { padding-top: 0 !important; }
body.woocommerce-checkout h1.yp-page__title,
body.woocommerce-checkout .yp-page__title {
	margin-top: -34px !important;   /* 再往上提，贴近页头 */
	margin-bottom: 18px !important;
}
@media (max-width: 921px) {
	body.woocommerce-checkout h1.yp-page__title { margin-top: -14px !important; }
}


/* 上面 -34px 可能提得过多（会贴到页头），收敛成 -12px；主要靠把上方的 padding 归零 */
body.woocommerce-checkout h1.yp-page__title,
body.woocommerce-checkout .yp-page__title {
	margin-top: -12px !important;
}


/* ★ 标题不要贴着 Logo：从 -12px 改成往下 22px（用户要求「下来一点」） */
body.woocommerce-checkout h1.yp-page__title,
body.woocommerce-checkout .yp-page__title {
	margin-top: 22px !important;
	margin-bottom: 22px !important;
}


/* ==========================================================================
   ★ 结账页两栏改成等宽（用户要求：两边一样大）
   ── 原来是「左 1fr / 右 430px」，左栏明显更宽。现在左右各 1fr。
   ========================================================================== */
body.woocommerce-checkout form.checkout {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
	gap: 36px !important;
}
@media (max-width: 1100px) {
	body.woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 26px !important; }
}
@media (max-width: 900px) {
	body.woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 20px !important; }
}


/* ==========================================================================
   ★ 结账页整体放宽（用户要求）：容器从 1180 → 1560px，两栏等宽
   ── 这样左右两边都变宽，而不是只把左边压窄。
   ========================================================================== */
body.woocommerce-checkout .yp-main,
body.woocommerce-checkout .yp-page,
body.woocommerce-checkout .yp-page__content,
body.woocommerce-checkout .yp-container {
	max-width: 1560px !important;
	width: 100% !important;
}
body.woocommerce-checkout form.checkout {
	max-width: 1560px !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
	gap: 44px !important;
	padding-inline: 4px !important;
}
@media (max-width: 1200px) {
	body.woocommerce-checkout .yp-main,
	body.woocommerce-checkout .yp-page,
	body.woocommerce-checkout .yp-page__content,
	body.woocommerce-checkout .yp-container,
	body.woocommerce-checkout form.checkout { max-width: 1100px !important; }
	body.woocommerce-checkout form.checkout { gap: 28px !important; }
}


/* ==========================================================================
   ★★★ 手机版整体调整（2026-09-22）
   只调尺寸/间距/堆叠方式，不动页面结构。断点：≤780px（手机/小平板）
   ========================================================================== */
@media (max-width: 780px) {

	/* ---------- 结账页 ---------- */
	body.woocommerce-checkout form.checkout { gap: 20px !important; padding-inline: 0 !important; }
	body.woocommerce-checkout .yp-checkout-card,
	body.woocommerce-checkout #order_review { padding: 16px !important; border-radius: 12px !important; }
	body.woocommerce-checkout .yp-header--minimal .yp-header__inner { min-height: 86px !important; gap: 10px !important; }

	/* 所有字段单列排开，不再挤成两列 */
	body.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 12px !important;
	}
	body.woocommerce-checkout #customer_details .form-row,
	body.woocommerce-checkout #customer_details .form-row.form-row-first,
	body.woocommerce-checkout #customer_details .form-row.form-row-last,
	body.woocommerce-checkout #customer_details .form-row.yp-addr-third { grid-column: 1 / -1 !important; }

	body.woocommerce-checkout #customer_details .form-row input.input-text,
	body.woocommerce-checkout #customer_details .form-row select { height: 52px !important; }
	body.woocommerce-checkout #customer_details .yp-shop__heading { font-size: var(--yp-fs-lg) !important; margin-bottom: 2px !important; }
	body.woocommerce-checkout #customer_details .form-row label { font-size: var(--yp-fs-sm) !important; }

	/* Select2 的下拉（国家 / 州）跟着变矮 */
	body.woocommerce-checkout #customer_details .select2-selection--single { height: 52px !important; }
	body.woocommerce-checkout #customer_details .select2-selection--single .select2-selection__rendered,
	body.woocommerce-checkout #customer_details .select2-selection--single .select2-selection__arrow {
		height: 49px !important; line-height: 49px !important;
	}
	body.woocommerce-checkout #customer_details #billing_country_field .select2-selection--single { height: 64px !important; padding-top: 20px !important; }
	body.woocommerce-checkout #customer_details #billing_country_field .select2-selection--single .select2-selection__rendered,
	body.woocommerce-checkout #customer_details #billing_country_field .select2-selection--single .select2-selection__arrow {
		height: 26px !important; line-height: 26px !important; top: 20px !important;
	}
	body.woocommerce-checkout #customer_details #billing_country_field > label { top: 7px !important; left: 15px !important; }

	/* 右栏订单摘要：缩略图变小、行更紧 */
	body.woocommerce-checkout #order_review::before { font-size: var(--yp-fs-lg) !important; margin-bottom: 8px !important; }
	body.woocommerce-checkout #order_review .shop_table tbody { max-height: 196px !important; }
	body.woocommerce-checkout #order_review .shop_table tbody tr.cart_item {
		grid-template-columns: 58px minmax(0, 1fr) auto !important;
		gap: 12px !important; padding: 12px 0 !important;
	}
	body.woocommerce-checkout #order_review .yp-sum__media img { width: 58px !important; height: 58px !important; }
	body.woocommerce-checkout #order_review .yp-sum__qty { min-width: 22px !important; height: 22px !important; font-size: 11px !important; padding: 0 6px !important; }
	body.woocommerce-checkout #order_review .yp-sum__name { font-size: var(--yp-fs-sm) !important; }
	body.woocommerce-checkout #order_review .yp-sum__save { font-size: 10px !important; }
	body.woocommerce-checkout #order_review .yp-sum__now,
	body.woocommerce-checkout #order_review .yp-sum__now .woocommerce-Price-amount { font-size: var(--yp-fs-base) !important; }
	body.woocommerce-checkout #order_review .shop_table tfoot tr { padding: 7px 0 !important; }
	body.woocommerce-checkout #order_review .shop_table tfoot tr.order-total th,
	body.woocommerce-checkout #order_review .shop_table tfoot tr.order-total td,
	body.woocommerce-checkout #order_review .shop_table tfoot tr.order-total .woocommerce-Price-amount { font-size: var(--yp-fs-xl) !important; }
	body.woocommerce-checkout #order_review .yp-sum__more { font-size: 10px !important; padding: 5px 11px !important; }
	body.woocommerce-checkout #place_order { min-height: 54px !important; font-size: var(--yp-fs-base) !important; }
	body.woocommerce-checkout #order_review .woocommerce-privacy-policy-text { font-size: 11px !important; }

	/* ---------- 完整购物车页 ---------- */
	body.woocommerce-cart .yp-cart-hero { padding: 18px 16px !important; border-radius: 12px !important; margin-bottom: 46px !important; }
	body.woocommerce-cart .yp-cart-hero__title { font-size: var(--yp-fs-2xl) !important; }
	body.woocommerce-cart .yp-cart-hero__ship { font-size: var(--yp-fs-sm) !important; }

	body.woocommerce-cart table.shop_table.cart thead { display: none !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item {
		grid-template-columns: 22px 84px minmax(0, 1fr) !important;
		gap: 10px 12px !important; padding: 16px 0 !important; align-items: start !important;
	}
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail img { width: 84px !important; height: 84px !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity { grid-column: 2 / -1 !important; text-align: left !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal {
		grid-column: 2 / -1 !important; text-align: left !important; min-width: 0 !important;
	}
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal .yp-sum__prices { align-items: flex-start !important; }
	body.woocommerce-cart table.shop_table.cart tr td.actions { padding: 16px 0 0 !important; }
	body.woocommerce-cart .yp-qty--cart { min-height: 48px !important; }
	body.woocommerce-cart .cart-collaterals { gap: 20px !important; margin-top: 22px !important; }
	body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button { min-height: 54px !important; }

	/* ---------- 侧边栏购物车 ---------- */
	.yp-drawer__panel { width: 100vw !important; max-width: 100vw !important; }
	.yp-drawer__head { padding: 20px 18px 12px !important; }
	.yp-drawer__title { font-size: var(--yp-fs-xl) !important; }
	.yp-drawer__ship { margin: 0 18px !important; font-size: var(--yp-fs-sm) !important; }
	.yp-drawer__body { padding: 18px 18px 0 !important; }
	.yp-drawer__foot { padding: 12px 18px 16px !important; }
	.yp-drawer__item { grid-template-columns: 84px minmax(0, 1fr) auto !important; gap: 14px !important; }
	.yp-drawer__thumb img { width: 84px !important; height: 84px !important; }
	.yp-drawer__name { font-size: var(--yp-fs-base) !important; }
	.yp-drawer__now { font-size: var(--yp-fs-lg) !important; }
	.yp-drawer__foot > .yp-btn { min-height: 54px !important; }

	/* ---------- 页头 / Logo ---------- */
	.yp-logo img { max-height: 78px !important; }
	.yp-header__inner { min-height: 96px !important; }
	.yp-header--minimal .yp-logo img { max-height: 78px !important; }
}

/* 更窄的手机（≤560px）再收一点 */
@media (max-width: 560px) {
	body.woocommerce-checkout h1.yp-page__title { font-size: var(--yp-fs-xl) !important; }
	.yp-logo img { max-height: 64px !important; }
	.yp-header__inner { min-height: 82px !important; }
	body.woocommerce-checkout #order_review .shop_table tbody tr.cart_item { grid-template-columns: 52px minmax(0, 1fr) auto !important; }
	body.woocommerce-checkout #order_review .yp-sum__media img { width: 52px !important; height: 52px !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item { grid-template-columns: 20px 72px minmax(0, 1fr) !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail img { width: 72px !important; height: 72px !important; }
}


/* ==========================================================================
   ★★★ 修手机版被挤扁的问题（根因）
   ── 之前「整体放宽」加的 @media (max-width: 1200px) 把两栏写成了 1fr 1fr，
      而它排在「≤780px 收成一栏」的规则后面 → 手机上仍是两栏，卡片只有半屏。
      必须在最后（手机断点里）再明确一次单栏。
   ========================================================================== */
@media (max-width: 780px) {
	body.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 1fr) !important;
		max-width: 100% !important;
		gap: 18px !important;
	}
	body.woocommerce-checkout .yp-checkout-card,
	body.woocommerce-checkout #order_review {
		grid-column: 1 !important;
		grid-row: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		position: static !important;
	}
	/* 手机上一律整行，输入框不再被压窄 */
	body.woocommerce-checkout .yp-main,
	body.woocommerce-checkout .yp-page,
	body.woocommerce-checkout .yp-page__content,
	body.woocommerce-checkout .yp-container {
		max-width: 100% !important;
		padding-inline: 14px !important;
	}
	body.woocommerce-checkout #customer_details .form-row input.input-text,
	body.woocommerce-checkout #customer_details .form-row select,
	body.woocommerce-checkout #customer_details .select2-container { width: 100% !important; }
}


/* ==========================================================================
   ★ 手机版两侧留白太厚（实测每边 74px）→ 把嵌套的容器左右内边距收掉，
     只保留卡片自己的 14px，输入框从 242px 变成约 362px。
   ========================================================================== */
@media (max-width: 780px) {
	body.woocommerce-checkout main.yp-main,
	body.woocommerce-checkout article.yp-page,
	body.woocommerce-checkout .yp-container,
	body.woocommerce-checkout .yp-page__content { padding-left: 0 !important; padding-right: 0 !important; }
	body.woocommerce-checkout .yp-checkout-card,
	body.woocommerce-checkout #order_review { padding: 14px !important; }
	body.woocommerce-checkout .yp-notice { padding: 14px !important; }
	body.woocommerce-checkout #customer_details .form-row { padding: 0 !important; }
}


/* ★ 订单摘要卡片的边框改成黑色（和左栏卡片一致，用户要求） */
body.woocommerce-checkout #order_review {
	border: 2px solid var(--yp-black) !important;
	border-radius: var(--yp-radius-lg, 18px) !important;
}
/* Select2 搜索框的提示文字样式 */
body.woocommerce-checkout .select2-search--dropdown .select2-search__field::placeholder {
	color: var(--yp-grey-500) !important;
	opacity: 1 !important;
}


/* ★ 手机端左右各留 2mm（约 8px）的边距（用户要求） */
@media (max-width: 780px) {
	body.woocommerce-checkout main.yp-main {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
	body.woocommerce-cart main.yp-main {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
	.yp-drawer__panel { padding-left: 0 !important; padding-right: 0 !important; }
}


/* ★ 购物车页：Update cart 按钮隐藏（加减按钮会自己提交表单更新）
   ── 备注框 2026-09-22 按参考站加回来了（见文件末尾的 .yp-cart-note 样式） */
body.woocommerce-cart table.shop_table.cart tr td.actions { display: none !important; }
body.woocommerce-cart .yp-cart-hint { display: none !important; }


/* ==========================================================================
   ★ 购物车页（用户要求）：① 去掉表头行 Product / Quantity / Total
                        ② 「数量」和「金额」两列必须严格对齐
   ── 根因：tr.cart_item 改成 grid 之后，thead 里的 6 个 th 仍然给表格撑出 6 列，
      而 tbody 的每一行被浏览器包进一个匿名单元格 → 只占第 1 列。
      于是「行里的数量+金额」挤在左边一小块，和表头、和下面的合计全错位。
   ── 做法：表头直接不要（thead: display:none），table/tbody 改成 block，
      让每一行真正占满整行；数量列、金额列都用固定宽度，
      这样每一行的加减器和金额都落在同一条竖线上。
   ========================================================================== */
body.woocommerce-cart form.woocommerce-cart-form table.shop_table.cart { display: block !important; width: 100% !important; }
body.woocommerce-cart table.shop_table.cart thead { display: none !important; }
body.woocommerce-cart table.shop_table.cart tbody { display: block !important; }
body.woocommerce-cart table.shop_table.cart tbody > tr:not(.cart_item) { display: none !important; }

body.woocommerce-cart table.shop_table.cart tr.cart_item {
	display: grid !important;
	grid-template-columns: 26px 130px minmax(0, 1fr) 210px 170px;
	column-gap: 22px;
	align-items: center;
	padding: 20px 0 !important;
	border-bottom: 1px solid var(--yp-grey-200) !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity { text-align: center !important; }
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal {
	display: flex !important; justify-content: flex-end !important;
	text-align: right !important; min-width: 0 !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal .yp-sum__prices {
	display: flex !important; flex-direction: column; align-items: flex-end !important;
	gap: 2px; white-space: nowrap;
}

/* 合计区里「50 items / $190.00」那一行（cart-subtotal）按用户要求去掉，只留 Total */
body.woocommerce-cart .cart-collaterals .cart_totals tr.cart-subtotal { display: none !important; }

/* 底部合计区：宽度 = 数量列 + 间距 + 金额列 → 右缘和上面的金额列完全对齐
   （标签那一列再往右挪一点，用户要求「移过去一点」） */
body.woocommerce-cart .cart-collaterals { grid-template-columns: minmax(0, 1fr) 402px !important; }
body.woocommerce-cart .cart-collaterals .cart_totals tr > th:first-child,
body.woocommerce-cart .cart-collaterals .cart_totals tr > td:first-child { padding-left: 40px !important; }

@media (max-width: 780px) {
	body.woocommerce-cart table.shop_table.cart tr.cart_item {
		grid-template-columns: 22px 84px minmax(0, 1fr) !important;
		column-gap: 12px !important; row-gap: 10px !important;
		padding: 16px 0 !important; align-items: start !important;
	}
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail img { width: 84px !important; height: 84px !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity { grid-column: 2 / -1 !important; text-align: left !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal {
		grid-column: 2 / -1 !important; justify-content: flex-start !important; text-align: left !important;
	}
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal .yp-sum__prices {
		flex-direction: row !important; align-items: baseline !important; gap: 8px !important;
	}
	body.woocommerce-cart .cart-collaterals { grid-template-columns: minmax(0, 1fr) !important; }
}


/* ==========================================================================
   ★ 结账提交按钮文案变长（Submit order and check payment information）
   ── 原来两个单词怎么放都行，这么长就不能再 nowrap / 定高，否则字会被切掉
   ========================================================================== */
body.woocommerce-checkout #place_order,
body.woocommerce-checkout #place_order.button.alt {
	white-space: normal !important;
	height: auto !important;
	min-height: 64px !important;
	line-height: 1.25 !important;
	padding: 16px 20px !important;
	font-size: var(--yp-fs-base) !important;
	letter-spacing: 0 !important;
	text-align: center !important;
}
@media (max-width: 780px) {
	body.woocommerce-checkout #place_order,
	body.woocommerce-checkout #place_order.button.alt {
		min-height: 58px !important;
		padding: 14px 14px !important;
		font-size: var(--yp-fs-sm) !important;
	}
}


/* ==========================================================================
   ★ 结账页：右栏订单摘要卡片改成和左栏一样高（用户要求「右边改成和左边一样大」）
   ── 两栏本来就已经等宽（各 1fr），差的是高度：form.checkout 上是 align-items: start，
      所以右卡片只有内容那么高，比左卡片矮一大截。
      改成 stretch → 右卡片拉满整行高度，和左卡片一样大。
   ── 副作用（正是想要的）：卡片既然占满整列，position: sticky 就没有可滑动余量，
      吸顶效果自然消失；右卡片始终和左卡片上下对齐。
   ========================================================================== */
body.woocommerce-checkout form.checkout { align-items: stretch !important; }
/* ⚠️ 2026-09-22 更新：用户后来给了明确规格（sticky top:20px + max-height: calc(100vh - 40px)），
   而「拉伸到和左栏等高」会让卡片没有可滑动余量、sticky 失效。
   所以右卡片改回按内容高度（align-self: start），页面往下滚时它会钉在视口顶部；
   左栏比视口矮的常见情况下，两者高度本来就差不多。 */
body.woocommerce-checkout #order_review { align-self: start !important; }

/* ★ 隐私说明挪到左栏卡片最下面（订阅勾选框下面，用户圈红框+箭头指的位置） */
body.woocommerce-checkout .yp-checkout-card .woocommerce-privacy-policy-text {
	margin: 14px 0 0 !important;
	font-size: var(--yp-fs-xs) !important;
	line-height: 1.5 !important;
	color: var(--yp-grey-500);
}
@media (max-width: 780px) {
	body.woocommerce-checkout .yp-checkout-card .woocommerce-privacy-policy-text { font-size: 11px !important; }
}


/* ==========================================================================
   ★ 右栏摘要卡片多出来的高度全给商品列表（用户要求：
      「移动，这样上面空间变多，滚动列表变多」）
   ── 卡片现在和左栏等高，原来底部空着一大块。改法：
      · 卡片变成纵向 flex，表格吃掉所有剩余高度
      · 表格内部也是纵向 flex，tbody（商品列表）伸缩填满，
        tfoot（小计/总计/优惠）和绿色按钮就被顶到卡片底部
      · tbody 的 flex-basis 用 0，否则商品一多，列表会把整行撑高（左栏也被拉长）
   ========================================================================== */
body.woocommerce-checkout #order_review { display: flex !important; flex-direction: column; }
body.woocommerce-checkout #order_review .shop_table {
	display: flex !important; flex-direction: column;
	flex: 1 1 auto !important; min-height: 0;
}
body.woocommerce-checkout #order_review .shop_table tbody {
	flex: 1 1 0 !important;
	min-height: 160px !important;
	max-height: none !important;
	overflow-y: auto !important;
}
body.woocommerce-checkout #order_review .shop_table tfoot { margin-top: auto !important; }

@media (max-width: 780px) {
	/* 手机上卡片是堆叠的，没有「等高」这回事 → 列表回到原来的限高 */
	body.woocommerce-checkout #order_review { display: block !important; }
	body.woocommerce-checkout #order_review .shop_table { display: block !important; }
	body.woocommerce-checkout #order_review .shop_table tbody {
		flex: none !important; min-height: 0 !important; max-height: 196px !important;
	}
	body.woocommerce-checkout #order_review .shop_table tfoot { margin-top: 0 !important; }
}


/* ==========================================================================
   ★★★ 整版居中（用户要求「整个版面要居中」）
   ── 根因：结账页/购物车页给这几层容器只写了 max-width，没有写 auto 外边距，
      块级元素就默认靠左排。窗口一宽（1920 实测：左 44 / 右 389）整版明显偏左，
      右边空一大块。这里把整条容器链都加上左右 auto 外边距即可。
   ========================================================================== */
body.woocommerce-checkout main.yp-main,
body.woocommerce-checkout article.yp-page,
body.woocommerce-checkout .yp-page,
body.woocommerce-checkout .yp-page__content,
body.woocommerce-checkout .yp-container,
body.woocommerce-checkout .woocommerce,
body.woocommerce-checkout form.checkout,
body.woocommerce-cart main.yp-main,
body.woocommerce-cart article.yp-page,
body.woocommerce-cart .yp-page,
body.woocommerce-cart .yp-page__content,
body.woocommerce-cart .yp-container,
body.woocommerce-cart .woocommerce {
	margin-left: auto !important;
	margin-right: auto !important;
}


/* ==========================================================================
   ★ 右栏底部：Total / TOTAL SAVINGS 再往下一点（用户要求「这里再下来一点」）
   ── 把合计下面到绿色按钮之间的空隙收掉，合计行就整体下移，按钮照旧贴卡片底部。
   ========================================================================== */
body.woocommerce-checkout #order_review .shop_table { margin-bottom: 0 !important; }
body.woocommerce-checkout #order_review .woocommerce-checkout-payment,
body.woocommerce-checkout #order_review #payment,
body.woocommerce-checkout #order_review .form-row.place-order {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
body.woocommerce-checkout #order_review #place_order { margin-top: 10px !important; }


/* ==========================================================================
   ★ 两个购物车入口要长得不一样（用户要求）：
     · 普通页面：购物袋图标 `.yp-icon--cart` → 点开侧边栏小购物车
     · 结账页（极简页头）：带文字的「VIEW CART」描边药丸 → 直接进完整购物车页
   ========================================================================== */
.yp-header__actions .yp-cartlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding: 0 18px;
	border: 1.5px solid var(--yp-black);
	border-radius: 999px;
	background: var(--yp-white);
	color: var(--yp-black);
	font-family: var(--yp-font-body);
	font-weight: 700;
	font-size: var(--yp-fs-sm);
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}
.yp-header__actions .yp-cartlink svg { width: 18px; height: 18px; }
.yp-header__actions .yp-cartlink:hover,
.yp-header__actions .yp-cartlink:focus-visible {
	background: var(--yp-black);
	color: var(--yp-white);
}

@media (max-width: 560px) {
	.yp-header__actions .yp-cartlink { height: 40px; padding: 0 13px; gap: 6px; font-size: var(--yp-fs-xs); }
	.yp-header__actions .yp-cartlink svg { width: 16px; height: 16px; }
}


/* ==========================================================================
   ★ 缺货（Sold out）：按钮和 Add to cart 长得一模一样，但点不动
   ── 用户要求：没库存时按钮外观跟正常加购按钮一致（黑底白字、同尺寸同位置），
      鼠标放上去显示「禁止」光标（参考站 mylarpacking 的行为），
      hover 不做反色、点击无效。变量商品「全部规格缺货」也用同一颗按钮。
   ========================================================================== */
.single-product .yp-buybox .single_add_to_cart_button.is-soldout,
.single-product .yp-buybox .single_add_to_cart_button[disabled],
.single-product .yp-variable-box .single_add_to_cart_button.is-soldout,
.single-product .yp-soldout-box .single_add_to_cart_button {
	background: var(--yp-black) !important;
	border-color: var(--yp-black) !important;
	color: var(--yp-white) !important;
	opacity: 1 !important;
	cursor: not-allowed !important;
}
.single-product .yp-buybox .single_add_to_cart_button.is-soldout:hover,
.single-product .yp-buybox .single_add_to_cart_button.is-soldout:focus,
.single-product .yp-buybox .single_add_to_cart_button[disabled]:hover,
.single-product .yp-variable-box .single_add_to_cart_button.is-soldout:hover,
.single-product .yp-variable-box .single_add_to_cart_button.is-soldout:focus,
.single-product .yp-soldout-box .single_add_to_cart_button:hover,
.single-product .yp-soldout-box .single_add_to_cart_button:focus {
	background: var(--yp-black) !important;
	border-color: var(--yp-black) !important;
	color: var(--yp-white) !important;
	cursor: not-allowed !important;
}

/* 变量商品「全部缺货」：按钮整行宽，下面那行说明收成小灰字 */
.single-product .yp-variable-box .yp-soldout-box { display: block !important; }
.single-product .yp-variable-box .yp-soldout-box .single_add_to_cart_button { width: 100% !important; }
.single-product .yp-soldout-box .stock {
	margin: 10px 0 0 !important;
	font-size: var(--yp-fs-sm) !important;
	color: var(--yp-grey-500) !important;
}


/* ==========================================================================
   ★★★ 右栏订单摘要卡片：按用户给的规格重做（2026-09-22）
   ── 外层容器
      · 圆角 + 边框，停在页面右侧：position: sticky; top: 20px
      · 高度绝不超过视口：max-height: calc(100vh - 40px)
      · 内部纵向 flex 三段；overflow: hidden 让圆角裁掉内容、滚动条只留给列表
   ── 中间（商品列表）= 唯一滚动区：flex: 1; overflow-y: auto; min-height: 0
   ── 底部（Subtotal / Total / TOTAL SAVINGS / 绿色按钮）= flex-shrink: 0，不滚动
   ── 顶部：不滚动，下面一条明显的分割线（列表的 border-top）
   ========================================================================== */
body.woocommerce-checkout #order_review {
	position: sticky !important;
	top: 20px !important;
	max-height: calc(100vh - 40px) !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	border: 2px solid var(--yp-black) !important;
	border-radius: var(--yp-radius-lg, 18px) !important;
}
/* 列表：吃掉所有剩余高度，自己滚 */
body.woocommerce-checkout #order_review .shop_table {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
	margin-bottom: 0 !important;
}
body.woocommerce-checkout #order_review .shop_table tbody {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	border-top: 1px solid var(--yp-grey-200) !important;   /* ← 顶部那条分割线（不跟着滚） */
}
/* 底部结算区：不滚动、不被压缩 */
body.woocommerce-checkout #order_review .shop_table tfoot,
body.woocommerce-checkout #order_review .woocommerce-checkout-payment,
body.woocommerce-checkout #order_review #payment {
	flex-shrink: 0 !important;
}
body.woocommerce-checkout #order_review .woocommerce-checkout-payment,
body.woocommerce-checkout #order_review #payment,
body.woocommerce-checkout #order_review .form-row.place-order {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
body.woocommerce-checkout #order_review #place_order { margin-top: 10px !important; }

/* 手机上卡片是堆叠的：取消 max-height / sticky / 内部滚动，回到原来的样子 */
@media (max-width: 780px) {
	body.woocommerce-checkout #order_review {
		position: static !important;
		top: auto !important;
		max-height: none !important;
		overflow: visible !important;
		display: block !important;
	}
	body.woocommerce-checkout #order_review .shop_table { display: block !important; }
	body.woocommerce-checkout #order_review .shop_table tbody {
		flex: none !important; min-height: 0 !important; max-height: 196px !important;
	}
	body.woocommerce-checkout #order_review .shop_table tfoot { margin-top: 0 !important; }
}


/* ==========================================================================
   ★★★ 购物车页改成参考站那样（用户：改成第一张图那样）
   ① 只留一个「YOUR CART」大标题（去掉黑底横幅 + 重复的 SHOP CART 标题）
   ② 标题下面一条免运进度条
   ③ 表格加回表头行 Product / Quantity / Total（表头上面一条分割线）
   ④ 商品行：缩略图 / 名称 / 数量 + 数量下面的 Remove 小按钮 / 右侧金额
   ========================================================================== */

/* ① 标题
   ── 用户要求：标题和下面「You've unlocked free shipping」那行之间，也要和
      进度条↔表头线一样的距离（那边现在 74px + 内边距 ≈ 88px） */
body.woocommerce-cart h1.yp-page__title { display: none !important; }
body.woocommerce-cart .yp-cart-hero {
	background: transparent !important;
	color: var(--yp-black) !important;
	padding: 0 !important;
	border-radius: 0 !important;
	margin: 0 0 84px !important;
}
body.woocommerce-cart .yp-cart-hero__ship { display: none !important; }
body.woocommerce-cart .yp-cart-hero__title {
	color: var(--yp-black) !important;
	font-size: var(--yp-fs-4xl) !important;
	line-height: 1 !important;
}

/* ② 免运进度条（按参考图：**居中、短一条** max 560px，约 9px 粗、圆头；表头线细 1px）
   ── 用户要求：进度条和表头那条线之间要留出一段距离（原来只有 ~24px，参考图约 50px） */
body.woocommerce-cart .yp-shipbar { margin: 0 0 74px; text-align: center; }
body.woocommerce-cart .yp-shipbar__text { margin: 0 0 12px !important; font-size: var(--yp-fs-base) !important; }
body.woocommerce-cart .yp-shipbar__track {
	display: block; width: 100%; max-width: 560px; height: 9px;
	margin: 0 auto; border-radius: 999px; background: var(--yp-grey-100); overflow: hidden;
}
body.woocommerce-cart .yp-shipbar__fill { display: block; height: 100%; border-radius: 999px; background: var(--yp-black); }

/* ③ 表头行（Product / Quantity / Total）
   ⚠️ 结构是 thead > tr > th：grid 要写在 tr 上（thead 只是外面那层壳），
      写错层的话三个 th 会全挤到第一列、竖着堆起来。 */
body.woocommerce-cart form.woocommerce-cart-form table.shop_table.cart thead {
	display: block !important;
	border-top: 1px solid var(--yp-black) !important;
	border-bottom: 0 !important;
	padding: 14px 0 10px !important;
	margin-bottom: 2px !important;
}
body.woocommerce-cart form.woocommerce-cart-form table.shop_table.cart thead tr {
	display: grid !important;
	grid-template-columns: 90px minmax(0, 1fr) 210px 170px;
	column-gap: 22px;
	align-items: center;
}
body.woocommerce-cart table.shop_table.cart thead th { display: none !important; }
body.woocommerce-cart table.shop_table.cart thead th.product-name,
body.woocommerce-cart table.shop_table.cart thead th.product-quantity,
body.woocommerce-cart table.shop_table.cart thead th.product-subtotal {
	display: block !important;
	border: 0 !important;
	padding: 0 !important;
	font-family: var(--yp-font-body) !important;
	font-weight: 500 !important;
	font-size: var(--yp-fs-base) !important;
	color: var(--yp-black) !important;
}
body.woocommerce-cart table.shop_table.cart thead th.product-name { grid-column: 1 / span 2 !important; text-align: left !important; }
body.woocommerce-cart table.shop_table.cart thead th.product-quantity { grid-column: 3 !important; text-align: center !important; }
body.woocommerce-cart table.shop_table.cart thead th.product-subtotal { grid-column: 4 !important; text-align: right !important; }

/* ④ 商品行：4 列 × 2 行 */
body.woocommerce-cart table.shop_table.cart tr.cart_item {
	display: grid !important;
	grid-template-columns: 90px minmax(0, 1fr) 210px 170px !important;
	column-gap: 22px !important;
	row-gap: 10px !important;
	align-items: center !important;
	padding: 22px 0 !important;
	border-bottom: 1px solid var(--yp-grey-200) !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td {
	display: block !important; width: auto !important; padding: 0 !important; border: 0 !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail { grid-column: 1 !important; grid-row: 1 / span 2 !important; }
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail img { width: 90px !important; height: 90px !important; }
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name {
	display: flex !important; flex-direction: column; gap: 6px;
	grid-column: 2 !important; grid-row: 1 / span 2 !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity { grid-column: 3 !important; grid-row: 1 !important; text-align: center !important; }
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal {
	display: flex !important; justify-content: flex-end !important;
	grid-column: 4 !important; grid-row: 1 / span 2 !important;
	text-align: right !important; min-width: 0 !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove { grid-column: 3 !important; grid-row: 2 !important; justify-self: center !important; }

/* 商品名那一格：名称 / 属性值 / 单价 / N pieces（−$x）各占一行（用户要求「另起一行」）
   ⚠️ .yp-sum__text 是个 <span>，购物车页上默认还是 inline，几行字会连成一片
      （看着就是「…- Dark ChocolateDark Chocolate100 pieces (−$3.50)」），必须显式排成列。 */
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name .yp-sum__text {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name .yp-sum__name,
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name .yp-sum__variant,
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name .yp-sum__unit,
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name .yp-sum__save {
	display: block !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name .yp-sum__name { margin-bottom: 2px; }
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name .yp-sum__unit {
	display: flex !important; align-items: baseline; gap: 8px;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name .yp-sum__unit-now { font-weight: 700; }
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name .yp-sum__unit del,
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name .yp-sum__unit del .woocommerce-Price-amount {
	color: var(--yp-grey-500) !important; font-size: var(--yp-fs-sm) !important; text-decoration: line-through;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name .yp-sum__variant { color: var(--yp-grey-500) !important; font-size: var(--yp-fs-sm) !important; }
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name .yp-sum__save { font-size: var(--yp-fs-sm) !important; color: var(--yp-grey-700) !important; }

/* Remove 做成数量下面那颗小按钮（WooCommerce 输出的是「×」，这里换成文字） */body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove a.remove {
	display: inline-flex !important; align-items: center; justify-content: center;
	width: auto !important; height: auto !important; min-height: 0 !important;
	padding: 10px 26px !important;
	border: 1px solid var(--yp-grey-200) !important; border-radius: 10px !important;
	background: var(--yp-white) !important; color: var(--yp-black) !important;
	font-size: 0 !important; line-height: 1 !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove a.remove::before {
	content: "Remove";
	font-family: var(--yp-font-body); font-size: var(--yp-fs-sm); font-weight: 500;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove a.remove:hover {
	background: var(--yp-grey-50) !important; color: var(--yp-black) !important;
}

/* 手机：不要表头，缩略图在左，其余竖排 */
@media (max-width: 780px) {
	body.woocommerce-cart .yp-cart-hero__title { font-size: var(--yp-fs-2xl) !important; }
	body.woocommerce-cart table.shop_table.cart thead { display: none !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item {
		grid-template-columns: 84px minmax(0, 1fr) !important;
		column-gap: 12px !important; row-gap: 10px !important;
		align-items: start !important; padding: 16px 0 !important;
	}
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail { grid-column: 1 !important; grid-row: 1 / span 4 !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail img { width: 84px !important; height: 84px !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name { grid-column: 2 !important; grid-row: 1 !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity { grid-column: 2 !important; grid-row: 2 !important; text-align: left !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal { grid-column: 2 !important; grid-row: 3 !important; text-align: left !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove { grid-column: 2 !important; grid-row: 4 !important; justify-self: start !important; }
	body.woocommerce-cart .cart-collaterals { grid-template-columns: minmax(0, 1fr) !important; }
}


/* 空购物车页的「Return to shop」按钮去掉（用户要求） */
body.woocommerce-cart .return-to-shop { display: none !important; }
/* 「Your cart is currently empty.」居中（用户要求） */
body.woocommerce-cart .cart-empty,
body.woocommerce-cart .wc-empty-cart-message { text-align: center !important; }

/* ==========================================================================
   ★ 购物车页左下角：Add a note to your order（参考站那张图，用户要求加回来）
   ── 左边备注框、右边金额区；没有 Save note 按钮（失焦自动保存，见 yp_cart_note_js）
   ========================================================================== */
/* 购物车页左下：Add a note to your order
   ── 加 padding-top，让标签和右边金额区第一行（Total）落在同一条水平线上：
      右边合计表每一行有 10px 上内边距，这边补同样的 10px 就对上了。 */
body.woocommerce-cart .cart-collaterals { align-items: start !important; }
body.woocommerce-cart .cart-collaterals .yp-cart-note { grid-column: 1 !important; padding-top: 10px; }
body.woocommerce-cart .cart-collaterals .yp-cart-note label {
	display: block;
	margin: 0 0 12px !important;
	font-family: var(--yp-font-body);
	font-weight: 500 !important;
	font-size: var(--yp-fs-base) !important;
	color: var(--yp-black);
	text-align: left;
}
body.woocommerce-cart .cart-collaterals .yp-cart-note textarea {
	width: 100% !important;
	max-width: 400px !important;   /* 用户要求：框再短一点，中间（备注框↔金额区）的间距更宽 */
	height: 78px !important;
	min-height: 78px !important;
	padding: 14px 18px !important;
	/* 平时：黑色边框（用户要求改黑），点了要输入的时候再在外面加一圈虚线 */
	border: 1.5px solid var(--yp-black) !important;
	border-radius: 14px !important;
	outline: none !important;
	background: var(--yp-white) !important;
	font-family: var(--yp-font-body);
	font-size: var(--yp-fs-sm) !important;
	line-height: 1.5 !important;
	color: var(--yp-black);
	resize: none !important;
	transition: border-color .15s ease;
}
/* 点进去输入（聚焦）：边框变黑 + 外面套一圈虚线 */
body.woocommerce-cart .cart-collaterals .yp-cart-note textarea:focus {
	border-color: var(--yp-black) !important;
	outline: 2px dashed var(--yp-black) !important;
	outline-offset: 5px !important;
}
/* Save note 按钮不要了（失焦就存，参考站也没有这颗按钮） */
body.woocommerce-cart .cart-collaterals .yp-cart-note button { display: none !important; }


/* ==========================================================================
   ★ 侧边栏购物车（抽屉）里的备注框（用户要求「侧边栏购物车也要加上这个」）
   ── 和购物车页同一套外观：小框 + 外面一圈虚线；位置在商品列表下面（跟着滚动）
   ========================================================================== */
.yp-drawer .yp-cart-note { margin: 6px 0 26px; }
.yp-drawer .yp-cart-note label {
	display: block;
	margin: 0 0 12px !important;
	font-family: var(--yp-font-body);
	font-weight: 500 !important;
	font-size: var(--yp-fs-base) !important;
	color: var(--yp-black);
	text-align: center;
}
.yp-drawer .yp-cart-note textarea {
	width: 100% !important;
	height: 78px !important;
	min-height: 78px !important;
	padding: 14px 18px !important;
	/* 平时只有黑色边框；聚焦（点进去输入）才出现外面一圈虚线 */
	border: 1.5px solid var(--yp-black) !important;
	border-radius: 14px !important;
	outline: none !important;
	background: var(--yp-white) !important;
	font-family: var(--yp-font-body);
	font-size: var(--yp-fs-sm) !important;
	line-height: 1.5 !important;
	color: var(--yp-black);
	resize: none !important;
	transition: border-color .15s ease;
}
.yp-drawer .yp-cart-note textarea:focus {
	border-color: var(--yp-black) !important;
	outline: 2px dashed var(--yp-black) !important;
	outline-offset: 5px !important;
}
.yp-drawer .yp-cart-note button { display: none !important; }


/* ==========================================================================
   ★ 结账页：提交时没填的字段 → 红框 + 下面一行红色提示（参考站那张图）
   ── 默认是灰框；只有校验没过的那一格变红。国家/州被 Select2 接管，
      所以要连 .select2-selection--single 一起标红。
   ========================================================================== */
body.woocommerce-checkout #customer_details .form-row.yp-invalid input.input-text,
body.woocommerce-checkout #customer_details .form-row.yp-invalid select,
body.woocommerce-checkout #customer_details .form-row.yp-invalid textarea,
body.woocommerce-checkout #customer_details .form-row.yp-invalid .select2-selection--single,
body.woocommerce-checkout #customer_details .form-row.yp-invalid .select2-selection--single .select2-selection__rendered {
	border-color: #d92b2b !important;
}
/* 国家 / 州那两格被 Select2 接管，而且它们自己有一条更具体的 !important 边框规则，
   所以这里再补一条同样具体的，否则变红了也会被盖回去 */
body.woocommerce-checkout #customer_details #billing_country_field.yp-invalid .select2-selection--single,
body.woocommerce-checkout #customer_details #billing_state_field.yp-invalid .select2-selection--single,
body.woocommerce-checkout #customer_details #billing_country_field.yp-invalid .select2-selection--single .select2-selection__rendered,
body.woocommerce-checkout #customer_details #billing_state_field.yp-invalid .select2-selection--single .select2-selection__rendered {
	border-color: #d92b2b !important;
}
body.woocommerce-checkout #customer_details .form-row.yp-invalid input.input-text:focus,
body.woocommerce-checkout #customer_details .form-row.yp-invalid select:focus,
body.woocommerce-checkout #customer_details .form-row.yp-invalid textarea:focus {
	border-color: #d92b2b !important;
	outline: none !important;
}
body.woocommerce-checkout #customer_details .form-row .yp-field-error {
	display: block !important;
	margin: 8px 0 0 !important;
	font-family: var(--yp-font-body);
	font-size: var(--yp-fs-sm) !important;
	line-height: 1.3 !important;
	color: #d92b2b !important;
}


/* ==========================================================================
   ★ 页头：导航 + 右侧动作区再放大一点点（用户要求「这些再放大一点点」）
   ── 上一轮图标已经从 26 放到 34；这次：导航字号 sm→base、CTA 字号 xs→sm、
      图标 34→38（SVG 30→33）、动作区间距 18→20。
   ★ 购物车数量角标挪到图标右上角（用户要求「数字添加在右上角」），不再压着购物袋。
   ========================================================================== */
.yp-nav__list > li > a { font-size: var(--yp-fs-base) !important; padding: 12px 0 !important; }
.yp-header__actions { gap: 20px !important; }
.yp-cta { font-size: var(--yp-fs-sm) !important; padding: 12px 26px !important; }
.yp-header__actions .yp-icon { width: 38px !important; height: 38px !important; }
.yp-header__actions .yp-icon svg { width: 33px !important; height: 33px !important; }
.yp-header__actions .yp-cart-count {
	min-width: 22px !important; height: 22px !important;
	padding: 0 6px !important;
	font-size: 12px !important; line-height: 22px !important;
	top: -8px !important; right: -9px !important;
}

@media (max-width: 921px) {
	.yp-nav__list > li > a { font-size: var(--yp-fs-sm) !important; padding: 10px 0 !important; }
	.yp-header__actions { gap: 14px !important; }
	.yp-cta { font-size: var(--yp-fs-xs) !important; padding: 10px 22px !important; }
	.yp-header__actions .yp-icon { width: 32px !important; height: 32px !important; }
	.yp-header__actions .yp-icon svg { width: 28px !important; height: 28px !important; }
	.yp-header__actions .yp-cart-count {
		min-width: 20px !important; height: 20px !important;
		font-size: 11px !important; line-height: 20px !important;
		top: -6px !important; right: -7px !important;
	}
}

/* ★ 页头右侧：图标组 和 NEW SH!T 换个位置（用户要求）→ 账户/搜索/购物车在前，NEW SH!T 挪到最右 */
.yp-header__actions > .yp-icon,
.yp-header__actions > .yp-cartlink { order: 1 !important; }
.yp-header__actions > .yp-cta { order: 2 !important; }


/* ==========================================================================
   ★ 我的账户（/my-account/）：参考站那种「左边 Orders/Profile 导航 + 右边卡片」
   ── 模板：woocommerce/myaccount/{my-account,dashboard,navigation}.php
   ========================================================================== */
body.woocommerce-account h1.yp-page__title { display: none !important; }   /* 参考站没有大标题，标题交给欢迎卡片 */

body.woocommerce-account .yp-acc {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
	max-width: 1100px;
	margin: 0 auto;
}

/* 左侧导航 */
body.woocommerce-account .yp-acc-nav ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 4px;
}
body.woocommerce-account .yp-acc-nav li { margin: 0; }
body.woocommerce-account .yp-acc-nav a {
	display: block;
	padding: 8px 0;
	font-family: var(--yp-font-body);
	font-weight: 500;
	font-size: var(--yp-fs-lg);
	line-height: 1.2;
	color: var(--yp-grey-500);
	text-decoration: none;
}
body.woocommerce-account .yp-acc-nav a:hover { color: var(--yp-black); }
body.woocommerce-account .yp-acc-nav li.is-active a { color: var(--yp-black); font-weight: 700; }

/* 右侧内容卡片 */
body.woocommerce-account .yp-acc__content {
	background: var(--yp-white);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 14px 36px rgba(0, 0, 0, .07);
	padding: 28px 32px;
	min-height: 130px;
}
body.woocommerce-account .yp-acc__content > *:first-child { margin-top: 0 !important; }

/* 欢迎卡片 */
body.woocommerce-account .yp-acc-welcome { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
body.woocommerce-account .yp-acc-welcome__title { margin: 0 0 4px !important; font-size: var(--yp-fs-xl) !important; }
body.woocommerce-account .yp-acc-welcome__lead { margin: 0 !important; color: var(--yp-grey-500); font-size: var(--yp-fs-base); }
body.woocommerce-account .yp-acc-welcome__cta { padding: 12px 28px !important; font-size: var(--yp-fs-sm) !important; border-radius: 999px !important; }

/* 订单 / 账户详情这些默认元素收一收，跟卡片风格统一 */
body.woocommerce-account .woocommerce-MyAccount-content h2 { font-size: var(--yp-fs-lg) !important; }
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table { border: 0 !important; }
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	border: 0 !important;
	border-bottom: 1px solid var(--yp-grey-200) !important;
	padding: 14px 0 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .button,
body.woocommerce-account .woocommerce-MyAccount-content button.button,
body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] { border-radius: 999px !important; }
body.woocommerce-account .woocommerce-MyAccount-content .form-row input.input-text { height: 52px; border-radius: 12px; }

@media (max-width: 780px) {
	body.woocommerce-account .yp-acc { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	body.woocommerce-account .yp-acc-nav ul { flex-direction: row; flex-wrap: wrap; gap: 18px; }
	body.woocommerce-account .yp-acc-nav a { font-size: var(--yp-fs-base); padding: 4px 0; }
	body.woocommerce-account .yp-acc__content { padding: 20px; border-radius: 14px; }
	body.woocommerce-account .yp-acc-welcome { flex-direction: column; align-items: flex-start; }
}

/* ---------- 订单列表：状态做成小标签，按钮做成小圆角胶囊（参考站那套） ---------- */
body.woocommerce-account table.woocommerce-orders-table { font-size: var(--yp-fs-sm); }
body.woocommerce-account table.woocommerce-orders-table thead th {
	font-family: var(--yp-font-body); font-weight: 600; color: var(--yp-grey-500); font-size: var(--yp-fs-sm);
}
body.woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a {
	font-weight: 700; color: var(--yp-black); text-decoration: none;
}
body.woocommerce-account .woocommerce-orders-table__cell-order-status {
	font-weight: 600; color: var(--yp-black);
}
body.woocommerce-account .woocommerce-orders-table__cell-order-actions { white-space: nowrap; }
body.woocommerce-account table.woocommerce-orders-table .button,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button,
body.woocommerce-account .woocommerce-MyAccount-content button.button,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 9px 16px !important;
	border: 1px solid var(--yp-grey-200) !important;
	border-radius: 8px !important;
	background: var(--yp-white) !important;
	color: var(--yp-black) !important;
	font-size: var(--yp-fs-xs) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	margin: 2px 0 !important;
}
body.woocommerce-account table.woocommerce-orders-table .button:hover,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button:hover {
	background: var(--yp-grey-50) !important;
}
/* 需要付款的那个按钮（Proceed to Pay）给一点强调色 */
body.woocommerce-account table.woocommerce-orders-table .button.pay {
	background: var(--yp-black) !important; color: var(--yp-white) !important; border-color: var(--yp-black) !important;
}
body.woocommerce-account table.woocommerce-orders-table .button.pay:hover { opacity: .88; }


/* ==========================================================================
   ★ 商品页：价格 + 免责声明跟在同一行后面（价格在左，声明紧跟着它，超宽自然折行）
   ── 用 inline 而不是 flex：flex 在窄栏里会把整句挤到下一行，看着像「另起一块」。
   ========================================================================== */
body.single-product div.product .summary p.price { display: block !important; }
body.single-product div.product .summary p.price .yp-empty-note {
	display: inline !important;
	margin-left: 14px;
	font-size: var(--yp-fs-sm) !important;
	font-weight: 400;
	font-style: italic;
	line-height: 1.4;
	color: var(--yp-grey-700, var(--yp-grey-500));
}
body.single-product div.product .summary p.price .yp-empty-note__icon {
	display: inline-block;
	font-size: 1.5em;
	line-height: 1;
	vertical-align: -0.12em;
	margin-right: 6px;
	font-style: normal;
}
body.single-product div.product .summary p.price .yp-empty-note em { font-style: italic; }

/* ==========================================================================
   ★ Profile 页（账户详情）：参考站那种「概览卡片」布局
   ── 姓名 + Edit、Email 一行、Addresses 列表、Marketing preferences 开关、Sign out
   ========================================================================== */
body.woocommerce-account .yp-prof { max-width: 780px; }

body.woocommerce-account .yp-prof__block {
	background: var(--yp-white);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 12px 32px rgba(0, 0, 0, .06);
	padding: 22px 26px;
	margin-bottom: 22px;
}
body.woocommerce-account .yp-prof__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
body.woocommerce-account .yp-prof__name { margin: 0 !important; font-size: var(--yp-fs-xl) !important; }
body.woocommerce-account .yp-prof__title { margin: 0 0 14px !important; font-size: var(--yp-fs-lg) !important; }
body.woocommerce-account .yp-prof__head .yp-prof__title { margin-bottom: 0 !important; }

body.woocommerce-account .yp-prof__btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 9px 22px !important;
	border: 1px solid var(--yp-grey-200) !important;
	border-radius: 999px !important;
	background: var(--yp-white) !important;
	color: var(--yp-black) !important;
	font-size: var(--yp-fs-sm) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	cursor: pointer;
}
body.woocommerce-account .yp-prof__btn:hover { background: var(--yp-grey-50) !important; }
/* Sign out 这种实心按钮：常态白底黑字黑边；hover / 点击变黑底白字（字始终看得见） */
body.woocommerce-account .yp-prof__btn--solid {
	background: var(--yp-white) !important;
	color: var(--yp-black) !important;
	border: 2px solid var(--yp-black) !important;
	padding: 14px 30px !important;
	font-weight: 700 !important;
}
body.woocommerce-account .yp-prof__btn--solid:hover,
body.woocommerce-account .yp-prof__btn--solid:focus,
body.woocommerce-account .yp-prof__btn--solid:focus-visible,
body.woocommerce-account .yp-prof__btn--solid:active {
	background: var(--yp-black) !important;
	color: var(--yp-white) !important;
	border-color: var(--yp-black) !important;
	opacity: 1 !important;
}
body.woocommerce-account .yp-prof__btn--ghost { margin-left: 8px; }

/* Email 只读一行 */
body.woocommerce-account .yp-prof__row {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	background: var(--yp-white);
	border: 1px solid var(--yp-grey-100);
	border-radius: 14px;
	padding: 15px 20px;
	margin-bottom: 22px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .04);
}
body.woocommerce-account .yp-prof__label { color: var(--yp-grey-500); font-size: var(--yp-fs-sm); }
body.woocommerce-account .yp-prof__value { color: var(--yp-black); font-size: var(--yp-fs-sm); }

/* 地址列表 */
body.woocommerce-account .yp-prof__list { display: flex; flex-direction: column; margin-top: 6px; }
body.woocommerce-account .yp-prof__item {
	display: flex; align-items: center; gap: 14px;
	padding: 16px 2px;
	border-top: 1px solid var(--yp-grey-100);
	color: var(--yp-black); text-decoration: none;
}
body.woocommerce-account .yp-prof__item:first-child { border-top: 0; }
body.woocommerce-account .yp-prof__icon {
	flex: 0 0 auto;
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 12px;
	background: var(--yp-grey-50);
	color: var(--yp-grey-700);
}
body.woocommerce-account .yp-prof__itemtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.woocommerce-account .yp-prof__itemtitle { font-weight: 600; font-size: var(--yp-fs-sm); }
body.woocommerce-account .yp-prof__itemsub { color: var(--yp-grey-500); font-size: var(--yp-fs-sm); line-height: 1.45; }
body.woocommerce-account .yp-prof__chev { margin-left: auto; flex: 0 0 auto; color: var(--yp-grey-400, var(--yp-grey-500)); }

/* 订阅开关 */
body.woocommerce-account .yp-prof__toggle {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 14px 18px;
	border: 1px solid var(--yp-grey-100);
	border-radius: 14px;
}
body.woocommerce-account .yp-prof__togglelabel { display: inline-flex; align-items: center; gap: 12px; font-size: var(--yp-fs-sm); margin: 0 !important; }
.yp-switch { position: relative; display: inline-flex; width: 52px; height: 30px; flex: 0 0 auto; }
.yp-switch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 2; }
.yp-switch__track { position: absolute; inset: 0; background: var(--yp-grey-200); border-radius: 999px; transition: background-color .18s ease; }
.yp-switch__knob {
	position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
	background: var(--yp-white); border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	transition: transform .18s ease;
}
.yp-switch input:checked ~ .yp-switch__track { background: var(--yp-black); }
.yp-switch input:checked ~ .yp-switch__track .yp-switch__knob { transform: translateX(22px); }

/* 底部退出 */
body.woocommerce-account .yp-prof__signout { display: flex; align-items: center; gap: 18px; }
body.woocommerce-account .yp-prof__link { font-size: var(--yp-fs-sm); color: var(--yp-grey-700); text-decoration: none !important; }
body.woocommerce-account .yp-prof__link:hover { text-decoration: underline !important; }

/* 展开后的编辑表单 */
body.woocommerce-account .yp-prof__form { margin-top: 20px; }
body.woocommerce-account .yp-prof__form .form-row { padding: 0 !important; margin: 0 0 16px !important; }
body.woocommerce-account .yp-prof__form label { display: block; margin-bottom: 8px; font-size: var(--yp-fs-sm); font-weight: 600; }
body.woocommerce-account .yp-prof__form input.input-text { height: 52px !important; border: 1px solid var(--yp-grey-200) !important; border-radius: 12px !important; }
body.woocommerce-account .yp-prof__hint { display: block; margin-top: 6px; color: var(--yp-grey-500); font-size: var(--yp-fs-xs); }
body.woocommerce-account .yp-prof__pwd { border: 0; padding: 0; margin: 10px 0 0; }
body.woocommerce-account .yp-prof__pwd legend { font-weight: 600; font-size: var(--yp-fs-base); margin-bottom: 14px; }
body.woocommerce-account .yp-prof__actions { display: flex; align-items: center; gap: 10px; margin: 6px 0 0 !important; }
body.woocommerce-account .yp-prof__actions .button {
	background: var(--yp-black) !important; color: var(--yp-white) !important;
	border: 1px solid var(--yp-black) !important; border-radius: 999px !important;
	padding: 12px 26px !important; font-weight: 700 !important; font-size: var(--yp-fs-sm) !important;
}

@media (max-width: 780px) {
	body.woocommerce-account .yp-prof__block { padding: 18px; border-radius: 14px; }
	body.woocommerce-account .yp-prof__row { padding: 13px 16px; }
	body.woocommerce-account .yp-prof__item { padding: 14px 0; }
	body.woocommerce-account .yp-prof__signout { flex-wrap: wrap; }
}


/* ==========================================================================
   ★ 购物车页 CHECK OUT：**只压低高度，宽度保持满栏**（用户：变矮不是变短）
   ── 高度 62 → 48px，上面那圈内边距 18 → 10px，宽度回到 100%，不再靠右缩窄
   ========================================================================== */
body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout { padding: 10px 0 0 !important; text-align: left; }
body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button {
	width: 100% !important;
	max-width: none !important;
	min-height: 48px !important;
	height: 48px !important;
	margin: 0 !important;
	padding: 0 24px !important;
	font-size: var(--yp-fs-sm) !important;
	display: flex !important;
}


/* ==========================================================================
   ★ 所有 Remove 都不要下划线（用户要求）
   ── 购物车页 + 侧边栏抽屉，正常态和 hover 都不加
   ========================================================================== */
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove a.remove,
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove a.remove:hover,
.yp-drawer__remove,
.yp-drawer__remove:hover,
.yp-drawer__item a.yp-drawer__remove:hover {
	text-decoration: none !important;
}

/* ==========================================================================
   ★ 侧边栏购物车：Remove 放到数量框下面，并「以数量框为中心」居中（用户要求）
   ── 之前 Remove 靠左，看着和上面的加减框不对齐；现在两者同宽、Remove 居中
   ========================================================================== */
.yp-drawer__item .yp-qty { width: 172px !important; justify-content: space-between !important; box-sizing: border-box; }
.yp-drawer__item .yp-drawer__remove { width: 172px; display: block; text-align: center; margin-top: 10px; }

/* ==========================================================================
   ★ 购物车页：三处线条统一粗细（用户要求「线条要一样粗」）
   ── 备注框边框 / 表头那条线 / CHECK OUT 按钮边框 → 统一 2px（和主题里其它黑框卡片一致）
   ── 侧边栏抽屉里的备注框也一起改成 2px
   ========================================================================== */
body.woocommerce-cart .cart-collaterals .yp-cart-note textarea { border-width: 2px !important; }
body.woocommerce-cart form.woocommerce-cart-form table.shop_table.cart thead { border-top-width: 2px !important; }
body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button { border-width: 2px !important; }
.yp-drawer .yp-cart-note textarea { border-width: 2px !important; }


/* ==========================================================================
   ★ 购物车页（用户要求）
   ── ① 商品列表整列都不显示分隔线（每一行之间、最后一行都不要）
   ── ② Remove 去掉外框，只留文字链接（和侧边栏抽屉里的 Remove 一致）
   ========================================================================== */
body.woocommerce-cart table.shop_table.cart tr.cart_item,
body.woocommerce-cart table.shop_table.cart tr.cart_item:last-child { border-bottom: 0 !important; }
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove a.remove {
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	min-height: 0 !important;
	text-decoration: underline !important;
	color: var(--yp-black) !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove a.remove:hover {
	background: transparent !important;
	color: var(--yp-grey-700) !important;
}

/* ==========================================================================
   ★ 划线原价统一改成「淡绿色」（用户要求：跟参考图一样是绿的，不是灰的）
   ── 覆盖：购物车商品行、购物车/结账摘要、侧边栏抽屉、商品页阶梯价卡片、首页商品卡
   ========================================================================== */
body.woocommerce-cart table.shop_table.cart tr.cart_item del,
body.woocommerce-cart table.shop_table.cart tr.cart_item del .woocommerce-Price-amount,
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal del,
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal del .woocommerce-Price-amount,
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name .yp-sum__unit del,
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name .yp-sum__unit del .woocommerce-Price-amount,
body.woocommerce-checkout #order_review .yp-sum__prices del,
body.woocommerce-checkout #order_review .yp-sum__prices del .woocommerce-Price-amount,
.yp-drawer__figures del,
.yp-drawer__figures del .woocommerce-Price-amount,
.yp-tier__was,
.yp-tiers .yp-tier__was,
.single-product .yp-tier__was,
.yp-card__price del,
.yp-card__price del .woocommerce-Price-amount,
.single-product div.product .summary .price del,
.single-product div.product .summary .price del .woocommerce-Price-amount {
	color: #4eb960 !important;
	opacity: .55;
	font-weight: 500 !important;
	text-decoration: line-through !important;
}


/* ==========================================================================
   ★★ 所有 Remove 都不要下划线（放在文件最末尾，确保压过上面所有 underline 规则）
   ── 之前那条写在中间，被文件后面「购物车页」块里的 text-decoration: underline !important
      盖掉了，所以页面上还带着下划线。
   ========================================================================== */
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove a.remove,
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove a.remove:hover,
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove a.remove::before,
.yp-drawer__remove,
.yp-drawer__remove:hover,
.yp-drawer__remove::before {
	text-decoration: none !important;
	border-bottom: 0 !important;
}
/* 兜底：任何页面上的 .remove 都不要下划线 */
a.remove { text-decoration: none !important; }


/* ==========================================================================
   ★★ 购物车页：Remove 往上提一点（用户要求「上去一点」）
   ── 行内两行的间距（row-gap）从 10px 收到 2px，再把 Remove 那格上提 6px
   ========================================================================== */
body.woocommerce-cart table.shop_table.cart tr.cart_item { row-gap: 2px !important; }
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove {
	grid-column: 3 !important;
	grid-row: 2 !important;
	justify-self: center !important;
	margin-top: -6px !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove a.remove { line-height: 1.1 !important; }


/* ==========================================================================
   ★★ 购物车页：商品行的「合计」价格往上移，和上面的数量框同一条水平线
   ── 用户要求「移动上去」（截图里画了向上箭头 + 指向数量框的横向箭头）。
   ── 原因：subtotal 那格原来是 grid-row: 1 / span 2，配合 align-items: center，
      它是「居中在整个商品行」上（含下面 Remove 那一行），所以视觉上比数量框低一截。
   ── 改法：只占第 1 行 → 和数量框在同一行、同样 center，两者中线自然重合。
      （780px 以下手机版另有 grid-row: 3 的规则，所以这里限定 ≥781px，别压掉它。）
   ========================================================================== */
@media (min-width: 781px) {
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal {
		grid-row: 1 !important;
		align-self: center !important;
	}
}


/* ==========================================================================
   ★★ 购物车页：CHECK OUT 按钮再往右边收一点（用户要求「那个框再整体往右边移动一点」）
   ── 现状（按截图 1.5 倍换算）：按钮左缘 ≈ 数量列 col3 的左缘，而用户画的红线
      = 数量药丸框的左缘；药丸宽 170px、居中在 210px 的列里 → 左右各空 20px。
   ── 给容器加 20px 左内边距（按钮是 width:100%），按钮左缘就正好压到红线上，
      右缘仍然和 Total / 金额列右缘对齐，不动。
   ========================================================================== */
body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout { padding-left: 20px !important; }


/* ==========================================================================
   ★★ 侧边栏购物车（抽屉）：Remove 文字颜色改成黑色（用户要求「颜色改成黑色」）
   ── 原来沿用的是 .yp-drawer__remove 的 --yp-grey-700 灰，和购物车页那个黑色 Remove
      不统一；这里统一成黑色，hover 也保持黑色。
   ========================================================================== */
.yp-drawer .yp-drawer__remove,
.yp-drawer__item .yp-drawer__remove,
.yp-drawer__info .yp-drawer__remove,
.yp-drawer .yp-drawer__remove:hover,
.yp-drawer__item a.yp-drawer__remove:hover,
.yp-drawer__info .yp-drawer__remove:hover {
	color: var(--yp-black) !important;
}


/* ==========================================================================
   ★★ 空购物车页面（用户：「改成这样」）
   ── 目标：上面一个「YOUR CART」大标题，下面一句居中的「Your cart is currently empty.」，
      不要灰底提示框、也不要框上面那条黑线。
   ── 那条黑线 + 灰底来自 base.css 里的 .woocommerce-info（border-top: 2px + grey-50），
      这里针对购物车空状态整个抹掉；标题由 PHP 挂在 woocommerce_cart_is_empty 上输出
      （见 inc/woocommerce.php 的 yp_cart_page_top）。
   ========================================================================== */
body.woocommerce-cart .wc-empty-cart-message { margin: 0 !important; padding: 0 !important; }
body.woocommerce-cart .cart-empty,
body.woocommerce-cart .cart-empty.woocommerce-info {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	color: var(--yp-black) !important;
	font-size: var(--yp-fs-base) !important;
	line-height: 1.5 !important;
	text-align: center !important;
}
body.woocommerce-cart .cart-empty::before,
body.woocommerce-cart .cart-empty::after { content: none !important; display: none !important; }
/* 空车时标题下面没有免运进度条，间距按参考图收一点（非空车那 84px 是留给进度条的） */
body.woocommerce-cart .yp-cart-hero--empty { margin-bottom: 56px !important; }


/* ==========================================================================
   ★★ 侧边栏购物车（抽屉）：备注标签「Add a note to your order」改成左对齐
   ── 用户标注（框住这句话 + 一个向左的箭头）：它原来在抽屉里是 text-align: center
      （见上面 .yp-drawer .yp-cart-note label），和购物车页那个左对齐的标签不一致；
      这里把抽屉里的也改成左对齐（输入框本来就是满宽，不用动）。
   ========================================================================== */
.yp-drawer .yp-cart-note label { text-align: left !important; }


/* ==========================================================================
   ★★ 侧边栏购物车（抽屉）：去掉 TOTAL 上面那条灰色分隔线（用户要求「去掉这个灰线」）
   ── 那条线是 .yp-drawer__foot 的 border-top: 1px solid var(--yp-grey-200)
      （抽屉主体和底部结算区之间的分界），这里去掉；内边距保留，间距不变。
   ========================================================================== */
.yp-drawer__foot {
	border-top: 0 !important;
	box-shadow: none !important;
}
.yp-drawer__panel,
.yp-drawer__body { border-bottom: 0 !important; }


/* ==========================================================================
   ★★ 购物车页商品行的「金额」块：改成和侧边栏抽屉一样（用户「第一张图的价格改成第二张那样」）
   ── 抽屉里（.yp-drawer__figures）：划线原价 fs-lg(≈21px) / 现价 fs-xl(≈24px)，
      两行字号接近，而且是**左边缘对齐**（右边不齐）。
   ── 购物车页原来是：划线原价只有 fs-sm(14px) 的小字 + 两行**右对齐**，
      所以看着和抽屉差很多。这里统一成抽屉那套。
   ── 颜色沿用文件末尾那条「划线原价统一淡绿色」（#4eb960），只调整字号/字重/透明度和对齐。
   ========================================================================== */
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal .yp-sum__prices {
	flex-direction: column !important;
	align-items: flex-start !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal del,
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal del .woocommerce-Price-amount {
	font-size: var(--yp-fs-lg) !important;
	font-weight: 500 !important;
	opacity: .85 !important;
}


/* ==========================================================================
   ★★ 侧边栏购物车：商品信息里加上「单价」（用户「加上第一张图的价格」）
   ── 购物车页商品名下面有两行：单价「$3.80 $4.00」+「50 pieces (−$10.00)」；
      抽屉里原来只有后者。现在把单价也加上，放在「N Pieces (−$x)」**同一行的右边**
      （用户截图里红框标的位置）——PHP 里两个元素用一个 .yp-drawer__meta 行容器装着。
   ── 样式对齐购物车页那一行：现价黑色加粗，划线原价小一号淡绿。
   ========================================================================== */
.yp-drawer__meta {
	display: flex !important;
	flex-direction: column !important;   /* 用户要求「改成两行」：上一行单价，下一行 N Pieces (−$x) */
	align-items: flex-start !important;
	flex-wrap: nowrap;
	gap: 4px !important;
	margin: 0 0 14px !important;
}
.yp-drawer__meta .yp-drawer__save { display: inline-block !important; margin: 0 !important; }
.yp-drawer__unit { display: inline-flex; align-items: baseline; gap: 8px; font-size: var(--yp-fs-base) !important; }
.yp-drawer__unit .yp-drawer__unit-now { font-weight: 700 !important; color: var(--yp-black) !important; }
.yp-drawer__unit del,
.yp-drawer__unit del .woocommerce-Price-amount {
	color: #4eb960 !important;
	opacity: .55 !important;
	font-weight: 500 !important;
	font-size: var(--yp-fs-sm) !important;
	text-decoration: line-through !important;
}


/* ==========================================================================
   ★★ Remove 鼠标悬停「变浅灰」效果（用户确认：「我就是要这个效果啊」）
   ── 完整购物车页本来就有这条悬停效果：正常黑色 → 悬停 --yp-grey-700(#555555)。
      上一轮我误以为用户要去掉它，这里恢复；同时把侧边栏抽屉的 Remove 也统一成
      同一个手感（正常黑色 → 悬停 #555），两边完全一致。
   ========================================================================== */
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove a.remove:hover,
.yp-drawer__remove:hover,
.yp-drawer__item a.yp-drawer__remove:hover,
.yp-drawer__info .yp-drawer__remove:hover {
	color: var(--yp-grey-700) !important;
}


/* ==========================================================================
   ★★ 购物车页金额区：标签不要换行（用户：「不要换行」）
   ── 「Total quantity」「Total amount」原来被挤成两行（flex 里被压缩 + 允许折行）。
   ── 这里禁止折行，并且不让标签那一格被压缩（flex-shrink: 0）。
   ========================================================================== */
body.woocommerce-cart .cart-collaterals .cart_totals tr > th,
body.woocommerce-cart .cart-collaterals .cart_totals tr > td {
	white-space: nowrap !important;
}
body.woocommerce-cart .cart-collaterals .cart_totals tr > th:first-child,
body.woocommerce-cart .cart-collaterals .cart_totals tr > td:first-child {
	flex: 0 0 auto !important;
}


/* ==========================================================================
   ★★ 购物车页金额区的数值：logo 黄 + logo 绿描边（用户：「改成 logo 的黄色，logo 的绿色边框」）
   ── 颜色直接从站上那个 logo（cropped-logo1-1.png）里**精确取色**（取的是占比最高的纯色像素）：
        · 绿（your 那几个字）：#6bd47c（18092 px）
        · 黄（packing 那几个字）：#ffff9a（10310 px）
        · 深墨绿（整个 logo 的外轮廓）：#0d2d0d（34223 px）
   ── 用户演进：黄字绿边 → 绿字黄边 → 和 logo 一样（绿字深墨绿边）→ **回到「绿字黄边」**：
      现在是 **绿填充 #6bd47c + 黄描边 #ffff9a**（两个都是 logo 的精确色值）。
   ── paint-order: stroke fill 让描边画在字形外侧，不会啃掉里面的字。
   ── 描边粗细：1px → 1.5px → 1.8px（用户逐步要求加粗）。
   ── 范围：Total Quantity 行的 150Pcs、Total Amount 行的 $540.00（含 $ 符号）。
   ========================================================================== */
body.woocommerce-cart .cart-collaterals .cart_totals tr.yp-items-total td,
body.woocommerce-cart .cart-collaterals .cart_totals tr.order-total td,
body.woocommerce-cart .cart-collaterals .cart_totals tr.order-total td .woocommerce-Price-amount,
body.woocommerce-cart .cart-collaterals .cart_totals tr.order-total td .woocommerce-Price-currencySymbol {
	color: var(--yp-black) !important;
	-webkit-text-stroke: 0 !important;
	text-shadow: none !important;
}


/* ==========================================================================
   ★★ 侧边栏购物车：商品金额的数字改成和完整购物车页一样大（用户要求）
   ── 购物车页商品行那个绿色 $190.00 是：Inter（继承 body 字体）+ 800 字重 + --yp-fs-xl(≈24px)；
      抽屉里原来是 Prompt（--yp-font-head）+ 900 + --yp-fs-2xl(≈27px)，所以又大又粗。
   ── 这里把抽屉的价格对齐成和购物车页完全一样的字体/字号/字重，两边看起来就一样大了。
   ========================================================================== */
.yp-drawer__line,
.yp-drawer__line .woocommerce-Price-amount {
	font-family: var(--yp-font-body) !important;
	font-size: var(--yp-fs-xl) !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
}


/* ==========================================================================
   ★★ 侧边栏购物车底部：数量行（Total Quantity / NPcs）
   ── 用户要求抽屉底部也像完整购物车页那样两行：Total Quantity + Total Amount
      （金额那行沿用原来的 .yp-drawer__total 样式，这里只补数量行）。
   ========================================================================== */
.yp-drawer__qty {
	display: flex !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	gap: 16px;
	margin: 0 0 10px !important;
	font-family: var(--yp-font-body) !important;
	font-size: var(--yp-fs-base) !important;
	font-weight: 500 !important;
	color: var(--yp-black) !important;
	white-space: nowrap;
}
.yp-drawer__qty strong { font-weight: 500 !important; }


/* ==========================================================================
   ★★ 数量数值再放大一点点（用户：「再放大一点点」→「150Pcs 改成和上面的一样大」）
   ── 上面商品行那个划线原价是 --yp-fs-lg(≈21px)，这里把 Total Quantity 的数值
      （购物车页 + 抽屉）也对齐到同一个字号。
   ========================================================================== */
body.woocommerce-cart .cart-collaterals .cart_totals tr.yp-items-total td,
.yp-drawer__qty strong {
	font-size: var(--yp-fs-base) !important;
}


/* ==========================================================================
   ★★ Total Amount 标签：大小和粗细都和上面的字一样（用户：「改成和上面的字一样大小粗细」）
   ── 原来 order-total 那行的 th 是 head 字体(Prompt) + 900 字重（18/27px），
      和上面的 Total Quantity、表头 Product/Quantity/Total 那套正文样式不一致。
   ── 现在标签统一成正文那套：16px + 500 字重 + body 字体；金额那格保持 27px 不变。
   ========================================================================== */
/* ★ 2026-09-24 用户改了主意：拿结账页右栏那两行当样板（Subtotal 小字 + Total 大粗体），
   要求两个购物车也照那样 —— 所以上面那条「Total Amount 标签缩成 16px/500」的规则已撤掉，
   标签回到主题原本的样式（标题体 Prompt + 900 字重 + --yp-fs-2xl≈27px），金额同样 27px 黑色。 */


/* ==========================================================================
   ★★ 侧边栏购物车底部两行：改成和完整购物车页一模一样（用户：「侧边栏这里改成第一张图这样」）
   ── 参考：购物车页那一块 ——
        · 标签：正文 16px / 500 字重（不是全大写、不是标题体）
        · Total Quantity 的值 150Pcs：--yp-fs-lg(≈21px) + logo 绿底黄边
        · Total Amount 的值 $540.00：--yp-fs-2xl(≈27px) + 标题体 900 + logo 绿底黄边
   ── 抽屉原来是：标签「TOTAL AMOUNT」全大写 + 标题体 900，两个值都是纯黑。
   ========================================================================== */
/* ⚠️ 必须是「直接子元素」> span：金额外面是 <strong><span class="woocommerce-Price-amount">，
   写成 .yp-drawer__total span 会连金额那个 span 一起命中（金额被压成 16px/500/正文体，
   看起来又小又细 —— 就是用户反馈的「要放大啊 / 加粗」）。 */
.yp-drawer__total > span {
	font-family: var(--yp-font-head) !important;
	font-weight: 900 !important;
	font-size: var(--yp-fs-lg) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: var(--yp-black) !important;
}
.yp-drawer__total strong {
	font-family: var(--yp-font-head) !important;
	font-weight: 900 !important;
	font-size: var(--yp-fs-2xl) !important;
}
.yp-drawer__qty strong,
.yp-drawer__total strong,
.yp-drawer__total strong .woocommerce-Price-amount,
.yp-drawer__total strong .woocommerce-Price-currencySymbol {
	color: var(--yp-black) !important;
	-webkit-text-stroke: 0 !important;
	text-shadow: none !important;
}


/* ==========================================================================
   ★★ 结账页右栏「订单摘要」：去掉商品列表顶部那条灰线（用户：「这个灰色线去掉」）
   ── 那条线来自 #order_review .shop_table tbody 的 border-top: 1px solid grey-200
      （原本是给「滚动区」做的上边界，用户不要）。
   ── 行与行之间的线早就去掉了（tr.cart_item 的 border-bottom: 0），这里补最后一条。
   ========================================================================== */
body.woocommerce-checkout #order_review .shop_table tbody {
	border-top: 0 !important;
}


/* ==========================================================================
   ★★ 侧边栏购物车：合计数字要和上面商品行的价格右对齐（用户：「对齐上面的价格」）
   ── 量了截图：商品行价格右缘在 x≈1101，底部 250Pcs / $597.00 右缘在 x≈1189，
      差了约 58 CSS px。两个原因：
        ① .yp-drawer__figures 是个普通 div，虽然写了 align-items: flex-end 但没生效
           （它不是 flex 容器），所以价格在右侧那一列里是**靠左**排的，右边空出一大截；
        ② 商品列表是可滚动区（.yp-drawer__body），细滚动条会吃掉约 11px 宽度，
           而底部的 .yp-drawer__foot 不受影响，于是又多偏 11px。
   ── 修法：① 让价格块右对齐；② 给 footer 右边补上滚动条那点宽度。
   ========================================================================== */
.yp-drawer__figures,
.yp-drawer__figures * { text-align: right !important; }
.yp-drawer__foot { padding-right: 59px !important; }          /* 48 + 11（滚动条） */
@media (max-width: 780px) {
	.yp-drawer__foot { padding-right: 29px !important; }      /* 18 + 11 */
}


/* ==========================================================================
   ★★ 两个购物车金额区 = 结账页右栏那两行（用户：「一摸一样」）
   ── 购物车页：把 WooCommerce 自带的 cart-subtotal 行放出来（标签「Subtotal · N items」+ 小计金额），
      order-total 那行回到默认的「Total」；两行样式本来就一致：16px/500 + 27px 标题体 900 黑色。
   ── 抽屉：底部两行在 PHP 里也改成了「Subtotal · N items / 金额」+「Total / 金额」，
      这里把 Total 标签的字号对齐到和金额一样（27px）。
   ========================================================================== */
body.woocommerce-cart .cart-collaterals .cart_totals tr.cart-subtotal { display: flex !important; }
.yp-drawer__total > span { font-size: var(--yp-fs-2xl) !important; }


/* ==========================================================================
   ★★ 购物车页金额区：标签向左对齐（用户：「向左对齐」）
   ── 原来标签被推得很靠右：tr 有 40px 左内边距、第一格又加了 40px，一共 80px
      （那是之前「标签往右挪一点」加的，现在按用户要求收回）。
   ── 现在两行都从金额区的左边界起步，和 CHECK OUT 按钮的左边缘对齐（按钮本身有 20px 内缩）。
   ========================================================================== */
body.woocommerce-cart .cart-collaterals .cart_totals tr { padding-left: 0 !important; }
body.woocommerce-cart .cart-collaterals .cart_totals tr > th:first-child,
body.woocommerce-cart .cart-collaterals .cart_totals tr > td:first-child { padding-left: 20px !important; }


/* ==========================================================================
   ★★★ 窄屏 / 浏览器高倍放大下的布局修复（用户：放大到 500% 就崩坏了，参考站不会）
   ── 500% 缩放时 CSS 视口只剩窗口宽度的 1/5（1920 屏 ≈ 380px），窄屏断点全部生效。
   ── 根因：主题的窄屏断点只改了「列数」，没有重新给每个格子指定行列位置，
      桌面版留下的定位还在互相打架：
        · 购物车页：Remove 被钉在 grid-column:3 / grid-row:2，商品名还跨两行、
          金额是 grid-column:2/-1，于是 Remove 直接压在数量框上；
        · 侧边栏抽屉：数量框和 Remove 是写死的 172px 宽，比窄屏的信息列还宽 → 顶出格子。
   ── 修法：≤780px 时把每一格明确排到自己的行；固定宽度一律加 max-width 上限。
   ========================================================================== */
@media (max-width: 780px) {

	/* ---------- ① 完整购物车页商品行：图 | 信息 → 数量 / Remove / 金额 各占一行 ---------- */
	body.woocommerce-cart table.shop_table.cart tr.cart_item {
		grid-template-columns: 84px minmax(0, 1fr) !important;
		column-gap: 14px !important;
		row-gap: 10px !important;
		align-items: start !important;
	}
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail { grid-column: 1 !important; grid-row: 1 !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail img { width: 84px !important; height: 84px !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name { grid-column: 2 !important; grid-row: 1 !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity { grid-column: 1 / -1 !important; grid-row: 2 !important; text-align: left !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove { grid-column: 1 / -1 !important; grid-row: 3 !important; justify-self: start !important; margin-top: 0 !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal { grid-column: 1 / -1 !important; grid-row: 4 !important; justify-content: flex-start !important; text-align: left !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal .yp-sum__prices { flex-direction: row !important; align-items: baseline !important; gap: 10px !important; }

	/* ---------- ② 侧边栏抽屉商品行：图 | 信息，金额换到下一行 ---------- */
	.yp-drawer__item {
		grid-template-columns: 84px minmax(0, 1fr) !important;
		column-gap: 14px !important;
		row-gap: 10px !important;
		align-items: start !important;
	}
	.yp-drawer__thumb { grid-column: 1 !important; grid-row: 1 !important; }
	.yp-drawer__thumb img { width: 84px !important; height: 84px !important; }
	.yp-drawer__info { grid-column: 2 !important; grid-row: 1 !important; }
	.yp-drawer__figures { grid-column: 2 !important; grid-row: 2 !important; align-items: flex-start !important; min-width: 0 !important; }
	/* 写死的 172px 在窄屏比信息列还宽，会顶出格子压到别人身上 → 加 max-width 上限 */
	.yp-drawer__item .yp-qty,
	.yp-drawer__item .yp-drawer__remove {
		width: 100% !important;
		max-width: 172px !important;
		box-sizing: border-box !important;
	}
	.yp-drawer__item .yp-drawer__remove { text-align: left !important; }
	.yp-drawer .yp-qty input.qty { width: 56px !important; min-width: 56px !important; }
}


/* ==========================================================================
   ★★ 结账页右栏：**不吸顶**（放在文件最末尾，才压得过中间那条 sticky）
   ── 用户 2026-09-24：「算了不要吸顶的功能了」→ 卡片回到普通文档流，跟着页面滚。
   ── ⚠️ 用 position: relative 而不是 static：「Scroll for more items」那个黑色小胶囊
      是绝对定位在 #order_review 里的，static 会抽掉它的定位上下文，
      于是胶囊飘到页面顶部（用户反馈「Scroll 放错地方」）。
   ========================================================================== */
body.woocommerce-checkout #order_review,
body.woocommerce-checkout #order_review.yp-pinned {
	position: relative !important;
	top: auto !important;
	max-height: none !important;
}


/* ==========================================================================
   ★★ 手机版购物车商品行：重排（用户：「手机的界面这里乱套了」）
   ── 症状：手机上是竖排结构，但表头还是桌面那套 4 列网格 → 只看到「Product / Quantity」，
      「Total」被挤出屏幕；商品行里数量框、Remove、金额又各占一行且全部靠左，很散。
   ── 现在：
        ① 表头只留 Product（左）+ Total（右），和内容对齐；
        ② 商品行：图 | 名称 → 数量（左）+ 金额（右）同一行 → Remove 单独一行；
        ③ 数量框在手机上收窄一点（给右边的金额让位）。
   ========================================================================== */
@media (max-width: 780px) {

	/* ① 表头 */
	body.woocommerce-cart form.woocommerce-cart-form table.shop_table.cart thead tr {
		grid-template-columns: minmax(0, 1fr) auto !important;
	}
	body.woocommerce-cart table.shop_table.cart thead th.product-name { grid-column: 1 !important; text-align: left !important; }
	body.woocommerce-cart table.shop_table.cart thead th.product-subtotal { grid-column: 2 !important; text-align: right !important; }
	body.woocommerce-cart table.shop_table.cart thead th.product-quantity { display: none !important; }

	/* ② 商品行 */
	body.woocommerce-cart table.shop_table.cart tr.cart_item { row-gap: 12px !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
		text-align: left !important;
		justify-self: start !important;
	}
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
		justify-self: end !important;
		justify-content: flex-end !important;
		text-align: right !important;
	}
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal .yp-sum__prices {
		flex-direction: row !important;
		align-items: baseline !important;
		gap: 10px !important;
	}
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove {
		grid-column: 1 / -1 !important;
		grid-row: 3 !important;
		justify-self: start !important;
		margin-top: 0 !important;
	}

	/* ③ 数量框收窄，给右边金额留位置 */
	body.woocommerce-cart .yp-qty--cart { min-height: 46px !important; padding: 0 4px !important; }
	body.woocommerce-cart .yp-qty--cart input.qty { width: 54px !important; font-size: var(--yp-fs-sm) !important; }
	body.woocommerce-cart .yp-qty--cart .yp-qty__btn { width: 30px !important; height: 30px !important; font-size: 15px !important; }
}


/* ==========================================================================
   ★★ 手机版侧边栏购物车：不要占满整屏（用户：「这个侧边栏购物车不是占满整个屏幕」，
      参考图里左边露出一条遮罩）
   ── 原来 ≤767/≤780px 那几处把面板写成 width:100vw → 手机上铺满整屏，看不出是抽屉。
   ── 现在手机上也按 92vw（最多 520px）滑出，左边留出一条遮罩，和参考图一致。
   ========================================================================== */
@media (max-width: 780px) {
	.yp-drawer__panel {
		width: min(520px, 92vw) !important;
		max-width: min(520px, 92vw) !important;
	}
}


/* ==========================================================================
   ★★ 手机版抽屉底部 CHECK OUT 被浏览器底栏挡住（用户：「还有 checkout 被遮挡了」）
   ── 根因：抽屉面板写的是 height:100vh —— 手机上 100vh 是「大视口」，包含了地址栏/
      底部工具栏占掉的那一段，于是面板底部的 TOTAL / CHECK OUT 正好落在工具栏后面。
   ── 修法：① 面板高度改用 dvh（动态视口高度，会随工具栏收起/展开变化），保留 vh 兜底；
           ② footer 底部再补一段 iOS 安全区，iPhone 的 Home 横条也不会压住按钮。
   ========================================================================== */
.yp-drawer,
.yp-drawer__panel {
	height: 100vh;
	height: 100dvh !important;
	max-height: 100vh;
	max-height: 100dvh !important;
}
.yp-drawer__foot {
	padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width: 780px) {
	.yp-drawer__foot {
		padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
	}
}


/* ==========================================================================
   ★★ 手机版侧边栏（抽屉）字体整体缩到参考图的字号（用户：「把我们的字体调整到它那么大」）
   ── 量法：两张截图是同一台手机、同一 DPR（状态栏时间都是 69×22 px），所以可以直接比：
        · 「YOUR CART」 参考 30 / 我们 35
        · 「Remove」     参考 18 / 我们 21
        · 「Add a note to your order」 参考 26 / 我们 30
      → 参考图的字号整体约为我们的 85%。
   ── 于是把抽屉里各档字号按 0.85 收一档：27→23、24→20、21→18、16→14、14→12。
   ========================================================================== */
@media (max-width: 780px) {
	.yp-drawer__title { font-size: 23px !important; }
	.yp-drawer__ship { font-size: 14px !important; }
	.yp-drawer__name,
	.yp-drawer__info .yp-drawer__name { font-size: 14px !important; }
	.yp-drawer__meta .yp-drawer__save { font-size: 14px !important; }
	.yp-drawer__unit,
	.yp-drawer__unit .yp-drawer__unit-now { font-size: 14px !important; }
	.yp-drawer__unit del,
	.yp-drawer__unit del .woocommerce-Price-amount { font-size: 12px !important; }
	.yp-drawer__remove { font-size: 12px !important; }
	.yp-drawer__figures del,
	.yp-drawer__figures del .woocommerce-Price-amount { font-size: 18px !important; }
	.yp-drawer__line,
	.yp-drawer__line .woocommerce-Price-amount { font-size: 20px !important; }
	.yp-drawer__qty span,
	.yp-drawer__qty strong { font-size: 14px !important; }
	.yp-drawer__total > span,
	.yp-drawer__total strong { font-size: 23px !important; }
	.yp-drawer__foot > .yp-btn { font-size: 13px !important; }
	.yp-drawer .yp-qty input.qty { font-size: 14px !important; }
	.yp-drawer .yp-cart-note label { font-size: 14px !important; }
	.yp-drawer .yp-cart-note textarea { font-size: 12px !important; }
}


/* ==========================================================================
   ★★ 手机版抽屉：单价挪到每行右上角（用户：「价格应该在这里」/「你看他们的」）
   ── 参考图（Shopify 那种抽屉）里单价贴在商品名右上角，数量框和 Remove 在下面；
      我们之前把金额放到了 Remove 底下单独一行，看着像「掉下来」了。
   ── 现在手机版恢复三列：图 | 名称 / 单价·优惠 / 数量 / Remove | 金额（右上角）。
   ========================================================================== */
@media (max-width: 780px) {
	.yp-drawer__item {
		grid-template-columns: 76px minmax(0, 1fr) auto !important;
		column-gap: 12px !important;
		row-gap: 8px !important;
		align-items: start !important;
	}
	.yp-drawer__thumb { grid-column: 1 !important; grid-row: 1 !important; }
	.yp-drawer__thumb img { width: 76px !important; height: 76px !important; }
	.yp-drawer__info { grid-column: 2 !important; grid-row: 1 !important; }
	.yp-drawer__figures {
		grid-column: 3 !important;
		grid-row: 1 !important;
		align-items: flex-end !important;
		text-align: right !important;
		min-width: 0 !important;
	}
}


/* ==========================================================================
   ★★ 客户免密码登录页（/login/）：邮箱 + 6 位验证码
   ── 短代码 [yp_login_otp] 的输出，样式沿用登录页那套（左对齐标题、8px 方框、黑色大按钮）
   ========================================================================== */
.yp-otp { max-width: 430px; margin: 0 auto; padding: 8px 0 40px; }
.yp-otp__title { margin: 0 0 8px !important; font-size: 30px !important; line-height: 1.2 !important; font-weight: 700 !important; color: var(--yp-black) !important; text-align: left !important; }
.yp-otp__sub { margin: 0 0 24px !important; font-size: 15px; line-height: 1.5; color: var(--yp-grey-700); }
.yp-otp__sub strong { color: var(--yp-black); }
.yp-otp__label { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--yp-black); }
.yp-otp__input {
	width: 100% !important; height: 52px !important; box-sizing: border-box;
	padding: 0 16px !important; margin: 0 0 16px !important;
	border: 1px solid #d9d9d9 !important; border-radius: 8px !important;
	background: var(--yp-white) !important; color: var(--yp-black) !important;
	font-family: var(--yp-font-body); font-size: 15px !important;
}
.yp-otp__input::placeholder { color: #9ca3af; }
.yp-otp__input:focus { border-color: var(--yp-black) !important; outline: 0 !important; box-shadow: 0 0 0 3px rgba(17,17,17,.06) !important; }
.yp-otp__input--code { text-align: center; letter-spacing: 8px; font-size: 22px !important; font-weight: 700 !important; }
.yp-otp__btn {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 52px; margin: 4px 0 0;
	border: 0; border-radius: 8px; background: var(--yp-black); color: var(--yp-white);
	font-family: var(--yp-font-body); font-size: 15px; font-weight: 700; cursor: pointer;
}
.yp-otp__btn:hover { opacity: .88; }
.yp-otp__msg {
	margin: 0 0 18px !important; padding: 12px 16px; border: 1px solid var(--yp-black); border-radius: 8px;
	background: var(--yp-grey-50); color: var(--yp-black); font-size: 14px; line-height: 1.5;
}
.yp-otp__again { margin: 18px 0 0 !important; text-align: center; font-size: 14px; }
.yp-otp__link { border: 0; background: none; padding: 0; color: var(--yp-black); text-decoration: underline; font: inherit; cursor: pointer; }
.yp-otp__dot { margin: 0 8px; color: var(--yp-grey-500); }
.yp-otp__note { margin: 26px 0 0 !important; font-size: 13px; color: var(--yp-grey-700); }
.yp-otp__note a { color: var(--yp-black); text-decoration: underline; }
.yp-otp__done { text-align: center; font-size: 15px; }


/* ==========================================================================
   ★★ 客户登录页第二步「Enter code」：6 个独立小格（照参考站）
   ── 版式：logo → Enter code → Sent to xxx@yyy  Change → 6 个小方框 → Sign in
   ── 交互（JS 在 inc/login-otp.php 里）：输入自动跳下一格、退格回上一格、
      粘贴 6 位码自动分配并直接提交。
   ========================================================================== */
body.yp-otp-page h1.yp-page__title { display: none !important; }   /* 参考站没有页头大标题 */

.yp-otp__boxes { display: flex; gap: 10px; margin: 6px 0 20px; }
.yp-otp__box {
	width: 56px; height: 64px; box-sizing: border-box; min-width: 0;
	border: 1px solid #e2e2e2; border-radius: 10px; background: var(--yp-white);
	text-align: center; font-family: var(--yp-font-body); font-size: 26px; font-weight: 700;
	color: var(--yp-black); padding: 0; appearance: none; -webkit-appearance: none;
}
.yp-otp__box:focus { border-color: var(--yp-black) !important; outline: 0 !important; box-shadow: none !important; }
.yp-otp__change { margin-left: 10px; color: var(--yp-black); text-decoration: underline; }
.yp-otp__hint { margin: 14px 0 0 !important; font-size: 13.5px; line-height: 1.5; color: var(--yp-grey-700); }
@media (max-width: 480px) {
	.yp-otp__boxes { gap: 6px; }
	.yp-otp__box { width: 100%; height: 56px; font-size: 22px; }
}

/* 客户登录页标题：用正文字体 + 首字母大写（不要主题那套全大写标题体） */
.yp-otp__title { font-family: var(--yp-font-body) !important; text-transform: none !important; letter-spacing: -.01em !important; }
.yp-otp__sub .yp-otp__create { color: var(--yp-black); text-decoration: underline; }

/* 客户登录页第一步：底部条款小字（参考站第二张图那行） */
.yp-otp__legal { margin: 16px 0 0 !important; font-size: 12.5px; line-height: 1.6; color: var(--yp-grey-700); text-align: center; }
.yp-otp__legal a { color: var(--yp-black); text-decoration: underline; }
.yp-otp__note { text-align: center; }

/* ==========================================================================
   ★★ 第二步「Enter code」做成小浮窗（参考站：点 Continue 才浮出一个小界面）
   ── 结构：垫一份灰掉的第一步 + 半透明遮罩 + 居中的小卡片
   ========================================================================== */
.yp-otp__ghost { pointer-events: none; user-select: none; opacity: .55; }
.yp-otp__ghost .yp-otp__input,
.yp-otp__ghost .yp-otp__btn { opacity: .6; }
.yp-otp__backdrop { position: fixed; inset: 0; z-index: 9998; background: rgba(17, 17, 17, .45); }

.yp-otp--modal {
	position: fixed !important;
	z-index: 9999;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%);
	width: min(430px, 92vw) !important;
	max-width: none !important;
	max-height: 92vh;
	overflow-y: auto;
	margin: 0 !important;
	padding: 30px 28px 26px !important;
	background: var(--yp-white);
	border-radius: 16px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .3);
}
.yp-otp--modal .yp-otp__title { font-size: 26px !important; }
@media (max-width: 480px) {
	.yp-otp--modal { width: 94vw !important; padding: 24px 18px 20px !important; }
}

/* ==========================================================================
   ★★ 客户登录页第一步：逐项对齐参考站登录页
   ── 顶部大按钮「Continue with yourpacking」+ or 分隔线 + 带箭头的邮箱框 +
      「Email me with news and offers」圆形勾选框 + 条款行 + 底部 Privacy policy
   ========================================================================== */
.yp-otp__btn--brand { margin: 0 0 20px !important; }

.yp-otp__or { position: relative; text-align: center; margin: 0 0 20px !important; font-size: 13px; color: var(--yp-grey-700); }
.yp-otp__or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--yp-grey-200); }
.yp-otp__or span { position: relative; padding: 0 12px; background: var(--yp-white); }

.yp-otp__field { position: relative; margin: 0 0 16px; }
.yp-otp__field .yp-otp__input { margin: 0 !important; padding-right: 50px !important; }
.yp-otp__arrow {
	position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
	width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
	border: 0; background: none; padding: 0; color: var(--yp-black); cursor: pointer;
}
.yp-otp__arrow:hover { opacity: .7; }

.yp-otp__check { display: flex; align-items: center; gap: 10px; margin: 0 !important; font-size: 14px; color: var(--yp-black); cursor: pointer; }
.yp-otp__check input[type="checkbox"] {
	appearance: none; -webkit-appearance: none;
	width: 20px; height: 20px; margin: 0; flex: 0 0 auto;
	border: 1px solid var(--yp-black) !important; border-radius: 50% !important;
	background: var(--yp-white); position: relative; cursor: pointer;
}
.yp-otp__check input[type="checkbox"]:checked { background: var(--yp-black) !important; }
.yp-otp__check input[type="checkbox"]:checked::after {
	content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.yp-otp__privacy { text-align: center; margin: 44px 0 0 !important; font-size: 13.5px; }
.yp-otp__privacy a { color: var(--yp-black); text-decoration: none; }
.yp-otp__privacy a:hover { text-decoration: underline; }

/* ==========================================================================
   ★★ 客户登录页（/login/）：极简 —— 只留 logo，不要公告条 / 导航 / 图标 / 页脚
   ── 公告黑条、主导航、搜索、购物袋、NEW SHIT、手机抽屉：由 yp_is_minimal_header()
      在 PHP 层就不输出（这一页现在返回 true）；
   ── 这里再兜一层：极简页头里那个「VIEW CART」胶囊不要、整块页脚不要。
   ========================================================================== */
body.yp-otp-page .yp-cartlink { display: none !important; }
body.yp-otp-page .yp-footer,
body.yp-otp-page .yp-announce { display: none !important; }

/* 副标题「Sign in or create an account」对齐参考站：无下划线、字体字重和正文完全一致 */
.yp-otp__sub {
	font-family: var(--yp-font-body) !important;
	font-weight: 400 !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: var(--yp-grey-700) !important;
}
.yp-otp__sub a,
.yp-otp__sub .yp-otp__create,
.yp-otp__sub a:hover,
.yp-otp__sub .yp-otp__create:hover {
	color: inherit !important;
	text-decoration: none !important;
	border-bottom: 0 !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	font-size: inherit !important;
	letter-spacing: inherit !important;
}

/* 客户登录页：整块往下挪一点（用户反馈「太挨着上面了，下来一点」） */
body.yp-otp-page .yp-header--minimal .yp-header__inner { padding-top: 48px !important; }
body.yp-otp-page .yp-otp { padding-top: 18px !important; }

/* ==========================================================================
   ★★ 顶部大按钮点开的小浮窗（对应参考站 Shop Pay 那个小窗）
   ========================================================================== */
.yp-otp__modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.yp-otp__modal[hidden] { display: none !important; }
.yp-otp__modal-backdrop { position: absolute; inset: 0; background: rgba(17, 17, 17, .45); }
.yp-otp__modal-card {
	position: relative;
	width: min(430px, 92vw);
	max-height: 90vh;
	overflow-y: auto;
	background: var(--yp-white);
	border-radius: 16px;
	padding: 34px 28px 26px;
	box-sizing: border-box;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .3);
	text-align: center;
}
.yp-otp__modal-card .yp-otp__title,
.yp-otp__modal-card .yp-otp__sub { text-align: center !important; }
.yp-otp__title--sm { font-size: 26px !important; }
.yp-otp__modal-close {
	position: absolute; top: 12px; right: 12px;
	width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
	border: 0; background: none; color: var(--yp-black); cursor: pointer; opacity: .6;
}
.yp-otp__modal-close:hover { opacity: 1; }
.yp-otp__modal-card .yp-otp__input { text-align: center; }

/* ==========================================================================
   ★★ 第二步浮窗：底下保持空白（参考站那个小窗底下就是空的）
   ── 用户反馈「底下还是登录那个界面」→ 不再垫灰掉的第一步；页头也一起藏掉；
      遮罩改成透明（纯白底 + 居中小卡片，和参考站那张截图的观感一致）。
   ========================================================================== */
body.yp-otp-modal-open .yp-otp__modal-backdrop { background: rgba(17, 17, 17, .45) !important; }
.yp-otp__ghost { display: block !important; }

/* 小浮窗可拖动：像窗口一样（拖动时抓手光标 + 不选中文字） */
.yp-otp--modal { cursor: grab; }
.yp-otp--modal.yp-otp--dragging { cursor: grabbing; user-select: none; }
.yp-otp--modal input,
.yp-otp--modal button,
.yp-otp--modal a { cursor: auto; }
.yp-otp--modal .yp-otp__btn,
.yp-otp--modal .yp-otp__arrow { cursor: pointer; }

/* 邮箱框：让浏览器/密码管理器认出这是登录用户名输入框（配合 autocomplete="username"） */
.yp-otp__input#yp-otp-email,
.yp-otp__input#yp-otp-email-modal { caret-color: var(--yp-black); }

/* 「Not you?」：预填了上次邮箱时出现的小链接（换账号） */
.yp-otp__notyou { margin: 10px 0 0 !important; font-size: 13px; text-align: left; }
.yp-otp__notyou a { color: var(--yp-black); text-decoration: underline; }

/* ==========================================================================
   ★★ 客户登录流程：形状照参考站（A 方案：胶囊控件 + 浅灰无边框输入框），颜色保持黑色
   ── 参数来自参考站公开样式表：控件完全圆角、输入框 #f5f5f5 无边框、控件高 52-56px。
   ── 输入框聚焦时给黑边 + 白底（参考站聚焦态也是深色描边），保证可用性。
   ========================================================================== */
.yp-otp__input {
	border: 1.5px solid transparent !important;
	border-radius: 999px !important;
	background: #f5f5f5 !important;
	height: 54px !important;
	padding-left: 22px !important;
}
.yp-otp__field .yp-otp__input { padding-right: 54px !important; }
.yp-otp__input:focus {
	border-color: var(--yp-black) !important;
	background: var(--yp-white) !important;
	box-shadow: none !important;
}
.yp-otp__btn { border-radius: 999px !important; height: 54px !important; }
.yp-otp__arrow { right: 8px !important; }
.yp-otp__box { border-radius: 14px !important; }
.yp-otp__modal { border-radius: 0 !important; }
.yp-otp--modal { border-radius: 20px !important; }
.yp-otp__check input[type="checkbox"] { border-color: var(--yp-black) !important; }

/* 客户登录页底部的 Privacy policy：往下移（用户：往下移动） */
.yp-otp__privacy { margin-top: 96px !important; }

/* 客户登录页：去掉副标题后把「Sign in」标题放大（用户：去掉，放大） */
.yp-otp__title { font-size: 40px !important; line-height: 1.15 !important; }

/* ==========================================================================
   ★★ 客户登录页：去掉「Sign in」标题，「Sign in or create an account」升级成主标题并放大
   ========================================================================== */
.yp-otp__lead {
	margin: 0 0 26px !important;
	font-family: var(--yp-font-body) !important;
	font-size: 30px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	letter-spacing: -.01em !important;
	color: var(--yp-black) !important;
}
.yp-otp__lead a,
.yp-otp__lead a:hover { color: inherit !important; text-decoration: none !important; font: inherit !important; }

/* ==========================================================================
   ★★ 客户登录页第二步「Enter code」改成独立整页（用户：收验证码的界面改成参考站那样）
   ── 不再用浮窗：没有灰底、没有卡片阴影、没有关闭 ×、没有黑色 Sign in 按钮、
      没有提示句和 Resend 那一行；只剩 Enter code + Sent to … Change + 6 个小格 + Privacy policy。
   ── 第 6 位填完自动提交（JS 已有）；隐藏的提交按钮只负责回车键提交。
   ========================================================================== */
.yp-otp__title { font-size: 28px !important; line-height: 1.2 !important; margin: 0 0 10px !important; }
.yp-otp__sub { margin: 0 0 30px !important; font-size: 15px !important; }
.yp-otp__boxes { gap: 10px !important; margin: 0 !important; }
.yp-otp__box { width: 58px !important; height: 68px !important; font-size: 24px !important; border-radius: 12px !important; }
.yp-otp__submit-hidden { display: none !important; }
/* 输错验证码：格子抖一下 + 边框短暂变红（1.6 秒后 JS 摘掉这个 class，自动恢复正常） */
@keyframes yp-otp-shake {
	0%, 100% { transform: translateX(0); }
	15% { transform: translateX(-7px); }
	30% { transform: translateX(7px); }
	45% { transform: translateX(-5px); }
	60% { transform: translateX(5px); }
	80% { transform: translateX(-2px); }
}
.yp-otp__boxes--error { animation: yp-otp-shake .5s cubic-bezier(.36, .07, .19, .97) both; }
.yp-otp__boxes--error .yp-otp__box { border-color: #d93025 !important; }
.yp-otp__boxes--error .yp-otp__box:focus { border-color: #d93025 !important; box-shadow: 0 0 0 3px rgba(217, 48, 37, .12) !important; }
/* 格子下面的红字提示（参考站那样：无边框、无底色、左对齐） */
.yp-otp__msg--inline {
	margin: 12px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
	color: #d93025 !important; font-size: 14px !important; line-height: 1.5 !important; text-align: left !important;
}
/* 出错时那条「Send a new code」出口 */
.yp-otp__again { margin: 20px 0 0 !important; text-align: left !important; font-size: 14px !important; }
.yp-otp__again .yp-otp__link { color: var(--yp-black) !important; text-decoration: underline !important; }
/* 浮窗相关的旧样式全部失效（结构里已经没有这些节点） */
.yp-otp__modal, .yp-otp__backdrop, .yp-otp__ghost,
.yp-otp__hint, .yp-otp__btn { display: none !important; }
@media (max-width: 480px) {
	.yp-otp__box { width: 46px !important; height: 58px !important; font-size: 22px !important; }
}

/* 收码页「Sent to 邮箱  Change」这一行：邮箱灰色（次要信息），Change 黑色（唯一的操作） */
.yp-otp__sub strong { color: var(--yp-grey-700) !important; font-weight: 500 !important; }
.yp-otp__sub .yp-otp__change,
.yp-otp__sub .yp-otp__change:hover { color: var(--yp-black) !important; text-decoration: none !important; }
.yp-otp__sub .yp-otp__change:hover { text-decoration: underline !important; }

/* ==========================================================================
   ★★ 客户登录页：把「Privacy policy」压到页面最下面（用户：改到下面）
   ── 做法：整页（body → main → article → 容器 → 内容 → .yp-otp）改成纵向撑满视口的
      弹性布局，Privacy policy 用 margin-top:auto 顶到最底部；页脚本来就在这页隐藏。
   ========================================================================== */
body.yp-otp-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.yp-otp-page .yp-main,
body.yp-otp-page .yp-page,
body.yp-otp-page .yp-container--narrow,
body.yp-otp-page .yp-page__content,
body.yp-otp-page .yp-otp { display: flex; flex-direction: column; flex: 1 1 auto; }
body.yp-otp-page .yp-otp__privacy {
	margin-top: auto !important;
	padding-bottom: 0 !important;
	margin-bottom: 10px !important;
}
/* 链接下面那两层容器的底部留白清掉（.yp-section 的 section 间距 + .yp-otp 自带的 40px），
   否则 Privacy policy 会被顶到离底部一百多像素的地方 */
body.yp-otp-page .yp-main,
body.yp-otp-page .yp-page,
body.yp-otp-page .yp-section,
body.yp-otp-page .yp-container,
body.yp-otp-page .yp-container--narrow,
body.yp-otp-page .yp-page__content,
body.yp-otp-page .yp-otp { padding-bottom: 0 !important; margin-bottom: 0 !important; }
body.yp-otp-page .yp-otp__legal { flex: 0 0 auto; }
body.yp-otp-page .yp-otp__again,
body.yp-otp-page .yp-otp__msg--inline,
body.yp-otp-page .yp-otp__boxes,
body.yp-otp-page .yp-otp__form { flex: 0 0 auto; }

/* ==========================================================================
   ★★ 缺货按钮定稿（用户截图）：白底 + 黑边 + 黑色大写 SOLD OUT，点不动
   ── 覆盖前面那套「黑底白字」的写法（那版是 2026-09 的旧要求）；
      同时把「This product is currently out of stock…」那行说明收掉 —— 参考站不显示。
   ── 列表页的黑色圆形 SOLD OUT 角标本来就是好的（.yp-card--soldout），不动。
   ========================================================================== */
.single-product .yp-soldout-box .single_add_to_cart_button,
.single-product .yp-soldout-box .single_add_to_cart_button.is-soldout,
.single-product .yp-buybox .single_add_to_cart_button.is-soldout,
.single-product .yp-buybox .single_add_to_cart_button[disabled],
.single-product .yp-variable-box .single_add_to_cart_button.is-soldout {
	background: var(--yp-white) !important;
	border: 2px solid var(--yp-black) !important;
	color: var(--yp-black) !important;
	opacity: 1 !important;
	text-transform: uppercase !important;
	cursor: not-allowed !important;
}
.single-product .yp-soldout-box .single_add_to_cart_button:hover,
.single-product .yp-soldout-box .single_add_to_cart_button:focus,
.single-product .yp-buybox .single_add_to_cart_button.is-soldout:hover,
.single-product .yp-buybox .single_add_to_cart_button.is-soldout:focus,
.single-product .yp-buybox .single_add_to_cart_button[disabled]:hover,
.single-product .yp-variable-box .single_add_to_cart_button.is-soldout:hover,
.single-product .yp-variable-box .single_add_to_cart_button.is-soldout:focus {
	background: var(--yp-white) !important;
	border-color: var(--yp-black) !important;
	color: var(--yp-black) !important;
	cursor: not-allowed !important;
}
.single-product .yp-soldout-box .stock,
.single-product .yp-soldout-box .out-of-stock,
.single-product .yp-buybox .stock.out-of-stock { display: none !important; }

/* 库存数量不给客户看（用户：后台填的数量是给自己记录的）：
   有货时那行「10000 in stock」直接不显示；真的缺货交给 SOLD OUT 按钮表达。 */
.single-product .woocommerce-variation-availability,
.single-product .woocommerce-variation-availability .stock,
.single-product p.stock.in-stock,
.single-product .yp-variable-box .stock.in-stock { display: none !important; }

/* ==========================================================================
   ★★★ 手机端（≤767px）统一体检补丁
   1) 输入框字号统一 16px —— iOS Safari 在字号 < 16px 的输入框获得焦点时会把整页放大，
      而且不会自己缩回来（用户点一下搜索/邮箱/结账表单，页面就「跳大」）。
      我们原来的输入框是 14–15px（--yp-fs-sm / 15px），手机上全中招。
   2) 点按目标放大：页头图标 34→40px、汉堡 40→44px、数量 +/− 30~34→36px
      （Apple 建议 44px；商品页/购物车那几处网格很窄，先做到 40px 级别不挤压布局）。
   3) 购物车抽屉宽度用 100% 而不是 100vw —— 100vw 含滚动条宽度，窄窗口会多出横向滚动条。
   4) 登录页 6 个验证码格子改弹性宽度：之前固定 46px，320px 小屏（iPhone SE 一代）会溢出。
   5) 结账/购物车里 10px 的小字提到 11px，手机上太小看不清。
   6) 公告条 14→13px，长句子在 360px 屏幕上更少换行。
   ========================================================================== */
@media (max-width: 767px) {
	/* 1) 输入框 16px（注意排除验证码那 6 个小格，它们的字号要留在 22px） */
	input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(.yp-otp__box),
	select:not(.yp-otp__box),
	textarea {
		font-size: 16px !important;
	}

	/* 2) 点按目标 */
	.yp-icon { width: 40px !important; height: 40px !important; }
	.yp-burger { width: 44px; height: 44px; }
	.yp-drawer .yp-qty__btn,
	body.woocommerce-cart .yp-qty--cart .yp-qty__btn { width: 36px !important; height: 36px !important; }

	/* 3) 抽屉宽度 */
	.yp-drawer__panel { width: 100% !important; max-width: 100% !important; }

	/* 4) 验证码格子：等分容器宽度，最窄的手机也不会溢出 */
	.yp-otp__boxes { gap: 8px !important; }
	.yp-otp__box { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; }

	/* 5) 小字提一档 */
	body.woocommerce-checkout #order_review .yp-sum__save,
	body.woocommerce-checkout #order_review .yp-sum__more { font-size: 11px !important; }

	/* 6) 公告条 */
	.yp-announce { font-size: var(--yp-fs-xs); padding: 10px 14px; }
}

/* ==========================================================================
   ★★ 页头下拉菜单：纯白、无边框无阴影（用户：不要边框，纯白就行了）
   ========================================================================== */
.yp-nav .sub-menu {
	background: var(--yp-white) !important;
	border: 0 !important;
	box-shadow: none !important;
}
.yp-nav .sub-menu li a:hover { background: var(--yp-grey-50); }

/* ==========================================================================
   ★★ 搜索无结果那行提示：改成纯黑一句话（用户给了参考图）
   ── 文案在 search.php：No results found for “xxx”. Check the spelling or use a different word or phrase.
   ========================================================================== */
.yp-searchpage__empty {
	color: var(--yp-black) !important;
	font-size: var(--yp-fs-base) !important;
	text-align: center;
}

/* ==========================================================================
   ★★ 搜索框里那个浏览器自带的清除「×」去掉（用户：去掉里面这个 X）
   ── type="search" 的输入框在有内容时，Chrome/Safari 会在右端画一个原生 ×，
      和页头搜索条自己的关闭按钮长得几乎一样，容易混淆 → 用 CSS 把它抹掉。
   ── 注意：只去掉浏览器内置的那个；页头右侧的关闭按钮、搜索页的放大镜都保留。
   ========================================================================== */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal { display: none !important; width: 0; height: 0; }

/* ==========================================================================
   ★★ 搜索打开时：页头是「变成一整块白色」，不是被藏起来（用户澄清）
   ── 结构上搜索条是固定定位的一条，所以这里把它做成一块白底页头：
      白底 + 底部挂一条和主题同款的波浪（和 hero/footer 用的是同一张 SVG），
      看起来就是「页头变白了、下沿用波浪收口」，而不是原本那条带阴影的细线。
   ── 公告条保持可见（黑条在上面），logo/导航仍然让位给搜索框（和参考站一致）。
   ========================================================================== */
html.yp-searching .yp-header {
	background: var(--yp-white) !important;
	position: relative !important;
	z-index: 9999 !important;
}
html.yp-searching .yp-searchbar {
	background: var(--yp-white) !important;
	box-shadow: none !important;
	border: 0 !important;
	padding-bottom: 14px !important;
}


/* ==========================================================================
   ★★ 搜索条：放大镜挪到输入框「里面」并放大（用户要求）
   ── 结构：.yp-searchbar__field 里放 [放大镜按钮][输入框]；
      聚焦的虚线框从输入框挪到 field 上（:focus-within），这样虚线框会把放大镜一起圈住，
      看起来放大镜就在框里 —— 和参考站一致。
   ── 放大镜顺便变成真的提交按钮（点它就能搜），尺寸 18 → 24px。
   ========================================================================== */
.yp-searchbar__form { display: flex; align-items: center; gap: 14px; }
.yp-searchbar__field {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 14px;
	border-radius: 6px;
}
.yp-searchbar__field:focus-within {
	outline: 2px dashed var(--yp-black) !important;
	outline-offset: 4px !important;
	box-shadow: none !important;
}
.yp-searchbar__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--yp-black);
	cursor: pointer;
}
.yp-searchbar__icon svg { width: 24px; height: 24px; }
/* 关闭 × 也在框里：靠右、留一点内边距，别贴着虚线 */
.yp-searchbar__field .yp-searchbar__close {
	margin-left: 4px;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
}
.yp-searchbar__input,
.yp-searchbar__input:focus,
.yp-searchbar__input:focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
	border: 0 !important;
}


/* ==========================================================================
   ★★ 首页底部：灰底 newsletter → 黑页脚，交界处只留一层波浪（用户：这里改回去）
   ── 之前是两层叠着：newsletter 自己画一条「黑波浪」，页脚顶上又画一条「白波浪」，
      两条在交界处叠成「黑齿 + 白齿」的锯齿带，看着很乱。
   ── 改成：这页有 newsletter 时，去掉 newsletter 那条黑波浪，让页脚的波浪改用
      newsletter 的灰底色（--yp-grey-100）填充 —— 只剩一层「灰 → 黑」的波浪，干净。
   ── 其它页面（没有 newsletter）页脚的波浪保持原来的白色，不受影响。
   ========================================================================== */
body:has(.yp-newsletter) .yp-newsletter.yp-wave-bottom::after { display: none !important; }
body:has(.yp-newsletter) .yp-footer.yp-wave-top::before {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%2060%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2030%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20c11.11%20-12.00%2022.22%20-12.00%2033.33%200%20c11.11%2012.00%2022.22%2012.00%2033.33%200%20L1200%200%20L0%200%20Z%27%20fill%3D%27%23f4f4f4%27%2F%3E%3C%2Fsvg%3E") !important;
}

/* NEW-SEARCH-HEADER-BLOCK
   ==========================================================================
   ★★★ 搜索打开时：整块页头变成一片白色固定在顶部（用户说明：不是隐藏页头）
   ── 之前的做法是「隐藏 logo/导航，只留一条搜索框」，用户要的是：
      页头这些元素（公告条 + logo + 导航 + 图标）所在的这一整块变成白色固定在顶部，
      搜索框在这片白色里出现，下面的内容从底下穿过去。
   ── 做法：
      · 公告条 fixed 在 0，页头 fixed 贴在它下面 —— 两段加起来就是「白色页头」，
        滚动时不动，内容从下面穿过；
      · 页头内容照旧显示（不再 visibility:hidden / 不塌陷），白底黑字；
      · 搜索行改成页头内部的普通一行（position: static），排在 logo/导航下面；
      · 正文下移「公告条 + 页头」的高度，所以 hero 顶边那条波浪不会被盖住。
   ── 高度由 JS 实测写进 --yp-announce-h / --yp-search-head-h（字体、换行、手机端都不会错位）。
   ========================================================================== */
html.yp-searching .yp-announce {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 10002 !important;
}
html.yp-searching .yp-header {
	position: fixed !important;
	top: var(--yp-announce-h, 42px) !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	background: var(--yp-white) !important;
	z-index: 10001 !important;
}
/* 页头内容照旧显示：不隐藏、不塌陷、白底黑字 */
html.yp-searching .yp-header__inner {
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	min-height: var(--yp-header-h, 96px) !important;
	height: auto !important;
	overflow: visible !important;
}
/* 搜索行：从「固定在屏幕上的通栏条」改成页头里的一行 */
html.yp-searching .yp-searchbar {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: var(--yp-white) !important;
}
html.yp-searching .yp-searchbar__form {
	padding-top: 0 !important;
	padding-bottom: 18px !important;
}
/* 正文下移整块页头的高度，别盖住下面的波浪 */
html.yp-searching .yp-main {
	padding-top: calc(var(--yp-announce-h, 42px) + var(--yp-search-head-h, 150px)) !important;
}

/* YP-MODAL-SYSTEM
   ==========================================================================
   ★★★ 账户区弹窗（Profile 编辑 / 地址编辑 / 退订确认 共用这一套）
   ── 照参考站（Shopify）：白底圆角卡片 + 背后压暗并轻微模糊 + 右上角 × +
      底部「Cancel（下划线文字）+ 主按钮（黑胶囊）」。
   ── 字段用「悬浮标签」：label 在框里，聚焦或有内容时缩小上移。
   ── 开关：.yp-modal[hidden] 隐藏；打开时给 body 加 .yp-modal-open 锁滚动。
   ========================================================================== */
.yp-modal[hidden] { display: none !important; }
.yp-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}
.yp-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, .45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.yp-modal__card {
	position: relative;
	z-index: 1;
	width: min(760px, 100%);
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	overflow-y: auto;
	background: var(--yp-white);
	border-radius: 18px;
	padding: 30px 34px 26px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
	box-sizing: border-box;
}
.yp-modal__card--sm { width: min(480px, 100%); }
.yp-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.yp-modal__title {
	margin: 0 !important;
	font-family: var(--yp-font-body) !important;
	font-size: var(--yp-fs-xl) !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: -.01em !important;
	text-transform: none !important;
	color: var(--yp-black) !important;
}
.yp-modal__x {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	margin: -8px -10px 0 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	color: var(--yp-black);
	cursor: pointer;
}
.yp-modal__x:hover { opacity: .6; }
.yp-modal__lead { margin: 14px 0 0 !important; font-size: var(--yp-fs-base); line-height: 1.55; color: var(--yp-grey-700); }
.yp-modal__lead strong { color: var(--yp-black); }
.yp-modal__body { margin-top: 22px; }
.yp-modal__actions { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-top: 26px; }
.yp-modal__cancel {
	border: 0;
	background: none;
	padding: 0;
	color: var(--yp-black);
	font-family: var(--yp-font-body);
	font-size: var(--yp-fs-base);
	text-decoration: underline !important;
	cursor: pointer;
}
.yp-modal__save {
	border: 0;
	border-radius: 12px;
	background: var(--yp-black);
	color: var(--yp-white);
	padding: 15px 30px;
	font-family: var(--yp-font-body);
	font-size: var(--yp-fs-base);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}
.yp-modal__save:hover { opacity: .88; }
body.yp-modal-open { overflow: hidden !important; }

/* 悬浮标签字段（label 在框内；聚焦 / 有内容时缩小上移） */
.yp-modal .form-row,
.yp-modal .yp-float { position: relative; margin: 0 0 16px !important; padding: 0 !important; }
.yp-modal .form-row > label,
.yp-modal .yp-float > label {
	position: absolute !important;
	left: 19px !important;
	top: 21px !important;
	z-index: 2;
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--yp-grey-500) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	pointer-events: none;
	transition: top .12s ease, font-size .12s ease;
}
.yp-modal .form-row > label .required,
.yp-modal .form-row > label .optional,
.yp-modal .yp-float > label .required { display: none !important; }
.yp-modal .form-row input.input-text,
.yp-modal .form-row select,
.yp-modal .form-row textarea,
.yp-modal .yp-float input,
.yp-modal .yp-float select {
	width: 100% !important;
	height: 64px !important;
	padding: 24px 18px 8px !important;
	border: 1.5px solid var(--yp-grey-200) !important;
	border-radius: 12px !important;
	background: var(--yp-white) !important;
	color: var(--yp-black) !important;
	font-size: 16px !important;
	box-shadow: none !important;
	box-sizing: border-box;
}
.yp-modal .form-row textarea { height: auto !important; min-height: 104px; padding-top: 26px !important; }
.yp-modal .form-row input:focus,
.yp-modal .form-row select:focus,
.yp-modal .form-row textarea:focus,
.yp-modal .yp-float input:focus {
	border-color: var(--yp-black) !important;
	outline: none !important;
	box-shadow: none !important;
}
.yp-modal .form-row:has(input:focus) > label,
.yp-modal .form-row:has(input:not(:placeholder-shown)) > label,
.yp-modal .form-row:has(select) > label,
.yp-modal .form-row:has(textarea:focus) > label,
.yp-modal .form-row:has(textarea:not(:placeholder-shown)) > label,
.yp-modal .yp-float:has(input:focus) > label,
.yp-modal .yp-float:has(input:not(:placeholder-shown)) > label { top: 10px !important; font-size: 12px !important; }
.yp-modal .yp-prof__hint,
.yp-modal .yp-modal__hint {
	display: block;
	margin: -6px 0 16px !important;
	color: var(--yp-grey-500);
	font-size: var(--yp-fs-xs);
	font-style: italic;
}
.yp-modal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.yp-modal__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yp-modal .select2-container { width: 100% !important; }
.yp-modal .select2-selection--single { height: 64px !important; border: 1.5px solid var(--yp-grey-200) !important; border-radius: 12px !important; }
.yp-modal .select2-selection--single .select2-selection__rendered { line-height: 64px !important; padding-left: 18px !important; }
.yp-modal .select2-selection--single .select2-selection__arrow { height: 62px !important; }
.yp-modal .woocommerce-address-fields__field-wrapper { display: block; }
@media (max-width: 600px) {
	.yp-modal { padding: 12px; }
	.yp-modal__card { padding: 22px 18px 20px; border-radius: 16px; }
	.yp-modal__grid, .yp-modal__grid--3 { grid-template-columns: 1fr; }
}

/* YP-ADDR-MODAL
   ==========================================================================
   ★★ 地址弹窗里的 WooCommerce 原生地址表单：改成参考站那种两列 + 悬浮标签 + Cancel/Save
   ── 表单结构不动（还是 WooCommerce 的 form-edit-address.php），只用 CSS/JS 调整外观：
      · 弹窗自己的标题代替表单里的 <h2>
      · First/Last 两列，其余整行（城市/州/邮编按 WooCommerce 的优先级自然排）
      · Save address 变成黑胶囊，并在它前面插一个 Cancel（JS 插，见模板）
   ========================================================================== */
.yp-modal form > h2,
.yp-modal form > h3 { display: none !important; }
.yp-modal .woocommerce-address-fields__field-wrapper {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0 16px;
}
.yp-modal .woocommerce-address-fields__field-wrapper .form-row { grid-column: span 6; min-width: 0; }
.yp-modal .woocommerce-address-fields__field-wrapper .form-row-first,
.yp-modal .woocommerce-address-fields__field-wrapper .form-row-last { grid-column: span 3; }
.yp-modal .woocommerce-address-fields__field-wrapper .form-row.yp-third { grid-column: span 2; }
.yp-modal form > p.form-row:last-of-type,
.yp-modal form > .form-row:last-child,
.yp-modal .yp-addr__actions {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	margin: 22px 0 0 !important;
	padding: 0 !important;
}
.yp-modal button[name="save_address"],
.yp-modal button[name="save_account_details"] {
	border: 0 !important;
	border-radius: 12px !important;
	background: var(--yp-black) !important;
	color: var(--yp-white) !important;
	padding: 16px 30px !important;
	font-family: var(--yp-font-body) !important;
	font-size: var(--yp-fs-base) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	cursor: pointer;
	order: 2;
}
.yp-modal button[name="save_address"]:hover { opacity: .88; }
.yp-modal .yp-addr__cancel {
	order: 1;
	border: 0;
	background: none;
	padding: 0;
	color: var(--yp-black);
	font-family: var(--yp-font-body);
	font-size: var(--yp-fs-base);
	text-decoration: underline !important;
	cursor: pointer;
}
@media (max-width: 600px) {
	.yp-modal .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr !important; }
	.yp-modal .woocommerce-address-fields__field-wrapper .form-row,
	.yp-modal .woocommerce-address-fields__field-wrapper .form-row-first,
	.yp-modal .woocommerce-address-fields__field-wrapper .form-row-last { grid-column: span 1; }
}

/* 账户资料弹窗里的「Change password」折叠段 */
.yp-modal__more { margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--yp-grey-200); }
.yp-modal__more > summary {
	cursor: pointer;
	list-style: none;
	font-size: var(--yp-fs-sm);
	color: var(--yp-grey-700);
}
.yp-modal__more > summary::-webkit-details-marker { display: none; }
.yp-modal__more > summary::after { content: " +"; }
.yp-modal__more[open] > summary { margin-bottom: 14px; }
.yp-modal__more[open] > summary::after { content: " −"; }

/* 地址列表那两张卡（弹窗的触发按钮） */
.yp-addr__intro { margin: 0 0 22px !important; }
.yp-addr__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.yp-addr__edit {
	border: 0; background: none; padding: 0;
	color: var(--yp-black); font-family: var(--yp-font-body); font-size: var(--yp-fs-sm);
	text-decoration: none !important; cursor: pointer;
}
.yp-addr__edit:hover { text-decoration: underline !important; }

/* ==========================================================================
   ★★ 按钮样式的链接不要下划线（用户：不要下划线）
   ── 根因：.yp-page__content a { text-decoration: underline } 是给正文里的文字链准备的，
      但它连「Shop now」「Add Billing address」「Edit」这类按钮样式的 <a> 也一起加了，
      于是胶囊按钮里的文字下面多一条线。
   ========================================================================== */
.yp-page__content a.yp-btn,
.yp-page__content a.yp-btn:hover,
.yp-page__content a.button,
.yp-page__content a.button:hover,
.yp-page__content a.woocommerce-button,
.yp-page__content a.woocommerce-button:hover,
.yp-page__content a.yp-acc-welcome__cta,
.yp-page__content a.yp-prof__btn,
.yp-page__content .yp-prof__btn,
.yp-page__content .yp-addr__edit { text-decoration: none !important; }

/* ==========================================================================
   ★★ 实心按钮 hover 保持可读（用户：黑字白框，要不然点上去都看不到字啦）
   ── 问题：.yp-prof__btn:hover 把底色改成浅灰，但 --solid 那支的文字仍是白色，
      于是「Sign out」这种黑底白字的按钮一 hover 就变成白字+浅灰底 → 字看不见。
   ── 改法：实心按钮 hover / 点击时反过来 —— 黑底 + 白字，字始终看得见。
   ========================================================================== */
body.woocommerce-account .yp-prof__btn--solid:hover,
body.woocommerce-account .yp-prof__btn--solid:focus,
body.woocommerce-account .yp-prof__btn--solid:focus-visible,
body.woocommerce-account .yp-prof__btn--solid:active {
	background: var(--yp-black) !important;
	color: var(--yp-white) !important;
	border-color: var(--yp-black) !important;
	opacity: 1 !important;
}

/* YP-ADDR-LAYOUT
   ==========================================================================
   ★★ 地址弹窗的字段排布照参考图（Shopify 的 Add address）：
      Country/region 独占第一行 → 姓/名两列 → 公司整行 → 地址整行 → 公寓整行 →
      城市 / 州 / 邮编 三格一行 → 电话整行。
   ── WooCommerce 默认是「姓名 → 公司 → 国家 → 地址…」，用 grid 的 order 把它调过来，
      提交字段完全不变，只是显示顺序不同。
   ========================================================================== */
.yp-modal #billing_country_field,
.yp-modal #shipping_country_field { order: -3; grid-column: span 6; }
.yp-modal #billing_first_name_field,
.yp-modal #shipping_first_name_field { order: -2; grid-column: span 3; }
.yp-modal #billing_last_name_field,
.yp-modal #shipping_last_name_field { order: -1; grid-column: span 3; }
.yp-modal #billing_city_field,
.yp-modal #billing_state_field,
.yp-modal #billing_postcode_field,
.yp-modal #shipping_city_field,
.yp-modal #shipping_state_field,
.yp-modal #shipping_postcode_field { grid-column: span 2; }
@media (max-width: 600px) {
	.yp-modal #billing_city_field,
	.yp-modal #billing_state_field,
	.yp-modal #billing_postcode_field,
	.yp-modal #shipping_city_field,
	.yp-modal #shipping_state_field,
	.yp-modal #shipping_postcode_field { grid-column: span 1; }
}

/* YP-ADDR-PAGE
   ==========================================================================
   ★★ 地址页（我的账户 → Addresses）改成卡片式：账单 / 收货各一张卡，上下排，
      标题左对齐、右侧一个「Add / Edit」胶囊按钮，地址文字在下面。
   ── 之前用的是 WooCommerce 原生 .col2-set 浮动两列 + 标题居中，
      卡片里留白很大、按钮飘在右边、两列在窄容器里挤成一团（用户：没改好）。
   ========================================================================== */
body.woocommerce-account .yp-addr,
body.woocommerce-account .yp-addr .woocommerce-Addresses {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
}
body.woocommerce-account .yp-addr__col,
body.woocommerce-account .yp-addr .woocommerce-Address {
	display: block !important;
	float: none !important;
	clear: both !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 18px !important;
	padding: 22px 24px !important;
	background: var(--yp-white) !important;
	border: 1px solid var(--yp-grey-100) !important;
	border-radius: 16px !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .04);
	text-align: left !important;
}
body.woocommerce-account .yp-addr__col:last-child,
body.woocommerce-account .yp-addr .woocommerce-Address:last-child { margin-bottom: 0 !important; }
body.woocommerce-account .yp-addr__head,
body.woocommerce-account .yp-addr .woocommerce-Address-title {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 12px !important;
	padding: 0 !important;
	text-align: left !important;
}
body.woocommerce-account .yp-addr__head h2,
body.woocommerce-account .yp-addr__head h3,
body.woocommerce-account .yp-addr .woocommerce-Address-title h2,
body.woocommerce-account .yp-addr .woocommerce-Address-title h3 {
	margin: 0 !important;
	text-align: left !important;
	font-size: var(--yp-fs-lg) !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
}
body.woocommerce-account .yp-addr__col address,
body.woocommerce-account .yp-addr .woocommerce-Address address {
	margin: 0 !important;
	font-style: italic;
	font-size: var(--yp-fs-sm);
	line-height: 1.65;
	color: var(--yp-grey-700);
}
/* 右侧那颗 Add / Edit 胶囊按钮（和 Profile 卡里的 Add 一致） */
body.woocommerce-account .yp-addr__edit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 22px !important;
	border: 1px solid var(--yp-grey-200) !important;
	border-radius: 999px !important;
	background: var(--yp-white) !important;
	color: var(--yp-black) !important;
	font-family: var(--yp-font-body);
	font-size: var(--yp-fs-sm) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	cursor: pointer;
}
body.woocommerce-account .yp-addr__edit:hover { background: var(--yp-grey-50) !important; }

/* YP-PROF-ITEM-BTN
   ==========================================================================
   ★★ Profile 页「Addresses」那一行现在是 <button>（点了直接开地址弹窗，不再跳页），
      所以要把浏览器给按钮的默认外观清掉，长得和原来的链接一模一样。
   ========================================================================== */
body.woocommerce-account button.yp-prof__item {
	width: 100% !important;
	border: 0 !important;
	border-top: 1px solid var(--yp-grey-100) !important;
	border-radius: 0 !important;
	background: none !important;
	font: inherit !important;
	color: var(--yp-black) !important;
	text-align: left !important;
	cursor: pointer;
}
body.woocommerce-account button.yp-prof__item:first-child { border-top: 0 !important; }
body.woocommerce-account button.yp-prof__item:hover { background: var(--yp-grey-50) !important; }

/* YP-MODAL-FIELDS-LIKE-CHECKOUT
   ==========================================================================
   ★★★ 弹窗里的 WooCommerce 地址字段：直接照结账页那套做（用户：直接复制结账页的过去）
   ── 之前我在弹窗里给 label 做了「悬浮标签」，但字段本身又带 placeholder，
      于是标签和占位文字叠在一起（用户截图：都重叠了）。
   ── 结账页的做法是：
      ① 所有 label 视觉隐藏（读屏仍读得到），字段名靠 placeholder 显示 → 不可能重叠；
      ② 只有「国家 / 州」这种下拉框，把 label 缩小放到框内左上角，值显示在下面。
   ── 这里把这两条原样复制到 .yp-modal 里。
   ========================================================================== */
.yp-modal .form-row > label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.yp-modal .form-row:has(select) { position: relative !important; }
.yp-modal .form-row:has(select) > label {
	position: absolute !important;
	left: 17px !important;
	top: 9px !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	clip: auto !important;
	overflow: visible !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--yp-grey-500) !important;
	z-index: 3;
	pointer-events: none;
}
.yp-modal .form-row:has(select) > label .required,
.yp-modal .form-row:has(select) > label .optional { display: none !important; }
.yp-modal .form-row select {
	padding: 22px 16px 0 !important;
	font-size: 16px !important;
	font-weight: 600 !important;
}
.yp-modal .form-row input.input-text,
.yp-modal .form-row input[type="tel"],
.yp-modal .form-row input[type="email"] {
	height: 56px !important;
	padding: 0 16px !important;
	font-size: 16px !important;
	font-weight: 400 !important;
}
.yp-modal .form-row input.input-text::placeholder,
.yp-modal .form-row select::placeholder {
	color: var(--yp-grey-500) !important;
	opacity: 1;
}
/* 现在输入框里不再需要给「悬浮标签」留上边距了 */
.yp-modal .form-row input.input-text,
.yp-modal .form-row textarea { padding-top: 0 !important; }
.yp-modal .form-row textarea { padding: 14px 16px !important; min-height: 104px; }

/* YP-MODAL-SELECT2
   ==========================================================================
   ★★ 国家 / 州是 select2 渲染的（原生 select 被隐藏），所以「小标签 + 值」要写给 select2 的容器，
      否则值会和小标签叠在一起。高度、圆角、描边都跟输入框保持一致。
   ========================================================================== */
.yp-modal .select2-container { width: 100% !important; }
.yp-modal .select2-selection--single {
	height: 64px !important;
	border: 1.5px solid var(--yp-grey-200) !important;
	border-radius: 12px !important;
	background: var(--yp-white) !important;
}
.yp-modal .select2-selection--single .select2-selection__rendered {
	padding: 26px 40px 0 17px !important;
	line-height: 1.4 !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--yp-black) !important;
}
.yp-modal .select2-selection--single .select2-selection__arrow { height: 62px !important; right: 10px !important; }
.yp-modal .select2-container--focus .select2-selection--single,
.yp-modal .select2-container--open .select2-selection--single { border-color: var(--yp-black) !important; }

/* YP-DEFAULT-ADDR
   ==========================================================================
   ★★ 结账页「This is my default address」勾选框（用户给了参考图）
   ── 外观：圆角方块 + 勾选后填黑并显示白色对勾（和登录页那个勾选框同一套），
      文字在右边，整行占满网格宽度。
   ── 注意：WooCommerce 的 checkbox 字段把 input 包在 <label> 里，
      而结账页的样式会把 .form-row > label 视觉隐藏 —— 这里必须把这行排除掉，
      否则勾选框和文字会被一起裁掉。
   ========================================================================== */
body.woocommerce-checkout #customer_details .form-row.yp-default-addr > label {
	position: static !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	border: 0 !important;
	white-space: normal !important;
}
body.woocommerce-checkout #customer_details .yp-default-addr {
	display: flex !important;
	align-items: center;
	gap: 12px;
	margin: 18px 0 0 !important;
	padding: 0 !important;
	grid-column: 1 / -1 !important;
}
body.woocommerce-checkout #customer_details .yp-default-addr label {
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
	margin: 0 !important;
	font-size: var(--yp-fs-sm) !important;
	font-weight: 500 !important;
	color: var(--yp-black) !important;
	cursor: pointer;
}
body.woocommerce-checkout #customer_details .yp-default-addr input[type="checkbox"] {
	position: relative;
	flex: 0 0 auto;
	width: 26px !important;
	height: 26px !important;
	margin: 0 !important;
	border: 1.5px solid var(--yp-grey-300) !important;
	border-radius: 8px !important;
	background: var(--yp-white) !important;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
body.woocommerce-checkout #customer_details .yp-default-addr input[type="checkbox"]:checked {
	background: var(--yp-grey-700) !important;
	border-color: var(--yp-grey-700) !important;
}
body.woocommerce-checkout #customer_details .yp-default-addr input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 4px;
	width: 6px;
	height: 11px;
	border: solid var(--yp-white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
body.woocommerce-checkout #customer_details .yp-default-addr input[type="checkbox"]:focus-visible {
	outline: 2px dashed var(--yp-black) !important;
	outline-offset: 3px !important;
}

/* YP-NO-SUBTOTAL-ROW
   ==========================================================================
   ★★ 去掉小计那一行（用户：去掉）
   ── 购物车页：cart_totals 里的 cart-subtotal（「Subtotal · N items」+ 金额）——
      下面 Total 就是同一个数字，重复一行反而乱。
   ── 抽屉里同一位置那行（.yp-drawer__qty）也一起去掉，两个购物车保持一致。
   ── 结账页右栏的订单摘要是另一回事（那里保留小计 + 总价），不动。
   ========================================================================== */
body.woocommerce-cart .cart-collaterals .cart_totals tr.cart-subtotal,
body.woocommerce-cart .cart-collaterals .cart_totals tr.cart-subtotal > th,
body.woocommerce-cart .cart-collaterals .cart_totals tr.cart-subtotal > td { display: none !important; }
.yp-drawer .yp-drawer__qty { display: none !important; }

/* YP-SUBTOTAL-LABEL-ONLY
   ==========================================================================
   ★★ 更正：小计那一行只去掉「金额」，标签保留（用户：只要去掉 720 美金，前面得不要去掉）
   ── 上一条我把整行 display:none 了，这里改回来：
      · 「Subtotal · N items」文字保留
      · 右边重复的金额（$720.00）去掉
   ── 抽屉里同一行也一样：保留「Subtotal · N items」，只藏金额。
   ── 另外：商品行右侧的金额块改成左对齐（用户：向左边齐平）—— 金额贴着自己那一列的左边缘。
   ========================================================================== */
body.woocommerce-cart .cart-collaterals .cart_totals tr.cart-subtotal { display: flex !important; }
body.woocommerce-cart .cart-collaterals .cart_totals tr.cart-subtotal > th { display: block !important; }
body.woocommerce-cart .cart-collaterals .cart_totals tr.cart-subtotal > td,
body.woocommerce-cart .cart-collaterals .cart_totals tr.cart-subtotal > td .amount,
body.woocommerce-cart .cart-collaterals .cart_totals tr.cart-subtotal > td .woocommerce-Price-amount {
	display: none !important;
}
.yp-drawer .yp-drawer__qty { display: flex !important; }
.yp-drawer .yp-drawer__qty strong,
.yp-drawer .yp-drawer__qty .amount { display: none !important; }

/* 商品行右边的金额：左对齐（表头 Total 也跟着左对齐，视觉才对齐） */
body.woocommerce-cart table.shop_table.cart thead th.product-subtotal { text-align: left !important; }
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal {
	text-align: left !important;
	justify-items: start !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal .yp-sum__prices,
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal .yp-sum__prices > * {
	text-align: left !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	margin-left: 0 !important;
}
@media (max-width: 780px) {
	body.woocommerce-cart table.shop_table.cart thead th.product-subtotal,
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal { text-align: left !important; }
}

/* YP-DEFAULT-ADDR-NATIVE
   ==========================================================================
   ★★ 更正：勾选框改成和下面那个「订阅邮件」勾选框一模一样（用户：框改成下面那样）
   ── 原来我给它做了个 26px 的浅灰大圆角方块，和旁边原生的订阅勾选框不一致；
      现在改回**原生外观**（小方块 + 黑色对勾），只把强调色设成黑色：
      accent-color 是浏览器原生勾选颜色的开关，配合 appearance:auto 用。
   ── 顺带把 WooCommerce 自动加的「(optional)」也去掉（勾选框后面跟这个很奇怪）。
   ========================================================================== */
body.woocommerce-checkout #customer_details .yp-default-addr input[type="checkbox"] {
	position: static !important;
	appearance: auto !important;
	-webkit-appearance: checkbox !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	margin: 0 !important;
	border: 1px solid var(--yp-black) !important;
	border-radius: 3px !important;
	background: var(--yp-white) !important;
	accent-color: var(--yp-black);
	cursor: pointer;
}
body.woocommerce-checkout #customer_details .yp-default-addr input[type="checkbox"]::after,
body.woocommerce-checkout #customer_details .yp-default-addr input[type="checkbox"]::before {
	content: none !important;
	display: none !important;
}
body.woocommerce-checkout #customer_details .yp-default-addr .optional { display: none !important; }
body.woocommerce-checkout #customer_details .yp-default-addr label { gap: 10px; }

/* YP-CHECKBOX-ACCENT
   ==========================================================================
   ★★ 全站勾选框统一勾选颜色 = 黑（用户：下面这个框和上面得一样）
   ── 结账页那个订阅勾选框是浏览器原生外观，勾选时默认是蓝色；
      这里用 accent-color 把它也变成黑色，和「This is my default address」一致。
   ── 自定义过外观的勾选框（登录页那套 appearance:none）不受影响。
   ========================================================================== */
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--yp-black) !important;
}

/* YP-CHECKBOX-SAME-SIZE
   ==========================================================================
   ★★ 结账页两个勾选框做成完全一样（用户：下面这个框改成和上面得一样大）
   ── 上面那颗是「This is my default address」，下面是 MailPoet 的订阅勾选框，
      原生尺寸只有 13px 左右，所以比上面小一圈。
   ── 这里把两颗**写在同一条规则里**给同样的尺寸/描边/圆角/勾选颜色，
      不管之前哪条规则先命中，最终两颗一定一模一样。
   ========================================================================== */
body.woocommerce-checkout #customer_details .yp-default-addr input[type="checkbox"],
body.woocommerce-checkout input[name="mailpoet_woocommerce_checkout_optin"],
body.woocommerce-checkout .woocommerce-form__input-checkbox {
	appearance: auto !important;
	-webkit-appearance: checkbox !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	margin: 0 2px 0 0 !important;
	padding: 0 !important;
	border: 1px solid var(--yp-black) !important;
	border-radius: 3px !important;
	background: var(--yp-white) !important;
	accent-color: var(--yp-black) !important;
	cursor: pointer;
	vertical-align: middle;
}
body.woocommerce-checkout #customer_details .yp-default-addr input[type="checkbox"]::after,
body.woocommerce-checkout #customer_details .yp-default-addr input[type="checkbox"]::before,
body.woocommerce-checkout input[name="mailpoet_woocommerce_checkout_optin"]::after,
body.woocommerce-checkout input[name="mailpoet_woocommerce_checkout_optin"]::before { content: none !important; display: none !important; }
/* 两行的文字也对齐：同一字号、同一基线 */
body.woocommerce-checkout #customer_details .yp-default-addr label,
body.woocommerce-checkout .woocommerce-form__label-for-checkbox {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	font-size: var(--yp-fs-sm) !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
}

/* YP-NOTICE-RED
   ==========================================================================
   ★★ 结账页那条「PLEASE READ BEFORE ORDERING」提示：文字改红色（用户要求）
   ── 标题、正文一起变红；⚠️ 图标不动。只作用于结账页的警示条，
      结账右栏摘要卡片里的其它提示不受影响。颜色用和「输错验证码」同一个红（#d93025）。
   ========================================================================== */
body.woocommerce-checkout form.checkout > .yp-notice,
body.woocommerce-checkout form.checkout > .yp-notice strong,
body.woocommerce-checkout form.checkout > .yp-notice p,
body.woocommerce-checkout form.checkout > .yp-notice span,
body.woocommerce-checkout form.checkout > .yp-notice a {
	color: #d93025 !important;
}
body.woocommerce-checkout form.checkout > .yp-notice a { text-decoration: underline !important; }

/* YP-ADDR-MODAL-V2
   ==========================================================================
   ★★★ 地址弹窗照参考图定稿（用户：改）
   ── ① 字段恢复「上标签、下内容」的悬浮标签：
        之前是标签视觉隐藏 + placeholder 显示字段名（结账页那套），
        参考图是「Country/region 小标签 + United States」这种；
        之所以会重叠，是因为标签和 placeholder 同时显示 —— 现在 placeholder 只剩一个空格，
        所以标签安静地待在框里，有内容/聚焦时缩小上移，不会再叠。
   ── ② 底部按钮排成「左边红色 Delete ＋ 右边 Cancel / Save」，Save 是黑胶囊。
   ========================================================================== */
.yp-modal .form-row > label,
.yp-modal .yp-float > label {
	position: absolute !important;
	left: 19px !important;
	top: 20px !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	clip: auto !important;
	overflow: visible !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--yp-grey-500) !important;
	z-index: 3;
	pointer-events: none;
	transition: top .12s ease, font-size .12s ease;
}
.yp-modal .form-row > label .required,
.yp-modal .form-row > label .optional { display: none !important; }
.yp-modal .form-row input.input-text,
.yp-modal .form-row input[type="tel"],
.yp-modal .form-row input[type="email"],
.yp-modal .yp-float input {
	height: 64px !important;
	padding: 24px 18px 8px !important;
}
.yp-modal .form-row:has(input:focus) > label,
.yp-modal .form-row:has(input:not(:placeholder-shown)) > label,
.yp-modal .yp-float:has(input:focus) > label,
.yp-modal .yp-float:has(input:not(:placeholder-shown)) > label { top: 10px !important; font-size: 12px !important; }
/* 下拉框（国家/州）：标签已经在左上角，值顶到下面一点 */
.yp-modal .form-row:has(select) > label { top: 10px !important; font-size: 12px !important; }
.yp-modal .select2-selection--single .select2-selection__rendered { padding: 26px 40px 0 18px !important; }

/* 底部按钮：Delete 靠左、Cancel + Save 靠右 */
.yp-modal form > p.form-row:last-of-type,
.yp-modal form > .form-row:last-child,
.yp-modal .yp-addr__actions { justify-content: flex-end !important; gap: 18px !important; }
.yp-modal .yp-addr__delete {
	order: -1;
	margin-right: auto;
	color: #d93025 !important;
	font-family: var(--yp-font-body);
	font-size: var(--yp-fs-base);
	text-decoration: underline !important;
	cursor: pointer;
}
.yp-modal .yp-addr__delete:hover { opacity: .8; }
.yp-modal button[name="save_address"] {
	background: var(--yp-black) !important;
	color: var(--yp-white) !important;
	border: 0 !important;
	border-radius: 12px !important;
	padding: 16px 30px !important;
	font-weight: 600 !important;
}
.yp-modal button[name="save_address"]:hover { opacity: .88; }

/* YP-ADDR-ACTIONS-FIX
   ==========================================================================
   ★★ 更正：地址弹窗底部那行按钮「隔太近了」（用户）
   ── 根因：WooCommerce 那颗 Save 放在一个**没有 class 的 <p>** 里，
      我上一条写的是 form > p.form-row:last-of-type，选择器没命中，
      于是 Cancel / Save / Delete 只是普通行内元素挤在一起。
   ── 现在直接命中「装 Save 按钮的那个 <p>」，让它是 flex 两端排开：
      Delete 顶到最左，Cancel 和 Save 靠右，彼此留 20px 间距。
   ========================================================================== */
.yp-modal form p:has(> button[name="save_address"]),
.yp-modal .woocommerce-address-fields > p:last-of-type {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 20px !important;
	margin: 24px 0 0 !important;
	padding: 0 !important;
}
.yp-modal form p:has(> button[name="save_address"]) .yp-addr__cancel { order: 1; }
.yp-modal form p:has(> button[name="save_address"]) button[name="save_address"] { order: 2; }
.yp-modal form p:has(> button[name="save_address"]) .yp-addr__delete {
	order: 0;
	margin-right: auto;
	margin-left: 0;
}
/* 隐藏域不要参与 flex 排版，免得撑出多余间距 */
.yp-modal form p:has(> button[name="save_address"]) input[type="hidden"] { display: none !important; }

/* YP-SAVE-BTN-SIZE
   ==========================================================================
   ★★ 地址弹窗的 Save 字太小（用户：改成和其他一样大）
   ── WooCommerce 的 .button 自带一套小字号（12-13px），而且账户区还有更具体的选择器压着，
      所以这里用足够具体的选择器 + !important 把字号拉到和 Cancel / Delete 一样（1rem=16px）。
   ========================================================================== */
.yp-modal form button[name="save_address"],
.yp-modal form button[name="save_account_details"],
.yp-modal .woocommerce-address-fields button[name="save_address"],
.yp-modal .yp-modal__save,
.yp-modal .yp-addr__cancel,
.yp-modal .yp-addr__delete {
	font-size: var(--yp-fs-base) !important;
	line-height: 1 !important;
}
.yp-modal form button[name="save_address"] {
	font-family: var(--yp-font-body) !important;
	font-weight: 600 !important;
	padding: 16px 30px !important;
	border-radius: 12px !important;
}

/* YP-SAVE-BTN-SIZE-2
   ==========================================================================
   ★★ Save 的字还是小（用户）—— 上一条写输了优先级
   ── 账户区有这样一条：body.woocommerce-account .woocommerce-MyAccount-content .button
      （3 个 class + body，权重 0,3,1，还带 !important），
      我上一条 .yp-modal form button[name="save_address"] 只有 0,2,2 → 被压住。
   ── 这次加上 body.woocommerce-account 前缀（0,3,3）+ !important，必定压过它。
   ========================================================================== */
body.woocommerce-account .yp-modal form button[name="save_address"],
body.woocommerce-account .yp-modal form button[name="save_account_details"],
body.woocommerce-account .yp-modal form .woocommerce-address-fields button.button,
body.woocommerce-account .yp-modal .yp-modal__save {
	font-size: 16px !important;
	line-height: 1 !important;
	font-weight: 600 !important;
	font-family: var(--yp-font-body) !important;
	padding: 16px 30px !important;
	border-radius: 12px !important;
}

/* YP-SAVE-BTN-ID
   ==========================================================================
   ★★ Save 字号：用 id 选择器收尾（权重最高，任何 .button 规则都压不过它）
   ── 账户区给 .button 设字号的规则有好几条（有的在表格里、有的在表单里），
      与其一条条对权重，不如直接按弹窗 id 命中，一次到底。
   ========================================================================== */
#yp-addr-billing button[name="save_address"],
#yp-addr-shipping button[name="save_address"],
#yp-prof-modal button[name="save_account_details"],
#yp-addr-billing .yp-modal__save,
#yp-addr-shipping .yp-modal__save {
	font-size: 16px !important;
	font-family: var(--yp-font-body) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	padding: 16px 30px !important;
	border-radius: 12px !important;
}

/* YP-ADDR-DEFAULT-CHECK
   ==========================================================================
   ★★ 地址弹窗里的「This is my default address」勾选框（用户：加上这个）
   ── 样式和结账页那颗完全一致（20px、黑描边、圆角 3px、黑勾），
      位置在按钮行最左边（Delete / Cancel / Save 之前）。
   ========================================================================== */
.yp-modal .yp-addr-default-check {
	order: -2;
	margin-right: auto;
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	margin-left: 0;
	font-family: var(--yp-font-body);
	font-size: var(--yp-fs-sm) !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	color: var(--yp-black) !important;
	cursor: pointer;
	white-space: nowrap;
}
.yp-modal .yp-addr-default-check input[type="checkbox"] {
	appearance: auto !important;
	-webkit-appearance: checkbox !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--yp-black) !important;
	border-radius: 3px !important;
	background: var(--yp-white) !important;
	accent-color: var(--yp-black) !important;
	cursor: pointer;
}
.yp-modal form p:has(> button[name="save_address"]) .yp-addr__delete { order: -1; margin-right: 0; }

/* YP-ADDR-ROW-STYLE
   ==========================================================================
   ★★ 地址行照参考图：一行「姓名 + Default 标记」，下面一行地址摘要（街道, 城市 州 邮编, 国家）
   ── Default 是一个浅灰小标记，跟在姓名后面；摘要只占一行，太长就省略号。
   ========================================================================== */
body.woocommerce-account .yp-prof__badge {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--yp-grey-100);
	color: var(--yp-grey-700);
	font-size: var(--yp-fs-xs);
	font-weight: 500;
	line-height: 1.4;
	vertical-align: middle;
	text-transform: none;
}
body.woocommerce-account .yp-prof__itemtitle {
	display: flex;
	align-items: center;
	font-size: var(--yp-fs-base) !important;
	font-weight: 600 !important;
	color: var(--yp-black) !important;
}
body.woocommerce-account .yp-prof__itemsub {
	display: block;
	margin-top: 2px;
	font-size: var(--yp-fs-sm) !important;
	color: var(--yp-grey-500) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* YP-SWITCH-ON-CHECK
   ==========================================================================
   ★★ 邮件开关「打开」的状态照参考图：黑色轨道 + 白色圆点里一个黑色对勾。
   ========================================================================== */
.yp-switch { width: 58px !important; height: 32px !important; }
.yp-switch__track { border-radius: 999px; }
.yp-switch__knob { top: 3px; left: 3px; width: 26px; height: 26px; }
.yp-switch input:checked ~ .yp-switch__track { background: var(--yp-black) !important; }
.yp-switch input:checked ~ .yp-switch__track .yp-switch__knob { transform: translateX(26px); }
.yp-switch input:checked ~ .yp-switch__track .yp-switch__knob::after {
	content: "";
	position: absolute;
	left: 9px;
	top: 5px;
	width: 6px;
	height: 11px;
	border: solid var(--yp-black);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* YP-TOAST
   ==========================================================================
   ★★ 操作反馈小提示条（用户给的样子）：黑底白字、右下角、带一个 ✕，4 秒后自动消失。
   ── 用于账户页那些「不刷新页面」的操作（例如 Marketing preferences 开关）。
   ========================================================================== */
.yp-toast-box {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 100050;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	pointer-events: none;
}
.yp-toast {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	max-width: min(420px, calc(100vw - 48px));
	padding: 14px 16px 14px 20px;
	border-radius: 12px;
	background: var(--yp-black);
	color: var(--yp-white);
	font-family: var(--yp-font-body);
	font-size: var(--yp-fs-sm);
	font-weight: 500;
	line-height: 1.3;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
	animation: yp-toast-in .18s ease-out both;
}
.yp-toast__x {
	flex: 0 0 auto;
	border: 0;
	background: none;
	padding: 0 2px;
	color: var(--yp-white);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	opacity: .9;
}
.yp-toast__x:hover { opacity: 1; }
@keyframes yp-toast-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
	.yp-toast-box { left: 16px; right: 16px; bottom: 16px; align-items: stretch; }
	.yp-toast { max-width: none; }
}

/* YP-TOAST-CENTER
   ==========================================================================
   ★★ 提示条改成：屏幕底部**居中**、**白底黑字**（用户：居中，白框黑字）
   ── 原来在右下角、黑底白字；现在居中对齐，白底 + 浅描边 + 黑字。
   ========================================================================== */
.yp-toast-box {
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%);
	align-items: center !important;
	bottom: 28px !important;
}
.yp-toast {
	background: var(--yp-white) !important;
	color: var(--yp-black) !important;
	border: 1px solid var(--yp-grey-200) !important;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .16) !important;
	font-weight: 600 !important;
}
.yp-toast__x,
.yp-toast__x:hover { color: var(--yp-black) !important; opacity: .75; }
@media (max-width: 600px) {
	.yp-toast-box {
		left: 16px !important;
		right: 16px !important;
		transform: none !important;
		align-items: center !important;
	}
}

/* YP-TRACK
   ==========================================================================
   ★★ 客户订单页的「Tracking」卡片（跟踪单号 + Track your parcel 按钮）
   ── 白底圆角卡、单号加粗、按钮黑胶囊；和账户区其它卡片风格一致。
   ========================================================================== */
.yp-track {
	margin: 22px 0 0;
	padding: 22px 24px;
	background: var(--yp-white);
	border: 1px solid var(--yp-grey-100);
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .04);
}
.yp-track__title {
	margin: 0 0 12px !important;
	font-family: var(--yp-font-body) !important;
	font-size: var(--yp-fs-lg) !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: -.01em !important;
	color: var(--yp-black) !important;
}
.yp-track__row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 16px !important;
	font-size: var(--yp-fs-base);
}
.yp-track__label { color: var(--yp-grey-500); font-size: var(--yp-fs-sm); }
.yp-track__num { color: var(--yp-black); font-weight: 700; letter-spacing: .01em; word-break: break-all; }
.yp-track__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 30px;
	border: 2px solid var(--yp-black);
	border-radius: 999px;
	background: var(--yp-white);
	color: var(--yp-black);
	font-family: var(--yp-font-body);
	font-size: var(--yp-fs-base);
	font-weight: 600;
	line-height: 1;
	text-decoration: none !important;
	transition: background-color .15s ease, color .15s ease;
}
.yp-track__btn:hover { background: var(--yp-black) !important; color: var(--yp-white) !important; }
@media (max-width: 600px) {
	.yp-track { padding: 18px 16px; }
	.yp-track__btn { width: 100%; }
}

/* ==========================================================================
   ★ YP-VAR-GREEN：多属性商品的「属性值」（口味等）显示成绿色（用户 2026-09-26）
   ── 抽屉里是我们自己拆出来的 .yp-drawer__var；
      购物车页 / 结账页右栏是主题自己渲染的 .yp-sum__variant；
      订单详情 / 我的账户订单是 WooCommerce 的 dl.variation > dd。
   ── 绿色沿用抽屉里小计那支 #4eb960。商品名保持黑色，只有属性值变绿。
   ========================================================================== */
.yp-drawer__name .yp-drawer__var,
.yp-drawer__var,
.yp-sum__variant {
	color: #4eb960 !important;
	font-weight: 700 !important;
}
.woocommerce-cart-form .product-name dl.variation dd,
.woocommerce-cart-form .product-name dl.variation dd p,
.woocommerce-cart-form .product-name dl.variation dd a,
.widget_shopping_cart_content dl.variation dd,
.widget_shopping_cart_content dl.variation dd p,
.woocommerce-checkout-review-order-table dl.variation dd,
.woocommerce-checkout-review-order-table dl.variation dd p,
.woocommerce-order-details dl.variation dd,
.woocommerce-order-details dl.variation dd p,
.woocommerce-MyAccount-orders dl.variation dd,
.woocommerce-MyAccount-orders dl.variation dd p,
.woocommerce-MyAccount-view-order dl.variation dd,
.woocommerce-MyAccount-view-order dl.variation dd p {
	color: #4eb960 !important;
	font-weight: 700 !important;
}
/* 属性值前面的「Flavor:」标签保持原来的灰 */
.woocommerce-cart-form .product-name dl.variation dt,
.widget_shopping_cart_content dl.variation dt,
.woocommerce-checkout-review-order-table dl.variation dt,
.woocommerce-order-details dl.variation dt,
.woocommerce-MyAccount-orders dl.variation dt {
	color: inherit !important;
}

/* ==========================================================================
   ★ YP-PAY-BTN：感谢页 / 订单页的 Pay now 按钮（用户 2026-09-26：按钮上的字看不见）
   ── 这里把白底 / 黑边 / 黑字全部写死，并且去掉颜色过渡 ——
      以前只靠 .yp-btn 的基础规则 + hover 时黑底白字，鼠标划过的瞬间
      底色和字色一起过渡，中间会出现「深底 + 深字」看不出字的一瞬；
      另外别的规则一旦把 color 改掉，字就整颗消失。
   ── hover 也只变浅灰底，字始终是黑的，永远看得见。
   ========================================================================== */
.yp-pay .yp-btn,
.yp-pay a.yp-btn {
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: #111111 !important;
	border: 2px solid #111111 !important;
	font-weight: 900 !important;
	opacity: 1 !important;
	transition: none !important;
	min-height: 54px !important;
}
.yp-pay .yp-btn:hover,
.yp-pay .yp-btn:focus,
.yp-pay .yp-btn:focus-visible,
.yp-pay a.yp-btn:hover {
	background: #f2f2f2 !important;
	background-color: #f2f2f2 !important;
	color: #111111 !important;
	border-color: #111111 !important;
}
.yp-pay .yp-btn span { color: #111111 !important; }

/* ==========================================================================
   ★ YP-DRAWER-PEEK（用户 2026-09-26）：手机端侧边栏购物车不要铺满整屏，左边留一条缝
   ── 以前移动端补丁把它写成 width/max-width: 100vw !important，整屏铺满，
      看起来像「换了一个页面」，而不是从右边滑出来的抽屉。
   ── 现在右边照旧贴边，左边留 34px：后面变暗的页面露一条出来，一眼就知道这是抽屉、
      还能点那条缝关掉它。顺手给左边描黑边 + 左圆角，和站内其它卡片一致。
   ── 规则放在文件最后：前面那些 100vw !important 都是更早写的，同等权重下后写的生效。
   ========================================================================== */
@media (max-width: 767px) {
	.yp-drawer__panel,
	.yp-drawer.is-open .yp-drawer__panel {
		width: calc(100vw - 34px) !important;
		max-width: calc(100vw - 34px) !important;
		left: auto !important;
		right: 0 !important;
		/* 用户 2026-09-26：手机端不要圆角、不要黑框（也不要投影），左侧直接平切 */
	}
}

/* 更窄的手机（<=380px）缝再窄一点（24px），别把内容挤没了 */
@media (max-width: 380px) {
	.yp-drawer__panel,
	.yp-drawer.is-open .yp-drawer__panel {
		width: calc(100vw - 24px) !important;
		max-width: calc(100vw - 24px) !important;
	}
}

/* ==========================================================================
   ★★★ YP-CART-MOBILE-CLEAN（用户 2026-09-26：手机端完整购物车界面有点乱）
   ── 症状：
      ① 「You've unlocked free shipping!」在手机上出现两遍 —— 页头那条黑横幅已经写了，
         购物车标题下面又有一条，而且它下面是 100% 的黑色进度填充，看着就是一根多余的黑杠；
      ② 标题区到商品列表之间空了一大截（46px 外边距 + 74px 进度条外边距）；
      ③ 商品行里「名称 / 单价 / 优惠 / 数量框 / 金额 / Remove」散成好几块，
         金额一会儿贴右一会儿贴左，数量框和金额还不在同一行。
   ── 这块写在文件最末尾，把前面十几版互相打架的手机端规则统一收口（同等权重时后写的生效）。
   ── 最终版式（≤780px）—— 和侧边栏购物车（抽屉）完全一致（用户 2026-09-26 要求）：
        缩略图 │ 名称                        $200.00（划线，右上角）
               │ 属性值（绿色）               $190.00（绿色）
               │ 单价（折后 + 划线）
               │ N Pieces（−$x）
               │ [ −  50  + ]
               │ Remove
   ========================================================================== */
@media (max-width: 780px) {

	/* ① 免运费进度条：手机上不显示（页头黑横幅已经说了同一句话） */
	body.woocommerce-cart .yp-shipbar { display: none !important; }

	/* ② 标题区收紧：标题下面直接接商品列表 */
	body.woocommerce-cart .yp-cart-hero {
		margin-bottom: 16px !important;
		padding: 16px 14px !important;
		border-radius: 12px !important;
	}
	body.woocommerce-cart .yp-cart-hero__title { margin: 0 !important; font-size: var(--yp-fs-2xl) !important; }
	body.woocommerce-cart .yp-cart-hero__ship { display: none !important; }

	/* ③ 表头保留（用户要求手机上只留 Product + Total），但和新版式对齐：
	      Product 靠左、Total 靠右 —— 和下面商品行里的金额（也靠右）对齐。 */
	body.woocommerce-cart form.woocommerce-cart-form table.shop_table.cart thead tr {
		grid-template-columns: minmax(0, 1fr) auto !important;
		column-gap: 12px !important;
	}
	body.woocommerce-cart table.shop_table.cart thead th.product-name { grid-column: 1 !important; text-align: left !important; }
	body.woocommerce-cart table.shop_table.cart thead th.product-quantity { display: none !important; }
	body.woocommerce-cart table.shop_table.cart thead th.product-subtotal { grid-column: 2 !important; text-align: right !important; }

	/* ④ 商品行：三列网格（图 │ 信息 │ 金额），和抽屉里的商品行同一个结构 */
	body.woocommerce-cart table.shop_table.cart tr.cart_item {
		display: grid !important;
		grid-template-columns: 84px minmax(0, 1fr) auto !important;
		column-gap: 14px !important;
		row-gap: 10px !important;
		align-items: start !important;
		padding: 18px 0 !important;
		border-bottom: 0 !important;
	}
	body.woocommerce-cart table.shop_table.cart tr.cart_item td,
	body.woocommerce-cart table.shop_table.cart tr.cart_item td > * { min-width: 0 !important; }
	body.woocommerce-cart table.shop_table.cart tr.cart_item td {
		display: block !important; width: auto !important; padding: 0 !important; border: 0 !important; text-align: left !important;
	}

	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail {
		grid-column: 1 !important; grid-row: 1 / span 3 !important; align-self: start !important;
	}
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail img {
		width: 84px !important; height: 84px !important; border-radius: 12px !important;
	}

	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name {
		grid-column: 2 !important; grid-row: 1 !important;
		display: flex !important; flex-direction: column !important; gap: 3px !important;
	}
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name .yp-sum__text {
		display: flex !important; flex-direction: column !important; gap: 3px !important; align-items: flex-start !important;
	}
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name .yp-sum__name {
		font-weight: 600 !important; line-height: 1.35 !important;
	}

	/* 数量框：信息列（第二列）下面一行，靠左 */
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity {
		grid-column: 2 !important; grid-row: 2 !important;
		justify-self: start !important; text-align: left !important;
		display: flex !important; align-items: center !important;
	}
	/* 金额：右上角，和名称同一行起，上下两行（划线原价 / 绿色折后价）—— 和抽屉一样 */
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal {
		grid-column: 3 !important; grid-row: 1 !important;
		justify-self: end !important; align-self: start !important;
		display: flex !important; justify-content: flex-end !important;
		text-align: right !important;
	}
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal .yp-sum__prices {
		display: flex !important; flex-direction: column !important;
		align-items: flex-end !important; justify-content: flex-end !important;
		gap: 2px !important; text-align: right !important; margin: 0 !important;
	}
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal .yp-sum__prices > * {
		text-align: right !important; margin: 0 !important;
	}
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal del,
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal del .woocommerce-Price-amount {
		font-size: var(--yp-fs-lg) !important;
	}
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal .yp-sum__now,
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal .yp-sum__now .woocommerce-Price-amount {
		font-size: var(--yp-fs-2xl) !important;
		font-weight: 800 !important;
	}

	/* Remove：信息列下面一行，靠左 */
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove {
		grid-column: 2 !important; grid-row: 3 !important;
		justify-self: start !important; margin: 0 !important;
	}

	/* 数量框在手机上收窄，别把右边的金额挤走 */
	body.woocommerce-cart .yp-qty--cart { min-height: 46px !important; padding: 0 4px !important; }
	body.woocommerce-cart .yp-qty--cart input.qty { width: 54px !important; min-width: 54px !important; font-size: var(--yp-fs-sm) !important; }
	body.woocommerce-cart .yp-qty--cart .yp-qty__btn { width: 30px !important; height: 30px !important; font-size: 15px !important; }

	/* ⑤ 下面的备注 + Order summary：单栏、间距收紧 */
	body.woocommerce-cart .cart-collaterals { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; margin-top: 18px !important; }
	body.woocommerce-cart .cart-collaterals .yp-cart-note { grid-column: 1 !important; padding-top: 0 !important; }
	body.woocommerce-cart .cart-collaterals .yp-cart-note textarea { max-width: 100% !important; }
	body.woocommerce-cart .cart_totals h2 { font-size: var(--yp-fs-lg) !important; margin-bottom: 10px !important; }
}

/* ==========================================================================
   ★ YP-CART-HEAD-TOTAL（用户 2026-09-26：Total 要居中在价格上面）
   ── 完整购物车页的表头是「Product / Quantity / Total」，
      之前有一条「商品行的金额向左齐平」的规则把表头的 Total 也带成了左对齐，
      于是 Total 贴在价格列的最左边，和下面右对齐的金额错开，看着像掉在缝里。
   ── 现在让它在价格列里居中（正好压在下面那两行金额上方）。
   ── 选择器比原来那条多一层 form.woocommerce-cart-form，权重更高，稳赢。
   ========================================================================== */
body.woocommerce-cart form.woocommerce-cart-form table.shop_table.cart thead th.product-subtotal {
	text-align: center !important;
}

/* 手机上表头只剩 Product / Total 两列（Total 在第 2 列），仍然靠右，和金额对齐 */
@media (max-width: 780px) {
	body.woocommerce-cart form.woocommerce-cart-form table.shop_table.cart thead th.product-subtotal {
		text-align: right !important;
	}
	body.woocommerce-cart form.woocommerce-cart-form table.shop_table.cart thead th.product-quantity {
		text-align: center !important;
	}
}

/* ==========================================================================
   ★ YP-FLASH：改数量后给「刚动过的那一行」一点反馈
   ── 现在改数量是就地更新（只换几个数字，不整页刷新），没有页面跳转当反馈，
      所以让那一行轻轻闪一下，用户知道「点到了、正在算」。
   ── 抽屉里点加减号也用到同一个 class。
   ========================================================================== */
@keyframes yp-flash {
	0%   { background-color: rgba(17, 17, 17, .07); }
	100% { background-color: transparent; }
}
.yp-flash {
	animation: yp-flash .5s ease-out;
	border-radius: 10px;
}

/* ==========================================================================
   ★ YP-CART-UPDATING：改数量时列表 / 合计区变灰，更新完恢复
   ── 用户 2026-09-26：「刷新是这部分变成灰色然后再变成黑色，就是刷新好了」。
      现在是就地更新（不整页刷新），所以用「变灰 → 恢复」当刷新反馈；
      灰色期间不禁用点击（连点由请求序号处理，只认最后一次响应）。
   ========================================================================== */
table.shop_table.cart.is-updating,
.cart_totals.is-updating {
	opacity: .45 !important;
	filter: grayscale(1) !important;
	transition: opacity .12s ease, filter .12s ease !important;
}
/* 刚动过的那一行：浅灰一闪，指明是哪一行在算 */
@keyframes yp-row-flash {
	0%   { background-color: rgba(17, 17, 17, .06); }
	100% { background-color: transparent; }
}
tr.cart_item.yp-flash { animation: yp-row-flash .5s ease-out; }

/* ==========================================================================
   ★ YP-VAR-GREEN-FORCE（用户 2026-09-26：购物车里的属性值也要绿色）
   ── 早先那条绿色规则用的是 .yp-sum__variant 这种「一个类」的选择器，
      而购物车页 / 结账页右栏后面还有更具体的选择器把它写回灰色（--yp-grey-500），
      权重更高 → 绿色被压掉，属性值（口味）显示成灰色。
   ── 这里用同等（甚至更高）权重的选择器把颜色重新钉成绿色 #4eb960，
      并且放在文件最末，稳赢。
   ========================================================================== */
.yp-drawer__name .yp-drawer__var,
.yp-drawer__var,
.yp-sum__variant,
body.woocommerce-cart table.shop_table.cart td.product-name .yp-sum__variant,
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name .yp-sum__variant,
body.woocommerce-checkout #order_review .yp-sum__variant,
body.woocommerce-checkout #order_review tr.cart_item td.product-name .yp-sum__variant,
body.woocommerce-cart .yp-sum__variant,
body.woocommerce-checkout .yp-sum__variant {
	color: #4eb960 !important;
	font-weight: 700 !important;
}

/* ==========================================================================
   ★ YP-CLUB-AJAX-SLOT：订阅表单局部刷新（AJAX）不跳动
   ── 槽位 .yp-newsletter__slot 同时容纳「表单」和「Thanks for subscribing」：
      ① min-height 先按表单高度兜底（JS 换内容前还会用实测高度再钉一次）；
      ② overflow-anchor: none —— 告诉浏览器别拿这一块当滚动锚点，
         否则高度一变（62px → 20px）它会自己把页面往下拽；
      ③ 表单在槽位里保持居中和原来的最大宽度。
   ========================================================================== */
.yp-newsletter,
.yp-newsletter__slot {
	overflow-anchor: none;
}
.yp-newsletter__slot {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 62px;          /* = 表单的高度；换文案后总高度不变 */
	text-align: center;
}
.yp-newsletter__slot > .yp-newsletter__form { width: 100%; }
.yp-newsletter__slot > .yp-newsletter__done { margin: 0 !important; }

/* 提交中：整块变灰（和购物车改数量同一套反馈） */
.yp-newsletter__form.is-updating {
	opacity: .45 !important;
	filter: grayscale(1) !important;
	transition: opacity .12s ease, filter .12s ease !important;
}
/* 出错：表单下面一行红字，同样不跳页 */
.yp-newsletter__err {
	margin: 12px 0 0 !important;
	font-family: var(--yp-font-body);
	font-size: var(--yp-fs-sm) !important;
	font-weight: 500 !important;
	color: #d93025 !important;
	text-align: center;
}

/* ==========================================================================
   ★ YP-DRAWER-PRICE-TIGHT（用户 2026-09-26：抽屉里这两个价格挨近一点）
   ── 抽屉商品行右边是「划线原价（del）」+「绿色实付（.yp-drawer__line）」，
      它们之间的空档来自 .yp-drawer__line 的 margin-top: 10px 和它自带的上下 padding，
      看起来两行价格隔得老远。这里把它们压到几乎贴在一起。
   ── 只作用于抽屉商品行（.yp-drawer__figures 里面），不影响别处。
   ========================================================================== */
.yp-drawer__figures del {
	margin: 0 !important;
	line-height: 1.15 !important;
}
.yp-drawer__figures .yp-drawer__line {
	margin-top: 2px !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	line-height: 1.05 !important;
	border-top: 0 !important;
}

/* ==========================================================================
   ★ YP-THANKYOU-CLEAN：订单完成页去掉「Thank you. Your order has been received.」
   ── 页面标题已经是 ORDER RECEIVED，这句是 WooCommerce 默认的重复提示（用户要求去掉）。
   ── 「Payment method」那两处不用 CSS：前台过滤器把支付方式标题置空，
      WooCommerce 模板自己就不输出了（后台仍保留，便于对账）。
   ========================================================================== */
.woocommerce-order .woocommerce-thankyou-order-received,
.woocommerce-order p.woocommerce-notice--success.woocommerce-thankyou-order-received {
	display: none !important;
}

/* ==========================================================================
   ★ YP-ORDER-DETAILS-CARTLOOK（用户 2026-09-26：订单详情改成购物车那样）
   ── 用 .yp-sum__row 这一层做 flex（不动 td 的 display，避免破坏表格布局）：
      缩略图(带数量角标) | 名称 / 属性值(绿色) / 单价 / N Pieces
   ── 右侧金额列：划线原价 + 绿色实付，右对齐、上下两行。
   ── 「× 50」和原来的 item meta 不再重复显示（数量在角标里、属性值在名称下面）。
   ========================================================================== */
.woocommerce-table--order-details .product-name { text-align: left !important; }
.woocommerce-table--order-details .product-name .yp-sum__row {
	display: flex; align-items: flex-start; gap: 12px;
}
.woocommerce-table--order-details .product-name .yp-sum__media {
	position: relative; flex: 0 0 auto; display: block; line-height: 0;
}
.woocommerce-table--order-details .product-name .yp-sum__media img {
	width: 78px; height: 78px; object-fit: cover;
	border: 1px solid var(--yp-grey-200); border-radius: 12px; background: var(--yp-grey-100);
}
.woocommerce-table--order-details .product-name .yp-sum__qty {
	position: absolute; top: -9px; right: -9px;
	min-width: 28px; height: 28px; padding: 0 7px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px; background: var(--yp-black); color: var(--yp-white);
	font-family: var(--yp-font-body); font-size: 12px; font-weight: 700; line-height: 1;
}
.woocommerce-table--order-details .product-name .yp-sum__text {
	display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.woocommerce-table--order-details .product-name .yp-sum__name {
	font-family: var(--yp-font-body); font-weight: 600; font-size: var(--yp-fs-base);
	line-height: 1.35; color: var(--yp-black); margin: 0 0 2px;
}
.woocommerce-table--order-details .product-name .yp-sum__variant {
	color: #4eb960 !important; font-weight: 700 !important; font-size: var(--yp-fs-sm) !important;
}
.woocommerce-table--order-details .product-name .yp-sum__unit {
	display: flex; align-items: baseline; gap: 8px;
}
.woocommerce-table--order-details .product-name .yp-sum__unit-now { font-weight: 700; }
.woocommerce-table--order-details .product-name .yp-sum__unit del .woocommerce-Price-amount {
	color: var(--yp-grey-500) !important; font-size: var(--yp-fs-sm) !important; text-decoration: line-through;
}
.woocommerce-table--order-details .product-name .yp-sum__save {
	font-size: var(--yp-fs-sm) !important; color: var(--yp-grey-700) !important;
}
/* 数量已经在角标里，别再来一个「× 50」；属性值也已经在名称下面 */
.woocommerce-table--order-details .product-name .product-quantity,
.woocommerce-table--order-details .product-name .wc-item-meta { display: none !important; }

.woocommerce-table--order-details td.product-total,
.woocommerce-table--order-details th.product-total { text-align: right !important; vertical-align: top !important; }
.woocommerce-table--order-details td.product-total .yp-sum__prices {
	display: flex !important; flex-direction: column !important;
	align-items: flex-end !important; gap: 2px !important; white-space: nowrap;
}
.woocommerce-table--order-details td.product-total .woocommerce-Price-amount {
	color: #4eb960 !important; font-weight: 800 !important; font-size: var(--yp-fs-xl) !important;
}
.woocommerce-table--order-details td.product-total del .woocommerce-Price-amount,
.woocommerce-table--order-details td.product-total del {
	color: var(--yp-grey-500) !important; font-size: var(--yp-fs-sm) !important; font-weight: 500 !important;
	text-decoration: line-through;
}

/* ★ 订单完成页版式：单栏竖排 —— 订单详情 → 收货地址 → 付款信息
   （用户 2026-09-26：先把地址并排过、又试过三栏，最后定成「地址移到订单下面」，
     也就是不加任何 grid，按 HTML 自然顺序竖排。） */

/* ==========================================================================
   ★ YP-THANKYOU-3COL（保留其中的表格溢出修复；版式本身已改回单栏竖排）
   ── 版式：单栏竖排（订单详情 → 收货地址 → 付款信息），不设 grid。
   ── 保留的修复：订单明细表比左栏宽、金额列被挤到中间那一栏去（截图里那个空框）。
      用 table-layout: fixed + 允许商品名换行 + 不允许溢出，把表格钉回自己那一栏。
   ========================================================================== */
body.woocommerce-order-received .woocommerce-order-details { min-width: 0 !important; }
body.woocommerce-order-received .woocommerce-table--order-details {
	width: 100% !important;
	max-width: 100% !important;
	table-layout: fixed !important;
}
body.woocommerce-order-received .woocommerce-table--order-details .product-name { overflow-wrap: anywhere !important; }
body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__row { min-width: 0 !important; }
body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__text { min-width: 0 !important; }
body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__name { overflow-wrap: anywhere !important; }
body.woocommerce-order-received .woocommerce-table--order-details td.product-total,
body.woocommerce-order-received .woocommerce-table--order-details th.product-total {
	width: 116px !important; white-space: nowrap !important;
}
body.woocommerce-order-received .woocommerce-table--order-details tfoot th { white-space: nowrap !important; }

/* ==========================================================================
   ★ YP-THANK-PAYRIGHT（用户 2026-09-26：付款信息改到右边）
   ── 最终版式（≥901px）：
        顶部「订单号 / 日期 / 合计」横跨两栏
        左栏：ORDER DETAILS，下面是 DELIVERY ADDRESS（上下叠）
        右栏：COMPLETE YOUR PAYMENT（付款信息）
   ── ≤900px 仍是单栏竖排：订单详情 → 地址 → 付款。
   ── 付款块原来整页宽，进右栏后内边距收一档，字不动（可读性优先）。
   ========================================================================== */
@media (min-width: 901px) {
	body.woocommerce-checkout .woocommerce-order {
		display: grid !important;
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important;
		column-gap: 40px !important;
		row-gap: 26px !important;
		align-items: start !important;
	}
	body.woocommerce-checkout .woocommerce-order > * { grid-column: 1 / -1; }

	body.woocommerce-checkout .woocommerce-order > .woocommerce-order-details {
		grid-column: 1 !important; grid-row: 2 !important; margin: 0 !important;
	}
	body.woocommerce-checkout .woocommerce-order > .woocommerce-customer-details {
		grid-column: 1 !important; grid-row: 3 !important; margin: 6px 0 0 !important;
	}
	body.woocommerce-checkout .woocommerce-order > .yp-pay {
		grid-column: 2 !important; grid-row: 2 / span 2 !important;
		padding: 24px 24px 22px !important;
		margin: 0 !important;
		align-self: start !important;
	}
	body.woocommerce-checkout .woocommerce-order > .woocommerce-order-details > h2,
	body.woocommerce-checkout .woocommerce-order > .woocommerce-customer-details > h2,
	body.woocommerce-checkout .woocommerce-order > .yp-pay > .yp-pay__title { margin-top: 0 !important; }
}

/* ==========================================================================
   ★ YP-THANK-HEADSYNC（用户 2026-09-26：左栏标题「改成右边标题的大小」）
   ── 右边付款块的标题 .yp-pay__title 是 --yp-fs-2xl（≈27px），
      左边 PRODUCT DETAILS / DELIVERY ADDRESS 之前仍按全局 h2 的尺寸渲染，比它大一圈。
   ── 这里把它们统一到 --yp-fs-2xl（手机 --yp-fs-xl），
      选择器多带一层 .woocommerce-order，权重足够压过先前那几条。
   ========================================================================== */
body.woocommerce-order-received .woocommerce-order .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-order .woocommerce-column__title {
	font-size: var(--yp-fs-2xl) !important;
	line-height: 1.05 !important;
	margin: 0 0 14px !important;
}
@media (max-width: 780px) {
	body.woocommerce-order-received .woocommerce-order .woocommerce-order-details__title,
	body.woocommerce-order-received .woocommerce-order .woocommerce-column__title {
		font-size: var(--yp-fs-xl) !important;
	}
}

/* ==========================================================================
   ★ YP-ORDER-QTY-COL：订单明细表新增的 Quantity 列（用户 2026-09-26）
   ── 表头 th 和单元格 td 都居中，宽度固定，别去挤商品名那一列。
   ── 购物车页那边数量是「pcs 角标 + N Pieces」，这里是独立一列「× 50」，
      和 WooCommerce 原来的写法一致。
   ========================================================================== */
body.woocommerce-order-received .woocommerce-table--order-details .product-quantity,
body.woocommerce-account .woocommerce-table--order-details .product-quantity {
	width: 96px !important;
	text-align: center !important;
	white-space: nowrap !important;
	vertical-align: top !important;
}
body.woocommerce-order-received .woocommerce-table--order-details tbody .product-quantity,
body.woocommerce-account .woocommerce-table--order-details tbody .product-quantity {
	font-family: var(--yp-font-body) !important;
	font-size: var(--yp-fs-base) !important;
	color: var(--yp-black) !important;
}

/* ==========================================================================
   ★ YP-THANK-BLACKBOX（用户 2026-09-26：左栏「用黑框框住」）
   ── 右边付款卡片本来就是 2px 黑边 + 圆角（.yp-pay 自带），左边订单详情和地址
      只有很浅的灰线，看着不像同一套东西。
   ── 这里把左栏两个区块也套上同一套黑框卡片：
      border: 2px solid #111、圆角 18px（--yp-radius-lg）、内边距 24px、白底。
   ── 表格自己那圈边框去掉，避免和卡片边框贴出双线。
   ── 单栏（≤900px）时同样生效，整页风格统一。
   ========================================================================== */
body.woocommerce-order-received .woocommerce-order > .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-order > .woocommerce-customer-details {
	border: 2px solid var(--yp-black) !important;
	border-radius: var(--yp-radius-lg) !important;
	background: var(--yp-white) !important;
	padding: 24px !important;
	box-sizing: border-box !important;
}
body.woocommerce-order-received .woocommerce-order > .woocommerce-order-details .woocommerce-table--order-details,
body.woocommerce-order-received .woocommerce-order > .woocommerce-order-details table.shop_table {
	border: 0 !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
}
/* 卡片里的两个标题不要再额外留上边距 */
body.woocommerce-order-received .woocommerce-order > .woocommerce-order-details > h2,
body.woocommerce-order-received .woocommerce-order > .woocommerce-customer-details > h2 {
	margin-top: 0 !important;
}
/* 地址卡片里内容跟在标题下面，别再嵌套一层边框 */
body.woocommerce-order-received .woocommerce-order > .woocommerce-customer-details address {
	border: 0 !important;
}

/* ==========================================================================
   ★ YP-THANK-ONECARD（用户 2026-09-26：左边这部分「是一体的」）
   ── 上一步给订单详情和地址各加了一张黑框卡片 → 看着是两张卡。
      这里把它们拼成一张：中间那道边框去掉、内侧圆角改成直角，
      只有整块的左上/左下/右上/右下保留圆角。
   ── 两栏版式下把行间距挪到「订单概览」下面，两张卡才会严丝合缝贴在一起。
   ── 单栏（≤900px）时同样是一张连体卡（地址紧接在订单详情下面）。
   ========================================================================== */
body.woocommerce-order-received .woocommerce-order > .woocommerce-order-details {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	margin-bottom: 0 !important;
}
body.woocommerce-order-received .woocommerce-order > .woocommerce-customer-details {
	border-top: 0 !important;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
	margin-top: 0 !important;
}
@media (min-width: 901px) {
	body.woocommerce-order-received .woocommerce-order { row-gap: 0 !important; }
	body.woocommerce-order-received .woocommerce-order > .woocommerce-order-overview { margin-bottom: 26px !important; }
}
/* 单栏时也一样：订单详情与地址之间不留缝 */
body.woocommerce-order-received .woocommerce-order > .woocommerce-customer-details { margin-block-start: 0 !important; }

/* ==========================================================================
   ★ YP-ORDER-ROW-LIKE-CART（用户 2026-09-26：订单详情的商品行「改成第一张图那样」）
   ── 第一张图是购物车/结账摘要里的商品行，差别三处：
      ① 商品名是普通粗体、没有下划线（这边是链接，被全局 a 下划线带上了）；
      ② 优惠那行小号大写、前面带一个标签小图标；
      ③ 右边划线原价是站内统一的淡绿色，不是灰色。
   ── 单价那一行（$3.80 / 划线 $4.00）已在 PHP 里去掉了。
   ========================================================================== */
body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__name,
body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__name a {
	color: var(--yp-black) !important;
	text-decoration: none !important;
}
body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__name a:hover {
	text-decoration: underline !important;
}
body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__save {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	flex-wrap: wrap !important;
	margin: 2px 0 0 !important;
	font-family: var(--yp-font-body) !important;
	font-size: var(--yp-fs-xs) !important;
	font-weight: 600 !important;
	letter-spacing: .02em !important;
	text-transform: uppercase !important;
	color: var(--yp-grey-500) !important;
}
body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__save::before {
	content: ""; width: 15px; height: 15px; flex: 0 0 15px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.6' cy='7.6' r='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.6' cy='7.6' r='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.woocommerce-order-received .woocommerce-table--order-details td.product-total del,
body.woocommerce-order-received .woocommerce-table--order-details td.product-total del .woocommerce-Price-amount {
	color: #4eb960 !important;
	opacity: .55 !important;
	font-weight: 500 !important;
	text-decoration: line-through !important;
}

/* ==========================================================================
   ★ YP-ORDER-SAVE-EXACT（用户 2026-09-26：订单详情要和购物车摘要「一摸一样」）
   ── 优惠行「50 PIECES（−$10.00）」里那个金额原来是 WooCommerce 的绿色小span，
      和文字不同色不同号 → 让它完全跟随文字（同色、同号、同字重）。
   ── TOTAL SAVINGS 行照抄结账页的样式（大写字距 + 标签图标 + 黑色粗体）。
   ========================================================================== */
body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__save .woocommerce-Price-amount,
body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__save .woocommerce-Price-currencySymbol,
body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__save bdi {
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-sum__savings th,
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-sum__savings td,
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-sum__savings .woocommerce-Price-amount {
	color: var(--yp-black) !important;
	font-weight: 700 !important;
}
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-sum__savings th {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	text-transform: uppercase !important;
	letter-spacing: .03em !important;
	font-size: var(--yp-fs-sm) !important;
}
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-sum__savings th::before {
	content: ""; width: 16px; height: 16px; flex: 0 0 16px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.6' cy='7.6' r='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.6' cy='7.6' r='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ==========================================================================
   ★ YP-ORDER-NOLINES（用户 2026-09-26：去掉这些小线条）
   ── 订单明细表里每一行下面、以及 Subtotal / Total 之间那些细横线都去掉
      （WooCommerce 表格默认给 td / tfoot 行加了 border）。
   ── 表头「Product / Quantity / Total」下面那一条保留 —— 和购物车摘要一样，
      有一条表头分隔线才看得出列。
   ── 顺手把可能出现的 box-shadow 分隔线也关掉。
   ========================================================================== */
body.woocommerce-order-received .woocommerce-table--order-details tbody tr,
body.woocommerce-order-received .woocommerce-table--order-details tbody th,
body.woocommerce-order-received .woocommerce-table--order-details tbody td,
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr,
body.woocommerce-order-received .woocommerce-table--order-details tfoot th,
body.woocommerce-order-received .woocommerce-table--order-details tfoot td {
	border: 0 !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}
/* 表头下面那一条保留，并且和内容区一样宽 */
body.woocommerce-order-received .woocommerce-table--order-details thead th {
	border: 0 !important;
	border-bottom: 1px solid var(--yp-grey-200) !important;
}
/* 我的账户里的订单详情同样处理 */
body.woocommerce-account .woocommerce-table--order-details tbody tr,
body.woocommerce-account .woocommerce-table--order-details tbody th,
body.woocommerce-account .woocommerce-table--order-details tbody td,
body.woocommerce-account .woocommerce-table--order-details tfoot tr,
body.woocommerce-account .woocommerce-table--order-details tfoot th,
body.woocommerce-account .woocommerce-table--order-details tfoot td {
	border: 0 !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

/* ==========================================================================
   ★ YP-ORDER-SEAM（用户 2026-09-26：去掉这根线）
   ── 左边现在是「一张连体卡」：订单详情 + 收货地址。
      接缝处还能看到一条黑线 —— 那是上面那张卡片的 border-bottom。
      这里把它去掉（下面那张的 border-top 之前已经去掉了），左右两条竖边继续连着，
      整块看起来就是一张卡，中间没有任何横线。
   ========================================================================== */
body.woocommerce-order-received .woocommerce-order > .woocommerce-order-details {
	border-bottom: 0 !important;
}

/* ==========================================================================
   ★ YP-ORDER-NOHEADLINE（用户 2026-09-26：表头下面这根线也去掉）
   ── 上一步把行间、表尾的横线都去掉了，只留了表头下面一条做分隔；
      用户要求这条也去掉 → 整张 Product details 表完全没有横线，只有文字对齐。
   ── 表头行本身还在（Product / Quantity / Total 三个标签照旧）。
   ========================================================================== */
body.woocommerce-order-received .woocommerce-table--order-details thead th,
body.woocommerce-order-received .woocommerce-table--order-details thead tr,
body.woocommerce-account .woocommerce-table--order-details thead th,
body.woocommerce-account .woocommerce-table--order-details thead tr {
	border: 0 !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

/* ==========================================================================
   ★ YP-ORDER-TOTALS-LIKE-CHECKOUT（用户 2026-09-26：表尾「像第一张图那样」）
   ── 第一张图是结账摘要底部的排版：
        「Subtotal · 50 items   $190.00」普通字重一行
        「Total   $190.00」大号黑体（--yp-fs-2xl，和站内其它 Total 一致）
        「⛉ TOTAL SAVINGS  $10.00」小号大写 + 标签图标
   ── WooCommerce 的 tfoot 行没有 class，所以 Total 行的 class 由页脚那段 JS 补（.yp-order-total），
      省钱行本来就是我们 JS 插的（.yp-sum__savings）。
   ========================================================================== */
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr th,
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr td {
	font-family: var(--yp-font-body) !important;
	font-size: var(--yp-fs-base) !important;
	font-weight: 600 !important;
	color: var(--yp-black) !important;
	padding: 10px 0 !important;
	vertical-align: baseline !important;
}
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-order-total th,
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-order-total td,
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-order-total .woocommerce-Price-amount {
	font-family: var(--yp-font-head) !important;
	font-weight: 900 !important;
	font-size: var(--yp-fs-2xl) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-sum__savings th,
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-sum__savings td,
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-sum__savings .woocommerce-Price-amount {
	font-size: var(--yp-fs-sm) !important;
	font-weight: 700 !important;
	color: var(--yp-black) !important;
	padding: 6px 0 !important;
}

/* ==========================================================================
   ★ YP-ORDER-PRICE-SMALLER（用户 2026-09-26：Total 那一列「改小一号」）
   ── 右侧绿色金额原来是 --yp-fs-xl（≈24px），改小一号 → --yp-fs-lg（≈21px）。
   ── 划线原价本来就是小字（--yp-fs-sm），保持不变。
   ── 只作用于订单完成页 / 我的账户订单的 Product details 表。
   ========================================================================== */
body.woocommerce-order-received .woocommerce-table--order-details td.product-total .woocommerce-Price-amount,
body.woocommerce-account .woocommerce-table--order-details td.product-total .woocommerce-Price-amount {
	font-size: var(--yp-fs-lg) !important;
}

/* ==========================================================================
   ★ YP-ORDER-TOTALS-RIGHT（用户 2026-09-26：冒号去掉、价格向右对齐）
   ── 标签的冒号由 PHP 的 gettext 过滤器去掉（Total: → Total）。
   ── 金额对齐：表尾那一行的金额格要落在最右边的 Total 列并右对齐
      （标签跨两列由页脚 JS 补 colspan，这里只管对齐和加粗）。
   ========================================================================== */
body.woocommerce-order-received .woocommerce-table--order-details tfoot th,
body.woocommerce-account .woocommerce-table--order-details tfoot th {
	text-align: left !important;
}
body.woocommerce-order-received .woocommerce-table--order-details tfoot td,
body.woocommerce-account .woocommerce-table--order-details tfoot td {
	text-align: right !important;
	white-space: nowrap !important;
}

/* ==========================================================================
   ★ YP-ORDER-NAME-NOHOVER（用户 2026-09-26：鼠标放上去不要有下划线）
   ── 订单明细里的商品名是链接，之前给它加了 hover 下划线；用户不要，
      这里把 hover / focus / active 状态都锁成无下划线（颜色也不变），
      链接本身还能点（只是没有视觉变化）。
   ========================================================================== */
body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__name a,
body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__name a:hover,
body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__name a:focus,
body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__name a:focus-visible,
body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__name a:active,
body.woocommerce-account .woocommerce-table--order-details .product-name .yp-sum__name a,
body.woocommerce-account .woocommerce-table--order-details .product-name .yp-sum__name a:hover,
body.woocommerce-account .woocommerce-table--order-details .product-name .yp-sum__name a:focus {
	color: var(--yp-black) !important;
	text-decoration: none !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

/* ==========================================================================
   ★ YP-PAY-WHY：付款块里那两行「说明」（原价 → 抹零 → 实付 / WhatsApp）
   ── 用户说原来那段太啰嗦（同一组数字讲三遍），压缩成两行：
      一行解释「为什么是这个金额」，一行联系方式。这里给它一点呼吸感。
   ========================================================================== */
.yp-pay__why {
	margin: 12px 0 0 !important;
	font-family: var(--yp-font-body);
	font-size: var(--yp-fs-sm) !important;
	line-height: 1.65 !important;
	color: var(--yp-grey-700) !important;
}
.yp-pay__why strong { color: var(--yp-black) !important; }
.yp-pay__why a { color: var(--yp-black) !important; text-decoration: underline !important; }
.yp-pay__note ol { margin-bottom: 4px !important; }

/* ==========================================================================
   ★ YP-BANNER-LEAD-ONELINE（用户 2026-09-26：黑色横幅那句话不要换行）
   ── 原来 .yp-banner__lead 卡了 max-width: 560px，那句「This isn't that rinky-dink
      stuff you've been buying from your local head shop with crappy stickers applied.」
      被挤成两行。这里放开宽度限制，并在宽屏上直接禁止换行（一行读完）。
   ── 窄屏（<992px）不锁 nowrap，留来自动换行，避免溢出。
   ========================================================================== */
.yp-banner__lead {
	max-width: none !important;
}
@media (min-width: 992px) {
	.yp-banner__lead { white-space: nowrap !important; }
}

/* ==========================================================================
   ★ YP-ACCNav-HEADER-LIKE（用户 2026-09-26：账户左侧导航「改成和页眉一样字体、一样大小」）
   ── 页眉导航（HOME / SHOP STYLE / CONTACT）用的是：
      font-family: var(--yp-font-body) / font-weight: 500 / font-size: var(--yp-fs-sm) / line-height: 1 / 大写
   ── 账户左侧导航原来是 --yp-fs-lg（≈21px）、非大写 → 现在整套对齐页眉。
   ── 当前页（is-active）保持加粗，便于区分。
   ========================================================================== */
body.woocommerce-account .yp-acc-nav a {
	font-family: var(--yp-font-body) !important;
	font-weight: 500 !important;
	font-size: var(--yp-fs-sm) !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
	padding: 10px 0 !important;
}
body.woocommerce-account .yp-acc-nav li.is-active a { font-weight: 700 !important; }
@media (max-width: 767px) {
	body.woocommerce-account .yp-acc-nav a { font-size: var(--yp-fs-sm) !important; }
}

/* ==========================================================================
   ★ YP-DESC-LINE-BOTTOM（用户 2026-09-27：那条线要跟着描述走到最下面）
   ── 用户原话：「我想要那根线会出现在描述的最下方，懂吗，不是让你去掉」。
   ── 所以：
        收起时：线还是在「Description」标题下面（原来的样子，不变）。
        点开后：标题下面那条线消失，线跑到**描述正文的最下方**（内容后面收口），
                也就是标题和正文之间不再夹着一条线。
   ── 标题上面那条线（.yp-accordion__item 的 border-top）始终保留。
   ── 只作用于 Description 面板，Specifications（.yp-specs）不动。
   ========================================================================== */
/* ① 展开时：标题下面那条线去掉 */
.summary .yp-accordion .yp-accordion__item:not(.yp-specs)[open] > .yp-accordion__q,
.single-product div.product .summary .yp-accordion .yp-accordion__item:not(.yp-specs)[open] > .yp-accordion__q,
.summary .yp-accordion__item:not(.yp-specs)[open] > .yp-accordion__q {
	border-bottom: 0 !important;
}
/* ② 展开时：线落在描述正文最下面 */
.summary .yp-accordion .yp-accordion__item:not(.yp-specs)[open] > .yp-accordion__a,
.single-product div.product .summary .yp-accordion .yp-accordion__item:not(.yp-specs)[open] > .yp-accordion__a,
.summary .yp-accordion__item:not(.yp-specs)[open] > .yp-accordion__a {
	border-bottom: 2px solid var(--yp-black) !important;
	padding-bottom: 18px !important;
}

/* ==========================================================================
   ★ YP-RELATED-BIGGER（用户 2026-09-27：YOU MAY ALSO LIKE 版面是四个）
   ── 为什么选择器写成 .products.products / [class] 这么「丑」：
      老规则里有一批是 .related.products ul.products.columns-4（特异性 0,4,1）、
      section.related.products > ul.products.columns-4（0,4,2）这种带 .columns-N 的，
      而我们的 <ul class="products columns-4"> 正好命中它们 → 它们虽然写在前面，
      但特异性比我原来的 0,3,2 高，把我写的 display: grid 一直压成 flex，
      所以才出现「格子是 4 列、卡片却竖着排一列」的怪现象（浏览器实测确认）。
      这里把特异性顶到 (0,5,2) 以上，永远压过那批老规则；不要再改瘦。
   ── 列数只跟屏幕宽度有关：>900px 一行 4 个 / ≤900px 3 个 / ≤640px 2 个。
   ========================================================================== */
section.related.products.products > ul.products[class],
section.upsells.products.products > ul.products[class],
.related.products.products ul.products[class],
.upsells.products.products ul.products[class] {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	column-gap: 24px !important;
	row-gap: 48px !important;
	align-items: start !important;
	width: 100% !important;
	max-width: 100% !important;
	flex-wrap: nowrap !important;
}
/* Grid 里每张卡都占满自己那一列（清掉旧的 flex/calc 宽度） */
section.related.products.products > ul.products[class] > li,
section.upsells.products.products > ul.products[class] > li,
.related.products.products ul.products[class] > li,
.upsells.products.products ul.products[class] > li {
	flex: none !important;
	float: none !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
/* 平板 / 手机：列数跟着缩，但仍然是「铺满一行」 */
@media (max-width: 900px) {
	section.related.products.products > ul.products[class],
	section.upsells.products.products > ul.products[class],
	.related.products.products ul.products[class],
	.upsells.products.products ul.products[class] {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		column-gap: 18px !important;
		row-gap: 36px !important;
	}
}
@media (max-width: 640px) {
	section.related.products.products > ul.products[class],
	section.upsells.products.products > ul.products[class],
	.related.products.products ul.products[class],
	.upsells.products.products ul.products[class] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		column-gap: 14px !important;
		row-gap: 28px !important;
	}
}
/* 卡片变大后，标题也跟着放大一号（原来 --yp-fs-sm 偏小） */
section.related.products > ul > li .yp-card__title,
section.upsells.products > ul > li .yp-card__title,
section.related.products > ul.products > li .yp-card__title,
section.upsells.products > ul.products > li .yp-card__title {
	font-size: var(--yp-fs-base) !important;
	line-height: 1.35 !important;
}



/* ==========================================================================
   ★ 数量输入框：去掉聚焦时的虚线（只保留订阅框那种场景）
   ========================================================================== */
.yp-qty input.qty,
.yp-qty input.qty:focus,
.yp-qty input.qty:focus-visible,
.yp-drawer .yp-qty input,
.yp-drawer .yp-qty input:focus,
.yp-buybox .yp-qty input,
.yp-buybox .yp-qty input:focus,
.yp-variable-box .quantity input.qty,
.yp-variable-box .quantity input.qty:focus {
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
	border-color: transparent !important;
}

/* 聚焦时只让数字变黑加粗，给一点点反馈 */
.yp-qty input.qty:focus {
	color: var(--yp-black) !important;
	font-weight: 700 !important;
}


/* ==========================================================================
   ★ 结账页右栏：小计那行只留「Subtotal · N items」，去掉右边的金额（2026-09-29）
   ── 和购物车页 / 购物车抽屉同一处理（见上面 YP-SUBTOTAL-LABEL-ONLY），三处保持一致。
   ── tfoot 那行本身就是 flex + space-between，只把金额那一格拿掉：
      标签照样左对齐、右侧留白；Total / TOTAL SAVINGS / Shipping 三行不受影响。
   ========================================================================== */
body.woocommerce-checkout #order_review .shop_table tfoot tr.cart-subtotal > td,
body.woocommerce-checkout #order_review .shop_table tfoot tr.cart-subtotal > td .amount,
body.woocommerce-checkout #order_review .shop_table tfoot tr.cart-subtotal > td .woocommerce-Price-amount,
body.woocommerce-checkout #order_review .shop_table tr.cart-subtotal > td,
body.woocommerce-checkout #order_review .shop_table tr.cart-subtotal > td .amount,
body.woocommerce-checkout #order_review .shop_table tr.cart-subtotal > td .woocommerce-Price-amount {
	display: none !important;
}

/* ==========================================================================
   ★ 订单完成页：小计行只留「Subtotal · N items」文字，右边的金额藏掉（2026-09-30）
   ── 行上的 class 由页脚那段 JS 补（.yp-order-subtotal），所以只影响这张表、
      不会误伤 Total / TOTAL SAVINGS 这些行。
   ========================================================================== */
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-order-subtotal > td,
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-order-subtotal > td .amount,
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-order-subtotal > td .woocommerce-Price-amount {
	display: none !important;
}

/* ==========================================================================
   ★ 付款卡片：金额条 和 Pay now 按钮「一样大」（2026-10-01）
   ── 原来两个都是行内元素，宽度各自跟着内容走（黑的宽、白的窄），看着一高一矮。
   ── 现在套一层 .yp-pay__actions：flex 平分宽度，两个同宽同高（72px），内容各自居中；
      窄屏（≤640px）自动竖排、各自铺满一行。
   ========================================================================== */
.yp-pay__actions {
	display: flex;
	gap: 14px;
	align-items: stretch;
	justify-content: center;
	margin: 0 0 var(--yp-sp-5);
}
.yp-pay__actions > .yp-pay__amount,
.yp-pay__actions > .yp-btn {
	flex: 1 1 0;
	min-width: 0;
	box-sizing: border-box !important;
	height: 72px !important;
	min-height: 72px !important;
	margin: 0 !important;
	padding: 0 16px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: var(--yp-radius-pill) !important;
}
.yp-pay__actions > .yp-pay__amount { gap: 10px !important; }
/* 小字「AMOUNT TO PAY」的行高继承 1.6，行盒比字形高，居中时看着往下坠 →
   压到 1，才和右边的大数字在一条中线上。 */
.yp-pay__actions > .yp-pay__amount .yp-pay__label { line-height: 1 !important; }
.yp-pay__actions > .yp-pay__amount .yp-pay__num { line-height: 1 !important; }

@media (max-width: 640px) {
	.yp-pay__actions { flex-direction: column; }
	.yp-pay__actions > .yp-pay__amount,
	.yp-pay__actions > .yp-btn { width: 100% !important; }
}

/* ==========================================================================
   ★ Pay now 按钮：绿色填充 + 白字（2026-10-01）
   ── 和结账页提交按钮同一套绿：#4eb960，悬停 #3fa653。
   ── 字色按用户要求用白色（白字压这个绿对比度约 2.5:1，偏浅；
      要更清楚可以把绿调深到 #3fa653 做底色，一句话的事）。
   ── 边框设 0：底色和边框同色，去掉边框后两个胶囊的宽度才能分毫不差。
   ── 必须放在文件末尾：前面那条「白底黑边」的规则也带 !important，同权重靠顺序压过去。
   ========================================================================== */
.yp-pay .yp-btn,
.yp-pay a.yp-btn {
	background: #4eb960 !important;
	background-color: #4eb960 !important;
	border: 0 !important;
	color: #ffffff !important;
}
.yp-pay .yp-btn:hover,
.yp-pay .yp-btn:focus,
.yp-pay .yp-btn:focus-visible,
.yp-pay a.yp-btn:hover {
	background: #3fa653 !important;
	background-color: #3fa653 !important;
	border: 0 !important;
	color: #ffffff !important;
}
.yp-pay .yp-btn span { color: #ffffff !important; }

/* ==========================================================================
   ★ 订单完成页：去掉顶部那条「Order number / Date / Total」三格（2026-10-01）
   ── 是 WooCommerce 原生的 ul.woocommerce-order-overview；
      订单号/日期下面的 PRODUCT DETAILS 里都有，金额在黑胶囊里也有，整块不需要。
   ========================================================================== */
body.woocommerce-order-received ul.woocommerce-order-overview,
body.woocommerce-order-received .woocommerce-thankyou-order-details {
	display: none !important;
}

/* ==========================================================================
   ★ 手机端：订单详情表（PRODUCT DETAILS）照结算页那张卡排（2026-10-01）
   ── 目标版式（和结算页右栏那张卡一致）：
      [缩略图] 商品名 / 单价 / N PIECES        ┆ 划线价
                                                 ┆ 绿色实付（右对齐）
   ── 踩过的坑（别重蹈）：
      ① table-layout: fixed 会给被 display:none 的数量列也分一份等宽；
      ② auto 布局下，display:none 的数量列仍然留着 ~92px 列宽；
      ③ 行改成 flex 但表格还在，tr 会被表格列宽反噬（缩到 231px）。
   ── 所以：整张表改成 display:block 退出表格布局，行用 flex 自己分宽度。
   ========================================================================== */
@media (max-width: 720px) {
	body.woocommerce-order-received .woocommerce-table--order-details,
	body.woocommerce-account .woocommerce-table--order-details,
	body.woocommerce-order-received .woocommerce-table--order-details tbody,
	body.woocommerce-account .woocommerce-table--order-details tbody {
		display: block !important;
		width: 100% !important;
	}

	/* 表头在手机上没意义 */
	body.woocommerce-order-received .woocommerce-table--order-details thead,
	body.woocommerce-account .woocommerce-table--order-details thead {
		display: none !important;
	}

	/* 商品行：名称吃满剩余，金额列固定 88px 右对齐 */
	body.woocommerce-order-received .woocommerce-table--order-details tbody tr,
	body.woocommerce-account .woocommerce-table--order-details tbody tr {
		display: flex !important;
		align-items: flex-start !important;
		gap: 12px !important;
		width: 100% !important;
	}
	body.woocommerce-order-received .woocommerce-table--order-details tbody td,
	body.woocommerce-account .woocommerce-table--order-details tbody td {
		display: block !important;
	}
	body.woocommerce-order-received .woocommerce-table--order-details tbody td.product-name,
	body.woocommerce-account .woocommerce-table--order-details tbody td.product-name {
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
	}
	body.woocommerce-order-received .woocommerce-table--order-details tbody td.product-quantity,
	body.woocommerce-account .woocommerce-table--order-details tbody td.product-quantity {
		display: none !important;
	}
	body.woocommerce-order-received .woocommerce-table--order-details tbody td.product-total,
	body.woocommerce-account .woocommerce-table--order-details tbody td.product-total {
		flex: 0 0 88px !important;
		width: 88px !important;
		white-space: nowrap !important;
		text-align: right !important;
	}

	/* 表尾（Subtotal / Total / TOTAL SAVINGS）：左标签、右金额一行 */
	body.woocommerce-order-received .woocommerce-table--order-details tfoot,
	body.woocommerce-account .woocommerce-table--order-details tfoot {
		display: block !important;
		width: 100% !important;
	}
	body.woocommerce-order-received .woocommerce-table--order-details tfoot tr,
	body.woocommerce-account .woocommerce-table--order-details tfoot tr {
		display: flex !important;
		align-items: baseline !important;
		justify-content: space-between !important;
		gap: 12px !important;
		width: 100% !important;
	}
	body.woocommerce-order-received .woocommerce-table--order-details tfoot th,
	body.woocommerce-order-received .woocommerce-table--order-details tfoot td,
	body.woocommerce-account .woocommerce-table--order-details tfoot th,
	body.woocommerce-account .woocommerce-table--order-details tfoot td {
		display: block !important;
	}

	/* 金额字号降一档，给名称让位 */
	body.woocommerce-order-received .woocommerce-table--order-details td.product-total .woocommerce-Price-amount,
	body.woocommerce-account .woocommerce-table--order-details td.product-total .woocommerce-Price-amount {
		font-size: var(--yp-fs-lg) !important;
	}
	body.woocommerce-order-received .woocommerce-table--order-details td.product-total del .woocommerce-Price-amount,
	body.woocommerce-account .woocommerce-table--order-details td.product-total del .woocommerce-Price-amount {
		font-size: var(--yp-fs-xs) !important;
	}

	/* 缩略图小一号 */
	body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__media img,
	body.woocommerce-account .woocommerce-table--order-details .product-name .yp-sum__media img {
		width: 56px !important;
		height: 56px !important;
	}

	/* 名称正常断词 */
	body.woocommerce-order-received .woocommerce-table--order-details .product-name,
	body.woocommerce-order-received .woocommerce-table--order-details .yp-sum__name,
	body.woocommerce-account .woocommerce-table--order-details .product-name,
	body.woocommerce-account .woocommerce-table--order-details .yp-sum__name {
		overflow-wrap: break-word !important;
		word-break: normal !important;
	}
}
/* ★ PAY NOW 按钮字号放大（用户 2026-10-01） */
.yp-pay__actions > .yp-btn {
	font-size: var(--yp-fs-lg) !important;
	letter-spacing: .04em !important;
}
@media (max-width: 640px) {
	.yp-pay__actions > .yp-btn { font-size: var(--yp-fs-base) !important; }
}

/* ==========================================================================
   ★ 手机端：订单详情卡对齐结算页右栏那张卡（2026-10-01，用户要「一摸一样」）
   ── 数值不是拍的，是在 390px 手机视口下把两张卡的计算样式逐项量出来对标的：
        卡片内边距 24 → 14px        商品名 16px → 14.256px（行高 1.35）
        pieces 行 11.984 → 11px      缩略图 56 → 52px
        实付金额 21.36/800 → 16/700  Total 26.912 → 23.968px
        小计标签 600 → 500
   ========================================================================== */
@media (max-width: 720px) {
	/* 卡片内边距 */
	body.woocommerce-order-received .woocommerce-order > .woocommerce-order-details,
	body.woocommerce-order-received .woocommerce-order > .woocommerce-customer-details {
		padding: 14px !important;
	}

	/* 商品名 */
	body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__name {
		font-size: 14.256px !important;
		line-height: 1.35 !important;
		font-weight: 600 !important;
	}

	/* 「100 PIECES (− $5.00)」这一行 */
	body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__save,
	body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__unit,
	body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__unit .woocommerce-Price-amount {
		font-size: 11px !important;
		line-height: 1.6 !important;
		white-space: nowrap !important;
	}

	/* 缩略图 */
	body.woocommerce-order-received .woocommerce-table--order-details .product-name .yp-sum__media img {
		width: 52px !important;
		height: 52px !important;
	}

	/* 金额列：实付 16px/700，划线价 14.256px */
	body.woocommerce-order-received .woocommerce-table--order-details td.product-total .woocommerce-Price-amount {
		font-size: 16px !important;
		font-weight: 700 !important;
	}
	body.woocommerce-order-received .woocommerce-table--order-details td.product-total del .woocommerce-Price-amount {
		font-size: 14.256px !important;
		font-weight: 500 !important;
	}

	/* 表尾：小计标签 500、Total 23.968px、省钱行 14.256/700 */
	body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-order-subtotal th,
	body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-order-subtotal td {
		font-weight: 500 !important;
		font-size: 16px !important;
	}
	body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-order-total th,
	body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-order-total td,
	body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-order-total .woocommerce-Price-amount {
		font-size: 23.968px !important;
		line-height: 1.5 !important;
	}
	body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-sum__savings th,
	body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-sum__savings .woocommerce-Price-amount {
		font-size: 14.256px !important;
		font-weight: 700 !important;
	}
	body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-sum__savings td {
		font-size: 16px !important;
		font-weight: 700 !important;
	}
}

/* ==========================================================================
   ★ 订单详情页：TOTAL SAVINGS 行的金额紧跟在标签后面（2026-10-01）
   ── 结算页那张卡是「🏷 TOTAL SAVINGS  $3.00」挤在左边；
      订单页现在是 space-between，金额被推到最右边缘 —— 这里改成靠左挨着。
   ========================================================================== */
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-sum__savings {
	display: flex !important;
	justify-content: flex-start !important;
	align-items: center !important;
	gap: 10px !important;
}
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-sum__savings th,
body.woocommerce-order-received .woocommerce-table--order-details tfoot tr.yp-sum__savings td {
	width: auto !important;
	margin: 0 !important;
	text-align: left !important;
}
body.woocommerce-account .woocommerce-table--order-details tfoot tr.yp-sum__savings {
	display: flex !important;
	justify-content: flex-start !important;
	align-items: center !important;
	gap: 10px !important;
}
body.woocommerce-account .woocommerce-table--order-details tfoot tr.yp-sum__savings th,
body.woocommerce-account .woocommerce-table--order-details tfoot tr.yp-sum__savings td {
	width: auto !important;
	margin: 0 !important;
	text-align: left !important;
}