/**
 * VAPES JAPAN · 日本における電子タバコの卸売り · 前台首页高端主题
 * 墨色 / 和纸 / 金アクセント + 青海波纹理
 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@500;600;700&display=swap');

:root {
    --jp-ink: #141414;
    --jp-sumi: #1c1c1c;
    --jp-paper: #f7f4ef;
    --jp-paper-deep: #efeae2;
    --jp-card: #fffcf8;
    --jp-line: #e4ddd2;
    --jp-muted: #6b6560;
    --jp-gold: #a8875a;
    --jp-gold-soft: #c4a574;
    --jp-accent: #2f4a63;
    --jp-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    --jp-sans: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
}

html.jp-home,
html.jp-home body,
html.mao-pc-home.jp-home body {
    font-family: var(--jp-sans) !important;
    color: var(--jp-ink);
    background-color: var(--jp-paper) !important;
}

/* 青海波（seigaiha）淡纹底 */
html.jp-home .fui-page.page-content,
html.jp-home .fui-page-group {
    background-color: var(--jp-paper) !important;
    background-image:
        radial-gradient(ellipse at 10% 0%, rgba(168, 135, 90, 0.07), transparent 42%),
        radial-gradient(ellipse at 90% 20%, rgba(47, 74, 99, 0.05), transparent 40%),
        url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23a8875a' stroke-opacity='0.07' stroke-width='1'%3E%3Cpath d='M0 24c7 0 10.5-8 21-8s14 8 21 8 10.5-8 21-8 14 8 21 8'/%3E%3Cpath d='M0 40c7 0 10.5-8 21-8s14 8 21 8 10.5-8 21-8 14 8 21 8'/%3E%3Cpath d='M0 8c7 0 10.5-8 21-8s14 8 21 8 10.5-8 21-8 14 8 21 8'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-attachment: fixed;
}

html.jp-home .fui-page.page-content[style] {
    background: transparent !important;
}

/* —— 顶栏 —— */
html.jp-home .fui-notice {
    background: rgba(255, 252, 248, 0.92) !important;
    border-bottom: 1px solid var(--jp-line) !important;
    backdrop-filter: blur(10px);
}

html.jp-home .apple-menu-toggle,
html.jp-home .cart-entry,
html.jp-home .cart-entry svg {
    color: var(--jp-ink) !important;
    fill: var(--jp-ink) !important;
    stroke: var(--jp-ink) !important;
}

html.jp-home .cart-count-badge {
    background: var(--jp-ink) !important;
    border-radius: 3px !important;
}

/* —— 品牌主视觉 —— */
/* —— 首页海报：仅展示图片，无叠加文案 —— */
.jp-home-hero {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #141414;
    display: block;
    min-height: 0;
}

.jp-home-hero.has-banner .banner-carousel {
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.jp-home-hero.has-banner #bannerContainer {
    position: relative;
    width: 100%;
    aspect-ratio: 19 / 6;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background: #141414 !important;
    line-height: 0;
}

.jp-home-hero.has-banner .banner-item {
    position: absolute;
    inset: 0;
}

.jp-home-hero.has-banner .banner-item img {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
    display: block;
    transform: none;
    animation: none;
}

.jp-home-hero-frame,
.jp-home-hero-veil,
.jp-home-hero-copy,
.jp-home-kicker,
.jp-home-brand,
.jp-home-tagline,
.jp-home-lead,
.jp-home-cta {
    display: none !important;
}

/* —— 区块标题 —— */
html.jp-home .home-section-title,
html.jp-home .category-filter-title,
html.jp-home .service-area-title {
    font-family: var(--jp-serif) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    color: var(--jp-ink) !important;
    position: relative;
    padding-bottom: 14px;
}

html.jp-home .home-section-title::after,
html.jp-home .category-filter-title::after,
html.jp-home .service-area-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 42px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--jp-gold), transparent);
    transform: translateX(-50%);
}

html.jp-home .home-section-subtitle,
html.jp-home .service-area-subtitle {
    font-family: var(--jp-sans) !important;
    color: var(--jp-muted) !important;
    letter-spacing: 0.04em;
}

/* —— 跑马灯 / 公告 —— */
html.jp-home .home-promo-bar {
    background: var(--jp-ink) !important;
    border-top: 1px solid rgba(168, 135, 90, 0.35);
    border-bottom: 1px solid rgba(168, 135, 90, 0.35);
}

html.jp-home .home-promo-item {
    font-family: var(--jp-sans) !important;
    letter-spacing: 0.14em !important;
    font-weight: 500 !important;
    color: #f4efe6 !important;
}

html.jp-home .home-notice-bar {
    margin: 14px 12px 0 !important;
    padding: 14px 16px !important;
    background: var(--jp-card);
    border: 1px solid var(--jp-line);
}

html.jp-home .home-notice-content {
    font-family: var(--jp-sans) !important;
    color: var(--jp-ink) !important;
}

