/* 全局重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #FFFFFF; /* 页面背景为白色 */
    font-family: sans-serif; /* 默认字体，如果需要特定字体需自行引入 */
    position: relative;
    overflow-x: hidden; /* 防止水平滚动条 */
}

/* 1. 顶部粉色长方形背景 */
.pink-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw; /* 横向无限延长，占满视口宽度 */
    height: 20%; /* 根据图10的高度 */
    background-color: #FCF3F3; /* 颜色FCF3F3 */
    z-index: 1; /* 层级仅仅高于白色背景 */
}

/* 2. 主容器 */
.container {
    position: relative;
    z-index: 2; /* 确保容器内的元素在粉色背景之上 */
    top: 20%; 
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平居中 */
}

/* 3. Cart 标题 */
.cart-title {
    font-family: 'Abril Display', cursive; /* 请根据实际字体替换，这里使用了类似的手写/装饰体 */
    font-size: 90px; /* 根据图9，高度约60，文字通常略小 */
    color: #AE817C; /* 颜色根据图9估算 */
    top: 17%; /* 根据描述，“账单1.png”的顶部为y=191（相对于粉色顶部），这里设置了标题到内容的间距 */
    z-index: 3; /* 层级高于粉色背景，低于账单图片 */
}

/* 4. 账单容器 (基于图7，宽度比例1452:1728) */
.bill-container {
    position: relative;
    width: 84.03%; /* 1452 / 1728 ≈ 0.8403 */
    /* height: auto; /* height自适应 */
    display: flex;
    justify-content: center; /* 确保内容在容器内居中（如果需要） */
}

.bill-image {
    width: 100%; /* 占满容器宽度 */
    height: auto; /* 高度自适应，保持比例 */
    display: block; /* 消除图片底部间隙 */
    position: relative;
    z-index: 4; /* 层级高于Cart文字 */
}

/* ... 前面的代码保持不变 ... */

.group5 {
    position: absolute;
    top: 3%; 
    left: 2%;
    width: 6.45%; 
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10; 
    /* 新增：去除链接下划线，确保点击区域正常 */
    text-decoration: none; 
    cursor: pointer;
}

.group5 img {
    top: 0;
    width: 78.3%;
    height: auto;
    display: block;
}

.home-text {
    margin-top: 15px; 
    font-family: 'Abril Display', cursive;
    font-size: 40px;
    color: #030303;
    transform: rotate(-25deg); 
    white-space: nowrap;
}

.group6 {
    position: absolute;
    top: 28%; 
    left: 2%;
    width: 7.5%; 
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10; 
    /* 新增：去除链接下划线，确保点击区域正常 */
    text-decoration: none;
    cursor: pointer;
}

.group6 img {
    top: 0;
    width: 74.2%;
    height: auto;
    transform: rotate(-30deg); 
    display: block;
}

.shop-text {
    margin-top: 15px; 
    font-family: 'Abril Display', cursive;
    font-size: 40px;
    color: #563114;
    transform: rotate(-30deg); 
    white-space: nowrap;
}

/* ... 后面的代码保持不变 ... */

/* 7. 结账按钮 (图2, 图5) */
.checkout-button {
    position: absolute;
    /* left: 60px; /* 假设与账单左侧对齐，根据图2描述 */
    left: 0;
    bottom: 0; /* 根据图2位置，稍微移出账单图片底部 */
    width: 25%; /* 根据图2尺寸 */
    height: auto; /* 根据图2尺寸 */
    z-index: 5;
}

/* 5. 账单上的图标 (绝对定位) */
.bill-icon {
    position: absolute;
    z-index: 5;
}

/* Item 图标 (图1) */
.item-icon {
    top: 20%; /* 根据图1位置估算 */
    left: 10%; /* 根据图1位置估算 */
    width: 4.4%; /* 根据图1尺寸 */
    height: auto; /* 根据图1尺寸 */
}

/* Qty 图标 (图3) */
.qty-icon {
    top: 20%; /* 根据图3位置估算 */
    right: 30%; /* 居中 */
    transform: translateX(-50%); /* 精确居中 */
    width: 3.16%; /* 根据图3尺寸 */
    height: auto; /* 根据图3尺寸 */
}

/* Cost 图标 (图4) */
.cost-icon {
    top: 20%; /* 根据图4位置估算 */
    right: 10%; /* 根据图4位置估算 */
    width: 4.27%; /* 根据图4尺寸 */
    height: auto; /* 根据图4尺寸 */
}

/* Total 图标 (图6) */
.total-icon {
    top: 63.4%; /* 根据图6位置估算 */
    left: 10%; /* 根据图6位置估算 */
    width: 5.3%; /* 根据图6尺寸 */
    height: auto; /* 根据图6尺寸 */
}

/* 6. 账单上的线条 (图7, 图8) */
.bill-line {
    position: absolute;
    width: 80%; /* 线条长度，根据图示调整 */
    height: 1.5px;
    background-color: #000000;
    left: 10%; /* 水平居中 */
    z-index: 5;
}

.line-1 {
    top: 25%; /* 根据图7位置 */
}

.line-2 {
    top: 68%; /* 根据图8位置 */
}