/* StoreLocator 页面 —— 2026-09-19 按参照站（scentiment）的编辑式版式重写
 *
 * 本模块（other/mode_9）全站只在 /pages/storelocator 出现一次（已查 visual_plugins），
 * 所以直接改模块 CSS，不另开页面级覆盖层。
 * 文件 7KB < 8KB，平台会把它内联进 body，排在 head 里所有外链样式之后 ——
 * 因此这里的规则与 zt-presentation 平局时本文件赢，不需要 !important。
 *
 * 改动分三类，功能性规则（显示切换 / swiper / 地图定位）原样保留：
 *   版式   —— 纵向节奏并入站点单一刻度 clamp(64px,7vw,120px)；
 *             内容并入站点栅格 width:1440px/max-width:92%。
 *   字体   —— 主标题改 var(--zt-serif)。原先落在 global.css 的
 *             `.store_locator .title`(0,2,0) 上，取 var(--font-semibold)，
 *             而该变量已在字体对齐批次里被映射成 Inter Tight，
 *             结果这页的主标题是无衬线，与 about / 首页的衬线 display 不是一套。
 *             同时去掉 font-weight:bold —— 站内无粗体字面，bold 会被浏览器合成。
 *   图标   —— 电话/邮箱/地址三个 svg 的绿色渐变(#ccdf7c→#97cd99)烤在素材里，
 *             改用 mask 取形状、background-color 上色，素材文件不动。
 */

/* ---------- 1. 页首：眉标 + 衬线主标题 + 收窄的正文 ---------- */

.storelocator_page .store_locator{padding-top: clamp(64px, 7vw, 120px);padding-bottom: clamp(24px, 2.6vw, 40px)}.storelocator_page .store_locator .wide_1440{width: 1440px;max-width: 92%;margin: 0 auto;text-align: center}/* 参照站每个区块都以一行字距 .22em 的小号大写起头，替代这里原本空着的顶部留白 */
.storelocator_page .store_locator .wide_1440::before{content: 'Store Locator';display: block;font-family: var(--zt-sans, 'Inter Tight', Arial, sans-serif);font-size: 11px;line-height: 1;letter-spacing: .22em;text-transform: uppercase;color: var(--n-600);margin-bottom: 20px}.storelocator_page .store_locator .title{font-family: var(--zt-serif, 'Cormorant Infant', Georgia, serif);/* 字号取站内已有的区块标题档 clamp(30px,3.2vw,44px)（about / 页尾各页同一档）。
	   zt-presentation 里那条同名规则带 !important，这里写别的值只会变成谎话；
	   写成一致的值，文件本身也能说明这页用的是哪一档。 */
	font-size: clamp(30px, 3.2vw, 44px);font-weight: 400;line-height: 1.05;letter-spacing: -.015em;color: var(--ink);text-align: center;text-transform: unset;text-wrap: balance;margin: 0}/* 行长收到 62ch —— 原先满栅格 1325px 一行约 160 字符，远超可读区间 */
.storelocator_page .store_locator .i_brief{max-width: 62ch;margin: 22px auto 0;font-size: 16px;line-height: 1.7;color: var(--n-600);text-align: center}/* 邮箱：原先是 position:absolute + 两条 border 拼出来的折角箭头（实际只画出一条边），
   改成参照站的胶囊描边按钮，回到正常文档流 */
.storelocator_page .store_locator .i_email{display: inline-flex;align-items: center;gap: 10px;position: static;left: auto;transform: none;max-width: none;margin: 26px auto 0;padding: 13px 26px;border: 1px solid var(--ink);border-radius: 100px;font-family: var(--zt-sans, 'Inter Tight', Arial, sans-serif);font-size: 13px;font-weight: 400;/* 胶囊按钮里装的是邮箱地址，不做大写转换：邮箱大写会读成另一个字符串 */
	letter-spacing: .04em;text-transform: none;color: var(--ink);text-decoration: none;background: transparent;transition: background-color .25s var(--ease-std, cubic-bezier(.4, 0, .2, 1)),
	            color .25s var(--ease-std, cubic-bezier(.4, 0, .2, 1))}.storelocator_page .store_locator .i_email::before{content: none}.storelocator_page .store_locator .i_email::after{content: '';width: 7px;height: 7px;margin-left: 0;border-top: 1px solid currentColor;border-right: 1px solid currentColor;border-left: 0;border-bottom: 0;transform: rotate(45deg);background: none;position: static}.storelocator_page .store_locator .i_email:hover{background-color: var(--ink);color: var(--paper)}/* .wide_1440 是 div，行内块要居中得靠父级 text-align（上面已设） */
