/* ============================================================
   Starsgem — 本项目在原主题之上补的少量样式
   ------------------------------------------------------------
   1. 无障碍与 SEO（跳转链接、视觉隐藏的 H1）
   2. 站内表单提示（成功/失败横幅、蜜罐字段）
   3. 分享图标排列
   4. <picture> / width-height 属性的布局修正（见下）
   除第 4 条外不覆盖原主题的任何版式规则。
   ============================================================ */

/* ------------------------------------------------------------
   WebP 的 <picture> 与 width/height 属性不能改变原版式
   ------------------------------------------------------------
   图片现在包在 <picture> 里，并带上了 width/height 属性（消除 CLS）。
   这两件事各自会破坏主题原有的排版，必须一起处理：

   1) <picture> 默认是 inline 元素。放进 flex/grid 容器（例如
      .cp-ri-img 是 display:flex + align-items:center）后，它自己变成
      了那个 flex 子项，里面的 <img> 不再是子项，居中/拉伸规则全部失效。
      display:contents 让 <picture> 不产生盒子，<img> 重新成为原来的
      布局子项，主题里所有针对 img 的规则照旧生效。

   2) HTML 的 width/height 属性是「表现提示」，等价于
      width:800px; height:800px，优先级低于任何作者样式。
      主题只写了 img{max-width:100%}，没有 height:auto —— 容器比图窄时
      宽度被压小、高度仍然固定在 800px，图片就被纵向拉长。
      补上 height:auto 让高度按宽高比推算。
      带明确尺寸的类选择器（如 .contact-pc li .ewm）优先级更高，不受影响。
   ------------------------------------------------------------ */
picture { display: contents; }
img { height: auto; }

/* ------------------------------------------------------------
   图库缩略图不能拉伸
   ------------------------------------------------------------
   主题里写死了 `.picScroll-top .bd ul li .pic img { width:99px; height:99px }`。
   正方产品图没问题，但 433 个产品的相册里混着切割图/颜色图这类
   宽扁参考图（113x54、100x57…），被压成 99x99 就明显变形。
   用 object-fit: contain 而不是 cover：
     · 正方图在正方框里 = 完全不变
     · 宽扁图完整显示，不裁切也不变形
   ------------------------------------------------------------ */
.picScroll-top .bd ul li .pic img { object-fit: contain; }

/* ------------------------------------------------------------
   缩略图竖排必须限高
   ------------------------------------------------------------
   .cp-xqleft 是 display:flex + align-items:center。
   缩略图列不限高的话，25 张 99px 缩略图会把这一列撑到约 2800px，
   大图被垂直居中推到 y≈1700 —— 首屏看不到大图，看着就是「图不见了」。
   原站靠 SuperSlide 把可视高度限制成 5 张，这里补一条 CSS 兜底，
   即使脚本没跑到也不会塌。
   99px 图 + 12px 间距 ≈ 111px，5 张约 555px。
   ------------------------------------------------------------ */
.picScroll-top .bd { max-height: 555px; overflow-y: auto; overflow-x: hidden; }
/* 上下箭头本来靠 SuperSlide 滚动，这里让它至少能原生滚动 */
.picScroll-top .bd::-webkit-scrollbar { width: 4px; }
.picScroll-top .bd::-webkit-scrollbar-thumb { background: #cccccc; border-radius: 2px; }

/* ---------------------------------------------------- 无障碍 / SEO */
.sg-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.sg-skip {
    position: absolute; left: -9999px; top: 0; z-index: 100000;
    background: #46a8ae; color: #fff; padding: 10px 18px; text-decoration: none;
}
.sg-skip:focus { left: 0; }

/* 蜜罐字段：机器人会填，真人看不到 */
.sg-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}