/* —— 商品卡 —— */
html.jp-home .fui-goods-item.apple-style-card {
    background: var(--jp-card) !important;
    border: 1px solid var(--jp-line) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    overflow: hidden;
    transition: border-color 0.25s ease, transform 0.25s ease !important;
}

html.jp-home .fui-goods-item.apple-style-card:hover {
    border-color: var(--jp-gold) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 28px rgba(20, 20, 20, 0.06) !important;
}

html.jp-home .fui-goods-item.apple-style-card .detail .name {
    font-family: var(--jp-sans) !important;
    color: var(--jp-ink) !important;
    letter-spacing: 0.02em;
}

html.jp-home .fui-goods-item.apple-style-card .detail .price .minprice {
    color: var(--jp-ink) !important;
    font-weight: 600;
}

/* —— Finder chips —— */
html.jp-home .category-filter-section,
html.jp-home .category-products-section {
    background: transparent !important;
}

html.jp-home .category-chip {
    border-radius: 3px !important;
    border-color: var(--jp-line) !important;
    background: var(--jp-card) !important;
    color: var(--jp-ink) !important;
    font-family: var(--jp-sans) !important;
}

html.jp-home .category-chip.active {
    background: var(--jp-ink) !important;
    border-color: var(--jp-ink) !important;
    color: #f4efe6 !important;
}

html.jp-home .category-finder-view-all {
    border-radius: 3px !important;
    border: 1px solid var(--jp-ink) !important;
    color: var(--jp-ink) !important;
    background: transparent !important;
    letter-spacing: 0.12em;
}

html.jp-home .category-finder-view-all:hover {
    background: var(--jp-ink) !important;
    color: #f4efe6 !important;
}

/* —— 服务地区 / 服务模块 —— */
html.jp-home .service-area-section {
    background: var(--jp-card) !important;
    border: 1px solid var(--jp-line) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

html.jp-home .service-area-marquee {
    background: var(--jp-paper-deep) !important;
    border-color: var(--jp-line) !important;
    border-radius: 4px !important;
}

html.jp-home .service-area-tag {
    border-radius: 3px !important;
    background: var(--jp-ink) !important;
    border-color: var(--jp-ink) !important;
    font-family: var(--jp-sans) !important;
    letter-spacing: 0.06em;
}

html.jp-home .service-feature-section {
    background: transparent !important;
}

html.jp-home .service-feature-block {
    background: linear-gradient(180deg, #fff6f8 0%, #fde9ef 100%) !important;
    border: 1px solid #f6cfd9 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 10px rgba(232, 150, 172, 0.12) !important;
}

html.jp-home .service-feature-title {
    font-family: var(--jp-serif) !important;
    letter-spacing: 0.06em;
}

/* —— 页脚 —— */
html.jp-home .jp-home-footer,
html.jp-home .fui-content > div[style*="background: #000000"] {
    background:
        linear-gradient(180deg, #141414 0%, #1a1c20 100%) !important;
    border-top: 1px solid rgba(168, 135, 90, 0.28) !important;
    font-family: var(--jp-sans) !important;
}

/* 去掉版权区下方白缝 */
html.jp-home .jp-home-footer {
    margin: 0 !important;
    border-bottom: 0 !important;
}

html.jp-home .fui-content.navbar,
html.jp-home .fui-content {
    bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

html.jp-home .fui-content.navbar > .fui-cell-group,
html.jp-home .fui-page.page-content,
html.jp-home .fui-page-group {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

html.jp-home .fui-content.navbar > .fui-cell-group:first-child {
    margin-top: 0 !important;
}

html.jp-home .fui-content,
html.jp-home .fui-content.navbar {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

html.jp-home .fui-content .fui-cell-group {
    overflow: visible !important;
}

html.jp-home .service-feature-section {
    margin-bottom: 0 !important;
}

html.jp-home .jp-home-footer-mark {
    display: inline-block;
    margin-bottom: 14px;
    font-family: var(--jp-serif);
    letter-spacing: 0.04em;
    font-size: 13px;
    line-height: 1.5;
    color: #d8c4a0;
}

/* —— 侧栏菜单 —— */
html.jp-home .apple-menu-panel {
    background: #fffcf8 !important;
    border-right: 1px solid var(--jp-line);
}

html.jp-home .apple-menu-item-text {
    font-family: var(--jp-sans) !important;
    letter-spacing: 0.04em;
}

html.jp-home .banner-indicator-dot {
    background: rgba(244, 239, 230, 0.35) !important;
    border-radius: 2px !important;
}

html.jp-home .banner-indicator-dot.active {
    background: var(--jp-gold) !important;
}

html.jp-home .banner-indicators {
    z-index: 4;
}

@media (max-width: 767px) {
    .jp-home-hero.has-banner #bannerContainer {
        aspect-ratio: 16 / 7;
    }

    .jp-home-hero.has-banner .banner-item img {
        object-position: center center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jp-home-hero.has-banner .banner-item img {
        animation: none !important;
    }
}