/* =========================================================
基础变量
========================================================= */

#yunassie-home-solutions-v5{

  --c1:#b36f7a;
  --c1-dark:#8f5360;
  --c1-soft:#fbf4f5;

  --c2:#c57a56;
  --c2-dark:#9d5c3e;
  --c2-soft:#fcf5f0;

  --c3:#617e91;
  --c3-dark:#466579;
  --c3-soft:#f3f7f9;

  --c4:#688578;
  --c4-dark:#4f6c60;
  --c4-soft:#f3f7f5;

  --dark:#202124;
  --text:#68696b;
  --line:#e9e9ea;

  width:100%;
  margin:0;

  padding:
    72px 30px
    88px;

  background:#fff;

  color:var(--dark);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  overflow:hidden;
}


#yunassie-home-solutions-v5 *,
#yunassie-home-solutions-v5 *::before,
#yunassie-home-solutions-v5 *::after{
  box-sizing:border-box;
}


#yunassie-home-solutions-v5 a{
  text-decoration:none !important;
}


/* =========================================================
CONTAINER
========================================================= */

#yunassie-home-solutions-v5 .yhsv5-container{

  width:100%;
  max-width:1450px;

  margin:0 auto;
}


/* =========================================================
顶部小标题
========================================================= */

#yunassie-home-solutions-v5 .yhsv5-eyebrow{

  display:flex;

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

  gap:13px;

  margin:
    0 auto
    14px;

  color:#777276;

  font-size:10px;
  font-weight:700;

  letter-spacing:3px;
}


#yunassie-home-solutions-v5 .yhsv5-eyebrow span{

  width:38px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--c1),
      var(--c3),
      transparent
    );
}


/* =========================================================
标题
========================================================= */

#yunassie-home-solutions-v5 .yhsv5-heading{

  max-width:900px;

  margin:
    0 auto
    43px;

  text-align:center;
}


#yunassie-home-solutions-v5 .yhsv5-heading h2{

  margin:0;

  color:#222326;

  font-size:
    clamp(
      37px,
      3.5vw,
      52px
    );

  line-height:1.12;

  letter-spacing:-1.5px;

  font-weight:400;
}


#yunassie-home-solutions-v5 .yhsv5-heading p{

  max-width:650px;

  margin:
    15px auto
    0;

  color:#707174;

  font-size:14px;

  line-height:1.7;
}


/* =========================================================
4张卡
========================================================= */

#yunassie-home-solutions-v5 .yhsv5-grid{

  width:100%;

  display:grid;

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

  gap:17px;
}


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

#yunassie-home-solutions-v5 .yhsv5-card{

  --accent:#777;
  --accent-dark:#555;
  --accent-soft:#fafafa;

  position:relative;

  min-width:0;
  min-height:515px;

  padding:
    29px 25px
    25px;

  display:flex;

  flex-direction:column;

  overflow:hidden;

  background:#fff;

  border:
    1px solid
    #e8e8e9;

  border-radius:18px;

  box-shadow:
    0 10px 34px
    rgba(20,20,20,.045);

  color:var(--dark);

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}


/* =========================================================
四张卡颜色
========================================================= */

#yunassie-home-solutions-v5 .yhsv5-card-01{

  --accent:var(--c1);
  --accent-dark:var(--c1-dark);
  --accent-soft:var(--c1-soft);
}


#yunassie-home-solutions-v5 .yhsv5-card-02{

  --accent:var(--c2);
  --accent-dark:var(--c2-dark);
  --accent-soft:var(--c2-soft);
}


#yunassie-home-solutions-v5 .yhsv5-card-03{

  --accent:var(--c3);
  --accent-dark:var(--c3-dark);
  --accent-soft:var(--c3-soft);
}


#yunassie-home-solutions-v5 .yhsv5-card-04{

  --accent:var(--c4);
  --accent-dark:var(--c4-dark);
  --accent-soft:var(--c4-soft);
}


/* =========================================================
顶部颜色线
========================================================= */

#yunassie-home-solutions-v5 .yhsv5-card::before{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:4px;

  background:var(--accent);
}


/* =========================================================
01 购物卡重点强化
========================================================= */

#yunassie-home-solutions-v5 .yhsv5-card-01{

  border:
    2px solid
    var(--c1);

  background:
    linear-gradient(
      150deg,
      #ffffff 0%,
      #ffffff 48%,
      #fbf1f3 100%
    );

  box-shadow:
    0 17px 46px
    rgba(179,111,122,.14);

  transform:
    translateY(-5px);
}