/* ------------------------------------------------------------ 表单提示 */
.sg-alert {
    padding: 14px 18px;
    margin: 18px 0;
    font-size: 15px;
    line-height: 24px;
    border-radius: 4px;
}
.sg-alert-ok { background: #e8f6f3; color: #16786b; }
.sg-alert-err { background: #fdecea; color: #b0342a; }

/* 联系页表单：字段本身不加 class，交给主题的元素选择器排版。
   这里只补两件主题没做的事：让蜜罐字段不占位、提交按钮的悬停色。
   注意：主题里 `.tar` 是「高 146px 的多行输入」样式，绝对不要用在单行 input 上。 */
.contact-xq-k-right form .sg-hp { position: absolute; left: -9999px; }
.contact-xq-k-right .sub-tj:hover { background: #3a9398; }
.sg-page-body p { margin-bottom: 12px; }

/* 联系页正文：全宽白底区块，两栏排版；.contact-xq-kuang 是 flex，
   必须 clear 才能落到它下面 */
.sg-contact-body {
    clear: both;
    position: relative;
    z-index: 10;               /* 盖住上面那块青色面板伸出来的部分 */
    background: #ffffff;
    padding: 46px 0 56px;
    margin-top: 0;
}
.sg-contact-body .sg-page-body {
    -webkit-columns: 2;
       -moz-columns: 2;
            columns: 2;
    -webkit-column-gap: 48px;
       -moz-column-gap: 48px;
            column-gap: 48px;
    font-size: 15px;
    line-height: 26px;
    color: #555555;
}
.sg-contact-body .sg-page-body h2,
.sg-contact-body .sg-page-body h3 {
    font-family: "PlayfairDisplay-Regular";
    font-weight: 400;
    color: #333333;
    margin: 18px 0 8px;
    break-after: avoid;
}
.sg-contact-body .sg-page-body h2 { font-size: 24px; }
.sg-contact-body .sg-page-body h3 { font-size: 20px; }
.sg-contact-body .sg-page-body ul { list-style: disc; padding-left: 20px; margin-bottom: 12px; }
.sg-contact-body .sg-page-body a { color: #46a8ae; }
@media screen and (max-width: 767px) {
    .sg-contact-body .sg-page-body { columns: 1; }
    .sg-contact-body { padding: 28px 0 34px; }
}

/* ------------------------------------------------------------ 分享 */
.sg-share { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; vertical-align: middle; }
.sg-share a {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #dddddd; border-radius: 50%;
    color: #666666; text-decoration: none;
}
.sg-share a:hover { background: #46a8ae; border-color: #46a8ae; color: #ffffff; }

/* 新闻详情日期 */
.news-xq-data { color: #999999; font-size: 14px; margin-top: 8px; }

/* ------------------------------------------------------------
   文章底部「相关品类」链接
   ------------------------------------------------------------
   这些 <a> 默认是纯 inline，中间没有任何间距，会连成一串
   （"Round MoissaniteMoissaniteOval Moissanite…"）。
   做成胶囊标签互相分开。
   ------------------------------------------------------------ */
.sg-topic-links { margin-top: 10px; }
.sg-topic-links .pre {
    display: inline-block;
    margin-right: 12px;
    color: #999999;
    font-size: 14px;
    vertical-align: middle;
}
.sg-topic-links a {
    display: inline-block;
    margin: 0 8px 8px 0;
    padding: 5px 14px;
    border: 1px solid #dddddd;
    border-radius: 15px;
    font-size: 14px;
    line-height: 20px;
    color: #666666;
    vertical-align: middle;
}
.sg-topic-links a:hover { border-color: #46a8ae; color: #46a8ae; }

/* WhatsApp 号码列表：原站的 inline style 把它设成 opacity:0，
   但主题里没有任何规则把它显示出来（悬停无效）。这里补上。 */
.contact-pc .c2:hover .whatsapp-number-list,
.contact-pc .c2:focus-within .whatsapp-number-list {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 分类页「Read More」默认隐藏，由 site.js 按内容高度决定是否显示 */
.pro1-txt .more_btn { display: none; }
.pro1-txt .more_btn.sg-show { display: block; }

/* Our Jewelry 大图上的标题（原站这里没有文字，补一个可读的） */
.ihot-img-kuang .ipro-title { font-size: 18px; line-height: 24px; }
.ihotws-ri-topkuang .ihot-img-kuang .ipro-title { font-size: 14px; line-height: 20px; }

/* 后台富文本编辑器里插入的图片不要溢出正文 */
.new-xq-right img, .about-mid-neirong img, .paramete-kuang img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------
   轮播里的图片必须显式约束宽度。
   主题没有给 .relsw-img img / .ihotswiper-* img 任何尺寸规则，
   而 img_tag() 现在会输出 width/height 属性（消除 CLS 用的）。
   HTML 的 width/height 属性是「表现提示」，会直接变成 800px，
   不约束就会撑破 slide（.relsw-img 还是 overflow:hidden，结果是竖条裁切）。
   这里统一成「宽度撑满、高度按比例」，宽高属性只当比例提示用。
   ------------------------------------------------------------ */
.relsw-img img,
.ihotswiper-left img,
.ihotswiper-right img,
.ihot-img-kuang img,
.promoswiper .swiper-slide img,
.relate-kuang .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 999px) {
    .sg-share a { width: 28px; height: 28px; }
}

/* 轮播图上的可抓取链接：覆盖整张图。
   注意不要给 .banner .slideItem 加任何定位规则 —— slide.js 依赖主题里
   `.slide .carouse .slideItem { position: absolute }` 来计算每屏位置。 */
.banner .slideItem .sg-slide-link {
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    z-index: 3; font-size: 0; text-indent: -9999px;
}

/* ------------------------------------------------------------
   首页 banner 加载闪动修复
   ------------------------------------------------------------
   原主题问题：
   1) .carouse 没有初始高度（slideItem 全是 absolute，不撑文档流高度），
      slide.js 轮询检测到图片加载后才 height() 赋值 → 图片从 0 高度突然出现。
   2) 所有 .slideItem 初始 left 都是 auto（堆叠在同一位置），最后一张
      DOM 覆盖第一张；slide.js 执行 lunbo() 后才横向排开 → 用户先看到
      最后一张图，突然切成第一张。

   修复：CSS 层面就把布局预排好，JS 执行前后视觉一致，不再跳动。
   - .carouse 高度 100%（.slide 已由 .banner 的 padding-top 固定比例撑高）
   - 非第一张 slide 默认 left:100%（移出可视区），第一张 left:0
   slide.js 后续会用 .css("left", ...) 覆盖这些值，轮播功能不受影响。
   ------------------------------------------------------------ */
.banner .carouse {
    height: 100%;
}
.banner .slide .slideItem {
    left: 100%;
}
.banner .slide .slideItem:first-child {
    left: 0;
}

/* ------------------------------------------------------------
   Swiper 产品轮播：初始化前隐藏，避免垂直堆叠闪现
   ------------------------------------------------------------
   swiper.js 在页面底部加载，初始化前 .swiper-wrapper 是默认 block
   布局，slide 垂直堆叠；初始化后才变成 flex 横向排列。
   用户滚动到这里时如果刚好还没初始化好，会先看到一堆竖排产品图，
   突然切成横向轮播——也是闪动。
   修复：初始化前整个容器 visibility:hidden，swiper 初始化后自动加
   .swiper-container-initialized class，此时再显示。
   ------------------------------------------------------------ */
.swiper-container { visibility: hidden; }
.swiper-container.swiper-container-initialized { visibility: visible; }