/* ==========================================================================
   YJD overrides — mega-menu groups, drawer scrolling, page-level fixes.
   Appended after the generated sheet so it always wins on equal specificity.
   ========================================================================== */

/* ---- Shop mega-menu: two stacked groups inside the 2-col panel ---- */
.w-dd-panel{
	min-width:640px;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:6px 26px;
	padding:22px 22px 18px;
}
.w-dd-grp{display:flex;flex-direction:column;min-width:0}
.w-dd-h{
	font-family:var(--bf);
	font-size:10.5px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
	color:var(--accd);padding:2px 14px 9px;margin-bottom:5px;
	border-bottom:1px solid var(--line);
}
.w-dd-grp a::after{content:none}
.w-dd-grp a{padding:9px 14px;font-size:13.5px;font-weight:600}
.w-dd-n{
	flex:0 0 auto;margin-left:10px;
	font-size:11px;font-weight:600;letter-spacing:.4px;
	color:var(--accd);opacity:.72;
	font-variant-numeric:tabular-nums;
}
.w-h-drawer a .w-dd-n{float:right;line-height:1.6}

/* ---- Mobile drawer: was hard-capped at 760px and clipped long lists ---- */
.w-h-drawer.w-open{
	max-height:calc(100vh - 96px);
	overflow-y:auto;
	overscroll-behavior:contain;
	-webkit-overflow-scrolling:touch;
}

/* ---- Hero: 原样式在 ≤1000px 直接把主图 display:none，首屏只剩文字 ---- */
@media(max-width:1000px){
	.w-hero-media{display:block;margin:24px 0 6px}
	.w-slides{aspect-ratio:1/1}
	.w-slide img{border-radius:14px}
	.w-hero-tag{left:10px;right:10px;bottom:10px;max-width:none;padding:10px 14px}
	.w-hero-tag b{font-size:15px}
}

/* ---- Footer: 品牌栏加宽，地址与副标题不再挤压换行 ---- */
.w-f-top{grid-template-columns:1.95fr 1fr 1fr 1fr;gap:40px}
.w-f-sub{letter-spacing:1.8px;line-height:1.6}
.w-f-brand p{max-width:52ch}
.w-f-pay li{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:46px;height:26px;padding:0 8px;
	border:1px solid rgba(255,255,255,.22);border-radius:4px;
	font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
	color:rgba(255,255,255,.72);
}
@media(max-width:1100px){
	.w-f-top{grid-template-columns:1fr 1fr;gap:30px}
	.w-f-brand{grid-column:1/-1}
	.w-f-brand p{max-width:none}
}

/* ---- 键盘焦点：替换浏览器默认的蓝紫描边 ---- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible,
.w-dd>button:focus-visible{
	outline:2px solid var(--accd);
	outline-offset:3px;
	border-radius:6px;
}
:focus:not(:focus-visible){outline:none}

/* ---- Contact card: 左栏内容垂直居中，避免底部大片留白 ---- */
.w-contact-copy{display:flex;flex-direction:column;justify-content:center}
.w-contact{margin-bottom:8px}

