/* =====================================================================
   SZkare — Imperial Jade · widget-specific styles
   ---------------------------------------------------------------------
   仅给 7 个新 widget + 4 个新模板补它们需要的 class。
   通用 token / typography 走 imperial-jade.css；karewash 继承 widget
   通过 shared.css :root 别名拿到 jade / amber。
   ===================================================================== */

/* ============ 共用：sz-empty-state ============ */
.sz-empty-state{
  text-align:center;
  padding:clamp(40px,6vw,80px) clamp(20px,4vw,52px);
  background:var(--jade-mist2);
  border:1px dashed var(--line-2);
  border-radius:8px;
  margin:40px auto;
  max-width:760px;
}
.sz-empty-state p{color:var(--ink-2); font-size:15px; line-height:1.7; margin-bottom:20px;}
.sz-empty-state .btn{display:inline-flex;}

/* v0.9.7：删 .sister-callout 整块。
   imperial-jade.css L1307-1317 已定义 szkare-html 版本（jade-ink dark + .sc-l > .k + h3 + p + a.btn 2-children 网格），
   旧版这层 3-children（.sister-bar + .sister-body + .sister-cta）网格直接覆盖 + 白底，会破坏 products 页 sister-callout 段视觉。 */

/* ============ Brands Matrix ============ */
.brands-matrix{padding:clamp(72px,9vw,120px) 0; background:var(--paper);}
.brands-matrix .bm-head{text-align:left; max-width:760px; margin-bottom:clamp(40px,5vw,64px);}
.brands-matrix .bm-grid{
  display:grid;
  grid-template-columns:repeat(var(--cols, 4), 1fr);
  gap:clamp(20px,2.4vw,32px);
}
.brands-matrix .bm-grid[data-cols="2"]{--cols:2;}
.brands-matrix .bm-grid[data-cols="3"]{--cols:3;}
.brands-matrix .bm-grid[data-cols="4"]{--cols:4;}
@media (max-width:1100px){.brands-matrix .bm-grid{--cols:3 !important;}}
@media (max-width:780px){.brands-matrix .bm-grid{--cols:2 !important;}}
@media (max-width:520px){.brands-matrix .bm-grid{--cols:1 !important;}}

.bm-card{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:8px;
  padding:28px 26px 24px;
  transition:transform .25s, box-shadow .25s, border-color .25s;
  overflow:hidden;
}
.bm-card:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 48px rgba(4,37,34,.14);
  border-color:transparent;
}
.bm-card .bm-bar{
  position:absolute; left:0; top:0; bottom:0;
  width:5px;
  background:var(--brand-bar, var(--jade));
  transition:width .25s;
}
.bm-card:hover .bm-bar{width:8px;}
.bm-card .bm-logo{height:64px; display:flex; align-items:center; margin-bottom:18px;}
.bm-card .bm-logo img{max-height:64px; width:auto; object-fit:contain;}
.bm-card .bm-title{
  font-family:var(--head); font-weight:700;
  font-size:22px; color:var(--jade-ink);
  letter-spacing:-.01em;
}
.bm-card .bm-tagline{
  font-size:14px; color:var(--ink-2); line-height:1.6;
  margin-top:10px; flex:1;
}
.bm-card .bm-cta{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:18px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--amber-d);
  padding-top:14px;
  border-top:1px solid var(--line);
  transition:color .2s, gap .25s;
}
.bm-card:hover .bm-cta{color:var(--jade); gap:14px;}
.bm-card .bm-cta .ar{transition:transform .25s;}
.bm-card:hover .bm-cta .ar{transform:translate(2px,-2px);}

/* ============ Quality Process ============ */
.quality-block{padding:clamp(72px,9vw,120px) 0; background:var(--paper);}
.quality-block .qb-head{text-align:left; max-width:760px; margin-bottom:clamp(40px,5vw,64px);}
.quality-block .qb-split{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:clamp(36px,5vw,72px);
  align-items:start;
}
@media (max-width:920px){.quality-block .qb-split{grid-template-columns:1fr;}}
.quality-block .qb-sticky{position:sticky; top:clamp(80px,10vh,120px);}
.quality-block .qb-callout{
  background:var(--jade-ink); color:rgba(255,255,255,.92);
  padding:28px 24px;
  border-radius:8px;
  font-size:14.5px; line-height:1.7;
}
.quality-block .qb-content .scards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2vw,24px);
  margin-bottom:clamp(36px,4vw,52px);
}
@media (max-width:560px){.quality-block .qb-content .scards{grid-template-columns:1fr;}}
.quality-block .scard{
  background:var(--white); border:1px solid var(--line);
  border-radius:8px; padding:22px 20px; position:relative;
}
.quality-block .scard-num{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--amber-d); font-weight:500;
}
.quality-block .scard-title{
  font-family:var(--head); font-weight:700;
  font-size:17px; color:var(--jade-ink);
  margin-top:8px; line-height:1.3;
}
.quality-block .scard-desc{
  font-size:13.5px; color:var(--ink-2); line-height:1.65;
  margin-top:10px;
}
.quality-block .qb-certs{margin-top:0;}

