/* 门店暖色型：面向咖啡馆、餐饮、烘焙、美容、零售这类有实体店面的客户。
   与前四套的区别：
   - 前四套面向「来找供应商的人」，重心是信息与资质；这一套面向「要走进来的人」，重心是空间感、产品图、营业时间和预约。
   - 客户通常只有手机拍的实物图，所以版式按「大图 + 大圆角 + 暖色」设计，普通照片放进去也不难看。
   - 不做整屏视频、不做视差滚动：客户给不出素材，装上就是空白。
   设计来源：_local/prototype/jiangnan/（12 页设计稿落地的可交互原型），配色与间距按那份原型复刻。
   典型场景：江南咖啡馆（demo 站，菜单 + 在线订位 + 后台预约记录）。 */

.opc-style-store {
	/* 底色：米白纸感，不用纯白，灯光下不刺眼 */
	--opc-paper: #fbf7f1;
	--opc-paper-2: #f5ede4;
	--opc-card: #fffdfa;

	/* 文字 */
	--opc-ink: #6f5f50;        /* 正文，纸上 5.74:1 */
	--opc-ink-head: #7c4724;   /* 标题，7.07:1 */
	--opc-ink-deep: #5a3319;   /* 深强调，10.92:1 */
	--opc-muted: #7a6a5b;      /* 次要信息，4.87:1 */

	/* 品牌 */
	--opc-brand: #a05f30;      /* 主按钮底色，白字 5.03:1 */
	--opc-brand-hi: #8a4a22;
	--opc-brand-soft: #f0e6d8;
	--opc-brand-soft-2: #e8dac6;

	/* 线与阴影 */
	--opc-line: #e8ddcd;
	--opc-line-2: #dbcbaf;
	--opc-line-3: #c8ab84;   /* 描边按钮的边：--opc-line-2 在米白纸上几乎看不见 */
	--opc-shadow-s: 0 1px 3px rgba(124, 71, 36, .05);
	--opc-shadow-m: 0 10px 30px -18px rgba(92, 54, 24, .35);
	--opc-shadow-l: 0 30px 70px -32px rgba(92, 54, 24, .45);

	/* 间距节奏 */
	--opc-s1: 4px;  --opc-s2: 8px;  --opc-s3: 12px; --opc-s4: 16px;
	--opc-s5: 24px; --opc-s6: 32px; --opc-s7: 48px; --opc-s8: 64px; --opc-s9: 96px;

	/* 形状 */
	--opc-r-s: 12px; --opc-r-m: 18px; --opc-r-l: 26px; --opc-r-pill: 999px;
	--opc-ease: cubic-bezier(.22, .61, .36, 1);

	--opc-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
	            "Source Han Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
	--opc-font-num: "Optima", "Palatino Linotype", Georgia, "Songti SC", serif;
	--opc-gutter: max(20px, calc((100% - 1120px) / 2));
}

body.opc-style-store {
	background: var(--opc-paper);
	color: var(--opc-ink);
	font-family: var(--opc-font);
	font-size: 16px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}
.opc-style-store img { display: block; max-width: 100%; }
.opc-style-store a { color: var(--opc-brand-hi); text-decoration: none; }
.opc-style-store a:hover { color: var(--opc-ink-deep); }
.opc-style-store h1,
.opc-style-store h2,
.opc-style-store h3,
.opc-style-store h4 { margin: 0; color: var(--opc-ink-head); font-weight: 800; letter-spacing: -.015em; line-height: 1.28; }
.opc-style-store h1 { font-size: clamp(30px, 4.4vw, 50px); letter-spacing: -.025em; }
.opc-style-store h2 { font-size: clamp(23px, 2.6vw, 32px); }
.opc-style-store h3 { font-size: 19px; }
.opc-style-store p { margin: 0 0 var(--opc-s4); }
.opc-style-store p:last-child { margin-bottom: 0; }
.opc-style-store ::selection { background: var(--opc-brand-soft-2); color: var(--opc-ink-deep); }
.opc-style-store :focus-visible { outline: 3px solid var(--opc-brand); outline-offset: 3px; border-radius: 6px; }
.opc-style-store .opc-skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--opc-ink-deep); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--opc-r-s) 0; }
.opc-style-store .opc-skip:focus { left: 0; }
.opc-style-store .opc-wrap { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }

/* ---------------------------------------------------------------- 页头 --- */
.opc-style-store .opc-head {
	position: sticky; top: 0; z-index: 40;
	background: rgba(251, 247, 241, .88);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s var(--opc-ease), background .3s var(--opc-ease);
}
.opc-style-store .opc-head.is-stuck { border-bottom-color: var(--opc-line); }
.opc-style-store .opc-head__inner { display: flex; align-items: center; gap: var(--opc-s5); height: 72px; }

.opc-style-store .opc-brand { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; color: var(--opc-ink-head); font-weight: 800; font-size: 17px; letter-spacing: -.01em; text-decoration: none; }
.opc-style-store .opc-brand:hover { color: var(--opc-ink-deep); }
.opc-style-store .opc-brand__mark {
	width: 30px; height: 30px; flex: none; border-radius: 9px;
	background: linear-gradient(150deg, var(--opc-brand) 0%, var(--opc-ink-deep) 100%);
	color: #fff; font-size: 15px; font-weight: 800;
	display: grid; place-items: center;
	box-shadow: 0 4px 10px -4px rgba(90, 51, 25, .6);
}

