/**
 * Aylaobuy Design System — 首页专用样式
 * Hero 特色图标/寺庙插画 / 服务入口卡片 / 分类胶囊 / 商品网格，供 index.php 后续重构时接入。
 * 需在引入本文件前先引入 design-system.css 与 layout.css。
 */

/* ── Hero：4 个特色图标 ── */
.ay-hero-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin:22px 0 26px;
    max-width:460px;
}
.ay-hero-feature{
    display:flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.22);
    border-radius:var(--radius-md);
    padding:9px 12px;
}
.ay-hero-feature-icon{ font-size:18px; line-height:1; }
.ay-hero-feature-text{
    display:flex;
    flex-direction:column;
    font-size:12px;
    font-weight:var(--font-weight-bold);
    color:#fff;
    line-height:1.3;
}
.ay-hero-feature-zh{
    font-size:10px;
    font-weight:var(--font-weight-normal);
    color:var(--hero-subtext-color);
    margin-top:1px;
}

/* ── Hero 右侧：象牙白艺术面板 + 金色祥云 + 暖光 + 寺庙大图 ── */
.ay-hero-art{
    position:relative;
    flex:1 1 320px;
    min-width:280px;
    max-width:460px;
    aspect-ratio:1 / 1;
    background:var(--ay-ivory);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    overflow:hidden;
}

.ay-hero-art-glow{
    position:absolute;
    top:-15%;
    right:-10%;
    width:75%;
    height:75%;
    border-radius:50%;
    background:radial-gradient(circle, rgba(212,166,60,.55), rgba(212,166,60,0) 70%);
}

.ay-hero-cloud{
    position:absolute;
    background:linear-gradient(135deg, var(--ay-gold), var(--ay-saffron));
    opacity:.55;
    border-radius:60% 40% 55% 45% / 50% 55% 45% 50%;
}
.ay-hero-cloud-1{ width:120px; height:56px; top:14%; left:8%; }
.ay-hero-cloud-2{ width:90px; height:44px; top:32%; right:10%; opacity:.4; }

.ay-hero-temple{
    position:absolute;
    left:50%;
    bottom:10%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
}
.ay-hero-temple .temple-spire{
    width:5px;
    height:46px;
    background:linear-gradient(180deg, var(--ay-gold), var(--ay-red));
    margin-bottom:-2px;
    border-radius:2px;
}
.ay-hero-temple .temple-tier{
    display:block;
    height:0;
    margin-bottom:-6px;
}
.ay-hero-temple .temple-tier-1{
    border-left:64px solid transparent;
    border-right:64px solid transparent;
    border-bottom:34px solid var(--ay-gold);
}
.ay-hero-temple .temple-tier-2{
    border-left:88px solid transparent;
    border-right:88px solid transparent;
    border-bottom:30px solid var(--ay-red);
}
.ay-hero-temple .temple-tier-3{
    border-left:112px solid transparent;
    border-right:112px solid transparent;
    border-bottom:26px solid var(--ay-clay);
}
.ay-hero-temple .temple-base{
    width:200px;
    height:16px;
    background:var(--ay-blue);
    border-radius:var(--radius-sm);
    margin-top:4px;
}

/* ── 服务入口卡片（Warm Laos Premium 3.0：象牙白卡片 + 渐变图标徽章）── */
.ay-flow-nav{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:12px;
    margin:var(--space-lg) auto 0;
}
.ay-flow-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    text-decoration:none;
    background:var(--card-bg);
    border:1.5px solid var(--ay-gold);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    padding:18px 8px;
    transition:transform .15s, box-shadow .15s, border-color .15s;
}
.ay-flow-btn:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-lg);
    border-color:var(--ay-red);
}
.ay-flow-icon-badge{
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--ay-gradient-warm);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    margin-bottom:8px;
    box-shadow:var(--shadow-md);
}
.ay-flow-lo{ font-weight:var(--font-weight-black); font-size:13px; color:var(--ay-blue); line-height:1.3; }
.ay-flow-zh{ font-size:10px; color:var(--ay-muted); margin-top:3px; display:block; }

