/**
 * VAPE SHAHAB· 日本における電子タバコの卸売り · 前台首页高端主题
 * 墨色 / 和纸 / 金アクセント + 青海波纹理
 */
@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;
    min-height: min(62vh, 520px);
    background:
        linear-gradient(135deg, rgba(20, 20, 20, 0.88) 0%, rgba(47, 74, 99, 0.72) 55%, rgba(168, 135, 90, 0.45) 100%),
        var(--jp-ink);
    color: #f4efe6;
    display: flex;
    align-items: flex-end;
}

.jp-home-hero.has-banner {
    min-height: 0;
    background: #141414;
    display: block;
    /* 高度由海报比例撑开；文案绝对叠在图上 */
}

.jp-home-hero.has-banner .jp-home-hero-media {
    position: relative;
    z-index: 0;
    width: 100%;
}

.jp-home-hero.has-banner .jp-home-hero-media .banner-carousel {
    height: auto;
    margin: 0 !important;
    background: transparent !important;
}

.jp-home-hero.has-banner #bannerContainer {
    position: relative;
    width: 100%;
    /* 默认匹配常见横幅 19:6；有实测比例时由内联 style 覆盖 */
    aspect-ratio: 19 / 6;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background: #141414 !important;
}

.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%;
    transform: none;
    animation: none;
}

.jp-home-hero.has-banner .jp-home-hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(20, 20, 20, 0.55) 0%, rgba(20, 20, 20, 0.22) 42%, rgba(20, 20, 20, 0.08) 70%),
        linear-gradient(180deg, rgba(20, 20, 20, 0.12) 0%, rgba(20, 20, 20, 0.08) 45%, rgba(20, 20, 20, 0.55) 100%);
}

.jp-home-hero.has-banner .jp-home-hero-copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 100%;
    box-sizing: border-box;
}

/* 已取消装饰线框：全幅海报，无内框 */
.jp-home-hero-frame {
    display: none !important;
}

.jp-home-hero-copy {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 36px 22px 34px;
    animation: jpHeroReveal 0.9s ease both;
}

@keyframes jpHeroReveal {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

.jp-home-kicker {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 11px;
    border: 1px solid rgba(168, 135, 90, 0.55);
    color: #d8c4a0;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.jp-home-brand {
    margin: 0;
    font-family: var(--jp-serif);
    font-size: clamp(32px, 8vw, 52px);
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.15;
    color: #f4efe6;
}

.jp-home-tagline {
    margin: 12px 0 0;
    font-size: 14px;
    letter-spacing: 0.06em;
    line-height: 1.55;
    color: rgba(244, 239, 230, 0.82);
    max-width: 22em;
}

.jp-home-lead {
    margin: 14px 0 0;
    max-width: 34em;
    font-size: 13px;
    line-height: 1.75;
    color: rgba(244, 239, 230, 0.72);
    letter-spacing: 0.04em;
}

.jp-home-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 12px 22px;
    border: 1px solid rgba(244, 239, 230, 0.55);
    color: #f4efe6 !important;
    text-decoration: none !important;
    font-size: 12px;
    letter-spacing: 0.2em;
    background: rgba(20, 20, 20, 0.28);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.jp-home-cta:hover {
    background: rgba(168, 135, 90, 0.28);
    border-color: var(--jp-gold-soft);
    transform: translateY(-1px);
}

.jp-home-cta::after {
    content: "→";
    font-size: 14px;
    opacity: 0.85;
}

/* —— 区块标题 —— */
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: var(--jp-card) !important;
    border: 1px solid var(--jp-line) !important;
    border-radius: 6px !important;
    box-shadow: none !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-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 (min-width: 1024px) {
    .jp-home-hero-copy {
        max-width: 720px;
        padding: 56px 48px 48px;
    }

    .jp-home-brand {
        letter-spacing: 0.18em;
    }
}

@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 35%;
    }

    .jp-home-hero-copy {
        padding: 28px 18px 26px;
    }
}

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