.opc-style-store .opc-nav { margin-left: auto; }
.opc-style-store .opc-nav__list { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.opc-style-store .opc-nav__list > li { position: relative; }
.opc-style-store .opc-nav__list a {
	display: block; position: relative;
	padding: 8px 14px; color: var(--opc-ink); font-size: 15px; line-height: 1.7;
	border-radius: var(--opc-r-pill);
	transition: color .2s var(--opc-ease), background .2s var(--opc-ease);
}
.opc-style-store .opc-nav__list a:hover { color: var(--opc-ink-head); background: var(--opc-paper-2); }
.opc-style-store .opc-nav__list a::after {
	content: ""; position: absolute; left: 50%; bottom: 2px;
	height: 2px; width: 0; border-radius: 2px; background: var(--opc-brand);
	transform: translateX(-50%); transition: width .28s var(--opc-ease);
}
.opc-style-store .opc-nav__list .current-menu-item > a,
.opc-style-store .opc-nav__list .current_page_item > a { color: var(--opc-ink-head); font-weight: 600; }
.opc-style-store .opc-nav__list .current-menu-item > a::after,
.opc-style-store .opc-nav__list .current_page_item > a::after { width: 20px; }

.opc-style-store .opc-head__cta {
	padding: 8px 18px; line-height: 1.7;
	background: var(--opc-brand); color: #fff;
	border-radius: var(--opc-r-pill);
	font-size: 14px; font-weight: 600;
	box-shadow: 0 6px 16px -10px rgba(160, 95, 48, .9);
	transition: transform .2s var(--opc-ease), background .2s var(--opc-ease);
}
.opc-style-store .opc-head__cta:hover { background: var(--opc-brand-hi); color: #fff; transform: translateY(-1px); }

.opc-style-store .opc-burger {
	display: none; width: 42px; height: 42px; margin-left: auto;
	padding: 0; border: 1px solid var(--opc-line-2); border-radius: 12px;
	background: var(--opc-card); color: var(--opc-ink-head); cursor: pointer;
}
.opc-style-store .opc-burger span { display: block; width: 18px; height: 2px; margin: 3px auto; background: currentColor; border-radius: 2px; transition: transform .25s var(--opc-ease), opacity .2s; }

/* ------------------------------------------------------------ 按钮系统 --- */
.opc-style-store .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--opc-s3); }
.opc-style-store .wp-block-button { margin: 0; }
.opc-style-store .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 26px;
	border: 1px solid transparent; border-radius: var(--opc-r-pill);
	font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
	background: var(--opc-brand); color: #fff;
	box-shadow: 0 10px 24px -14px rgba(160, 95, 48, .95);
	transition: transform .18s var(--opc-ease), background .18s var(--opc-ease), color .18s var(--opc-ease), box-shadow .18s var(--opc-ease);
}
.opc-style-store .wp-block-button__link:hover { background: var(--opc-brand-hi); color: #fff; transform: translateY(-2px); }
.opc-style-store .wp-block-button__link:active { transform: translateY(1px); }
.opc-style-store .wp-block-button.is-style-outline .wp-block-button__link,
.opc-style-store .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: transparent; color: var(--opc-ink-head); border-color: var(--opc-line-3); box-shadow: none;
}
.opc-style-store .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--opc-paper-2); border-color: var(--opc-brand); }
.opc-style-store .wp-block-button.has-wide-width .wp-block-button__link { width: 100%; }

/* -------------------------------------------------------------- 区块 --- */
.opc-style-store .opc-section { padding: var(--opc-s9) var(--opc-gutter); }
.opc-style-store .opc-section.tight { padding: var(--opc-s8) var(--opc-gutter); }
.opc-style-store .opc-section.alt {
	background: linear-gradient(180deg, var(--opc-paper-2) 0%, #f8f2ea 100%);
}
.opc-style-store .opc-section h2 { margin: 0; }
.opc-style-store .opc-section h3 { margin: 0; }

.opc-style-store .opc-sec-head { max-width: 620px; margin-bottom: var(--opc-s7); }
.opc-style-store .opc-sec-head.center { margin-inline: auto; text-align: center; }
.opc-style-store .opc-sec-head p { margin-top: var(--opc-s3); }
.opc-style-store .opc-kicker {
	display: inline-block; margin-bottom: var(--opc-s3);
	padding: 5px 14px; border-radius: var(--opc-r-pill);
	background: var(--opc-brand-soft); color: var(--opc-ink-head);
	font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: none;
}
.opc-style-store .opc-lede { font-size: 17px; color: var(--opc-ink); margin: 0; }
.opc-style-store .opc-note { margin-top: var(--opc-s5); color: var(--opc-muted); font-size: 13.5px; }

/* -------------------------------------------------------------- 首屏 --- */
.opc-style-store .opc-hero {
	display: grid; grid-template-columns: 1.02fr .98fr;
	gap: clamp(32px, 5vw, 72px); align-items: center;
	padding: var(--opc-s6) var(--opc-gutter) var(--opc-s8);
	background: var(--opc-paper);
}
.opc-style-store .opc-hero__text { min-width: 0; }
.opc-style-store .opc-hero__text > .opc-kicker { margin-bottom: var(--opc-s4); }
.opc-style-store .opc-hero h1 { margin: 0 0 var(--opc-s4); }
.opc-style-store .opc-hero .opc-lede { max-width: 46ch; margin-bottom: var(--opc-s5); }

.opc-style-store .opc-hero__facts {
	display: flex; flex-wrap: wrap; gap: 8px 18px;
	margin: 0 0 var(--opc-s6); padding: 0; list-style: none;
	font-size: 14px; color: var(--opc-muted);
}
.opc-style-store .opc-hero__facts li { display: flex; align-items: center; gap: 7px; }
.opc-style-store .opc-hero__facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--opc-brand); flex: none; }

