/**
 * ETheme DP — site-wide visual refinement layer.
 * Clean international B2B/editorial styling with restrained motion.
 */

:root {
    --eth-premium-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --eth-premium-shadow-sm: var(--eth-shadow-tinted-sm);
    --eth-premium-shadow-md: var(--eth-shadow-tinted-md);
    --eth-premium-border: color-mix(in srgb, var(--eth-border) 82%, transparent);
}

/* Foundations ------------------------------------------------------------- */
.eth-category-main,
.eth-product-main,
.eth-article-main {
    overflow: clip;
}

.eth-section__title,
.eth-product-section__title {
    margin-top: 0;
    margin-bottom: var(--eth-space-m);
    color: var(--eth-text-title);
    font-family: var(--eth-font-heading);
    font-weight: var(--eth-fw-heading);
    line-height: var(--eth-lh-heading);
}

.eth-breadcrumb,
.eth-product-breadcrumb,
.eth-article-breadcrumb {
    gap: var(--eth-space-3xs);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--eth-text-muted);
    font-size: var(--eth-fs-xs);
    font-weight: var(--eth-fw-medium);
    letter-spacing: 0.03em;
}

.eth-breadcrumb__sep,
.eth-product-breadcrumb__sep,
.eth-article-breadcrumb__sep {
    opacity: 0.35;
}

:where(.eth-section, .eth-header, .eth-footer) a,
:where(.eth-section, .eth-header, .eth-footer) button {
    -webkit-tap-highlight-color: transparent;
}

:where(.eth-section, .eth-header, .eth-footer) a:focus-visible,
:where(.eth-section, .eth-header, .eth-footer) button:focus-visible,
:where(.eth-section, .eth-header, .eth-footer) input:focus-visible,
:where(.eth-section, .eth-header, .eth-footer) select:focus-visible,
:where(.eth-section, .eth-header, .eth-footer) textarea:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--eth-primary) 30%, transparent);
    outline-offset: 3px;
}

/* Buttons ----------------------------------------------------------------- */
:is(
    .eth-btn:not(:where(.eth-search-form__submit)),
    .eth-header__cta,
    .wp-block-button__link,
    .frm-fluent-form .ff-btn-submit,
    .frm-fluent-form button[type="submit"]
) {
    min-height: 46px;
    padding: var(--eth-space-2xs) var(--eth-space-xs);
    border-radius: var(--eth-radius-m);
    font-size: var(--eth-fs-small);
    font-weight: 650;
    letter-spacing: -0.005em;
    line-height: 1;
    transition:
        color 220ms ease,
        background-color 220ms ease,
        border-color 220ms ease,
        box-shadow 340ms var(--eth-premium-ease),
        transform 340ms var(--eth-premium-ease);
}

:is(
    .eth-btn:not(:where(.eth-search-form__submit)),
    .eth-header__cta,
    .wp-block-button__link,
    .frm-fluent-form .ff-btn-submit,
    .frm-fluent-form button[type="submit"]
):hover {
    transform: translateY(-2px);
}

.eth-btn--primary,
.wp-block-button.is-style-eth-primary .wp-block-button__link,
.frm-fluent-form .ff-btn-submit,
.frm-fluent-form button[type="submit"] {
    border-color: color-mix(in srgb, var(--eth-primary) 88%, #000);
    background: var(--eth-primary);
    box-shadow: var(--eth-shadow-primary-md);
}

.eth-btn--primary:hover,
.wp-block-button.is-style-eth-primary .wp-block-button__link:hover,
.frm-fluent-form .ff-btn-submit:hover,
.frm-fluent-form button[type="submit"]:hover {
    box-shadow: var(--eth-shadow-primary-lg);
}

.eth-btn--outline,
.wp-block-button.is-style-eth-outline .wp-block-button__link {
    border-color: var(--eth-premium-border);
    background: var(--eth-bg-surface);
    color: var(--eth-text-title);
    box-shadow: var(--eth-premium-shadow-sm);
}

.eth-btn--outline:hover,
.wp-block-button.is-style-eth-outline .wp-block-button__link:hover {
    border-color: var(--eth-primary);
    background: var(--eth-primary-5);
    color: var(--eth-primary);
}

.eth-btn-group {
    gap: var(--eth-space-2xs);
}

/* Header and navigation --------------------------------------------------- */
.eth-header {
    border-bottom-color: var(--eth-premium-border);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.015);
}

