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

body {
    /* 1. 背景设置：完全占满网页，最底层 */
    background-image: url('image/桌子背景.jpg');
    background-size: cover; /* 完全覆盖 */
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh; /* 最小高度为视口高度 */
    position: relative; /* 为绝对定位提供基准 */
    overflow: hidden; /* 防止内容溢出 */
}

/* 搜索栏 Group 6 样式 */
.search-group {
    position: absolute;
    top: 4%; /* 距离顶部约 5% */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 精确居中 */
    width: 65.39%; /* 1130 / 1728 ≈ 0.6539 */
    z-index: 9; /* 顶层 */
}

.search-input {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 4%; /* 高度比例：60 / 1130 ≈ 0.0531 (为了保持宽高比，这里用padding-top模拟高度) */
    background-color: white;
    /* 内部描边 */
    border: 1px solid #CCCBCB;
    box-sizing: content-box; /* 关键：让 border 在宽高内部 */
}

.search-text {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translate(-50%, -50%);
    font-family: 'Abril Display', sans-serif;
    font-weight: 700; /* 加粗 */
    font-size: 57px; /* 20px / 1728px ≈ 0.01157 */
    color: #CCCBCB;
    white-space: nowrap; /* 防止文字换行 */
}


/* 修复 Group 5 的布局和旋转 */
.group5 {
    position: absolute;
    top: 1.5%; /* 距离顶部约 5% */
    left: 16.2%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10; /* 顶层 */
    text-decoration: none; 
    cursor: pointer;
}

.group5 img {
    /* 修改开始：Group 5 自适应大小 */
    /* 假设原始高度为 100px，页面总高 1117px，比例约为 9% */
    height: 10.5vh;
    width: auto;
    display: block;
    /* 修改结束 */
}
.home-text {
    margin-top: 15px; /* 增加这个间距，解决重叠问题 */
    font-family: 'Abril Display', cursive;
    font-size: 45px;
    color: #030303;
    transform: rotate(-25deg); /* 逆时针旋转 25 度 */
    white-space: nowrap;
}



/* --- 核心修改点：蛋糕容器 (cake-container) --- */
/* 要求：宽:高 = 1265:696 (约 55.02%) */
.cake-container {
    /* 
        关键技术：利用 padding-bottom/pt 维持宽高比
        padding 百分比是相对于父元素宽度计算的。
        696 / 1265 = 0.550197 ≈ 55.02%
    */
    position: absolute;
    top: 20%; 
    left: 9.2%; 
    width: 73.2%; /* 你的设定宽度 */
    height: 0; /* 高度为0 */
    padding-top: 40.28%; /* 73.2% * (696/1265) = 40.28% 
                             或者直接使用 padding-top: 55.02% 如果你想基于容器自身宽度计算 */
    /* 这里采用基于父级的计算方式，确保整体布局比例 */
    
    position: relative; /* 改为 relative，让内部子元素基于此定位 */
    overflow: hidden; /* 确保内容不溢出破坏布局 */
    z-index: 5;
}

/* --- 核心修改点：通用蛋糕项样式 (cake-item) --- */
/* 
   要求：cake1, cake2 等 div 的位置在大div中始终不变，大小随大div变化。
   解决方案：所有子项必须使用绝对定位 (Absolute Positioning)。
*/
/* --- 通用蛋糕项样式 --- */
.cake-item {
    position: absolute;
    width: 100%;
    height: 100%;
}

.cake-img {
    position: absolute;
    height: auto;
    display: block;
}

/* --- 蛋糕1 (右下) + add to cart 3 --- */
.cake1 {
    top: 53.77%;  /* Y / 画布高度 = 409 / 696 */
    left: 76.86%; /* X / 画布宽度 = 947 / 1265 */
    width: 23%; /* W / 画布宽度 = 318 / 1205 */
    /* height 不固定，由内容撑开或通过 JS/aspect-ratio 处理，这里依赖图片流式布局 */
}
.cake1 .cake-img {
    width: 100%; /* 199 / 318 */
    top: 0; /* 相对于 .cake1 的高度位置 */
    left: 0;
}


/* --- 蛋糕2 (左中) + add to cart 1 --- */
/* 原始参考坐标: X=368, Y=434, W=425, H=258 */
.cake2 {
    top: 68.36%;  /* 434 / 696 */
    left: 25.09%; /* 368 / 1265 */
    width: 28.60%; /* 425 / 1265 */
}
.cake2 .cake-img {
    width: 100%; /* 265 / 425 */
    top: 0;
    right: 0;
}

/* --- 蛋糕3 (右上) + add to cart 1 --- */
/* 原始参考坐标: X=675, Y=123.6, W=436, H=270 */
.cake3 {
    top: 17.76%;  /* 123.6 / 696 */
    left: 53.36%; /* 675 / 1265 */
    width: 30.47%; /* 436 / 1265 */
}
.cake3 .cake-img {
    width: 100%; /* 236 / 436 */
    top: 0;
    left: 0;
}

/* --- 蛋糕4 (左上) + add to cart 2 --- */
/* 原始参考坐标: X=0, Y=83, W=500, H=270 */
.cake4 {
    top: 31.93%;  /* 83 / 696 */
    left: 0;
    width: 34.53%; /* 500 / 1265 */
}
.cake4 .cake-img {
    width: 100%; /* 210 / 500 */
    top: 0;
    right: 0;
}