/* ============================================================
   TulyShop 模板样式微调
   由 utils/tulyAssets.js 在模板 CSS 之后加载（同一条按需加载/清理链路），
   专门用来覆盖 public/tuly/static/css/style.css 里的原生样式，
   避免直接改压缩过的第三方文件。
   ============================================================ */

/* 购物车抽屉底部两个按钮（view cart / checkout）原本紧贴在一起，
   只靠 inline-block 之间的空白字符分隔，这里拉开一点间距 */
.cart-list .box .box-btn a + a {
  margin-left: 12px;
}

/* ---------------- 页面横幅（breadcrumb-area）压低高度 ----------------
   模板原生上下内边距：桌面 220px / 992-1199px 150px / 移动端 80px，
   加上标题行一共 470~600px，太高了，这里统一压下来。
   本站覆盖样式在 style.css 之后加载，同权重下后者胜，因此能盖住模板各断点的值 */
.breadcrumb-area .breadcrumb-txt,
.breadcrumb-area.breadcrumb-area-2 .breadcrumb-txt {
  padding: 120px 0;
}

/* 模板给 breadcrumb-area-2 预留的 84px 顶部内边距是配合旧版 header-2 的，
   现在顶栏已是普通文档流，这段就是多余空白 */
.breadcrumb-area.breadcrumb-area-2 {
  padding-top: 0;
}

@media only screen and (max-width: 1199px) {
  .breadcrumb-area .breadcrumb-txt,
  .breadcrumb-area.breadcrumb-area-2 .breadcrumb-txt {
    padding: 90px 0;
  }
}

@media only screen and (max-width: 991px) {
  .breadcrumb-area .breadcrumb-txt,
  .breadcrumb-area.breadcrumb-area-2 .breadcrumb-txt {
    padding: 55px 0;
  }
}

/* ---------------- 商品卡右侧悬浮按钮（预览 / 收藏 / 加购）尺寸 ----------------
   模板里同一套按钮有多个页面变体，原生是 25~35px 方块 + font-size:5~7px 的图标。
   之前为了看清放大到 60px，但在 ~285px 宽的卡片里占了将近四分之一宽，明显压过商品图，
   这里收到 42×42、图标 18px（约占按钮四成），既看得清又不抢主体。
   列高 42px×3 + 间隔 8px = 142px，不会再溢出图片区压到商品名。
   「藏起来」的初始偏移固定用 -46px（< 按钮宽度的绝对值即可完全移出卡外，未悬停不露头）。
   悬停滑入的 .single-box:hover .side-btn{right:30px} 权重更高（多了 :hover），不受影响 */
.our-product .tab-content .tab-pane .single-box .side-btn,
.shop-grid .all-product .single-box .side-btn,
.best-seller .best-sale .tab-content .tab-pane .tab-slider .single-box .side-btn,
.shop-details .releted-products .releted-slider .single-box .side-btn {
  right: -46px;
}

