/* ============================================================
   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;
}

/* ============================================================
   商品卡配色对齐 DOYAM 主题
   模板的商品卡用的是一整套「粉色 / 蜜桃色」色板，和本站红白灰主题不搭：
     卡片底 #ffebff、列表页外框 #ffcfff、图片区 #ffdfff、悬停底 #ffe9d0
   参考站是「白卡 + 浅灰描边 + 品牌红点缀」，这里统一成：
     卡片底 → #fff，底板/外框 → #f5f7f9，描边 → #e7ebef
   悬停【不换底色】，只做两个中性反馈：
     - 大卡片：底色保持白色，加一层浅投影让卡片「浮」起来
     - 侧栏小缩略图：底色转极浅灰
   （加购按钮变红、侧边功能按钮滑出等本来就是模板自带反馈，保留）
   ============================================================ */

/* ---------------- 1. 卡片悬停（网格页 / 首页商品区 / 详情页推荐位） ---------------- */
.our-product .tab-content .tab-pane .single-box:hover,
.best-seller .best-sale .tab-content .tab-pane .tab-slider .single-box:hover,
.products .single-part .single-box:hover,
.shop-grid .all-product .single-box:hover,
.shop-details .releted-products .releted-slider .single-box:hover {
  background: #fff;
  border-color: #dbdbdb;
  box-shadow: 0 10px 26px rgba(37, 49, 58, 0.12);
}

/* 卡片背后铺满整卡的粉色底板（:after + z-index:-1）→ 浅灰 */
.top-category .tab-content .tab-pane .single-box:after,
.best-seller-2 .tab-content .tab-pane .single-box:after,
.products.products-2 .single-part .single-box:after,
.shop-grid-2 .all-product .single-box:after {
  background: #f5f7f9;
}

/* ---------------- 2. 侧栏小缩略图悬停底色 ---------------- */
.best-seller .sidebar ul li:hover .part-img,
.shop-grid-2 .side-bar .feature-products ul li:hover .part-img,
.blog-inner .sidebar .sale-products ul li:hover .part-img {
  background: #f5f7f9;
  border-color: #e7ebef;
}

/* ---------------- 3. 商品列表页（shop-list / shop-list-2）卡片 ----------------
   模板 list-1 是「粉色外框 + 粉内卡 + 粉图片区」，list-2 是白框卡片、悬停整卡变粉，
   这里统一成：浅灰外框 + 白卡 + 浅灰描边；悬停同样不换底色（list-1 沿用模板自带的
   投影，list-2 由下面这条补一层投影） */
.shop-list .lists .single-box {
  background: #f5f7f9;
}

.shop-list .lists .single-box .box,
.shop-list.shop-list-2 .lists .single-box .box {
  background: #fff;
  border: 1px solid #e7ebef;
}

.shop-list .lists .single-box .box .part-img,
.shop-list.shop-list-2 .lists .single-box .box .part-img {
  background: #fff;
  border-color: #e7ebef;
}

/* list-2 悬停：沿用模板会整卡铺粉底，这里改成白底 + 投影
   （必须带 :hover 才压得住模板那条同结构的规则） */
.shop-list.shop-list-2 .lists .single-box:hover .box {
  background: #fff;
  border-color: #e7ebef;
  box-shadow: 0 10px 26px rgba(37, 49, 58, 0.1);
}

.shop-list.shop-list-2 .lists .single-box:hover .box .part-img {
  background: #fff;
  border-color: #e7ebef;
}

/* ---------------- 商品列表页（shop-list / shop-list-2）卡片图片 ----------------
   模板给左列图片容器 .part-img 设的是 height:100% + 图片 max-height:100%，
   靠「flex 子项被拉伸后有确定高度」才能生效；但这个百分比在卡片高度由图片
   自身撑开时是不确定的，max-height:100% 直接失效 → 500×500 的真实商品图按原
   始尺寸渲染，横向溢出左列、压住右侧的价格和「add to cart」按钮（网格页因为
   模板写死了 155px 定高，所以没问题）。
   这里改成：左列相对定位，.part-img 绝对定位撑满整列高度，图片绝对居中 +
   max-width/max-height 等比缩放，容器 overflow:hidden 兜底，
   任何尺寸（横图/竖图/方图）的商品图都完整显示且不会溢出。
   <768px 沿用模板自带的 140px 定高规则，不做覆盖 */
@media only screen and (min-width: 768px) {
  .shop-list .lists .single-box .box .row > [class*="col-"]:first-child {
    position: relative;
  }

  .shop-list .lists .single-box .box .part-img,
  .shop-list.shop-list-2 .lists .single-box .box .part-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-right: 0;
    overflow: hidden;
  }

  .shop-list .lists .single-box .box .part-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    padding: 24px;
    transform: translate(-50%, -50%);
  }
}

/* ---------------- 商品详情页图集（左侧缩略图 / 主图） ----------------
   模板里缩略图容器固定 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;
  }
}