.opc-style-store .opc-hero__media { position: relative; min-width: 0; margin: 0; }
.opc-style-store .opc-hero__media figure { margin: 0; }
.opc-style-store .opc-hero__media img {
	/* height:auto 不能省：img 上有 width/height 属性时，不写 auto 会让 aspect-ratio 失效，
	   图片按原始高度硬撑，首屏直接被顶到 1500px，按钮掉出折线。 */
	width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
	border-radius: var(--opc-r-l); box-shadow: var(--opc-shadow-l); background: var(--opc-paper-2);
}
.opc-style-store .opc-hero__badge {
	position: absolute; left: -18px; bottom: 26px;
	display: flex; align-items: center; gap: 10px;
	padding: 12px 18px;
	background: var(--opc-card); border: 1px solid var(--opc-line);
	border-radius: var(--opc-r-m); box-shadow: var(--opc-shadow-m);
	font-size: 13px; line-height: 1.5; color: var(--opc-muted);
}
.opc-style-store .opc-hero__badge b { display: block; color: var(--opc-ink-head); font-size: 14px; }
.opc-style-store .opc-hero__badge .opc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #2f8a5f; box-shadow: 0 0 0 4px rgba(47, 138, 95, .14); }

/* -------------------------------------------------------- 招牌图文砖 --- */
.opc-style-store .opc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--opc-s5); }
.opc-style-store .opc-tile {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--opc-card); border: 1px solid var(--opc-line);
	border-radius: var(--opc-r-m); color: inherit; text-decoration: none;
	box-shadow: var(--opc-shadow-s);
	transition: transform .28s var(--opc-ease), box-shadow .28s var(--opc-ease), border-color .28s var(--opc-ease);
}
.opc-style-store .opc-tile:hover { transform: translateY(-4px); border-color: var(--opc-line-2); box-shadow: var(--opc-shadow-m); color: inherit; }
.opc-style-store .opc-tile__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin: 0; background: var(--opc-paper-2); transition: transform .6s var(--opc-ease); }
.opc-style-store .opc-tile:hover .opc-tile__img { transform: scale(1.035); }
.opc-style-store .opc-tile__title { display: block; padding: var(--opc-s4) var(--opc-s5) 0; font-size: 19px; font-weight: 800; line-height: 1.4; color: var(--opc-ink-head); }
.opc-style-store .opc-tile__text { display: block; padding: 6px var(--opc-s5) 0; font-size: 14.5px; line-height: 1.65; color: var(--opc-muted); }
.opc-style-store .opc-tile__more { display: inline-flex; align-items: center; gap: 6px; padding: var(--opc-s3) var(--opc-s5) var(--opc-s5); font-size: 14px; font-weight: 600; color: var(--opc-brand); }
.opc-style-store .opc-tile__more::after { content: "→"; transition: transform .28s var(--opc-ease); }
.opc-style-store .opc-tile:hover .opc-tile__more::after { transform: translateX(4px); }
.opc-style-store .opc-tile:focus-visible { outline: 3px solid var(--opc-brand); outline-offset: 3px; }
.opc-style-store .opc-booking-hero figure,
.opc-style-store .opc-about-hero figure { margin: 0; }
.opc-style-store .opc-contact-side { min-width: 0; }

/* 到店信息：没有图的两张纯文字砖，靠留白和标题撑住，不用一排图标假装内容 */
.opc-style-store .opc-info { padding: var(--opc-s5) var(--opc-s5) calc(var(--opc-s5) + 4px); background: var(--opc-card); border: 1px solid var(--opc-line); border-radius: var(--opc-r-m); box-shadow: var(--opc-shadow-s); }
.opc-style-store .opc-info h3 { margin-bottom: 8px; }
.opc-style-store .opc-info p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--opc-ink); }
.opc-style-store .opc-info .opc-tile__more { padding: var(--opc-s3) 0 0; }

/* -------------------------------------------------------------- FAQ --- */
.opc-style-store .opc-faq { max-width: 760px; margin: 0 auto; }
.opc-style-store .wp-block-details {
	border: 0; border-bottom: 1px solid var(--opc-line); padding: 0;
}
.opc-style-store .wp-block-details summary {
	display: flex; align-items: center; gap: var(--opc-s4);
	padding: var(--opc-s5) 0;
	list-style: none; cursor: pointer;
	color: var(--opc-ink-head); font-weight: 600; font-size: 16.5px;
	transition: color .2s var(--opc-ease);
}
.opc-style-store .wp-block-details summary::-webkit-details-marker { display: none; }
.opc-style-store .wp-block-details summary:hover { color: var(--opc-brand); }
.opc-style-store .wp-block-details summary::after {
	content: "+"; margin-left: auto; flex: none;
	width: 26px; height: 26px; border-radius: 50%;
	border: 1px solid var(--opc-line-2);
	display: grid; place-items: center;
	color: var(--opc-brand); font-weight: 400; font-size: 17px;
	transition: transform .3s var(--opc-ease), background .2s, border-color .2s;
}
.opc-style-store .wp-block-details[open] summary::after { transform: rotate(45deg); background: var(--opc-brand-soft); border-color: var(--opc-brand-soft); }
.opc-style-store .wp-block-details p { max-width: 66ch; margin: 0 0 var(--opc-s5); color: var(--opc-ink); font-size: 15.5px; }
.opc-style-store .opc-faq__more { margin-top: var(--opc-s5); font-size: 15px; }

