/**
 * ALCOO Store - Homepage Beautification
 * Reference: alcoo.com main site style
 * Effects: rounded corners, hover float, clean modern layout
 */

/* ============================================
   GLOBAL - Clean base
   ============================================ */
body {
    background-color: #fafafa !important;
}

/* ============================================
   HEADER - Clean white bar
   ============================================ */
.store-header {
    background: #fff;
    box-shadow: 0 1px 8px rgba(0,0,0,0.04);
    position: relative;
    z-index: 10;
}

/* Logo area */
.store-logo a {
    transition: opacity 0.2s ease;
}
.store-logo a:hover {
    opacity: 0.8;
}

/* ============================================
   CATEGORY ICONS - Rounded cards
   ============================================ */
.goods-category {
    display: flex;
    padding: 0.16rem 0.12rem 0.2rem;
    justify-content: space-evenly;
    background: #fff;
    margin: 0 0.12rem 0.12rem;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

figure.category-item {
    margin: 0.06rem;
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.06rem 0.04rem;
    border-radius: 10px;
}

figure.category-item:hover {
    transform: translateY(-4px);
}

figure.category-item:active {
    transform: scale(0.96);
}

.category-item img {
    border-radius: 50%;
    height: 0.56rem;
    width: 0.56rem;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

figure.category-item:hover .category-item img {
    box-shadow: 0 4px 16px rgba(255, 88, 91, 0.25);
    transform: scale(1.05);
}

.category-item p {
    color: #666;
    font-size: 0.13rem;
    margin: 0.08rem 0 0;
    padding: 0;
    font-weight: 500;
}

.category-item p a {
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease;
}

.category-item p a:hover {
    color: #ff585b;
    text-decoration: none;
}

/* ============================================
   MIDDLE ADV - Rounded banner
   ============================================ */
.middle-adv {
    padding: 0.04rem 0.12rem 0.16rem;
}

.middle-adv img {
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.middle-adv a:hover img {
    transform: scale(1.01);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* ============================================
   GOODS LIST - 2 columns, no image distortion
   ============================================ */
.recommend-goods {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    padding: 0 0.12rem 0.7rem;
}

/* Product card - 2 per row */
.goods-item {
    width: calc(50% - 0.06rem);
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 0.12rem;
}

.goods-item:nth-child(odd) {
    margin-left: 0;
}

.goods-item:nth-child(even) {
    margin-right: 0;
}

/* Hover float effect */
.goods-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

.goods-item:active {
    transform: translateY(-2px) scale(0.98);
}

/* Product image - 5:6 portrait ratio */
.goods-image {
    position: relative;
    width: 100%;
    height: auto !important;
    padding-bottom: 120%; /* 5:6 portrait */
    background-size: cover;
    background-position: center;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.goods-image a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
}

/* Image overlay on hover */
.goods-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 88, 91, 0);
    transition: background 0.3s ease;
    pointer-events: none;
}

.goods-item:hover .goods-image::after {
    background: rgba(255, 88, 91, 0.06);
}

/* Product title */
p.goods-title {
    height: auto;
    min-height: 0.36rem;
    line-height: 0.18rem;
    overflow: hidden;
    margin: 0.1rem 0 0;
    padding: 0 0.1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

p.goods-title a {
    color: #333;
    text-decoration: none;
    font-size: 0.13rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

p.goods-title a:hover {
    color: #ff585b;
    text-decoration: none;
}

/* Product price */
.goods-price {
    line-height: 0.32rem;
    color: #ff585b;
    font-size: 0.14rem;
    padding: 0 0.1rem 0.1rem;
    font-weight: 600;
}

.goods-price i {
    font-style: normal;
    font-size: 0.12rem;
    font-weight: 400;
    color: #999;
}

/* ============================================
   SWIPER/BANNER - Edge-to-edge
   ============================================ */
.swiper-top {
    width: 100%;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.swiper-top .swiper-slide img {
    width: 100%;
    display: block;
}

/* ============================================
   SECTION TITLES
   ============================================ */
.section-title {
    font-size: 0.16rem;
    font-weight: 700;
    color: #333;
    padding: 0.16rem 0.12rem 0.1rem;
    position: relative;
    display: flex;
    align-items: center;
}

.section-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 0.16rem;
    background: #ff585b;
    border-radius: 0 2px 2px 0;
    margin-right: 0.08rem;
}
.section-title .more-link {
    margin-left: auto;
    font-size: 0.12rem;
    font-weight: 400;
    color: #999;
    text-decoration: none;
}
.section-title .more-link:hover {
    color: #ff585b;
}

/* ============================================
   PRODUCT LABELS - Hot / New badges
   ============================================ */
.goods-label {
    position: absolute;
    top: 0.06rem;
    left: 0.06rem;
    z-index: 2;
    font-size: 0.1rem;
    font-weight: 600;
    padding: 0.02rem 0.06rem;
    border-radius: 0 6px 6px 0;
    letter-spacing: 0.02rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.goods-label.hot {
    background: linear-gradient(135deg, #ff585b, #e04447);
    color: #fff;
}
.goods-label.new {
    background: linear-gradient(135deg, #5b86e5, #36d1dc);
    color: #fff;
}

/* ============================================
   BOTTOM NAV - Glassmorphism tabs
   ============================================ */
ul.footer-bar {
    background: rgba(255,255,255,0.72) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
    border-radius: 20px 20px 0 0;
    z-index: 100;
}
ul.footer-bar li a span {
    color: #999;
    font-size: 0.11rem;
    transition: color 0.25s ease;
}
ul.footer-bar li.active a span {
    color: #d6343a;
    font-weight: 700;
}
/* Active pill indicator */
ul.footer-bar li.active a {
    position: relative;
}
ul.footer-bar li.active a::after {
    content: '';
    position: absolute;
    bottom: -0.06rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.36rem;
    height: 3px;
    background: linear-gradient(90deg, #ff585b, #ff8a8d);
    border-radius: 2px;
}

/* ============================================
   RESPONSIVE PC - 2 columns
   ============================================ */
@media (min-width: 768px) {
    .goods-category {
        max-width: 600px;
        margin: 0.2rem auto;
    }
    
    .recommend-goods {
        max-width: 600px;
        margin: 0 auto;
        justify-content: space-between;
    }
    
    .goods-item {
        width: calc(50% - 0.06rem);
        margin: 0 0 0.12rem 0 !important;
    }
    
    .goods-item:nth-child(odd),
    .goods-item:nth-child(even) {
        margin-left: 0;
        margin-right: 0;
    }
    
    .middle-adv {
        max-width: 600px;
        margin: 0 auto;
    }
    
    .swiper-top {
        max-width: 600px;
        margin: 0 auto;
        border-radius: 16px;
    }
    
    .swiper-top .swiper-slide img {
        border-radius: 16px;
    }
}

/* ============================================
   VISUAL FX - Blob + Sparkle + Glassmorphism
   Adapted from alcoo.com pages.css → store color scheme #ff585b
   ============================================ */

/* ---- 软糖气泡层 ---- */
.bg-blob-layer {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none; z-index: 0; overflow: hidden;
}
.bg-blob {
    position: absolute; border-radius: 50%; opacity: 0.28;
    animation: blobFloat 16s ease-in-out infinite alternate;
}
/* PC: 300-460px */
.bg-blob:nth-child(1) {
    width: 460px; height: 460px;
    background: rgba(255,130,145,0.42);
    top: -10%; left: -8%; animation-delay: 0s;
}
.bg-blob:nth-child(2) {
    width: 390px; height: 390px;
    background: rgba(255,160,175,0.38);
    top: 6%; right: -7%; animation-delay: -3s;
}
.bg-blob:nth-child(3) {
    width: 330px; height: 330px;
    background: rgba(255,110,125,0.32);
    top: 44%; left: 6%; animation-delay: -7s;
}
.bg-blob:nth-child(4) {
    width: 420px; height: 420px;
    background: rgba(255,145,160,0.34);
    bottom: -6%; right: 3%; animation-delay: -5s;
}
/* Mobile: 200-280px */
@media (max-width: 767px) {
    .bg-blob:nth-child(1) { width: 280px; height: 280px; top: -8%; left: -10%; }
    .bg-blob:nth-child(2) { width: 240px; height: 240px; top: 4%; right: -8%; }
    .bg-blob:nth-child(3) { width: 200px; height: 200px; top: 42%; left: 4%; }
    .bg-blob:nth-child(4) { width: 260px; height: 260px; bottom: -4%; right: 2%; }
}

@keyframes blobFloat {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    33%  { transform: translate(45px, -28px) scale(1.07) rotate(4deg); }
    66%  { transform: translate(-22px, 18px) scale(1.03) rotate(-3deg); }
    100% { transform: translate(30px, -22px) scale(1.10) rotate(1.5deg); }
}

/* ---- 星屑闪光粒子 ---- */
.bg-float-layer {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none; z-index: 0;
}
.bg-float-layer::before {
    content: '';
    position: absolute;
    width: 3px; height: 3px; border-radius: 50%;
    background: transparent;
    box-shadow:
         60px  120px 0 1px rgba(255,210,225,0.70),
        140px  310px 0 0   rgba(255,185,210,0.55),
        220px   70px 0 1px rgba(255,225,240,0.72),
        310px  260px 0 1px rgba(255,195,215,0.62),
        420px   40px 0 0   rgba(255,220,235,0.68),
        510px  330px 0 1px rgba(255,200,220,0.58),
        580px  180px 0 0   rgba(255,235,245,0.65),
        680px   90px 0 1px rgba(255,190,210,0.55),
        720px  380px 0 0   rgba(255,215,230,0.60),
        800px  250px 0 1px rgba(255,205,220,0.70),
        880px   50px 0 0   rgba(255,230,240,0.52),
        930px  420px 0 1px rgba(255,180,200,0.55),
        130px  520px 0 0   rgba(255,220,230,0.50),
        350px  480px 0 1px rgba(255,200,220,0.58),
        560px  550px 0 0   rgba(255,190,210,0.52),
        750px  500px 0 1px rgba(255,210,225,0.55),
        900px  320px 0 0   rgba(255,220,235,0.48);
    animation: sparkleDrift 10s ease-in-out infinite;
}
.bg-float-layer::after {
    content: '';
    position: absolute;
    width: 5px; height: 5px; border-radius: 50%;
    background: transparent;
    box-shadow:
         90px  240px 0 2px rgba(255,200,220,0.45),
        270px   80px 0 1px rgba(255,220,235,0.50),
        450px  300px 0 2px rgba(255,185,210,0.42),
        620px  100px 0 2px rgba(255,230,240,0.48),
        780px  340px 0 1px rgba(255,200,220,0.40),
        100px  430px 0 2px rgba(255,210,225,0.38),
        480px  480px 0 2px rgba(255,195,215,0.42),
        860px  150px 0 1px rgba(255,220,235,0.44);
    animation: sparkleDrift 14s ease-in-out infinite reverse;
}
@keyframes sparkleDrift {
    0%, 100% { transform: translate(0, 0); opacity: 0.75; }
    25%      { transform: translate(8px, -12px); opacity: 0.45; }
    50%      { transform: translate(-6px, -6px); opacity: 0.80; }
    75%      { transform: translate(4px, 10px); opacity: 0.50; }
}
.bg-float-item {
    position: absolute; font-size: 22px; opacity: 0.42;
    animation: floatUp 9s ease-in-out infinite;
    text-shadow: 0 0 6px rgba(255,130,145,0.30);
}
.bg-float-item:nth-child(1) { left: 6%;  top: 72%; animation-delay: 0s;    font-size: 24px; }
.bg-float-item:nth-child(2) { left: 18%; top: 50%; animation-delay: -2s;   font-size: 28px; }
.bg-float-item:nth-child(3) { left: 76%; top: 34%; animation-delay: -5s;   font-size: 20px; }
.bg-float-item:nth-child(4) { left: 86%; top: 65%; animation-delay: -3.5s; font-size: 26px; }
.bg-float-item:nth-child(5) { left: 45%; top: 82%; animation-delay: -6s;   font-size: 22px; }
@keyframes floatUp {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.38; }
    50%      { transform: translateY(-26px) rotate(10deg); opacity: 0.62; }
}

/* ---- 毛玻璃效果：卡片/轮播/分类/广告 ---- */
.goods-item {
    background: rgba(255,255,255,0.65) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative; z-index: 1;
}
.goods-category {
    background: rgba(255,255,255,0.65) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative; z-index: 1;
}
figure.category-item {
    position: relative; z-index: 1;
}
.swiper-top {
    position: relative; z-index: 1;
}
.swiper-top .swiper-slide {
    background: transparent;
}
.middle-adv {
    position: relative; z-index: 1;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}