/* =========================================================
HOVER
========================================================= */

#yunassie-home-solutions-v5 .yhsv5-card:hover{

  transform:
    translateY(-8px);

  border-color:
    var(--accent);

  box-shadow:
    0 22px 54px
    rgba(30,30,30,.10);

  background:
    linear-gradient(
      150deg,
      #ffffff 0%,
      #ffffff 62%,
      var(--accent-soft) 100%
    );
}


#yunassie-home-solutions-v5 .yhsv5-card-01:hover{

  transform:
    translateY(-10px)
    scale(1.008);
}


/* =========================================================
编号
========================================================= */

#yunassie-home-solutions-v5 .yhsv5-number{

  position:absolute;

  top:25px;
  right:25px;

  color:var(--accent);

  font-size:10px;

  font-weight:700;

  letter-spacing:1.5px;

  opacity:.65;
}


/* =========================================================
ICON｜高端具象 SVG 图标
原则：不看文字也能快速理解业务
无 Emoji / 无卡通底框 / 无渐变 / 无立体阴影
========================================================= */

#yunassie-home-solutions-v5 .yhsv5-icon{
  width:62px;
  height:62px;
  margin-bottom:21px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  background:transparent;
  border:0;
  border-radius:0;
  color:var(--accent-dark);
  transition:
    transform .32s ease,
    color .32s ease;
}

#yunassie-home-solutions-v5 .yhsv5-icon svg{
  width:52px;
  height:52px;
  display:block;
  overflow:visible;
}

#yunassie-home-solutions-v5 .yhsv5-icon svg *{
  vector-effect:non-scaling-stroke;
}

#yunassie-home-solutions-v5 .yhsv5-card:hover .yhsv5-icon{
  transform:translateY(-3px);
  color:var(--accent);
}

/* =========================================================
客户身份
========================================================= */

#yunassie-home-solutions-v5 .yhsv5-identity{

  margin-bottom:9px;

  color:
    var(--accent-dark);

  font-size:9px;

  font-weight:800;

  letter-spacing:1.25px;

  text-transform:uppercase;
}


/* =========================================================
卡片标题
========================================================= */

#yunassie-home-solutions-v5 .yhsv5-card h3{

  margin:
    0 0
    9px;

  color:#222326;

  font-size:23px;

  line-height:1.25;

  font-weight:500;

  letter-spacing:-.4px;
}


/* =========================================================
MOQ
========================================================= */

#yunassie-home-solutions-v5 .yhsv5-moq{

  min-height:20px;

  margin-bottom:17px;

  color:
    var(--accent);

  font-size:9px;

  line-height:1.5;

  font-weight:800;

  letter-spacing:1.2px;

  text-transform:uppercase;
}


/* =========================================================
描述
========================================================= */

#yunassie-home-solutions-v5 .yhsv5-desc{

  min-height:105px;

  margin:
    0 0
    16px;

  color:#66686a;

  font-size:12px;

  line-height:1.7;
}


/* =========================================================
卖点
========================================================= */

#yunassie-home-solutions-v5 .yhsv5-list{

  list-style:none;

  padding:0;

  margin:
    0 0
    22px;
}


#yunassie-home-solutions-v5 .yhsv5-list li{

  position:relative;

  padding:
    5px 0
    5px 25px;

  color:#57595b;

  font-size:11px;

  line-height:1.45;
}


#yunassie-home-solutions-v5 .yhsv5-list li::before{

  content:"✓";

  position:absolute;

  left:0;
  top:5px;

  width:17px;
  height:17px;

  display:flex;

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

  border-radius:50%;

  background:
    var(--accent-soft);

  color:
    var(--accent-dark);

  font-size:9px;

  font-weight:800;
}


/* =========================================================
普通按钮
02 / 03 / 04
========================================================= */

#yunassie-home-solutions-v5 .yhsv5-button{

  width:100%;

  min-height:57px;

  margin-top:auto;

  padding:
    0 16px;

  display:flex;

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

  gap:12px;

  border-radius:8px;

  border:
    1px solid
    var(--accent-dark);

  background:
    var(--accent-dark);

  color:#fff !important;

  font-size:9px;

  font-weight:800;

  letter-spacing:.85px;

  box-shadow:
    0 9px 22px
    rgba(0,0,0,.09);

  transition:
    transform .28s ease,
    background .28s ease,
    box-shadow .28s ease;
}


#yunassie-home-solutions-v5 .yhsv5-button b{

  font-size:18px;

  font-weight:400;

  transition:
    transform .28s ease;
}