.our-product .tab-content .tab-pane .single-box .side-btn a,
.shop-grid .all-product .single-box .side-btn a,
.best-seller .best-sale .tab-content .tab-pane .tab-slider .single-box .side-btn a,
.shop-details .releted-products .releted-slider .single-box .side-btn a {
  width: 42px;
  height: 42px;
  line-height: 42px;
  font-size: 18px;
  margin-bottom: 8px;
  border-radius: 5px;
  /* 图片背景深浅不一，加一点投影让白底按钮始终看得清 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

/* 左侧栏版式（shop-grid-left-bar）卡片里是带边框的圆形小按钮，同步收到 40×40 */
.shop-grid-2 .all-product .single-box .box .part-bottom .side-btn a {
  width: 40px;
  height: 40px;
  line-height: 38px;
  font-size: 16px;
  margin-bottom: 6px;
}

/* ---------------- 商品卡整体可点击进详情 ----------------
   模板里只有商品名和「预览」小眼睛是链接，用户习惯点商品图/卡片空白处，
   现在整张卡都绑定了跳详情（见 utils/useShopProducts.js 的 onCardClick），
   这里补个手型光标做提示。 */
.our-product .tab-content .tab-pane .single-box,
.shop-grid .all-product .single-box,
.shop-grid-2 .all-product .single-box,
.shop-list .lists .single-box {
  cursor: pointer;
}

/* ---------------- 商品详情页图集（左侧缩略图 / 主图） ----------------
   模板里缩略图容器固定 110×110（≤1199px 是 90×90），但只给图片设了 width:100%、
   高度留 auto：竖版商品图（如 72×87）会被撑到 133px，溢出容器压住下一张缩略图。
   这里把「容器 → .product-pic → img」三层高度接通，并用 object-fit:contain 收进框内，
   竖图横图都能完整显示、不再重叠（.active 的红色描边选择器权重更高，不受影响） */
.shop-details .item-section .part-img .owl-thumbs .owl-thumb-item .product-pic {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.shop-details .item-section .part-img .owl-thumbs .owl-thumb-item .product-pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 主图：模板是 img{width:auto}（按原始像素显示），补上尺寸上限，
   避免换成大图后撑出 440×470 的容器 */
.shop-details .item-section .part-img .product-slider .owl-item .single-product-slider img {
  max-width: 100%;
  max-height: 100%;
}

/* ---------------- 商品详情页 Buy Now（直达 PayPal 支付） ----------------
   位于 Share On 下方：点击弹收货信息 → PayPal 支付（登录后可用） */
.shop-details .zs-buy-now {
  margin: 4px 0 0;
}

.zs-buy-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 28px;
  background: #ffc439;
  border: none;
  border-radius: 4px;
  color: #003087;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: .3s;
}

.zs-buy-btn:hover {
  background: #f5b92e;
}

.zs-buy-btn i {
  font-size: 18px;
}

/* ---------------- 博客分享图标 ----------------
   卡片上的分享图标模板给的是 font-size:5px（主图标）/12px（弹出图标），太小；
   详情页底部的圆形按钮里新增了 WhatsApp 的底色（模板原是已停服的 Google+） */
.blog .single-box .part-txt .bottom .share {
  font-size: 16px;
}

.blog .single-box .part-txt .bottom .share .social a {
  font-size: 16px;
  margin-right: 10px;
}

.blog-inner .main-content .other-info .socials a.wa {
  background: #25d366;
}

/* ---------------- 博客卡片标题链接 ----------------
   模板的博客标题是纯 h3（#3c3434，卡片 hover 变红 #ff4545），
   接入后台后标题包了一层 <a>，浏览器默认蓝色很突兀，
   这里让链接继承标题颜色：平时深色、卡片悬停时跟着变红 */
.blog .single-box .part-txt .title a {
  color: inherit;
}

/* ---------------- 商品卡名称单行省略 ----------------
   模板没做截断，长标题换到第二行会把卡片下方的价格/星标/按钮推得不齐。
   .part-txt .name 在商品页里都是卡片的商品名（博客里的评论者姓名在 .txt 下，不受影响）。
   注意必须 display:block：inline-block 在 nowrap 下会撑到内容宽度，省略号不生效 */
.part-txt .name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------------- 商品详情页：真实评论 / 评分选择器 ----------------
   模板里这块原本是写死的示例评论 + 摆设表单，现在接了 /api/reviews，
   这里补齐动态部分需要的样式（头像兜底、评分汇总、星级选择、空态等） */
.shop-details .reviews .zs-avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffe9d0;
  border: 1px solid #dbdbdb;
  border-radius: 5px;
  color: #ff4545;
  font-size: 34px;
  font-weight: 700;
  text-transform: uppercase;
}

/* 评分汇总（评论列表上方） */
.shop-details .reviews .zs-review-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  margin-bottom: 30px;
  border: 1px dashed #dbdbdb;
  border-radius: 10px;
}
.shop-details .reviews .zs-review-score {
  font-size: 26px;
  font-weight: 700;
  color: #3c3434;
}
.shop-details .reviews .zs-review-score-star {
  color: #ff4545;
  font-size: 13px;
}
.shop-details .reviews .zs-review-score-txt {
  font-size: 14px;
  color: #737373;
}

/* 「我的评论」标记 / 删除链接：
   模板给 .part-txt span 统一设了斜体灰字（权重 8 个类），这里用更长链路盖回来 */
.shop-details .dscr-section .box .tab-content .tab-pane .reviews .single-box .part-txt .title h3 .zs-mine {
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  color: #fff;
  background: #01bad4;
  border-radius: 3px;
  padding: 2px 7px;
  margin-left: 8px;
}
.shop-details .dscr-section .box .tab-content .tab-pane .reviews .single-box .part-txt .post-date .zs-review-del {
  margin-left: 10px;
  font-size: 13px;
  font-style: normal;
  color: #ff4545;
}
.shop-details .dscr-section .box .tab-content .tab-pane .reviews .single-box .part-txt .post-date .zs-review-del:hover {
  text-decoration: underline;
}

