/* ========================================
   手机端专用样式（max-width: 767px）
   注意：此文件中的嵌套在普通 CSS 中有效，
   因为所有样式都包裹在 @media 内
   ======================================== */

@media (max-width: 767px) {
  /* ---- 禁止双击自动放大 ---- */
  html { touch-action: manipulation; }

  /* ---- Hero Slider ---- */
  [data-js="home-slider"] .splide__slide picture::before {
    filter: blur(4px);
    transform: scale(1.05) translateZ(0);
  }
  [data-js="home-slider"] .splide__pagination__page {
    width: 8px;
    height: 8px;
    margin-inline: 6px;
  }
  [data-js="home-slider"] .splide__pagination {
    margin-top: 12px;
  }

  /* ---- OnlyShop / Gratte 背景 ---- */
  .homeOnlyshopBackground {
    left: 16px;
    width: calc(100% - 16px);
  }
  .homeGratteBackground {
    left: 0;
  }
  .homeOnlyshopImage picture::before,
  .homeGratteImage picture::before {
    filter: blur(4px);
    transform: scale(1.05) translateZ(0);
  }

  /* ---- OnlyShop / Gratte 标题行 ---- */
  .homeOnlyshopUpper,
  .homeGratteUpper {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .homeOnlyshop .buttonArrow.block_sp,
  .homeGratte .buttonArrow.block_sp {
    margin: 0 0 0 auto;
    margin-top: clamp(5px, 2vw, 21px);
  }

  /* OnlyShop / Gratte 滑块底部（隐藏） */
  .splide[data-js="home-gr-os-slider"] .splide__bottom {
    display: none;
  }

  /* ---- Fair / Event ---- */
  .homeFairButtons {
    flex-direction: column;
    gap: 16px;
  }
  .homeFairButton {
    height: 80px;
  }

  /* ---- 新闻 ---- */
  .newsSummaryListTitle {
    width: 100%;
    margin-top: clamp(8.5333333333px, 2.6666666667vw, 20.48px);
  }
  .newsSummaryList {
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .newsSummaryListDate {
    white-space: nowrap;
  }
  .newsArchiveHero {
    padding: clamp(100px, 16vw, 120px) 0 clamp(16px, 3vw, 24px);
  }
  .newsListImage {
    width: 100%;
  }
  .newsListInfoText {
    display: none;
  }

  /* ---- Banner ---- */
  .bannerMixLists {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .bannerMixLists li:nth-child(1) {
    grid-row: auto;
    grid-column: 1 / span 2;
  }
  .bannerMixLists li:nth-child(2) {
    grid-row: auto;
    grid-column: auto;
  }
  .bannerMixLists li:nth-child(3) {
    grid-row: auto;
    grid-column: auto;
  }
  .bannerMixLists li:nth-child(4) {
    grid-row: auto;
    grid-column: 1 / span 2;
  }
  .bannerMixLists li:nth-child(5) {
    grid-row: auto;
    grid-column: auto;
  }
  .bannerMixLists li:nth-child(6) {
    grid-row: auto;
    grid-column: auto;
  }
  .bannerMixLists li picture::before {
    filter: blur(4px);
    transform: scale(1.05) translateZ(0);
  }
  .homeBannerBackground {
    border-top-left-radius: 30px !important;
    border-top-right-radius: 30px !important;
  }
  .footerBannerInner {
    border-top-left-radius: clamp(50px, 6.25vw, 100px) !important;
    border-top-right-radius: clamp(50px, 6.25vw, 100px) !important;
  }
  .footerBanner {
    padding-top: 0 !important;
  }

  /* ---- 区域搜索 ---- */
  .areaSearchChina_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;
  }
  .areaSearchChina--pc {
    display: none !important;
  }
  .areaSearchWorld--pc {
    display: none !important;
  }
  .areaSearchInner--sp {
    display: block;
  }
  .areaSearchChina_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    font-size: 14px;
    font-weight: 700;
    color: #232729;
    border-bottom: 1px solid #e4e8eb;
    cursor: pointer;
  }
  .areaSearchChina_title i::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid #888;
    border-bottom: 2px solid #888;
    transform: rotate(45deg);
  }
  .areaSearchChina_lists {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .areaSearchChina_lists.open {
    display: block;
  }
  .areaSearchChina_lists li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 13px;
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid #f0f2f5;
  }
  .areaSearchWorld_title a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    font-size: 14px;
    font-weight: 700;
    color: #232729;
    text-decoration: none;
    border-bottom: 1px solid #e4e8eb;
  }
  .areaSearchChina_list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* ---- 页脚 ---- */
  .footerMenu {
    flex-direction: column;
    gap: clamp(20px, 4vw, 30px);
  }
  .footerMenuLinks ul {
    justify-content: center;
  }
  .footerMenuLogo {
    margin-inline: auto;
  }
  .footerLowerLists li {
    width: 50%;
  }
  .footerLowerRight {
    margin-top: clamp(5px, 2vw, 21px);
    text-align: left;
  }
  .footerLanguage {
    display: flex;
    justify-content: center;
    border-top: 1px solid #eff2f5;
    border-bottom: 1px solid #eff2f5;
  }
  .footerLowerCopyright {
    margin-top: 24px;
    text-align: center;
    letter-spacing: 0.01em;
  }
  .footerUpper {
    flex-direction: column;
    gap: 32px;
  }
  .footerUpperBox {
    flex-direction: column;
  }
  .footerUpperLists {
    gap: 14px;
  }
  .footerLogo {
    width: 160px;
  }
  .footerLower {
    flex-direction: column;
    align-items: flex-start;
  }
  .footerLowerLists {
    gap: 8px;
  }
  .footer {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .footerInner {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ---- 头部 ---- */
  .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1000 !important;
	    height: clamp(60px, 10vw, 80px) !important;
  }
  .trigger {
    z-index: 1100 !important;
  }
  .headerLangMobile {
    position: fixed;
    top: clamp(14px, 1.875vw, 30px);
    right: clamp(52px, 5.5vw, 64px);
    z-index: 1101;
  }
  .headerLangMobile .headerLanguageMenu {
    top: 48px;
    left: auto;
    right: 0;
    transform: none;
  }
  .headerLangMobile .headerLanguageMenu.is-active {
    transform: none;
  }
  body {
    padding-top: clamp(60px, 10vw, 80px) !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .headerLogo {
    max-width: 140px;
    margin-left: 0;
  }
  .headerInner {
    position: relative;
  }

  /* ---- 通用 ---- */
  a:active,
  button:active,
  .btn:active,
  [class*="btn"]:active,
  .pd-sku-btn:active {
    opacity: 0.7 !important;
    transform: scale(0.97) !important;
    transition: all 0.1s !important;
  }

  /* ---- 首页搜索 ---- */
  .homeHero .splide__slide {
    margin-right: 0 !important;
  }
  .homeSearchContent {
    padding: 16px;
    border-radius: 0;
    width: 100vw;
    margin-inline: calc(-50vw + 50%);
  }
  .homeSearchUpper {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .homeSearchTitle {
    font-size: 18px;
  }
  .homeSearchLower {
    flex-direction: column;
  }
  .homeSearchLowerInner {
    width: 100%;
    margin-top: 16px;
    gap: 6px;
    justify-content: center;
  }
  .homeSearchLowerInner a {
    font-size: 12px;
    padding: 6px 12px;
  }
  .homeSearchLowerInner .buttonIconBefore {
    height: 32px;
    width: auto;
    flex: none;
    display: inline-flex;
    border-radius: 60px;
    margin-top: 0;
  }
  .homeSearchLowerInner .buttonIconBefore a {
    padding: 0 12px;
    font-size: 11px;
    height: 32px;
    line-height: 32px;
    width: auto;
    white-space: nowrap;
    border-radius: 60px;
  }
  .homeSearchLowerInner .buttonIconBefore a i {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }
  .homeSearchLowerInner .buttonIconBefore a i svg {
    fill: #fff;
  }
  .homeSearchLowerInner .buttonIconBefore a span {
    font-size: 11px;
  }
  .homeSearchLowerInner .areaModal__openButton span {
    font-size: 11px;
  }
  .homeSearchSubmit {
    font-size: 11px;
  }
  .homeSearch .contentInner > p {
    font-size: 13px;
    line-height: 1.6;
  }

  /* ---- Service 模块 ---- */
  .homeService {
    background: #eff2f5;
    padding: 60px 0;
  }
  .homeServiceBackground {
    display: block;
    height: max(300vw, 200px) !important;
  }
  .homeServiceScroller {
    margin-top: 20px;
    padding-left: 20px;
  }
  .homeServiceCard {
    flex: 0 0 200px;
    width: 200px;
  }
  .homeServiceCardLink {
    padding-inline: 20px;
  }
  .homeServiceCardImage {
    width: 100px;
    height: 75px;
  }
  .homeServiceScrollerInner {
    gap: 12px;
  }
  .homeService .headlineLv1 .is-en {
    color: #fff;
  }
  .homeService .headlineLv1 .is-ja {
    color: #fff;
  }

  /* ---- 内页通用 ---- */
  .pageBreadcrumb {
    padding-top: 80px;
  }
  .pageHeader {
    padding: 20px 0 30px;
  }
  .pageCardGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 10px;
  }
  .pageCardGrid--special {
    grid-template-columns: repeat(2, 1fr);
  }
  .pageCompanyGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pageCompanyLabel {
    width: 100px;
    font-size: 12px;
    padding: 12px;
  }
  .pageCompanyValue {
    font-size: 13px;
    padding: 12px;
  }
  .pageCompanyButtons {
    flex-direction: column;
  }
  .pageIntroContent {
    padding: 30px 20px;
    gap: 20px;
  }
  .pageIntroTitle {
    font-size: 24px;
  }
  .pageIntroImage {
    width: 140px;
  }
  .pageFilterBar {
    gap: 16px;
  }
  .pageFilterGroup {
    flex-direction: column;
    gap: 8px;
  }
  .pageFilterLabel {
    padding-top: 0;
  }
  .pageFilterSearch {
    max-width: none;
  }
  .pageFilterDate {
    flex-wrap: wrap;
  }
  .pagination a {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
  .pageSingleInfoRow {
    flex-direction: column;
    gap: 4px;
  }

  /* ---- 店铺 ---- */
  .shopTopHero {
    padding-top: 80px;
  }
  .shopTopSearchInner {
    padding: 24px 16px;
  }
  .shopTopSearchUpper {
    flex-direction: column;
    gap: 20px;
  }
  .shopCard {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }
  .shopCardButtons {
    width: 100%;
    margin-top: 12px;
  }
  .shopCardButton a {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .shopCards {
    gap: 12px;
  }

  /* ---- Gratte / OnlyShop ---- */
  .splide[data-js="gr-os-slider"] .splide__slide picture::before {
    filter: blur(4px);
    transform: scale(1.05) translateZ(0);
  }
  .gr-osCardImage picture::before {
    filter: blur(4px);
    transform: scale(1.05) translateZ(0);
  }
  [data-status="ongoing"]::after {
    font-size: 12px;
  }
  [data-status="upcoming"]::after {
    top: 15.44vw;
  }
  [data-status="completed"]::after {
    top: 15.44vw;
  }
  .gr-osCards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 10px;
  }
  .onlyshopTopIntro {
    padding-top: calc(32vw + 105px);
  }
  .onlyshopTopIntroInner {
    flex-direction: column;
    text-align: center;
  }
  .onlyshopTopIntroBgtext {
    top: -85px;
    left: -10px;
    font-size: clamp(41px, 12.8vw, 55px);
  }
  .onlyshopTopIntroImage {
    width: clamp(239px, 74.67vw, 573px);
    margin-top: clamp(5px, 2vw, 21px);
  }
  .gr-osSearchUpper {
    flex-direction: column;
  }
  .gr-osSearchUpperInner {
    width: 100%;
    padding: 4px 4px 4px 16px;
  }
  .gr-osSearchTrigger > div {
    width: 100%;
    justify-content: center;
  }
  .gr-osSearchLower {
    padding: 20px 16px;
  }
  .gr-osSearchPeriodInput {
    width: 120px;
  }
  .gr-osSearchPulldown_select {
    min-width: 130px;
  }
  .gratteTopIntroImage {
    margin-inline: auto;
  }
  .gratteTopNewsContent > .buttonArrow {
    margin: 30px 0 0 auto;
  }
  .onlyshopDetailHeroImage picture::before {
    filter: blur(4px);
    transform: scale(1.05) translateZ(0);
  }
  .gratteDetailHeroImage picture::before {
    filter: blur(4px);
    transform: scale(1.05) translateZ(0);
  }
  .modules > .gr-osModuleBody[data-name="images"] a:nth-of-type(even) {
    margin-right: 0;
  }
  .modules > .gr-osModuleBody[data-name="images"] a:nth-of-type(n + 3) {
    max-width: 47.761%;
  }
  .modules > .module[data-name="product"] {
    width: 100%;
  }
  .paging_arrow a {
    width: 34px;
    height: 34px;
  }
  .paging_num {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  /* ---- Modal ---- */
  .areaModal__content--wrapper {
    width: 100vw;
  }
  .areaModal__content {
    padding: 50px 20px 30px;
  }
  .areaSearchUpper {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* ---- SNS ---- */
  .homeSnsText {
    text-align: left;
  }

  /* ---- 底部导航 ---- */
  .mob-nav {
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .mob-nav-item {
    min-width: 64px;
    padding: 6px 16px;
  }
  .mob-nav-item svg {
    width: 22px;
    height: 22px;
  }
  .mob-nav-item span {
    font-size: 14px;
    font-weight: 600;
  }

  /* ---- Toast 弹窗 ---- */
  [style*="position:fixed"][style*="z-index:10001"] > div:first-child {
    width: 92% !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
  }

  /* ---- 首页移动端优化 ---- */
  .homeSearchTitle {
    font-size: 20px;
  }
  .homeSearchContent {
    border-radius: 12px;
    padding: 20px 16px 30px;
  }
  .homeOnlyshopCard,
  .homeGratteCard,
  .homeNewsCard,
  .homeFairCard {
    border-radius: 8px;
    overflow: hidden;
  }
  .homeOnlyshopCard img,
  .homeGratteCard img,
  .homeNewsCard img,
  .homeFairCard img {
    width: 100%;
    height: 180px;
    object-fit: cover;
  }
  .headlineLv2 {
    margin-bottom: 16px;
  }
  .headlineLv2 span {
    font-size: clamp(16px, 4.27vw, 22px);
  }
  .homeBanner .bannerSmallLists {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .homeHeroSlider .splide__slide img,
  .homeHeroSlider picture img {
    width: 100%;
    height: auto;
    min-height: 180px;
    object-fit: cover;
  }
}