/* ── 分类胶囊（Warm Laos Premium 3.0：老挝织锦胶囊）── */
.ay-cat-nav{
    background:var(--card-bg);
    margin:0 auto var(--space-lg);
    padding:12px 14px;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
    border:var(--card-border);
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.ay-cat-btn{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    text-decoration:none;
    padding:8px 14px;
    border-radius:var(--radius-pill);
    background:var(--ay-ivory);
    border:1.5px solid var(--ay-gold);
    color:var(--ay-blue);
    transition:all .15s;
}
.ay-cat-btn:hover{
    background:var(--ay-gradient-brand);
    border-color:transparent;
    color:#fff;
}
.ay-cat-btn-all{ background:var(--ay-gradient-brand); border-color:transparent; color:#fff; }
.ay-cat-btn-hot{ background:#FBF0D2; border-color:var(--ay-gold); }
.ay-cat-btn.active{ background:var(--ay-gradient-brand); border-color:transparent; color:#fff; }
.ay-cat-lo{ font-weight:var(--font-weight-bold); font-size:13px; line-height:1.3; display:block; color:inherit; }
.ay-cat-zh{ font-size:10px; color:var(--ay-muted); line-height:1.2; display:block; margin-top:2px; }
.ay-cat-btn:hover .ay-cat-zh,
.ay-cat-btn-all .ay-cat-zh,
.ay-cat-btn.active .ay-cat-zh{ color:rgba(255,255,255,.8); }

/* ── 商品推荐标题（Warm Laos Premium 3.0）── */
.ay-product-section-title{
    display:flex;
    align-items:center;
    gap:14px;
    margin:var(--space-lg) 0 var(--space-md);
    padding:14px 18px;
    background:var(--card-bg);
    border:1px solid var(--ay-gold);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
}
.ay-product-section-badge{
    flex:0 0 auto;
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--ay-gradient-warm);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    box-shadow:var(--shadow-md);
}
.ay-product-section-text{
    display:flex;
    flex-direction:column;
    line-height:1.3;
}
.ay-product-section-lo{
    font-size:20px;
    font-weight:var(--font-weight-black);
    color:var(--ay-blue);
}
.ay-product-section-zh{
    font-size:var(--font-size-sm);
    color:var(--ay-muted);
    font-weight:var(--font-weight-semibold);
    margin-top:2px;
}
.ay-product-section-line{
    flex:1;
    height:2px;
    background:linear-gradient(90deg, var(--ay-gold), transparent);
    border-radius:2px;
}

.ay-product-count{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:6px 10px;
    margin:0 0 var(--space-md);
    padding:0 4px;
}
.ay-product-count-lo{ font-size:13px; font-weight:var(--font-weight-semibold); color:var(--ay-blue); }
.ay-product-count-zh{ font-size:var(--font-size-sm); color:var(--ay-muted); }

/* ── 商品卡片（Warm Laos Premium 3.0）── */
.ay-product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
    gap:16px;
    margin:0 auto;
}
.ay-product-card{
    background:var(--card-bg);
    border-radius:var(--card-radius);
    overflow:hidden;
    box-shadow:var(--card-shadow);
    border:1px solid var(--ay-gold);
    transition:transform .18s, box-shadow .18s;
}
.ay-product-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
}
.ay-product-img{
    height:190px;
    margin:10px 10px 0;
    border-radius:var(--radius-md);
    overflow:hidden;
    background:var(--ay-ivory);
    display:flex;
    align-items:center;
    justify-content:center;
}
.ay-product-img img{ width:100%; height:100%; object-fit:cover; }
.ay-product-info{ padding:14px; }
.ay-product-title-lo{ font-weight:var(--font-weight-black); margin-bottom:6px; line-height:1.35; color:var(--ay-ink); }
.ay-product-title-zh{ color:var(--ay-muted); font-size:var(--font-size-sm); height:36px; overflow:hidden; }
.ay-product-price{
    font-size:20px;
    font-weight:var(--font-weight-black);
    margin-top:10px;
    color:var(--ay-red);
    background:var(--ay-gradient-brand);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.ay-product-meta{
    display:flex;
    justify-content:space-between;
    font-size:var(--font-size-xs);
    margin-top:8px;
}
.ay-product-meta span:first-child{ color:var(--ay-blue); font-weight:var(--font-weight-semibold); }
.ay-product-meta span:last-child{ color:var(--ay-mekong); font-weight:var(--font-weight-bold); }
.ay-product-detail{
    display:block;
    text-align:center;
    text-decoration:none;
    background:var(--ay-blue);
    color:#fff;
    border:1.5px solid var(--ay-gold);
    border-radius:var(--radius-md);
    padding:10px;
    margin-top:12px;
    font-weight:var(--font-weight-black);
    transition:border-color .15s;
}
.ay-product-detail:hover{ border-color:var(--ay-saffron); }
.ay-product-checkout{
    display:block;
    text-align:center;
    text-decoration:none;
    background:var(--ay-gradient-brand);
    color:#fff;
    border:1.5px solid transparent;
    border-radius:var(--radius-md);
    padding:10px;
    margin-top:8px;
    font-weight:var(--font-weight-black);
    transition:border-color .15s;
}
.ay-product-checkout:hover{ border-color:var(--ay-gold); }
.ay-product-empty{
    background:var(--card-bg);
    border-radius:var(--card-radius);
    padding:30px;
    text-align:center;
    color:var(--ay-muted);
    border:1px solid var(--ay-border);
}

/* ── 分页导航（Warm Laos Premium 3.0）── */
.ay-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin:var(--space-lg) 0;
}
.ay-page-btn{
    display:inline-flex;
    align-items:baseline;
    gap:4px;
    padding:8px 16px;
    border-radius:var(--radius-pill);
    background:var(--ay-ivory);
    border:1.5px solid var(--ay-gold);
    color:var(--ay-blue);
    text-decoration:none;
    font-weight:var(--font-weight-bold);
    font-size:13px;
    transition:all .15s;
}
.ay-page-btn:hover{
    background:var(--ay-gradient-brand);
    border-color:transparent;
    color:#fff;
}
.ay-page-btn:hover .ay-page-zh{ color:rgba(255,255,255,.8); }
.ay-page-info{
    font-size:13px;
    font-weight:var(--font-weight-semibold);
    color:var(--ay-ink);
    display:flex;
    align-items:baseline;
    gap:4px;
}
.ay-page-zh{ font-size:10px; color:var(--ay-muted); }