/* =============================================================================
   TS_MODERN — 产品页属性卡片：只读属性皮肤
   -----------------------------------------------------------------------------
   背景：产品页原本把所有属性（Material / Metal / Theme / Size / Color）都渲染成
        可选择的 <select>。按需求，只有 Size / Color 可选，其余属性只作规格展示，
        模板改为输出 <ul class="ts-attrib-ro-list">（见 tpl_modules_attributes.php），
        不再产出任何表单控件。

   视觉语言：虚线胶囊标签 + 次级文字色，与可交互的下拉框形成明确区分
            （实线边框 + 输入底色 = 可选；虚线 + 透明底 = 只读）。

   加载点：common/html_header_css_loader.php（产品页末尾追加，排在合并 CSS 之后）
   选择器一律带 #attributes-card（ID）前缀，稳过 .product-attributes .wrapperAttribsOptions
   等既有 (0,2,0) 级规则。

   主题：只用 --theme-* 令牌，明暗双主题自动适配；未定义时给可视回退色。
   RTL：全部使用 flex + 逻辑属性，dir="rtl"（希伯来语 he）自动镜像，不写 .rtl 专用样式。
   ========================================================================== */

/* 只读属性卡片：去掉为表单控件准备的输入框底色干扰，保持与可选卡片一致的容器 */
#attributes-card .wrapperAttribsOptions.ts-attrib-readonly {
    background: var(--theme-bg-card, transparent);
}

/* 取值列表：flex 自动换行，gap 在 RTL 下同样正确 */
#attributes-card .ts-attrib-ro-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 单个取值：虚线胶囊 = 「不可选」的视觉暗示 */
#attributes-card .ts-attrib-ro-item {
    /* 显式归零：全局 LABEL / li 的 margin 规则会把它顶歪（Bootstrap 同类坑③） */
    margin: 0;
    padding: 0.25rem 0.75rem;
    border: 1px dashed var(--theme-border-light, rgba(128, 128, 128, 0.45));
    border-radius: 999px;
    background: transparent;
    font-size: 0.875rem;
    line-height: 1.45;
    /* 站点存在「宽泛元素 + !important」的 color 规则（li/span/div… 全在列），
       这里的 color 必须同样打 !important 才压得住 */
    color: var(--theme-text-secondary, var(--theme-text-primary, inherit)) !important;
    /* de / fi / hu 超长复合词不撑破胶囊 */
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* 只有一个取值时不换行，避免孤立胶囊占满一行时的空洞感 */
#attributes-card .ts-attrib-ro-list:has(.ts-attrib-ro-item:only-child) {
    display: block;
}

/* 明色主题兜底（令牌缺失时） */
html[data-theme='light'] #attributes-card .ts-attrib-ro-item,
.theme-light #attributes-card .ts-attrib-ro-item {
    border-color: rgba(0, 0, 0, 0.18) !important;
    color: #4a4a4a !important;
}

/* 暗色主题兜底 */
html[data-theme='dark'] #attributes-card .ts-attrib-ro-item,
.theme-dark #attributes-card .ts-attrib-ro-item {
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #c9c9c9 !important;
}