/* 0.8.2：Header 底部品牌渐变细线，与 Footer 顶部细线呼应 */
.eth-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: linear-gradient(90deg, var(--eth-primary), var(--eth-tertiary));
    opacity: 0.55;
    pointer-events: none;
}

/* 透明首页 Header（未滚动）叠在 Hero 上时不显示细线 */
.eth-header--transparent:not(.eth-header--scrolled)::after {
    display: none;
}

.eth-header--sticky.eth-header--scrolled {
    background: color-mix(in srgb, var(--eth-bg-surface) 88%, transparent);
    box-shadow: var(--eth-shadow-tinted-md);
    backdrop-filter: saturate(150%) blur(18px);
}

.eth-header__inner {
    min-height: 5.35rem;
    padding-block: var(--eth-space-2xs);
}

.eth-header__logo img {
    transition: transform 400ms var(--eth-premium-ease), opacity 220ms ease;
}

.eth-header__logo:hover img {
    opacity: 0.92;
    transform: scale(1.015);
}

.eth-menu {
    gap: 0.2rem;
}

.eth-menu-link {
    padding: var(--eth-space-2xs);
    border-radius: var(--eth-radius-s);
    font-size: var(--eth-fs-small);
    font-weight: 550;
    transition: color 220ms ease, background-color 220ms ease;
}

.eth-menu-link:hover,
.eth-menu-link[aria-current="page"] {
    background: color-mix(in srgb, var(--eth-primary) 7%, transparent);
}

.eth-header__toggle {
    width: 44px;
    height: 44px;
    border: 1px solid var(--eth-premium-border);
    border-radius: var(--eth-radius-m);
    background: var(--eth-bg-surface);
}

/* Category modules -------------------------------------------------------- */
.eth-hero:not(.eth-product-hero) {
    position: relative;
    background:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--eth-primary) 9%, transparent), transparent 30rem),
        linear-gradient(180deg, var(--eth-bg-surface), color-mix(in srgb, var(--eth-bg-muted) 55%, var(--eth-bg-surface)));
}

/* 背景变体由最后加载的 section-backgrounds.css 统一拥有。 */

.eth-hero:not(.eth-product-hero) .eth-hero__grid {
    gap: clamp(2.25rem, 5vw, 5.5rem);
}

.eth-hero__subtitle {
    margin-top: var(--eth-space-xs);
    font-size: var(--eth-fs-h4);
    line-height: var(--eth-lh-heading);
}

.eth-hero__content > p {
    max-width: 60ch;
    color: var(--eth-text-muted);
    line-height: var(--eth-lh-body);
}

.eth-hero__media::after,
.eth-image-text__media::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: inherit;
    pointer-events: none;
}

.eth-hero__media img,
.eth-image-text__media img {
    transition: transform 850ms var(--eth-premium-ease), filter 450ms ease;
}

.eth-hero__media:hover img,
.eth-image-text__media:hover img {
    filter: saturate(1.025);
    transform: scale(1.025);
}

.eth-image-text:nth-of-type(even) {
    background: color-mix(in srgb, var(--eth-bg-muted) 42%, var(--eth-bg-surface));
}

.eth-image-text .eth-grid--2 {
    gap: clamp(2.5rem, 6vw, 6.5rem);
    align-items: center;
}

.eth-image-text__content {
    max-width: 620px;
}

.eth-image-text__content > p,
.eth-custom-html p {
    color: var(--eth-text-muted);
    line-height: var(--eth-lh-body);
}

.eth-custom-html {
    border-block: 1px solid var(--eth-premium-border);
}

.eth-loop-layout {
    gap: clamp(1.75rem, 4vw, 3.5rem);
}


/* Contact and forms ------------------------------------------------------- */
.eth-contact {
    position: relative;
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--eth-primary) 10%, transparent), transparent 32rem),
        color-mix(in srgb, var(--eth-bg-muted) 48%, var(--eth-bg-surface));
}