/* ---- Contact card: 卡片内的 h2 必须压过 .w-doc h2 的深色 ---- */
.w-contact .w-contact-copy h2,
.w-doc .w-contact h2{color:#fff}
.w-contact .w-contact-copy p{color:rgba(255,255,255,.75)}
.w-contact-info{word-break:break-word}

/* ---- Sort select: 固定宽度 + 箭头贴右，避免原生 select 撑出空隙 ---- */
.w-sort-w{min-width:196px;justify-content:space-between}
.w-sort{flex:1 1 auto;min-width:0}

/* ---- Shop grid on phones: two columns instead of one full-width card ---- */
@media(max-width:700px){
	.w-shop-grid{
		grid-template-columns:repeat(2,minmax(0,1fr))!important;
		gap:22px 12px!important;
	}
	.w-shop-grid .w-card-img{border-radius:0;margin-bottom:8px}
	.w-shop-grid .w-card-t{font-size:13px;line-height:1.35}
	.w-shop-grid .w-card-p{font-size:12.5px;margin-top:2px}
	/* 工具栏：价格/库存筛选与排序各占一行，避免挤出屏幕 */
	.w-toolbar{padding:6px 20px 18px;gap:8px 14px}
	.w-toolbar .w-facet summary{font-size:13px}
	.w-sort{font-size:13px;padding:6px 18px 6px 0}
	.w-views{display:none!important}
	.w-sort-w{margin-left:auto}
	.w-count{font-size:12.5px;padding-top:2px}
}

/* ---- Doc pages: keep long policy tables readable on narrow screens ---- */
.w-doc table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.w-doc th,.w-doc td{
	padding:10px 14px;border:1px solid var(--line);
	text-align:left;vertical-align:top;
}
.w-doc th{background:var(--cream);font-weight:600;white-space:nowrap;width:1%}
@media(max-width:700px){
	.w-doc{font-size:15.5px}
	.w-doc th,.w-doc td{padding:8px 10px;font-size:14px}
	.w-doc th{white-space:normal;width:38%}
}

/* ---- Category cards: 原蒙版在浅色实拍图上不够压，白字读不清 ---- */
.w-cat::after{
	background:linear-gradient(0deg,
		rgba(14,9,6,.86) 0%,
		rgba(14,9,6,.58) 34%,
		rgba(14,9,6,.16) 66%,
		transparent 88%)!important;
}
.w-cat-lbl h3{text-shadow:0 1px 12px rgba(14,9,6,.45)}
.w-cat-lbl span{color:#e8c795!important;text-shadow:0 1px 10px rgba(14,9,6,.5)}

/* ---- Category cards on phones: 卡片矮，标题别把整张图盖住 ---- */
@media(max-width:700px){
	.w-cat-lbl{padding:13px 14px}
	.w-cat-lbl h3{font-size:17px;line-height:1.18;letter-spacing:0}
	.w-cat-lbl span{font-size:11px;letter-spacing:.03em}
	.w-cat::after{
		background:linear-gradient(0deg,
			rgba(14,9,6,.84) 0%,
			rgba(14,9,6,.46) 44%,
			rgba(14,9,6,.08) 76%,
			transparent 100%)!important;
	}
}

/* ---- Contact form: 父主题 Storefront 的 input[type=...] 把字段刷成了灰底无边框 ---- */
.w-doc .contact-form__input,
.gs-cform .contact-form__input{
	background:#fff!important;
	border:1px solid var(--line)!important;
	border-radius:10px!important;
	padding:13px 15px!important;
	color:var(--ink)!important;
	font-size:15px!important;
	line-height:1.5!important;
}
.w-doc .contact-form__input::placeholder,
.gs-cform .contact-form__input::placeholder{color:#9d8f81;opacity:1}
.w-doc .contact-form__input:focus,
.gs-cform .contact-form__input:focus{
	outline:none!important;
	border-color:var(--accd)!important;
	box-shadow:0 0 0 3px rgba(201,160,106,.18);
}
.w-doc .contact-form__input--textarea{min-height:170px}
.w-doc .gs-cform{margin-top:4px}
/* 联系页两栏卡片：左右留白对齐正文 */
.w-doc .w-contact{margin:34px 0 46px}

/* ---- Contact page: .w-sec 的 84px 上下内边距把卡片和表单撑出了大空洞 ---- */
.w-doc:has(.w-contact)> .w-sec{padding:0}
.w-doc:has(.w-contact)> .w-sec + .w-sec{margin-top:54px}
.w-doc:has(.w-contact) .w-contact{margin:26px 0 0}

/* ---- /policies/ 索引页 ---- */
.w-policy-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.w-policy-list a{
	display:flex;flex-direction:column;gap:6px;
	padding:20px 22px;border:1px solid var(--line);border-radius:12px;
	background:#fff;text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s;
}
.w-policy-list a:hover{border-color:var(--acc);box-shadow:0 10px 26px rgba(59,42,33,.08);transform:translateY(-2px)}
.w-policy-list strong{font-family:var(--hf);font-size:21px;font-weight:600;color:var(--pri);line-height:1.2}
.w-policy-list span{font-size:14px;line-height:1.5;color:var(--soft)}
.w-policy-list a:hover strong{color:var(--accd)}
@media(max-width:700px){
	.w-policy-list{grid-template-columns:1fr}
	.w-policy-list a{padding:16px 16px}
	.w-policy-list strong{font-size:18px}
	.w-policy-list span{font-size:13.5px}
}
/* wpautop 会在 <a> 之间插 <br />，br 会占掉网格第二列 */
.w-policy-list br{display:none}

/* ---- 文档页（about / faq / policies）：.w-sec 自带 84px 上下内边距，正文页撑出大片空白 ---- */
.w-doc .w-sec{padding:0}
.w-doc .w-sec + .w-sec{margin-top:64px}
.w-doc .w-sec>h2:first-child{margin-top:0}

/* ---- PDP 图库：原样式 .w-p-main+.w-p-main{display:none} 把第 2 张之后全隐藏，
        而 .w-p-gal 又是两列网格 → 只会看到一张图，右边半屏空白。 ---- */
.w-p-gal{grid-template-columns:1fr 1fr;gap:6px}
.w-p-main+.w-p-main{display:block!important}
.w-p-main:first-child{grid-column:1/-1}
.w-p-main img{border-radius:10px}
.w-p-main:first-child img{border-radius:14px}
@media(max-width:700px){
	.w-p-gal{gap:4px}
	.w-p-main img{border-radius:6px}
}
.w-p-main.w-p-wide{grid-column:1/-1}

/* ---- 表单控件统一：父主题 Storefront 把 input/textarea/select 刷成 #f2f2f2 无边框，
       在奶油色页面上像一块块灰色矩形，站内好几个表单都中招 ---- */
.woocommerce-Input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.form-row input.input-text,
.form-row textarea,
.form-row select,
.woocommerce .coupon .input-text,
.woocommerce table.cart td input.qty,
.w-facet-pop input:not([type="radio"]):not([type="checkbox"]),
.w-fit-row input,
.w-pop-c input[type="email"]{
	background:#fff!important;
	border:1px solid var(--line)!important;
	border-radius:10px!important;
	color:var(--ink)!important;
	box-shadow:none!important;
}
.woocommerce-Input::placeholder,
.form-row input.input-text::placeholder,
.w-facet-pop input:not([type="radio"]):not([type="checkbox"])::placeholder,
.w-fit-row input::placeholder{color:#9d8f81;opacity:1}
.woocommerce-Input:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.form-row input.input-text:focus,
.woocommerce .coupon .input-text:focus,
.w-facet-pop input:not([type="radio"]):not([type="checkbox"]):focus,
.w-fit-row input:focus{
	outline:none!important;
	border-color:var(--accd)!important;
	box-shadow:0 0 0 3px rgba(201,160,106,.18)!important;
}

/* 深色区块里的订阅框：原按钮 background 与区块同色，等于隐形 */
.w-nl form input{
	background:#fff!important;
	border:1px solid #fff!important;
	border-right:0!important;
	color:var(--ink)!important;
}
.w-nl form input::placeholder{color:#9d8f81;opacity:1}
.w-nl form button{
	background:var(--acc)!important;
	color:var(--prid)!important;
}
.w-nl form button:hover{background:#d9b489!important}

/* 密码框右侧的“显示密码”眼睛按钮：父主题给了灰底，压在白色输入框上很突兀 */
.show-password-input{background:transparent!important;border:0!important;color:var(--soft)!important;box-shadow:none!important}
.show-password-input::after{color:var(--soft)}

/* ---- 商品页 Color / Size 选项组：父主题给 fieldset 刷了 #fbfbfb 底，
       在奶油色页面上显出一块莫名的白底 ---- */
.gs-buy fieldset,
.gs-buy fieldset.w-var,
.gs-buy .w-var legend{
	background:transparent!important;
	border:0!important;
	box-shadow:none!important;
}

/* ---- 工具栏：Availability / Price 下拉里是浏览器原生 radio，白框蓝点很掉价 ---- */
/* 下拉箭头是 <summary> 的兄弟节点，父级 flex 被挤压时会被折到第二行，这里禁止压缩 */
.w-toolbar .w-facet{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;white-space:nowrap}
.w-toolbar .w-facet > summary svg{transition:transform .2s}
.w-toolbar .w-facet[open] > summary svg{transform:rotate(180deg)}
.w-toolbar .w-facet-pop{padding:10px;min-width:216px;box-shadow:0 18px 40px -18px rgba(35,24,17,.34)}
.w-toolbar .w-facet-pop label{
	margin:0;padding:9px 12px;border-radius:8px;
	display:flex;align-items:center;gap:9px;cursor:pointer;
	font-size:14px;line-height:1.2;color:var(--ink);
	transition:background .15s ease;
}
.w-toolbar .w-facet-pop label:hover{background:var(--cream)}
.w-toolbar .w-facet-pop label:has(input:checked){background:var(--paper)}
.w-toolbar .w-facet-pop input[type="radio"]{
	appearance:none;-webkit-appearance:none;
	width:15px;height:15px;margin:0;padding:0;flex:0 0 auto;
	border:1.5px solid #c8bba9;border-radius:50%;
	background:#fff;position:relative;
	transition:border-color .15s ease,background .15s ease;
}
.w-toolbar .w-facet-pop input[type="radio"]:checked{
	border-color:var(--pri);background:var(--pri);
	box-shadow:inset 0 0 0 3px #fff;
}
.w-toolbar .w-facet-pop input[type="radio"]:focus-visible{
	outline:2px solid var(--accd);outline-offset:2px;
}
.w-toolbar .w-facet-pop .gs-facet-row{padding:2px 4px 0}

/* ---- 视图切换（网格 / 列表）真正生效 ---- */
button.gs-viewbtn.is-on{background:var(--pri)!important;border-color:var(--pri)!important}
button.gs-viewbtn.is-on svg{fill:var(--cream)!important}
button.gs-viewbtn:hover:not(.is-on){border-color:var(--acc)!important}

.w-shop-grid.is-list{display:block!important}
.w-shop-grid.is-list .w-card{
	display:grid;
	grid-template-columns:200px minmax(0,1fr);
	column-gap:28px;row-gap:6px;
	align-items:start;
	padding:18px 0;
	border-bottom:1px solid var(--line);
}
.w-shop-grid.is-list .w-card:first-child{padding-top:6px}
.w-shop-grid.is-list .w-card-img{
	grid-row:1 / span 2;
	width:200px;margin-bottom:0!important;border-radius:10px;
}
.w-shop-grid.is-list .w-card-t{
	grid-column:2;align-self:end;
	font-family:var(--hf);font-size:20px;font-weight:600;line-height:1.25;color:var(--pri);
}
.w-shop-grid.is-list .w-card-p{grid-column:2;align-self:start;font-size:15px;margin-top:2px}
.w-shop-grid.is-list .w-card:hover .w-card-t{color:var(--accd)}
@media(max-width:700px){
	.w-shop-grid.is-list .w-card{grid-template-columns:120px minmax(0,1fr);column-gap:16px;padding:14px 0}
	.w-shop-grid.is-list .w-card-img{width:120px}
	.w-shop-grid.is-list .w-card-t{font-size:15px}
	.w-shop-grid.is-list .w-card-p{font-size:13px}
}