/* ---------------------------------------------------------- 内页页头 --- */
.opc-style-store .opc-page-head { padding: var(--opc-s8) var(--opc-gutter) var(--opc-s6); }
/* 内页页头后面紧跟的版块不再要上留白，否则标题与内容之间空出一大块 */
.opc-style-store .opc-page-head + .opc-section { padding-top: 0; }
.opc-style-store .opc-page-head h1 { margin: 0 0 var(--opc-s3); }
.opc-style-store .opc-page-head .opc-lede { max-width: 58ch; }

/* ------------------------------------------------------------ 菜单页 --- */
.opc-style-store .opc-pills {
	display: flex; flex-wrap: wrap; gap: 10px;
	margin: 0 0 var(--opc-s6); padding: 0; list-style: none;
}
.opc-style-store .opc-pills > li { list-style: none; }
.opc-style-store .opc-pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 20px; border: 1px solid transparent; border-radius: var(--opc-r-pill);
	background: var(--opc-brand-soft); color: var(--opc-ink-head);
	font-family: inherit; font-size: 14.5px; font-weight: 500; line-height: 1.5;
	cursor: pointer;
	transition: background .2s var(--opc-ease), color .2s var(--opc-ease), transform .2s var(--opc-ease), box-shadow .2s var(--opc-ease);
}
.opc-style-store .opc-pill:hover { background: var(--opc-brand-soft-2); transform: translateY(-1px); }
.opc-style-store .opc-pill[aria-pressed="true"] { background: var(--opc-brand); color: #fff; box-shadow: 0 8px 18px -12px rgba(160, 95, 48, 1); }
.opc-style-store .opc-pill__count { font-size: 12.5px; opacity: .6; }

.opc-style-store .opc-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--opc-s4); }
/* 卡片设了 display:grid，优先级高于浏览器默认的 [hidden]{display:none}，
   结果 JS 把 card.hidden 设成 true，元素却照样显示——筛选看着没生效。
   这里显式把被隐藏的卡片压掉，display:none 必须重新写一遍。 */
.opc-style-store .opc-menu-grid .opc-catalog-card[hidden] { display: none; }
.opc-style-store .opc-menu-grid .opc-catalog-card {
	display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: stretch;
	min-height: 136px; padding: 0; overflow: hidden;
	background: var(--opc-card); border: 1px solid var(--opc-line); border-radius: var(--opc-r-m);
	box-shadow: var(--opc-shadow-s); text-align: left;
	transition: transform .26s var(--opc-ease), box-shadow .26s var(--opc-ease), border-color .26s var(--opc-ease), opacity .26s var(--opc-ease);
}
.opc-style-store .opc-menu-grid .opc-catalog-card:hover { transform: translateY(-3px); border-color: var(--opc-line-2); box-shadow: var(--opc-shadow-m); }
.opc-style-store .opc-dish__img { display: block; position: relative; overflow: hidden; background: var(--opc-paper-2); min-height: 136px; }
/* 图用绝对定位铺满左格，不要用 height:100%：父格高度由右栏文字决定，
   百分比高度在自动高度的网格项里会互相撑大，卡片能一路涨到 1500px。 */
.opc-style-store .opc-dish__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; aspect-ratio: auto; transition: transform .6s var(--opc-ease); }
.opc-style-store .opc-menu-grid .opc-catalog-card:hover .opc-dish__img img { transform: scale(1.05); }
.opc-style-store .opc-dish__body { display: flex; flex-direction: column; gap: 4px; padding: var(--opc-s4) var(--opc-s5); min-width: 0; }
.opc-style-store .opc-dish__top { display: flex; align-items: baseline; gap: 10px; }
.opc-style-store .opc-dish__top h3 { font-size: 17px; }
.opc-style-store .opc-dish__top h3 a { color: var(--opc-ink-head); text-decoration: none; }
.opc-style-store .opc-dish__tag {
	margin-left: auto; flex: none; padding: 2px 9px; border-radius: var(--opc-r-pill);
	background: var(--opc-brand-soft); color: var(--opc-ink-head);
	font-size: 12px; font-weight: 500;
}
.opc-style-store .opc-dish__body p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--opc-ink); }
.opc-style-store .opc-dish__spec { font-size: 13px; color: var(--opc-muted); }
.opc-style-store .opc-dish__more { margin-top: auto; padding-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--opc-brand); }
/* 筛选切换时给一点呼吸，直接闪会像整页重载 */
.opc-style-store .opc-menu-grid.is-swapping .opc-catalog-card { opacity: 0; transform: translateY(6px) scale(.99); }
.opc-style-store .opc-menu-empty { margin: var(--opc-s6) 0 0; color: var(--opc-muted); }

.opc-style-store .opc-menu-note {
	margin-top: var(--opc-s6); padding: var(--opc-s4) var(--opc-s5);
	border-left: 3px solid var(--opc-brand-soft-2);
	background: rgba(240, 230, 216, .45);
	border-radius: 0 var(--opc-r-s) var(--opc-r-s) 0;
	font-size: 14px; color: var(--opc-muted);
}
.opc-style-store .opc-menu-note a { color: var(--opc-brand-hi); font-weight: 600; }