.eth-contact .eth-grid--2 {
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

.eth-contact__info {
    position: sticky;
    top: 7rem;
}

.eth-contact__form {
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border: 1px solid var(--eth-premium-border);
    border-radius: var(--eth-radius-l);
    background: color-mix(in srgb, var(--eth-bg-surface) 94%, transparent);
    box-shadow: var(--eth-premium-shadow-md);
}

.eth-contact-info {
    gap: 0;
    margin-block: var(--eth-space-s);
    border-top: 1px solid var(--eth-premium-border);
}

.eth-contact-info li {
    align-items: baseline;
    padding-block: var(--eth-space-2xs);
    border-bottom: 1px solid var(--eth-premium-border);
    font-size: var(--eth-fs-small);
}

.eth-social-link {
    transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 320ms var(--eth-premium-ease);
}

.eth-social-link:hover {
    transform: translateY(-2px);
}

.frm-fluent-form .ff-el-group {
    margin-bottom: var(--eth-space-xs);
}

.frm-fluent-form .ff-el-input--label label {
    margin-bottom: var(--eth-space-3xs);
    color: var(--eth-text-title);
    font-size: var(--eth-fs-xs);
    font-weight: 620;
    letter-spacing: 0.015em;
}

.frm-fluent-form :is(.ff-el-form-control, select, textarea) {
    min-height: 48px;
    padding: var(--eth-space-2xs);
    border: 1px solid var(--eth-premium-border);
    border-radius: var(--eth-radius-m);
    background: var(--eth-bg-surface);
    color: var(--eth-text-title);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.025);
    transition: border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

.frm-fluent-form textarea.ff-el-form-control {
    min-height: 130px;
    resize: vertical;
}

.frm-fluent-form :is(.ff-el-form-control, select, textarea):focus {
    border-color: var(--eth-primary);
    background: #fff;
    box-shadow: var(--eth-focus-ring);
    outline: none;
}

/* Content, author, archive and utility cards ------------------------------ */
.eth-article-entry {
    font-size: clamp(1rem, 1.25vw, 1.075rem);
    line-height: 1.82;
}

.eth-article-entry h2,
.eth-product-entry h2 {
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.eth-article-entry blockquote,
.eth-product-entry blockquote {
    padding: clamp(1.25rem, 3vw, 2rem);
    border-left-width: 3px;
    border-radius: 0 var(--eth-radius-m) var(--eth-radius-m) 0;
    background: color-mix(in srgb, var(--eth-primary) 5%, var(--eth-bg-surface));
    color: var(--eth-text-body);
    font-size: 1.08em;
    line-height: 1.75;
}

.eth-article-featured,
.eth-article-featured__img {
    border-radius: var(--eth-radius-l);
}

.eth-article-featured {
    box-shadow: var(--eth-premium-shadow-md);
}


.eth-article-author-bar__inner {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--eth-premium-border);
    border-radius: var(--eth-radius-l);
    background: var(--eth-bg-surface);
    box-shadow: var(--eth-premium-shadow-sm);
}

/* =========================================================
 * 0.6.3 — 作者资料（自定义头像 / 链接 / 社媒）
 * ========================================================= */

/* 作者头像：统一圆角 + 品牌光环 */
.eth-article-header__avatar,
.eth-article-author-bar__avatar img,
.eth-article-author-card__avatar img {
    border-radius: 50%;
    object-fit: cover;
}

.eth-article-header__avatar {
    border: 2px solid color-mix(in srgb, var(--eth-primary) 25%, var(--eth-bg-surface));
}

.eth-article-author-card__avatar img {
    border: 3px solid color-mix(in srgb, var(--eth-primary) 22%, var(--eth-bg-surface));
    box-shadow: var(--eth-shadow-primary-sm);
}

/* 作者名（未开启链接时） */
.eth-article-header__author-name {
    font-weight: var(--eth-fw-semibold);
    color: var(--eth-text-title);
}

/* 作者社媒链接组 */
.eth-author-socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eth-space-3xs);
    margin: var(--eth-space-3xs) 0;
}

.eth-author-social {
    display: inline-flex;
    align-items: center;
    gap: var(--eth-space-3xs);
    padding: 0.32rem var(--eth-space-2xs);
    border: 1px solid var(--eth-premium-border);
    border-radius: var(--eth-radius-full);
    background: color-mix(in srgb, var(--eth-bg-surface) 92%, transparent);
    color: var(--eth-text-muted);
    font-size: var(--eth-fs-xs);
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease, transform 280ms var(--eth-premium-ease), box-shadow 280ms var(--eth-premium-ease);
}

