/**
 * 长顺资讯网品牌卡
 * Release: 20260909-brand-r1
 *
 * DOM source:
 *   .brand-card-prod
 *     .brand-card-prod__status
 *     .brand-card-prod__content
 *       .brand-card-prod__name
 *     .brand-card-prod__actions
 *
 * 本文件是品牌卡唯一视觉实现。
 */


/* =========================================================
   GRID
   ========================================================= */

.brand-grid{
  display:grid !important;

  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;

  gap:14px !important;
}


/* =========================================================
   CARD
   ========================================================= */

.brand-card.brand-card-prod{
  position:relative !important;

  box-sizing:border-box !important;

  min-width:0 !important;

  height:176px !important;
  min-height:176px !important;
  max-height:176px !important;

  margin:0 !important;

  padding:
    14px
    16px
    15px !important;

  display:grid !important;

  grid-template-rows:
    30px
    minmax(0,1fr)
    auto !important;

  gap:4px !important;

  overflow:hidden !important;

  border:
    1px solid
    rgba(164,43,53,.78) !important;

  border-radius:
    12px !important;

  background:
    radial-gradient(
      circle at 50% -20%,
      rgba(135,19,28,.32),
      transparent 62%
    ),
    linear-gradient(
      155deg,
      #4a0910 0%,
      #310609 55%,
      #260407 100%
    ) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.025),
    0 8px 22px
      rgba(0,0,0,.14) !important;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}


/* HOT 品牌只增加边框，不改变内部布局 */

.brand-card.brand-card-prod.is-hot{
  border-color:
    rgba(212,175,55,.95) !important;

  box-shadow:
    0 0 0 1px
      rgba(212,175,55,.07),
    0 0 18px
      rgba(212,175,55,.06),
    inset 0 1px 0
      rgba(255,230,140,.05) !important;
}


/* =========================================================
   STATUS
   ========================================================= */

.brand-card-prod__status{
  min-width:0;

  display:flex;

  align-items:flex-start;
  justify-content:flex-end;

  pointer-events:none;
}


.brand-card-prod__badge{
  position:static !important;

  transform:none !important;

  box-sizing:border-box !important;

  width:auto !important;

  min-width:70px !important;

  height:27px !important;

  margin:0 !important;

  padding:
    0 10px !important;

  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  gap:4px !important;

  border-radius:
    999px !important;

  font-size:
    11px !important;

  font-weight:
    850 !important;

  line-height:
    1 !important;

  letter-spacing:
    .2px !important;
}


.brand-card-prod__badge.hot{
  color:
    #fff4d2 !important;

  border:
    1px solid
    rgba(255,118,125,.68) !important;

  background:
    linear-gradient(
      180deg,
      #ff5961 0%,
      #db1824 100%
    ) !important;

  box-shadow:
    0 4px 10px
    rgba(200,20,30,.22) !important;
}


.brand-card-prod__badge.new{
  color:
    #3b1700 !important;

  border:
    1px solid
    #f5d770 !important;

  background:
    linear-gradient(
      180deg,
      #ffe68a,
      #e7b932
    ) !important;
}


/* =========================================================
   BRAND NAME
   ========================================================= */

.brand-card-prod__content{
  min-width:0;

  display:flex;

  align-items:center;
  justify-content:center;

  padding:
    0 6px 3px;
}


.brand-card-prod__name{
  width:100%;

  margin:0;

  padding:0;

  color:
    #fff8ea;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;

  font-size:
    clamp(
      23px,
      1.4vw,
      29px
    );

  font-weight:
    800;

  line-height:
    1.18;

  letter-spacing:
    .1px;

  text-align:center;

  overflow-wrap:anywhere;

  text-shadow:
    0 2px 7px
    rgba(0,0,0,.4);
}


/* =========================================================
   ACTIONS
   ========================================================= */

.brand-card-prod__actions{
  min-width:0 !important;

  margin:0 !important;

  padding:0 !important;

  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:7px !important;
}


.brand-card-prod__actions .line-btn{
  box-sizing:border-box !important;

  min-width:0 !important;

  height:43px !important;
  min-height:43px !important;

  margin:0 !important;

  padding:
    0 9px !important;

  border-radius:
    8px !important;

  font-size:
    13px !important;

  font-weight:
    750 !important;

  line-height:
    1 !important;
}


.brand-card-prod__actions .line-btn.center{
  position:relative;

  grid-column:
    1 / -1 !important;

  width:100% !important;

  padding:
    0
    44px
    0
    16px !important;

  color:
    #381500 !important;

  border:
    1px solid
    #f5d067 !important;

  background:
    linear-gradient(
      180deg,
      #ffe372 0%,
      #efbd31 58%,
      #d89d12 100%
    ) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.58),
    0 4px 10px
      rgba(0,0,0,.14) !important;

  font-size:
    15px !important;

  font-weight:
    850 !important;
}


.brand-card-prod__actions
.line-btn.center::after{
  content:"›";

  position:absolute;

  right:11px;
  top:50%;

  transform:
    translateY(-52%);

  width:25px;
  height:25px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:
    #552000;

  background:
    rgba(92,37,0,.15);

  font-size:
    23px;

  font-weight:
    900;

  line-height:1;
}


@media (hover:hover) and (pointer:fine){

  .brand-card.brand-card-prod:hover{
    transform:
      translateY(-2px) !important;

    border-color:
      rgba(215,175,53,.92) !important;

    box-shadow:
      0 11px 27px
        rgba(0,0,0,.22),
      0 0 18px
        rgba(212,175,55,.06) !important;
  }


  .brand-card-prod__actions
  .line-btn.center:hover{
    filter:
      brightness(1.045);
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media(
  min-width:761px
) and (
  max-width:1180px
){

  .brand-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;
  }

}


/* =========================================================
   H5
   ========================================================= */

@media(max-width:760px){

  .brand-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:
      8px !important;
  }


  .brand-card.brand-card-prod{
    height:
      136px !important;

    min-height:
      136px !important;

    max-height:
      136px !important;

    padding:
      8px
      8px
      9px !important;

    grid-template-rows:
      23px
      minmax(0,1fr)
      auto !important;

    gap:
      2px !important;

    border-radius:
      9px !important;
  }


  .brand-card-prod__badge{
    min-width:
      50px !important;

    height:
      21px !important;

    padding:
      0 7px !important;

    gap:
      2px !important;

    font-size:
      9px !important;
  }


  .brand-card-prod__content{
    padding:
      0 2px 2px;
  }


  .brand-card-prod__name{
    font-size:
      clamp(
        14px,
        4vw,
        17px
      );

    line-height:
      1.18;
  }


  .brand-card-prod__actions{
    gap:
      5px !important;
  }


  .brand-card-prod__actions
  .line-btn{
    height:
      35px !important;

    min-height:
      35px !important;

    padding:
      0 5px !important;

    border-radius:
      6px !important;

    font-size:
      10px !important;
  }


  .brand-card-prod__actions
  .line-btn.center{
    padding:
      0
      29px
      0
      7px !important;

    font-size:
      11px !important;
  }


  .brand-card-prod__actions
  .line-btn.center::after{
    right:
      5px;

    width:
      20px;

    height:
      20px;

    font-size:
      18px;
  }

}


/* =========================================================
   VERY SMALL H5
   ========================================================= */

@media(max-width:360px){

  .brand-grid{
    gap:
      6px !important;
  }


  .brand-card.brand-card-prod{
    padding-left:
      6px !important;

    padding-right:
      6px !important;
  }


  .brand-card-prod__name{
    font-size:
      13px;
  }

}