#yunassie-home-solutions-v5
.yhsv5-button:hover{

  transform:
    translateY(-2px);

  box-shadow:
    0 13px 27px
    rgba(0,0,0,.14);
}


#yunassie-home-solutions-v5
.yhsv5-button:hover b{

  transform:
    translateX(5px);
}


/* =========================================================
01 购买卡：两个按钮
========================================================= */

#yunassie-home-solutions-v5 .yhsv5-shop-actions{

  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:8px;

  margin-top:auto;
}


/* READY STOCK */

#yunassie-home-solutions-v5 .yhsv5-ready-btn{

  min-height:61px;

  padding:
    10px 12px;

  display:flex;

  flex-direction:column;

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

  border-radius:8px;

  background:
    var(--c1-dark);

  border:
    1px solid
    var(--c1-dark);

  color:#fff !important;

  box-shadow:
    0 9px 22px
    rgba(143,83,96,.17);

  transition:
    transform .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}


#yunassie-home-solutions-v5
.yhsv5-ready-btn:hover{

  transform:
    translateY(-2px);

  background:#7d4652;

  box-shadow:
    0 13px 27px
    rgba(143,83,96,.25);
}


/* SAMPLE PRODUCTS */

#yunassie-home-solutions-v5 .yhsv5-sample-btn{

  min-height:61px;

  padding:
    10px 12px;

  display:flex;

  flex-direction:column;

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

  border-radius:8px;

  background:#fff;

  border:
    1px solid
    #d8b9bf;

  color:
    var(--c1-dark) !important;

  transition:
    transform .28s ease,
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}


#yunassie-home-solutions-v5
.yhsv5-sample-btn:hover{

  transform:
    translateY(-2px);

  background:
    var(--c1-soft);

  border-color:
    var(--c1);

  box-shadow:
    0 10px 22px
    rgba(143,83,96,.09);
}


/* 购物按钮文字 */

#yunassie-home-solutions-v5
.yhsv5-shop-actions strong{

  display:block;

  margin-bottom:3px;

  color:inherit;

  font-size:9px;

  line-height:1.25;

  font-weight:800;

  letter-spacing:.5px;
}


#yunassie-home-solutions-v5
.yhsv5-shop-actions small{

  color:inherit;

  opacity:.76;

  font-size:8px;

  line-height:1.3;
}


/* =========================================================
代理按钮呼吸效果
========================================================= */

#yunassie-home-solutions-v5
.yhsv5-card-04
.yhsv5-button{

  animation:
    yhsv5DistributorBreath
    2.2s
    ease-in-out
    infinite;
}


@keyframes yhsv5DistributorBreath{

  0%,100%{

    transform:scale(1);

    box-shadow:
      0 9px 22px
      rgba(79,108,96,.16);
  }


  50%{

    transform:scale(1.015);

    box-shadow:
      0 14px 30px
      rgba(79,108,96,.30);
  }

}


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

@media(max-width:1100px){

  #yunassie-home-solutions-v5 .yhsv5-grid{

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


  #yunassie-home-solutions-v5 .yhsv5-card{

    min-height:485px;
  }


  #yunassie-home-solutions-v5 .yhsv5-card-01{

    transform:none;
  }

}


/* =========================================================
MOBILE
========================================================= */

@media(max-width:650px){

  #yunassie-home-solutions-v5{

    padding:
      50px 16px
      62px;
  }


  #yunassie-home-solutions-v5 .yhsv5-heading{

    margin-bottom:28px;

    text-align:left;
  }


  #yunassie-home-solutions-v5 .yhsv5-eyebrow{

    justify-content:flex-start;
  }


  #yunassie-home-solutions-v5
  .yhsv5-eyebrow span:last-child{

    display:none;
  }


  #yunassie-home-solutions-v5
  .yhsv5-heading h2{

    font-size:34px;
  }


  #yunassie-home-solutions-v5
  .yhsv5-heading p{

    font-size:13px;
  }


  #yunassie-home-solutions-v5 .yhsv5-grid{

    grid-template-columns:1fr;

    gap:17px;
  }


  #yunassie-home-solutions-v5 .yhsv5-card{

    min-height:auto;

    padding:
      27px 21px
      22px;
  }


  #yunassie-home-solutions-v5 .yhsv5-desc{

    min-height:auto;
  }


  #yunassie-home-solutions-v5 .yhsv5-shop-actions{

    grid-template-columns:
      1fr 1fr;
  }

}


/* 超小屏 */

@media(max-width:390px){

  #yunassie-home-solutions-v5
  .yhsv5-shop-actions{

    grid-template-columns:1fr;
  }

}