/* 空态 / 加载更多 */
.shop-details .reviews .zs-review-empty {
  padding: 30px 0 10px;
  color: #999;
  font-size: 15px;
  text-align: center;
}
.shop-details .reviews .zs-review-more {
  display: block;
  text-align: center;
  color: #ff4545;
  font-size: 15px;
}
.shop-details .reviews .zs-review-more:hover {
  text-decoration: underline;
}

/* 星级选择器：模板原来的 <input class="rating"> 依赖 jQuery 插件，改成 Vue 受控 */
.shop-details .post-a-review .zs-rating {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.shop-details .post-a-review .zs-rating i {
  color: #ff4545;
  padding-right: 7px;
  cursor: pointer;
  font-size: 22px;
}
.shop-details .post-a-review .zs-rating i.far {
  color: #dbdbdb;
}
.shop-details .post-a-review .zs-rating .zs-rating-tip {
  margin-left: 6px;
  font-size: 14px;
  color: #737373;
}

/* 未登录提示（评论需要登录） */
.shop-details .post-a-review .zs-review-signin {
  padding: 4px 0 10px;
}
.shop-details .post-a-review .zs-review-signin p {
  margin-bottom: 14px;
}
.shop-details .post-a-review .zs-review-signin button {
  height: 60px;
  line-height: 60px;
  background: #ff4545;
  border: 1px solid #ff4545;
  border-radius: 5px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  padding: 0 34px;
  cursor: pointer;
}
.shop-details .post-a-review .zs-review-signin button:hover {
  background: 0 0;
  color: #ff4545;
}

/* 移动端 topbar（<992px）已整体隐藏（TulyHeader.vue 加了 d-none d-lg-block），
   电话 / Order Status / 登录 / 语言切换都挪进了汉堡按钮的抽屉菜单里 */
@media only screen and (max-width: 991.98px) {
  .header .top-header {
    display: none !important;
  }
}

/* ---------------- 移动端商品卡一排 2 个 ----------------
   模板列是 col-sm-6（≥576px 生效），<576px 时堆成 100% 单列大卡。
   这里把 <576px 的商品列压回 50%，并把半宽卡片内的间距字号收紧。
   覆盖范围：shop-grid / shop-grid-2 商品区、首页 Our Products 标签区、收藏页商品区 */
@media only screen and (max-width: 575.98px) {
  .shop-grid .all-product .row > [class*="col-"],
  .shop-grid-2 .all-product .row > [class*="col-"],
  .our-product .tab-content .tab-pane .row > [class*="col-"] {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
  }

  .shop-grid .all-product .single-box,
  .shop-grid-2 .all-product .single-box,
  .our-product .tab-content .tab-pane .single-box {
    /* 模板小屏 MQ 把卡片钉死 250px 居中（原设计一排 1 个），改 2 列后必须放开 */
    width: auto;
    max-width: 100%;
    padding: 12px;
    margin: 0 0 16px;
  }

  .shop-grid .all-product .single-box .part-img,
  .our-product .tab-content .tab-pane .single-box .part-img {
    height: 130px;
    margin-bottom: 18px;
  }

  .shop-grid .all-product .single-box .part-txt .name,
  .our-product .tab-content .tab-pane .single-box .part-txt .name {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 8px;
  }

  .shop-grid .all-product .single-box .part-txt .price,
  .our-product .tab-content .tab-pane .single-box .part-txt .price {
    font-size: 13px;
    margin-bottom: 10px;
  }

  /* 半宽卡片里「星级 + 加购按钮」一行的按钮略收，避免换行挤爆 */
  .shop-grid .all-product .single-box .part-txt .bottom .add-to-chart,
  .our-product .tab-content .tab-pane .single-box .part-txt .bottom .add-to-chart {
    height: 26px;
    line-height: 26px;
    padding: 0 8px;
    font-size: 11px;
  }

  /* 星级同步收小，保证「星级 + 按钮」在半宽卡里放得下 */
  .shop-grid .all-product .single-box .part-txt .bottom .star i,
  .our-product .tab-content .tab-pane .single-box .part-txt .bottom .star i {
    font-size: 11px;
  }
  .shop-grid .all-product .single-box .part-txt .bottom,
  .our-product .tab-content .tab-pane .single-box .part-txt .bottom {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  /* 「Bundles for a Sale」等横幅卡：模板小屏 MQ 钉死 290px 居中，
     左边缘和上方 2 列产品卡对不齐，这里放开为通栏、与产品卡同边距对齐 */
  .shop .container .row > [class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
  .shop .single-box {
    width: auto;
    max-width: 100%;
    margin: 0 0 20px;
  }
}