/* v0.9.7：删 Album Section / Album Grid 整块。
   imperial-jade.css L1255-1273 已定义 szkare-html 版本（.album-grid > a.album.rv > img + .album-arrow + .album-info > .album-cat + h3 + .album-meta(span + .album-count > svg + count)）。
   旧版用 .album-cover bg-image + .album-meta > h3 + .album-sub + .album-ar 完全不同结构，v0.9.0 sz_album_grid widget 已重写为 szkare-html 结构，这层 CSS 没意义且会覆盖原版。 */

/* v0.9.7：删 Gallery Hub + .gal-filter + .gal-grid 整块。
   imperial-jade.css L1125+ 已定义 szkare-html 版 .gal-filter（圆角 jade hover）+ L1137 .gal-grid masonry 4-col 网格。
   旧版 .gallery-hub / .gh-entries / .gh-head 是我 v0.4 时代 widget wrapper class，v0.9.0 sz_gallery_hub widget 重写后已不输出这些 wrapper（直接出 .sec.white > .wrap > .sec-head + .album-grid）。
   .gal-grid 这里 auto-fill 220px 网格覆盖 jade.css 的 columns:4 masonry 设计也会破坏 gallery 视觉。 */

/* v0.9.7：删 Lightbox 整块。
   imperial-jade.css L1165-1177 已定义 szkare-html 完整版（.lightbox / .lightbox.open / .lightbox img / .lb-close / .lb-nav / .lb-prev / .lb-next / .lb-cap 全套）。
   旧版这层 z-index:9999 + opacity 动画 + 48px 按钮 vs 原版 z-index:300 + display:none + 54px 按钮，覆盖会改 z 层级 + 按钮尺寸。 */

/* ============ Album Detail (single-album.php + widget) ============ */
.album-detail{padding:clamp(40px,5vw,80px) 0 clamp(80px,9vw,120px);}
.album-detail .ad-head{
  padding:clamp(40px,5vw,80px) 0 clamp(40px,5vw,72px);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(40px,5vw,72px);
}
.album-detail .ad-split{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:clamp(36px,5vw,72px);
  margin-bottom:clamp(48px,6vw,80px);
}
@media (max-width:880px){.album-detail .ad-split{grid-template-columns:1fr;}}
.album-detail .ad-prose p{
  font-size:16px; color:var(--ink-2); line-height:1.8;
  margin-bottom:14px; max-width:65ch;
}
.album-detail .ad-prose p strong{color:var(--jade-ink);}

.album-facts{
  background:var(--jade-mist2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:24px 26px;
}
.album-facts .af-title{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--amber-d); margin-bottom:14px;
}
.album-facts dl{display:grid; gap:14px;}
.album-facts .af-row{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:14px;
  padding-bottom:12px;
  border-bottom:1px dashed var(--line);
}
.album-facts .af-row:last-child{border-bottom:0; padding-bottom:0;}
.album-facts dt{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); align-self:start; line-height:1.4;
}
.album-facts dd{
  font-size:14px; color:var(--jade-ink); font-weight:500; line-height:1.5;
}

.ad-gallery-title{
  font-family:var(--head); font-weight:700;
  font-size:clamp(22px,2.4vw,30px); color:var(--jade-ink);
  letter-spacing:-.01em;
  margin:clamp(40px,5vw,64px) 0 clamp(20px,2vw,28px);
}

.ad-related{margin-top:clamp(60px,8vw,100px); border-top:1px solid var(--line); padding-top:clamp(40px,5vw,64px);}
.album-detail-elementor .elementor{padding-top:0;}

/* ============ archive sz-empty-state CTA 模式按钮可见 ============ */
.sz-empty-state .btn.btn-amber{background:var(--amber); color:var(--jade-ink); padding:14px 26px;}
.sz-empty-state .btn.btn-amber:hover{background:#FFB845;}