@charset "UTF-8";
/* ==========================================================================
   also_like_luxe — 产品页「You May Also Like」区块 Luxe 皮肤
   --------------------------------------------------------------------------
   渲染来源：wooxit_seo_render_internal_links()
             (includes/functions/extra_functions/wooxit_seo_content_functions.php:455)
   调用位置：tpl_product_info_display.php:695（仅产品页）

   ⚠ 为什么选择器要带 `body` 前缀、令牌要打 `!important`：
   该区块的样式是 PHP 在**返回的 HTML 里内联输出**的一个 <style> 块
   （`$styleTag`，随 section 一起落在 body 内）。内联块在文档流里【晚于】
   head 里所有 CSS ⇒ 同特异性时它一定赢。
     · 令牌（--pal-*）：内联块还额外写了 html[data-theme=dark] .pandora-also-like
       (0,2,1) 覆盖，故这里必须用 `!important`（对自定义属性同样有效）才能
       在两个主题下都接管。
     · 结构属性（border-radius 等）：`body .x`(0,1,1) > `.x`(0,1,0) 即可赢。

   ⚠ 另一处冲突来自 2026-10-13 的全站字体层 luxe_typography.css：
   它给 `html[data-theme] p / h2 / h3` 打了 !important（正文 14-16px / 行高 1.7），
   会把卡片里的分类小字（<p>）撑成正文大小、字距归零。凡是本区块里
   元素标签是 p/h2/h3 的，字体属性都要用 `!important` 才能盖回来。

   回滚：删除本文件 + 移除 loader 里的追加段（无其它副作用）。
   ========================================================================== */

/* ==========================================================================
   1. 令牌：把内联块的 --pal-* 全部改接到 Luxe 令牌（自动跟随明暗主题）
   ========================================================================== */
body .pandora-also-like {
    --pal-gold: #D4AF37 !important;          /* 与全站统一按钮的金一致 */
    --pal-bg: var(--lx-bg-2) !important;     /* 区块底：比页面底深一档，形成"带" */
    --pal-fg: var(--lx-text) !important;
    --pal-card: var(--lx-card-2) !important; /* 图片区底 */
    --pal-muted: var(--lx-muted) !important;
    --pal-border: var(--lx-line) !important;
    --pal-primary: var(--lx-text) !important;
    --pal-primary-fg: var(--lx-bg) !important;
    --pal-orig: var(--lx-muted) !important;
    --pal-sale: #A3121F !important;
    /* 圆角统一：卡片 14 / 按钮 9 / 徽标 4 */
    --pal-pill: 999px !important;
}

html[data-theme="dark"] body .pandora-also-like,
html.theme-dark body .pandora-also-like {
    --pal-sale: #FF6B6B !important;
}

@media (prefers-color-scheme: dark) {
    :root:not(.theme-light):not([data-theme="light"]) body .pandora-also-like {
        --pal-sale: #FF6B6B !important;
    }
}

/* ==========================================================================
   2. 区块外壳
   ========================================================================== */
body .pandora-also-like {
    padding: 56px 16px !important;
    border-top: 1px solid var(--lx-line);
    border-bottom: 1px solid var(--lx-line);
}

body .pandora-also-like__header {
    margin-bottom: 40px !important;
}

/* 区块标题：Playfair + 大写 + 略宽字距（居中展示层的经典排法）
   ⚠ 元素是 <h2>：字体层写的是 `html[data-theme] h2`，含 2 个元素选择器
     ⇒ (0,1,2)；本文件若只写 `body .x`(0,1,1) 会被它压掉。
     故这里一律补成 `html body h2.类名`(0,1,3)，不依赖加载顺序。 */
html body h2.pandora-also-like__title {
    font-family: var(--lx-font-display) !important;
    font-size: var(--lx-fs-h2) !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color: var(--lx-text) !important;
    margin: 0 0 10px !important;
}

/* 副标题：小字大写 + 宽字距（奢侈品牌第一排版特征）
   ⚠ 元素是 <p>，字体层的 `html[data-theme] p` 为 (0,1,2) ⇒ 同样补元素选择器 */
html body p.pandora-also-like__subtitle {
    font-family: var(--lx-font-sans) !important;
    font-size: var(--lx-fs-label) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: var(--lx-ls-label) !important;
    text-transform: uppercase !important;
    color: var(--lx-muted) !important;
    margin: 0 !important;
}

body .pandora-also-like__grid {
    gap: 24px !important;
}

/* ==========================================================================
   3. 卡片
   ========================================================================== */