/* ------------------------------------------------------------ 订位页 --- */
.opc-style-store .opc-booking-hero { padding: var(--opc-s5) var(--opc-gutter) 0; }
.opc-style-store .opc-booking-hero img {
	width: 100%; height: clamp(200px, 30vw, 340px); object-fit: cover;
	border-radius: var(--opc-r-l); background: var(--opc-paper-2); margin: 0;
}
.opc-style-store .opc-booking-wrap { position: relative; margin-top: -72px; padding: 0 var(--opc-gutter) var(--opc-s9); }
.opc-style-store .opc-booking-card {
	width: min(560px, 100%); margin: 0 auto; padding: var(--opc-s7) var(--opc-s6) var(--opc-s6);
	background: var(--opc-card); border: 1px solid var(--opc-line); border-radius: var(--opc-r-l);
	box-shadow: var(--opc-shadow-l);
}
.opc-style-store .opc-booking-card h1 { font-size: clamp(24px, 2.6vw, 30px); text-align: center; }
.opc-style-store .opc-booking-card > p { margin-top: 10px; text-align: center; font-size: 14.5px; color: var(--opc-muted); }

/* 插件表单：药丸形输入框 + 左侧图标，与整站调子一致；插件自带的圆角与边框全部覆盖 */
.opc-style-store .opc-booking { max-width: none; margin: var(--opc-s6) 0 0; }
.opc-style-store .opc-booking p { margin: 0 0 var(--opc-s3); }
.opc-style-store .opc-booking__row { position: relative; }
.opc-style-store .opc-booking__row > label { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 600; color: var(--opc-ink-head); }
.opc-style-store .opc-booking input:not([type=checkbox]),
.opc-style-store .opc-booking select,
.opc-style-store .opc-booking textarea {
	width: 100%; box-sizing: border-box;
	padding: 13px 16px; min-height: 50px;
	border: 1px solid var(--opc-line-2); border-radius: var(--opc-r-pill);
	background: var(--opc-paper); color: var(--opc-ink-deep);
	font: inherit; font-size: 15px; line-height: 1.4;
	transition: border-color .2s var(--opc-ease), background .2s var(--opc-ease), box-shadow .2s var(--opc-ease);
}
.opc-style-store .opc-booking textarea { border-radius: var(--opc-r-m); min-height: 92px; padding-top: 14px; resize: vertical; line-height: 1.6; }
.opc-style-store .opc-booking select {
	-webkit-appearance: none; appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--opc-brand) 50%),
	                  linear-gradient(135deg, var(--opc-brand) 50%, transparent 50%);
	background-position: calc(100% - 22px) 21px, calc(100% - 16px) 21px;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	cursor: pointer;
}
.opc-style-store .opc-booking input:hover,
.opc-style-store .opc-booking select:hover,
.opc-style-store .opc-booking textarea:hover { border-color: var(--opc-brand); }
.opc-style-store .opc-booking input:focus,
.opc-style-store .opc-booking select:focus,
.opc-style-store .opc-booking textarea:focus {
	outline: none; background: var(--opc-card); border-color: var(--opc-brand);
	box-shadow: 0 0 0 4px rgba(160, 95, 48, .16);
}
.opc-style-store .opc-booking input:focus-visible,
.opc-style-store .opc-booking select:focus-visible,
.opc-style-store .opc-booking textarea:focus-visible { outline: none; }
.opc-style-store .opc-booking [aria-invalid=true] { border-color: #b5453a; background: #fdf5f3; box-shadow: 0 0 0 4px rgba(181, 69, 58, .1); }
.opc-style-store .opc-booking__err { display: block; margin-top: 6px; color: #a03a30; font-size: 13px; font-weight: 600; }
.opc-style-store .opc-booking__hint { display: block; margin-top: 6px; font-size: 13px; color: var(--opc-muted); }
.opc-style-store .opc-booking__row.has-ico > label { padding-left: 0; }
.opc-style-store .opc-booking__ico {
	position: absolute; left: 16px; top: 40px;
	width: 18px; height: 18px; color: var(--opc-brand); opacity: .8; pointer-events: none;
}
.opc-style-store .opc-booking__row.has-ico input,
.opc-style-store .opc-booking__row.has-ico select { padding-left: 46px; }
.opc-style-store .opc-booking__row.has-ico textarea { padding-left: 46px; }
.opc-style-store .opc-booking__ico--top { top: 40px; }
.opc-style-store .opc-booking .opc-booking__consent { margin: var(--opc-s4) 0 var(--opc-s5); }
.opc-style-store .opc-booking .opc-booking__consent label { display: flex; align-items: flex-start; gap: 10px; padding: 0; font-size: 13.5px; font-weight: 400; line-height: 1.6; color: var(--opc-muted); }
.opc-style-store .opc-booking .opc-booking__consent input { width: 18px; height: 18px; min-height: 0; margin: 3px 0 0; accent-color: var(--opc-brand); flex: none; }
.opc-style-store .opc-booking__privacy { margin: 0 0 var(--opc-s4); text-align: center; font-size: 12.5px; color: var(--opc-muted); }
.opc-style-store .opc-booking__submit {
	width: 100%; min-height: 48px; padding: 13px 26px;
	border: 0; border-radius: var(--opc-r-pill);
	font: inherit; font-size: 15px; font-weight: 600; color: #fff; background: var(--opc-brand);
	box-shadow: 0 10px 24px -14px rgba(160, 95, 48, .95); cursor: pointer;
	transition: background .18s var(--opc-ease), transform .18s var(--opc-ease);
}
.opc-style-store .opc-booking__submit:hover { background: var(--opc-brand-hi); transform: translateY(-1px); }
.opc-style-store .opc-booking__submit:disabled { opacity: .6; cursor: progress; transform: none; }

/* 提交成功 / 校验失败：做成卡片内的状态块，不要跳出去一整页系统提示 */
.opc-style-store .opc-booking__notice {
	margin: 0; padding: var(--opc-s5) var(--opc-s4) var(--opc-s3);
	border: 1px solid var(--opc-line); border-radius: var(--opc-r-m);
	background: var(--opc-paper); text-align: center;
}
.opc-style-store .opc-booking__notice.is-success strong { display: block; font-size: 22px; color: var(--opc-ink-head); }
.opc-style-store .opc-booking__notice.is-success strong::before {
	content: "✓"; display: grid; place-items: center;
	width: 62px; height: 62px; margin: 0 auto var(--opc-s4);
	border-radius: 50%; background: var(--opc-brand-soft); color: var(--opc-brand-hi);
	font-size: 30px; font-weight: 700;
}
.opc-style-store .opc-booking__notice p { margin: 6px 0 0; font-size: 14.5px; color: var(--opc-muted); }
.opc-style-store .opc-booking__notice a { color: var(--opc-brand-hi); font-weight: 600; }
.opc-style-store .opc-booking__notice.is-error { text-align: left; border-color: #e7c3bd; background: #fdf5f3; }
.opc-style-store .opc-booking__notice.is-error strong { color: #8f3128; }
.opc-style-store .opc-booking__notice.is-error ul { margin: 8px 0 0; padding-left: 1.2em; font-size: 14px; }
.opc-style-store .opc-booking__notice.is-error a { color: #8f3128; }

/* ------------------------------------------------------------ 关于页 --- */
.opc-style-store .opc-about-hero { padding: var(--opc-s5) var(--opc-gutter) 0; }
.opc-style-store .opc-about-hero img { width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; border-radius: var(--opc-r-l); background: var(--opc-paper-2); margin: 0; }
.opc-style-store .opc-prose { max-width: 68ch; }
.opc-style-store .opc-prose p { font-size: 16.5px; line-height: 1.85; color: var(--opc-ink); }
.opc-style-store .opc-prose p + p { margin-top: var(--opc-s4); }

.opc-style-store .opc-figures {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--opc-s5);
	margin-top: var(--opc-s7); padding: var(--opc-s6) 0 0;
	border: 0; border-top: 1px solid var(--opc-line); background: transparent;
}
.opc-style-store .opc-figures > div { padding: 0; background: transparent; border-radius: 0; text-align: left; }
.opc-style-store .opc-figures strong {
	display: block; color: var(--opc-brand);
	font-family: var(--opc-font-num); font-size: clamp(30px, 3.4vw, 40px);
	font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.opc-style-store .opc-figures span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--opc-muted); }

/* ------------------------------------------------------------ 联系页 --- */
.opc-style-store .opc-contact-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.opc-style-store .opc-contact-info { min-width: 0; }
.opc-style-store .opc-kit-contact dl { display: block; margin: 0; }
.opc-style-store .opc-kit-contact dt { margin-top: var(--opc-s4); font-size: 13px; color: var(--opc-muted); }
.opc-style-store .opc-kit-contact dt:first-child { margin-top: 0; }
.opc-style-store .opc-kit-contact dd { margin: 2px 0 0; padding-bottom: var(--opc-s4); border-bottom: 1px solid var(--opc-line); color: var(--opc-ink-deep); font-size: 15.5px; font-weight: 500; line-height: 1.6; }
.opc-style-store .opc-kit-contact dd:last-of-type { border-bottom: 0; }
.opc-style-store .opc-kit-contact__qr { margin-top: var(--opc-s4); max-width: 132px; border-radius: 10px; }

.opc-style-store .opc-map {
	position: relative; aspect-ratio: 16 / 10; overflow: hidden;
	border: 1px solid var(--opc-line); border-radius: var(--opc-r-m);
	/* 示意地图：两层街廓 + 两条主路，够看出「这是个街区」就行，不假装是地图服务 */
	background:
		linear-gradient(90deg, transparent 61%, var(--opc-paper) 61%, var(--opc-paper) 64%, transparent 64%),
		linear-gradient(0deg, transparent 33%, var(--opc-paper) 33%, var(--opc-paper) 36%, transparent 36%),
		repeating-linear-gradient(90deg, transparent 0 58px, rgba(251, 247, 241, .58) 58px 61px),
		repeating-linear-gradient(0deg, transparent 0 52px, rgba(251, 247, 241, .58) 52px 55px),
		linear-gradient(158deg, #f1e7d7 0%, #e5d5bd 100%);
}
.opc-style-store .opc-map__pin {
	position: absolute; left: 50%; top: 46%;
	width: 34px; height: 34px; margin: -17px 0 0 -17px;
	border-radius: 50% 50% 50% 0; background: var(--opc-brand-hi);
	transform: rotate(-45deg); box-shadow: 0 6px 14px -6px rgba(90, 51, 25, .8);
}
.opc-style-store .opc-map__pin::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--opc-card); }
.opc-style-store .opc-map__label {
	position: absolute; left: 14px; bottom: 14px; padding: 6px 12px;
	border-radius: var(--opc-r-pill); background: rgba(255, 253, 250, .92);
	border: 1px solid var(--opc-line); font-size: 12.5px; color: var(--opc-muted);
}
.opc-style-store .opc-qr {
	display: flex; align-items: center; gap: var(--opc-s4);
	margin-top: var(--opc-s5); padding: var(--opc-s4) var(--opc-s5);
	background: var(--opc-card); border: 1px solid var(--opc-line); border-radius: var(--opc-r-m);
}
.opc-style-store .opc-qr img { width: 76px; height: 76px; flex: none; border-radius: 10px; object-fit: cover; }
.opc-style-store .opc-qr p { margin: 0; font-size: 14px; color: var(--opc-muted); }
.opc-style-store .opc-qr b { display: block; margin-bottom: 2px; color: var(--opc-ink-head); }

/* 联系页的询盘表单与首页订位卡共用一套输入框语言 */
.opc-style-store .opc-kit-inquiry { max-width: 640px; margin-top: var(--opc-s6); padding: 0; background: transparent; border-radius: 0; box-shadow: none; }
.opc-style-store .opc-kit-inquiry label { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 600; color: var(--opc-ink-head); }
.opc-style-store .opc-kit-inquiry input:not([type=checkbox]),
.opc-style-store .opc-kit-inquiry textarea {
	width: 100%; box-sizing: border-box; padding: 13px 16px;
	border: 1px solid var(--opc-line-2); border-radius: var(--opc-r-pill);
	background: var(--opc-paper); color: var(--opc-ink-deep); font: inherit; font-size: 15px;
}
.opc-style-store .opc-kit-inquiry textarea { border-radius: var(--opc-r-m); }
.opc-style-store .opc-kit-inquiry button,
.opc-style-store .opc-inquiry-button {
	border: 0; border-radius: var(--opc-r-pill); padding: 13px 30px;
	background: var(--opc-brand); color: #fff; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none;
}

/* ---------------------------------------------------------- 转化带 --- */
.opc-style-store .opc-cta-band { padding: var(--opc-s8) var(--opc-gutter); background: var(--opc-brand-soft); }
.opc-style-store .opc-cta-band__inner { width: min(1120px, 100%); margin: 0 auto; }
.opc-style-store .opc-cta-band h2 { margin: 0 0 var(--opc-s4); }
.opc-style-store .opc-cta-band p { max-width: 52ch; margin: 0 0 var(--opc-s5); color: var(--opc-ink); }

/* -------------------------------------------------------------- 页尾 --- */
.opc-style-store .opc-foot { margin-top: 0; padding: var(--opc-s8) 0 var(--opc-s6); background: var(--opc-paper-2); border-top: 1px solid var(--opc-line); color: var(--opc-muted); }
.opc-style-store .opc-foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--opc-s6); }
.opc-style-store .opc-foot__grid h2,
.opc-style-store .opc-foot__grid h4 { margin: 0 0 var(--opc-s3); font-size: 14px; color: var(--opc-ink-head); }
.opc-style-store .opc-foot__grid p,
.opc-style-store .opc-foot__grid li { font-size: 14px; line-height: 1.75; color: var(--opc-muted); }
.opc-style-store .opc-foot__grid p { margin: 0; }
.opc-style-store .opc-foot__grid ul { margin: 0; padding: 0; list-style: none; }
.opc-style-store .opc-foot__grid li + li { margin-top: 6px; }
.opc-style-store .opc-foot__grid a { color: var(--opc-muted); text-decoration: none; }
.opc-style-store .opc-foot__grid a:hover { color: var(--opc-brand); }
.opc-style-store .opc-foot__bottom {
	display: flex; flex-wrap: wrap; gap: var(--opc-s3) var(--opc-s5);
	justify-content: space-between; align-items: center;
	margin-top: var(--opc-s7); padding-top: var(--opc-s4);
	border-top: 1px solid var(--opc-line);
	font-size: 12.5px; color: var(--opc-muted);
}
.opc-style-store .opc-foot__bottom a { color: var(--opc-muted); }
.opc-style-store .opc-beian { display: inline-flex; flex-wrap: wrap; gap: var(--opc-s3); font-size: 12.5px; }