/* =========================================================
减少动画
========================================================= */

@media(prefers-reduced-motion:reduce){

  #yunassie-home-solutions-v5 *,
  #yunassie-home-solutions-v5 *::before,
  #yunassie-home-solutions-v5 *::after{

    animation:none !important;

    transition:none !important;
  }

}


/* =========================================================
MOBILE WIDTH FIX｜移动端防止模块超过手机屏幕
只影响 <=650px，不改变PC端
========================================================= */
@media(max-width:650px){

  #yunassie-home-solutions-v5{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:46px 14px 58px !important;
    overflow-x:hidden !important;
  }

  #yunassie-home-solutions-v5 .yhsv5-container,
  #yunassie-home-solutions-v5 .yhsv5-grid,
  #yunassie-home-solutions-v5 .yhsv5-card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  #yunassie-home-solutions-v5 .yhsv5-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:16px !important;
  }

  #yunassie-home-solutions-v5 .yhsv5-card{
    margin:0 !important;
    transform:none !important;
    padding:25px 18px 20px !important;
  }

  #yunassie-home-solutions-v5 .yhsv5-heading{
    width:100% !important;
    max-width:100% !important;
  }

  #yunassie-home-solutions-v5 .yhsv5-heading h2{
    max-width:100% !important;
    font-size:clamp(29px,9vw,34px) !important;
    line-height:1.12 !important;
    letter-spacing:-1px !important;
    overflow-wrap:anywhere;
  }

  #yunassie-home-solutions-v5 .yhsv5-heading p,
  #yunassie-home-solutions-v5 .yhsv5-desc,
  #yunassie-home-solutions-v5 .yhsv5-list,
  #yunassie-home-solutions-v5 .yhsv5-shop-actions,
  #yunassie-home-solutions-v5 .yhsv5-button{
    max-width:100% !important;
    min-width:0 !important;
  }

  /* 两个购买按钮手机上仍并排，但允许内容安全收缩 */
  #yunassie-home-solutions-v5 .yhsv5-shop-actions{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:8px !important;
  }

  #yunassie-home-solutions-v5 .yhsv5-ready-btn,
  #yunassie-home-solutions-v5 .yhsv5-sample-btn{
    width:100% !important;
    min-width:0 !important;
    padding:10px 9px !important;
    overflow:hidden;
  }

  #yunassie-home-solutions-v5 .yhsv5-shop-actions strong,
  #yunassie-home-solutions-v5 .yhsv5-shop-actions small{
    white-space:normal !important;
    overflow-wrap:anywhere;
  }
}

/* 很窄的手机：两个按钮上下排，彻底避免横向溢出 */
@media(max-width:390px){
  #yunassie-home-solutions-v5{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  #yunassie-home-solutions-v5 .yhsv5-shop-actions{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
MOBILE NARROW WIDTH FIX V2
手机端：整体内容区收窄并居中
只影响 <=650px；PC端不变
========================================================= */
@media(max-width:650px){

  /* 外层仍保持100%，避免页面结构异常 */
  #yunassie-home-solutions-v5{
    width:100% !important;
    max-width:100% !important;
    padding:46px 0 58px !important;
    overflow-x:hidden !important;
  }

  /* 真正控制手机端模块宽度 */
  #yunassie-home-solutions-v5 .yhsv5-container{
    width:calc(100% - 36px) !important;
    max-width:430px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:0 !important;
  }

  #yunassie-home-solutions-v5 .yhsv5-grid{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:16px !important;
    margin:0 !important;
  }

  #yunassie-home-solutions-v5 .yhsv5-card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:25px 18px 20px !important;
    transform:none !important;
  }

  #yunassie-home-solutions-v5 .yhsv5-heading,
  #yunassie-home-solutions-v5 .yhsv5-eyebrow{
    width:100% !important;
    max-width:100% !important;
  }

  #yunassie-home-solutions-v5 .yhsv5-shop-actions{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:8px !important;
  }

  #yunassie-home-solutions-v5 .yhsv5-ready-btn,
  #yunassie-home-solutions-v5 .yhsv5-sample-btn,
  #yunassie-home-solutions-v5 .yhsv5-button{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
}

/* 超窄手机再多留一点安全边距 */
@media(max-width:390px){

  #yunassie-home-solutions-v5 .yhsv5-container{
    width:calc(100% - 28px) !important;
  }

  #yunassie-home-solutions-v5 .yhsv5-shop-actions{
    grid-template-columns:1fr !important;
  }
}