.storelocator_page .store_locator .wide_1440 > .i_email{display: inline-flex}/* ---------- 2. 国家选择：去掉方框，换成参照站的细线下划式 ---------- */

.storelocator_page .country{padding-bottom: clamp(64px, 7vw, 120px)}.storelocator_page .country .select_company{margin-top: 0;display: flex;align-items: center;justify-content: center;gap: 16px;text-transform: unset}.storelocator_page .country .select_company .select_name{font-family: var(--zt-sans, 'Inter Tight', Arial, sans-serif);font-size: 11px;letter-spacing: .22em;text-transform: uppercase;color: var(--n-600);margin-right: 0}.storelocator_page .country .select_company select[name="Country"]{-webkit-appearance: none;-moz-appearance: none;appearance: none;width: auto;min-width: 200px;padding: 8px 30px 9px 2px;border: 0;border-bottom: 1px solid var(--ink);border-radius: 0;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231c1a17' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 2px center;background-size: 10px 6px;font-family: var(--font-regular), 'Leaguespartan-Regular', Arial, sans-serif;font-size: 15px;color: var(--ink);text-transform: unset;cursor: pointer}.storelocator_page .country .select_company select[name="Country"]:focus-visible{outline: 2px solid var(--zt-ring, #6b4f2c);outline-offset: 3px}/* ---------- 3. 地图 + 门店列表：并入站点栅格，细线分隔取代色块边界 ---------- */

.storelocator_page .country .country_content{width: 1440px;max-width: 92%;margin: clamp(36px, 4vw, 60px) auto 0;height: clamp(420px, 40vw, 560px);display: flex;justify-content: flex-start;flex-wrap: wrap;border: 1px solid var(--line);box-sizing: border-box}.storelocator_page .country .country_content .side:first-child{width: 63%;box-sizing: border-box;background-color: var(--paper-3)}.storelocator_page .country .country_content .side:first-child .public_img{height: 100%}.storelocator_page .country .country_content .side:first-child .public_img img{width: 100%;height: 100%;object-fit: cover}.storelocator_page .country .country_content .side:last-child{width: 37%;box-sizing: border-box;height: inherit;padding: clamp(28px, 2.6vw, 44px);background-color: var(--paper-2);border-left: 1px solid var(--line);overflow: hidden;overflow-y: auto}/* zt-panel-center：右栏高度由地图决定（560px），而一个国家往往只有一两个地址，
   内容顶对齐时下方会空出两百多像素。用 margin-block:auto 在列内居中 ——
   条目多到撑满时 auto 外边距自动解析成 0，滚动不受影响（比 justify-content:center
   安全，后者在溢出时会把顶部裁掉）。 */
.storelocator_page .country .country_content .side:last-child{display: flex;flex-direction: column}.storelocator_page .country .country_content .headquarter{display: none;padding: 0}.storelocator_page .country .country_content .headquarter.on{display: block;margin-block: auto;width: 100%}.storelocator_page .country .side .headquarter .headquarter_title{font-family: var(--zt-serif, 'Cormorant Infant', Georgia, serif);font-size: clamp(22px, 1.9vw, 28px);font-weight: 400;line-height: 1.15;letter-spacing: -.01em;color: var(--ink);text-transform: unset;margin-top: 0}.storelocator_page .country .country_content .headquarter ul{margin-top: 32px;padding-bottom: 32px;border-bottom: 1px solid var(--line)}.storelocator_page .country .country_content .headquarter ul:first-child{margin-top: 0}.storelocator_page .country .country_content .headquarter ul:last-child{border-bottom: 0;padding-bottom: 0}.storelocator_page .country .side .headquarter ul li{display: flex;align-items: flex-start;margin-top: 16px}.storelocator_page .country .side .headquarter ul li a,
.storelocator_page .country .side .headquarter ul li div{min-height: 22px;line-height: 1.6}.storelocator_page .country .side .headquarter ul li a,
.storelocator_page .country .side .headquarter ul li .address{position: relative;padding-left: 30px;font-family: var(--font-regular), 'Leaguespartan-Regular', Arial, sans-serif;font-size: 15px;color: var(--n-650);text-decoration: none}.storelocator_page .country .side .headquarter ul li a:hover{color: var(--ink)}.storelocator_page .country .side .headquarter ul li .public_img{min-width: 17px}/* 三个图标的绿色渐变烤在 svg 素材里，background-image 改不了颜色。
   改用 ::before + mask：mask 只取 alpha 通道当形状，颜色由 background-color 决定，
   素材文件保持原样（别的页面若还引用原图，不受影响）。 */
.storelocator_page .country .side .headquarter ul li a::before,
.storelocator_page .country .side .headquarter ul li .address::before{content: '';position: absolute;left: 0;top: 2px;width: 18px;height: 18px;background-color: var(--n-500);-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-position: center;mask-position: center;-webkit-mask-size: contain;mask-size: contain}.storelocator_page .country .side .headquarter ul li a.tel{background: none}.storelocator_page .country .side .headquarter ul li a.email{background: none}.storelocator_page .country .side .headquarter ul li .address{background: none}.storelocator_page .country .side .headquarter ul li a.tel::before{-webkit-mask-image: url(/u_file/themes/svg/contact_tel_icon.svg);mask-image: url(/u_file/themes/svg/contact_tel_icon.svg)}.storelocator_page .country .side .headquarter ul li a.email::before{-webkit-mask-image: url(/u_file/themes/svg/contact_email_icon.svg);mask-image: url(/u_file/themes/svg/contact_email_icon.svg)}.storelocator_page .country .side .headquarter ul li .address::before{-webkit-mask-image: url(/u_file/themes/svg/contact_add_icon.svg);mask-image: url(/u_file/themes/svg/contact_add_icon.svg)}/* ---------- 4. 轮播箭头（仅 <=1040 出现） ---------- */

.storelocator_page .swiper-button-prev,
.storelocator_page .swiper-button-next{display: none}.storelocator_page .swiper-button-prev{width: 40px;height: 40px;left: -20px;border-radius: 40px;background: url(/u_file/2503/26/photo/leftbtnicon.png) no-repeat center center / 100%}.storelocator_page .swiper-button-prev:after{content: unset}.storelocator_page .swiper-button-next{width: 40px;height: 40px;right: -20px;border-radius: 40px;background: url(/u_file/2503/26/photo/rightbtnicon.png) no-repeat center center / 100%}.storelocator_page .swiper-button-next:after{content: unset}/* ---------- 5. 显示切换（功能性，原样保留） ---------- */

.storelocator_page .country .country_content .side .public_img{display: none;position: relative}.storelocator_page .country .country_content .side .public_img.on{display: block}.storelocator_page .country .country_content .swiper-wrapper.pc_swiper{display: block}.storelocator_page .country .country_content .side .public_img .list{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;display: none}.storelocator_page .country .country_content .side .public_img .list.on{display: block}.storelocator_page .country .country_content .side .public_img.on .list{display: block}.storelocator_page .country .country_content .side .public_img .list iframe{width: 100%;height: 100%}.storelocator_page .country .country_content .headquarter ul{cursor: pointer}/* ---------- 6. 平板 / 手机 ---------- */

@media (max-width: 1040px){.storelocator_page .country .country_content{height: auto;border: 0}.storelocator_page .country .country_content .side:first-child{width: 100%;min-height: 440px;border: 1px solid var(--line)}.storelocator_page .country .country_content .side,
	.storelocator_page .country .country_content .side:last-child{width: 100%;padding: 0;background: transparent;border-left: 0}.storelocator_page .country .country_content .headquarter{display: none;position: relative;margin: 20px 0 0;padding: clamp(24px, 4vw, 36px);background: var(--paper-2);border: 1px solid var(--line)}.storelocator_page .country .country_content .headquarter ul:first-child{margin-top: 0}.storelocator_page .country .country_content .headquarter ul{border-bottom: none;padding-bottom: 0}.storelocator_page .swiper-button-prev,
	.storelocator_page .swiper-button-next{display: block}}

@media (max-width: 780px){.storelocator_page .store_locator{padding: clamp(48px, 12vw, 64px) 0 24px}.storelocator_page .country{padding-bottom: clamp(48px, 12vw, 64px)}.storelocator_page .country .country_content{margin-top: 28px;padding: 0}.storelocator_page .country .country_content .side:first-child{width: 100%;min-height: 340px}.storelocator_page .country .country_content .side:last-child{width: 100%;padding: 0}/* 标签与下拉在窄屏叠成两行，下拉占满栅格 */
	.storelocator_page .country .select_company{flex-direction: column;/* 不用 stretch：768 下栅格有 699px，整条下划线横贯一页会读成一条分隔线
		   而不是一个输入控件。居中并给下拉限宽，让它保持「字段」的体量。 */
		align-items: center;gap: 10px;width: 1440px;max-width: 92%;margin: 0 auto}.storelocator_page .country .select_company .select_name{text-align: center}.storelocator_page .country .select_company select[name="Country"]{width: 100%;max-width: 320px;min-width: 0;/* iOS 上 <16px 的输入控件会触发整页放大 */
		font-size: 16px;text-align: center;text-align-last: center;background-position: right 2px center}}