/* -------------------------------------------------- 手机底部固定条 --- */
.opc-style-store .opc-kit-bar { border-top-color: var(--opc-line); }
.opc-style-store .opc-kit-bar a { border-radius: var(--opc-r-pill); font-size: 15px; font-weight: 600; }
.opc-style-store .opc-kit-bar__call { background: var(--opc-paper-2); color: var(--opc-ink-head); border: 1px solid var(--opc-line-2); }
.opc-style-store .opc-kit-bar__book,
.opc-style-store .opc-kit-bar__wechat { background: var(--opc-brand); color: #fff; }

/* -------------------------------------------------------------- 动效 --- */
.opc-style-store .opc-reveal { opacity: 0; transform: translateY(16px); }
.opc-style-store .opc-reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--opc-ease), transform .7s var(--opc-ease); }
@media (prefers-reduced-motion: reduce) {
	.opc-style-store .opc-reveal { opacity: 1; transform: none; }
	.opc-style-store .opc-tile,
	.opc-style-store .opc-tile__img,
	.opc-style-store .opc-tile__more::after,
	.opc-style-store .opc-menu-grid .opc-catalog-card,
	.opc-style-store .opc-dish__img img { transition: none; }
	.opc-style-store .opc-tile:hover,
	.opc-style-store .opc-menu-grid .opc-catalog-card:hover { transform: none; }
	.opc-style-store .opc-tile:hover .opc-tile__img,
	.opc-style-store .opc-menu-grid .opc-catalog-card:hover .opc-dish__img img { transform: none; }
}