.eth-author-social:hover {
    color: var(--eth-text-title);
    border-color: color-mix(in srgb, var(--eth-primary) 35%, var(--eth-border));
    background: var(--eth-bg-surface);
    box-shadow: var(--eth-premium-shadow-sm);
    transform: translateY(-2px);
}

/* 作者条内的社媒：略放大 + 左对齐 */
.eth-article-author-bar .eth-author-socials {
    margin: var(--eth-space-2xs) 0 var(--eth-space-xs);
}

/* 侧边栏作者卡内的社媒：居中 */
.eth-article-author-card .eth-author-socials {
    justify-content: center;
    margin-block: var(--eth-space-3xs) var(--eth-space-2xs);
}

.navigation.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eth-space-3xs);
    align-items: center;
    justify-content: center;
}

.navigation.pagination :is(.page-numbers:hover, .page-numbers.current) {
    border-color: var(--eth-primary);
    background: var(--eth-primary);
    color: #fff;
    transform: translateY(-1px);
}

/* Reviews and modal ------------------------------------------------------- */


.eth-modal__overlay {
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(7px);
}

.eth-modal__dialog {
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--eth-radius-l);
    box-shadow: 0 35px 100px rgba(15, 23, 42, 0.3);
}

/* Footer ------------------------------------------------------------------ */
.eth-footer {
    border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

.eth-footer__inner,
.eth-footer__main {
    gap: clamp(2rem, 5vw, 5rem);
}

/* 0.8.2 字体拉平：footer 标题 0.74→0.8rem，与 Header mega 列标题(0.85rem)接近 */
.eth-footer__menu-title,
.eth-footer__widget-title {
    font-size: var(--eth-fs-xs);
    font-weight: 650;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.eth-footer__menu {
    gap: var(--eth-space-2xs);
}

.eth-footer__menu a,
.eth-footer__widget a {
    font-size: var(--eth-fs-small);
    transition: color 220ms ease, opacity 220ms ease;
}

.eth-footer__bottom {
    border-top-color: color-mix(in srgb, currentColor 10%, transparent);
    font-size: var(--eth-fs-xs);
}

/* Restrained entrance motion --------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .eth-hero__media,
    .eth-product-hero__media,
    .eth-article-header__media {
        animation: eth-media-rise 780ms 70ms var(--eth-premium-ease) both;
    }
}

@keyframes eth-media-rise {
    from { opacity: 0; transform: translateY(18px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Responsive -------------------------------------------------------------- */
/* 0.8.5：断点 900px → 992px 对齐。
   header.css 的移动端抽屉在 ≤992px 生效，而 backdrop-filter 禁用此前只覆盖
   ≤900px。Chrome 手机「PC 模式」视口约 980px，恰好落在 901–992px 缝隙，
   滚动后 backdrop-filter 令抽屉高度塌缩、只露 Home 且溢出左侧。
   现统一为 992px，整个抽屉生效区间都无 backdrop-filter。 */
@media (max-width: 992px) {
    .eth-header__inner {
        min-height: 4.65rem;
    }

    /* 0.8.3：抽屉 top 与 polish 实际 header 高度对齐，
       避免 header.css 的 6rem/5rem 与 4.65rem 错位露出缝隙 */
    .eth-header__nav {
        top: 4.65rem;
        border-top: 1px solid var(--eth-premium-border);
        box-shadow: var(--eth-shadow-tinted-md);
    }

    /* 0.8.4：移动端禁用 scrolled header 的 backdrop-filter。
       否则 backdrop-filter 会让 header 成为内部 position:fixed 抽屉的包含块，
       抽屉 top:4.65rem + bottom:0 相对 header 盒子计算 → 高度塌缩为 0，
       导致菜单只露出第一项。改纯色背景后抽屉恢复视口定位。 */
    .eth-header--sticky.eth-header--scrolled {
        backdrop-filter: none;
        background: var(--eth-bg-surface);
    }

    .eth-menu-link {
        padding: 0.8rem 0.35rem;
    }

    .eth-contact__info {
        position: static;
    }
}

@media (max-width: 768px) {
    .eth-contact__form {
        padding: 1rem;
    }
}

@media (max-width: 992px) {
    /* 移动端隐藏侧边栏：≤992px 隐藏（与菜单抽屉断点一致）。
       产品页 / 文章页 / 分类页三类侧边栏，桌面端不受影响。 */
    .eth-hide-sidebar-mobile .eth-product-sidebar,
    .eth-hide-sidebar-mobile .eth-article-content__sidebar,
    .eth-hide-sidebar-mobile .eth-loop-layout__sidebar {
        display: none;
    }

    /* 移动端隐藏 Header CTA 按钮：手机端 header 保持「logo 左 / 汉堡右」，
       桌面端按钮不受影响。 */
    .eth-header__actions,
    .eth-header__cta {
        display: none;
    }
}

@media (max-width: 768px) {
    /* 面包屑移动端：压缩排版参数（字号/间距）+ 单行禁折行 + 横向滚动兜底，
       避免四层导航在窄容器中折行占多行。桌面端排版不变。 */
    .eth-breadcrumb,
    .eth-product-breadcrumb,
    .eth-article-breadcrumb {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        font-size: 0.7rem;
        gap: 0.35rem;
        letter-spacing: 0.02em;
        margin-bottom: 1rem;
    }
    .eth-breadcrumb::-webkit-scrollbar,
    .eth-product-breadcrumb::-webkit-scrollbar,
    .eth-article-breadcrumb::-webkit-scrollbar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .eth-section *,
    .eth-header *,
    .eth-footer * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
 * 0.7.5 — product-5（hover 切换图集）细节修正
 * ----------------------------------------------------
 * - 标题居中（与 product-1 一致）
 * - hover 去除背景色衬底（0.6.4 曾给 product-1/5 加浅色背景）
 * ========================================================= */
.eth-loop-card--product-5:hover {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: var(--eth-radius-s);
}

.eth-loop-card--product-5 .eth-loop-card__title {
    text-align: center;
}

/* =========================================================
 * 0.8.7 — 全宽平铺页面（page.php）
 * ----------------------------------------------------
 * 页面模板不再使用 GP 卡片容器（separate-containers），
 * 内容全宽平铺，alignfull/alignwide 区块真正出血到视口。
 * ========================================================= */
.eth-page-main {
    width: 100%;
    min-width: 0;
}

.eth-page {
    width: 100%;
}

/* 页面标题：简洁居中，与全宽平铺风格统一 */
.eth-page__header {
    padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
    background: var(--eth-bg-surface);
}
.eth-page__title {
    margin: 0;
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
    font-weight: 660;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--eth-text-title);
}

/* 内容区：全宽平铺 */
.eth-page .entry-content {
    width: 100%;
}

/* 0.8.7：etheme-block 区块默认全宽。
   这些区块自带全宽背景 + 内层容器（padding-block/inline），
   不应受外层 max-width 限制。否则背景色块只有 1350px 宽，
   两边露出页面底色，破坏全宽平铺效果。 */
.eth-page .entry-content > [class*="wp-block-etheme-block"] {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

/* 0.8.7：区块间垂直间距归零。 */
.eth-page .entry-content > * + * {
    margin-top: 0;
}

/* alignwide：稍宽于容器 */
.eth-page .entry-content > .alignwide {
    max-width: var(--eth-container-wide);
    margin-inline: auto;
}

/* alignfull：真正出血到视口边缘（覆盖 GP 卡片容器的 ±40px 限制） */
.eth-page .entry-content > .alignfull {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    max-width: 100vw;
}

/* 区块内的 eth-container 需相对区块宽度居中，而不是视口 */
.eth-page .entry-content > .alignfull .eth-container,
.eth-page .entry-content > .alignwide .eth-container {
    margin-inline: auto;
}

/* 移动端：etheme-block 区块全宽后若内边距不足，内容会贴边。
   给 entry-content 加兜底水平内边距（与 0.8.3 产品/文章页一致）。
   常规文本区块与页面标题同样加边距。 */
@media (max-width: 992px) {
    .eth-page .entry-content {
        padding-inline: clamp(1rem, 4vw, 1.5rem);
    }
    .eth-page .entry-content > [class*="wp-block-etheme-block"] {
        width: auto;
        margin-inline: calc(clamp(1rem, 4vw, 1.5rem) * -1);
    }
    .eth-page .entry-content > *:not(.alignfull):not(.alignwide):not([class*="wp-block-etheme-block"]) {
        padding-inline: 0;
    }
    .eth-page__header {
        padding-inline: clamp(1rem, 4vw, 1.5rem);
    }
}