/* pages/store/info.wxss */
/* =========================================
   父容器基准
   ========================================= */
   .card-container {
    position: relative; /* 关键：作为绝对定位子元素的基准点 */
    
    /* 以下仅为演示容器样式，实际使用中请替换为您自己的容器样式 */
    width: 300px;
    height: 150px;
    background-color: #f5f5f5;
    border-radius: 12px;
    overflow: hidden; /* 确保角标不会溢出圆角容器 */
    margin: 20px;
}

/* =========================================
   红色角标样式核心代码
   ========================================= */
.price-tag-badge {

    width: 160rpx;
    /* 颜色与文本 */
    background-color: #C35D4B; /* 图片中的红色背景 */
    color: #FFFFFF;            /* 图片中的白色文本 */
    font-size: 12px;           /* 小字号 */
    font-weight: 500;

    /* 尺寸与间距 */
    /* 上右下左 padding。左侧给尖角留出更多空间视觉上更平衡 */
    padding: 4px 8px 4px 12px; 
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;

    /* --- 核心形状实现 --- */
    /* 使用 polygon 函数绘制五边形形状 */
    /* 坐标点顺序：左上(内缩) -> 右上 -> 右下 -> 左下(内缩) -> 最左尖点(垂直居中) */
    /* 10px 控制尖角的深度，可以根据需要调整这个数值 */
    clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 10px 100%, 0% 50%);
    
    /* 兼容性写法 (可选，针对旧版浏览器) */
    -webkit-clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 10px 100%, 0% 50%);
}

.content-text {
  /* 关键属性：保留空白符和换行符，但是允许自动换行 */
  white-space: pre-wrap;
  text-align: left;
  
  /* 可选：防止长单词（如长 URL）溢出容器 */
  word-break: break-all; 
}

.grid {
  display: grid;
  grid-template-columns: 47% 47%;
  grid-row-gap: 16px;
  grid-column-gap: 16px;
}

.grid-3 {
  display: grid;
  grid-template-columns: 30% 30% 30%;
  grid-row-gap: 16px;
  grid-column-gap: 16px;
}

.bottom {
  position: fixed;
  bottom:0;
  left:0;
  right: 0;
  padding: 32rpx;
  background-color: white;
}