/* ------------------------------------------------------------ 响应式 --- */
@media (max-width: 980px) {
	.opc-style-store .opc-hero { grid-template-columns: 1fr; gap: var(--opc-s6); padding: var(--opc-s5) var(--opc-gutter) var(--opc-s7); }
	.opc-style-store .opc-hero__media { order: -1; }
	/* 平板竖屏：4:5 的图占满一屏会把按钮顶到折线以下，单独限高 */
	.opc-style-store .opc-hero__media img { aspect-ratio: 16 / 11; max-height: 46vh; }
	.opc-style-store .opc-hero__badge { left: auto; right: 16px; bottom: -20px; }
	.opc-style-store .opc-contact-grid { grid-template-columns: 1fr; gap: var(--opc-s6); }
	.opc-style-store .opc-foot__grid { grid-template-columns: 1fr 1fr; }
	.opc-style-store .opc-section { padding: var(--opc-s7) var(--opc-gutter); }
	.opc-style-store .opc-menu-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
	.opc-style-store .opc-wrap { width: min(100% - 32px, 640px); }

	.opc-style-store .opc-head__inner { height: 62px; gap: var(--opc-s3); }
	.opc-style-store .opc-nav {
		position: absolute; left: 0; right: 0; top: 62px;
		display: none; margin: 0;
		padding: var(--opc-s3) var(--opc-s4) var(--opc-s4);
		background: var(--opc-card); border-bottom: 1px solid var(--opc-line);
		box-shadow: var(--opc-shadow-m);
	}
	.opc-style-store .opc-nav.is-open { display: block; }
	.opc-style-store .opc-nav__list { flex-direction: column; gap: 0; }
	.opc-style-store .opc-nav__list a { padding: 13px 12px; border-radius: var(--opc-r-s); font-size: 16px; }
	.opc-style-store .opc-nav__list a::after { display: none; }
	.opc-style-store .opc-nav__list .current-menu-item > a,
	.opc-style-store .opc-nav__list .current_page_item > a { background: var(--opc-brand-soft); }
	.opc-style-store .opc-head__cta { display: none; }
	.opc-style-store .opc-burger { display: block; }
	.opc-style-store .opc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
	.opc-style-store .opc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.opc-style-store .opc-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

	.opc-style-store .opc-section { padding: var(--opc-s6) var(--opc-gutter); }
	.opc-style-store .opc-section.tight { padding: var(--opc-s6) var(--opc-gutter); }
	.opc-style-store .opc-hero { padding: var(--opc-s5) var(--opc-gutter) var(--opc-s7); }
	.opc-style-store .opc-hero .wp-block-buttons .wp-block-button { flex: 1 1 auto; }
	.opc-style-store .opc-hero .wp-block-button__link { width: 100%; }
	.opc-style-store .opc-sec-head { margin-bottom: var(--opc-s5); }

	.opc-style-store .opc-tiles { grid-template-columns: 1fr; gap: var(--opc-s4); }
	.opc-style-store .opc-tile__img { aspect-ratio: 16 / 10; }

	/* 分类胶囊改横向滑动：手机上折成两行会把首屏挤掉一半 */
	.opc-style-store .opc-pills {
		flex-wrap: nowrap; overflow-x: auto;
		margin-inline: calc(var(--opc-s4) * -1);
		padding: 4px var(--opc-s4) 8px;
		scrollbar-width: none; -webkit-overflow-scrolling: touch;
	}
	.opc-style-store .opc-pills::-webkit-scrollbar { display: none; }
	.opc-style-store .opc-pill { flex: none; white-space: nowrap; }

	.opc-style-store .opc-menu-grid .opc-catalog-card { grid-template-columns: 112px minmax(0, 1fr); min-height: 118px; }
	.opc-style-store .opc-dish__body { padding: var(--opc-s3) var(--opc-s4); gap: 3px; }
	.opc-style-store .opc-dish__top h3 { font-size: 16px; }
	.opc-style-store .opc-dish__body p { font-size: 13.5px; }
	.opc-style-store .opc-dish__spec { font-size: 12.5px; }
	.opc-style-store .opc-dish__tag { display: none; }

	.opc-style-store .opc-booking-hero { padding: var(--opc-s3) var(--opc-gutter) 0; }
	.opc-style-store .opc-booking-wrap { margin-top: -48px; padding-bottom: var(--opc-s7); }
	.opc-style-store .opc-booking-card { padding: var(--opc-s6) var(--opc-s4) var(--opc-s5); border-radius: var(--opc-r-m); }

	.opc-style-store .opc-figures { grid-template-columns: 1fr 1fr; gap: var(--opc-s4); }
	.opc-style-store .opc-foot__grid { grid-template-columns: 1fr; }
	.opc-style-store .opc-foot__bottom { margin-bottom: 62px; }
}

@media (max-width: 380px) {
	.opc-style-store .opc-menu-grid .opc-catalog-card { grid-template-columns: 88px minmax(0, 1fr); }
	.opc-style-store .opc-hero__badge { display: none; }
}