body .pandora-product-card {
    border: 1px solid var(--lx-line) !important;
    border-radius: 14px !important;
    background: var(--lx-card) !important;
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

body .pandora-product-card:hover {
    border-color: var(--lx-gold) !important;
    box-shadow: 0 12px 32px -14px rgba(0, 0, 0, .22) !important;
    transform: translateY(-2px);
}

body .pandora-product-card__image {
    background: var(--lx-card-2) !important;
}

/* 图片加载失败时浏览器会把 alt 文字画进图框（会压到角标上、且卡片下方
   已经重复了商品名）。这里把 alt 的可见颜色去掉 —— 只影响坏图，
   屏幕阅读器仍能读到 alt，属优雅降级。 */
html body img.pandora-product-card__image-img {
    color: transparent !important;
}

body .pandora-product-card__body {
    padding: 16px 16px 18px !important;
    gap: 9px !important;
}

/* 分类小字（<p>）—— `html body p.类名`(0,1,3) 压过字体层的 `html[data-theme] p`(0,1,2) */
html body p.pandora-product-card__category {
    font-family: var(--lx-font-sans) !important;
    font-size: var(--lx-fs-label) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: var(--lx-ls-label) !important;
    text-transform: uppercase !important;
    color: var(--lx-muted) !important;
    margin: 0 !important;
}

/* 产品名（<h3>）—— 衬线、正体、紧字距；同样补元素选择器压过字体层的 h3 */
html body h3.pandora-product-card__name {
    font-family: var(--lx-font-display) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: .04em !important;
    color: var(--lx-text) !important;
    min-height: 2.9em !important;
}

body .pandora-product-card__name a {
    color: inherit !important;
}

body .pandora-product-card__name a:hover {
    color: var(--lx-gold) !important;
}

/* ==========================================================================
   4. 价格（衬线数字，与全站价格层一致）
   ========================================================================== */
body .pandora-product-card__price-current {
    font-family: var(--lx-font-display) !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    letter-spacing: .01em !important;
    font-variant-numeric: lining-nums tabular-nums;
}

body .pandora-product-card__price-original {
    font-family: var(--lx-font-display) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--lx-muted) !important;
}

body .pandora-product-card__price-discount {
    font-family: var(--lx-font-sans) !important;
    font-size: var(--lx-fs-label) !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

/* ==========================================================================
   5. 徽标 / 收藏
   ========================================================================== */
body .pandora-product-card__badge {
    font-family: var(--lx-font-sans) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    border-radius: 4px !important;
    padding: 4px 9px !important;
}

body .pandora-product-card__wishlist {
    width: 34px !important;
    height: 34px !important;
    background: var(--lx-card) !important;
    border: 1px solid var(--lx-line) !important;
    color: var(--lx-text) !important;
}

body .pandora-product-card__wishlist:hover {
    background: var(--lx-gold) !important;
    border-color: var(--lx-gold) !important;
    color: #111111 !important;
}

/* ==========================================================================
   6. CTA：与全站「统一按钮」同一套配色
      浅色 #1a1a1a/白 → hover 金底黑字；深色 #111/金字 → hover 金底黑字
      ⚠ 元素是 <a>（无 .btn 类），故不吃全局按钮规则，需在此自绘。
   ========================================================================== */
body .pandora-product-card__action {
    margin-top: 15px !important;
    padding: 12px 14px !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 9px !important;
    background: #1a1a1a !important;
    background-image: none !important;
    color: #FFFFFF !important;
    font-family: var(--lx-font-sans) !important;
    font-size: var(--lx-fs-label) !important;
    font-weight: 700 !important;
    letter-spacing: var(--lx-ls-label) !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}

body .pandora-product-card__action:hover {
    background: #D4AF37 !important;
    border-color: #D4AF37 !important;
    color: #1a1a1a !important;
}

html[data-theme="dark"] body .pandora-product-card__action,
html.theme-dark body .pandora-product-card__action {
    background: #111111 !important;
    border-color: rgba(212, 175, 55, .45) !important;
    color: #D4AF37 !important;
}

html[data-theme="dark"] body .pandora-product-card__action:hover,
html.theme-dark body .pandora-product-card__action:hover {
    background: #D4AF37 !important;
    border-color: #D4AF37 !important;
    color: #111111 !important;
}

/* ==========================================================================
   7. 移动端
   ========================================================================== */
@media (max-width: 768px) {
    body .pandora-also-like {
        padding: 38px 14px !important;
    }

    body .pandora-also-like__header {
        margin-bottom: 26px !important;
    }

    body .pandora-also-like__grid {
        gap: 16px !important;
    }

    body .pandora-product-card {
        border-radius: 12px !important;
    }

    body .pandora-product-card__body {
        padding: 13px 13px 15px !important;
    }
}