/**
 * YS CART product list loop templates (v2.37.0 重構版)
 *
 * 5 種樣式 + 1 種新增（showcase）：
 *   - classic     不修改，base CSS 預設樣
 *   - minimal     單一框線、按鈕貼齊卡片底邊圓角，避免雙框感
 *   - tech        暗色科技風，白色文字 + 統一深色面
 *   - compact     替代舊 editorial：小顆按鈕靠左/靠右
 *   - marketplace 預設邊框、Hover 加強、按鈕 4 角圓角
 *   - showcase    新增：圖片視覺型，Hover 才浮現按鈕；touch 裝置自動恆顯示
 *
 * 命名沿用既有 .ys-ec-shop-template-{key}（避免破壞 classic 與向下相容）。
 * 圖片比例由 base CSS 透過 --ys-ec-product-image-ratio 控制，模板層不再硬寫 aspect-ratio。
 */

.ys-ec-product-list[data-ys-ec-template] {
    --ys-loop-card-radius: 8px;
}

/* =============================================================
 * Minimal（單一框線；按鈕對齊卡片底邊圓角）
 * 解法：卡片 overflow:hidden + border-radius:12px，按鈕 100% width + radius 0
 * 視覺上按鈕底緣自動被卡片圓角裁切 → 看起來只有「一個框」。
 * ============================================================= */
.ys-ec-shop-template-minimal {
    max-width: 1280px;
}

.ys-ec-shop-template-minimal .ys-ec-toolbar {
    background: transparent;
    border-color: #e5e7eb;
    box-shadow: none;
}

.ys-ec-shop-template-minimal .ys-ec-product-grid {
    gap: 24px;
}

.ys-ec-shop-template-minimal .ys-ec-product-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden; /* 關鍵：將按鈕裁切到卡片圓角內 */
    box-shadow: none;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.ys-ec-shop-template-minimal .ys-ec-product-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
    transform: translateY(-2px);
}

.ys-ec-shop-template-minimal .ys-ec-product-image {
    background: #f8fafc;
}

.ys-ec-shop-template-minimal .ys-ec-product-info {
    padding: 14px 16px;
}

/* 按鈕對齊卡片底邊：sharp 角 + 100% 寬度 + 0 margin
 * 卡片 border-radius:12px + overflow:hidden 自動裁切按鈕底角為圓角
 * → 只看到一個外框，沒有雙框感。
 */
.ys-ec-shop-template-minimal .ys-ec-add-to-cart-btn,
.ys-ec-shop-template-minimal .ys-ec-variant-select-btn,
.ys-ec-shop-template-minimal .ys-ec-btn-disabled-card {
    width: 100%;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

/* =============================================================
 * Modern Tech（暗色科技風）
 * 重點：白色文字 + 統一深色面（避免雙色感）+ 篩選背景對齊主背景
 * ============================================================= */
.ys-ec-shop-template-tech {
    padding: 24px;
    color: #fff;
    background: #0a0e1a;
    border-radius: 8px;
}

.ys-ec-shop-template-tech .ys-ec-toolbar {
    background: #0a0e1a;
    color: #fff;
    border-color: #1a1f2e;
    box-shadow: none;
}

.ys-ec-shop-template-tech .ys-ec-toolbar-count,
.ys-ec-shop-template-tech .ys-ec-toolbar-sort,
.ys-ec-shop-template-tech .ys-ec-col-btn {
    color: #fff;
}

.ys-ec-shop-template-tech .ys-ec-toolbar-sort {
    background: #1a1f2e;
    border-color: #2a2f3e;
}

/* 卡片：略亮於主背景，單一深色面 */
.ys-ec-shop-template-tech .ys-ec-product-card {
    background: #1a1f2e;
    color: #fff;
    border: 1px solid #2a2f3e;
    border-radius: var(--ys-loop-card-radius);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}

.ys-ec-shop-template-tech .ys-ec-product-card:hover {
    border-color: #22d3ee;
    box-shadow: 0 20px 48px rgba(34, 211, 238, 0.18);
}

/* 文字一律白色（覆蓋 base CSS 的深色文字） */
.ys-ec-shop-template-tech .ys-ec-product-title,
.ys-ec-shop-template-tech .ys-ec-product-title a,
.ys-ec-shop-template-tech .ys-ec-product-price,
.ys-ec-shop-template-tech .ys-ec-price-current,
.ys-ec-shop-template-tech .ys-ec-price-sale {
    color: #fff;
}

.ys-ec-shop-template-tech .ys-ec-price-original {
    color: #94a3b8;
}

/* 篩選側邊欄：對齊主背景，避免「雙色」很怪
 * 用 border-right 區隔而非另一種底色。
 */
.ys-ec-shop-template-tech .ys-ec-shop-sidebar {
    background: #0a0e1a;
    color: #fff;
    border-right: 1px solid #1a1f2e;
}

.ys-ec-shop-template-tech .ys-ec-shop-sidebar h3,
.ys-ec-shop-template-tech .ys-ec-shop-sidebar h4 {
    color: #fff;
}

.ys-ec-shop-template-tech .ys-ec-shop-sidebar a {
    color: #cbd5e1;
}

.ys-ec-shop-template-tech .ys-ec-shop-sidebar a:hover,
.ys-ec-shop-template-tech .ys-ec-shop-sidebar .active > a {
    color: #22d3ee;
}

.ys-ec-shop-template-tech .ys-ec-shop-sidebar input,
.ys-ec-shop-template-tech .ys-ec-shop-sidebar select,
.ys-ec-shop-template-tech .ys-ec-search-input,
.ys-ec-shop-template-tech .ys-ec-range-slider input {
    background: #1a1f2e;
    color: #fff;
    border: 1px solid #2a2f3e;
}

.ys-ec-shop-template-tech .ys-ec-add-to-cart-btn {
    color: #0a0e1a;
    background: #22d3ee;
    border-color: #22d3ee;
}

.ys-ec-shop-template-tech .ys-ec-add-to-cart-btn:hover {
    background: #06b6d4;
    border-color: #06b6d4;
}

.ys-ec-shop-template-tech .ys-ec-variant-select-btn {
    color: #fff;
    background: var(--ys-ec-btn-color, #6b8a9a);
    border-color: var(--ys-ec-btn-color, #6b8a9a);
}

.ys-ec-shop-template-tech .ys-ec-variant-select-btn:hover {
    color: #fff;
    background: var(--ys-ec-btn-hover, #5a7a8a);
    border-color: var(--ys-ec-btn-hover, #5a7a8a);
}

/* =============================================================
 * Compact（替代舊 editorial）
 * 小顆按鈕靠左或靠右；卡片邊框 + 緊湊內距
 * 配合 [data-button-align="left|right"] 切換對齊
 * ============================================================= */
.ys-ec-shop-template-compact .ys-ec-product-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ys-ec-shop-template-compact .ys-ec-product-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.ys-ec-shop-template-compact .ys-ec-product-info {
    gap: 6px;
    padding: 12px 14px 8px;
}

.ys-ec-shop-template-compact .ys-ec-product-title {
    font-size: 15px;
}

/* 按鈕：小顆 + 靠左或靠右；自動寬度（不再 100%） */
.ys-ec-shop-template-compact .ys-ec-add-to-cart-btn,
.ys-ec-shop-template-compact .ys-ec-variant-select-btn,
.ys-ec-shop-template-compact .ys-ec-btn-disabled-card {
    width: auto;
    margin: 0 14px 14px;
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 6px;
}

.ys-ec-product-list[data-button-align="left"].ys-ec-shop-template-compact .ys-ec-add-to-cart-btn,
.ys-ec-product-list[data-button-align="left"].ys-ec-shop-template-compact .ys-ec-variant-select-btn,
.ys-ec-product-list[data-button-align="left"].ys-ec-shop-template-compact .ys-ec-btn-disabled-card {
    align-self: flex-start;
    margin-right: auto;
}

.ys-ec-product-list[data-button-align="right"].ys-ec-shop-template-compact .ys-ec-add-to-cart-btn,
.ys-ec-product-list[data-button-align="right"].ys-ec-shop-template-compact .ys-ec-variant-select-btn,
.ys-ec-product-list[data-button-align="right"].ys-ec-shop-template-compact .ys-ec-btn-disabled-card {
    align-self: flex-end;
    margin-left: auto;
}

/* =============================================================
 * Marketplace Dense（預設邊框 + Hover 加強 + 按鈕 4 角圓角）
 * ============================================================= */
.ys-ec-shop-template-marketplace .ys-ec-product-grid {
    gap: 16px;
}

.ys-ec-shop-template-marketplace .ys-ec-product-card {
    background: #fff;
    border: 1px solid #e5e7eb; /* 預設可見邊框 */
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ys-ec-shop-template-marketplace .ys-ec-product-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.ys-ec-shop-template-marketplace .ys-ec-badge-wrapper {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

.ys-ec-shop-template-marketplace .ys-ec-product-info {
    padding: 12px 14px 4px;
    gap: 6px;
}

.ys-ec-shop-template-marketplace .ys-ec-product-title {
    font-size: 15px;
}

/* 按鈕：4 角圓角（不是只有上方）+ 100% 寬度 + 內距留白 */
.ys-ec-shop-template-marketplace .ys-ec-add-to-cart-btn,
.ys-ec-shop-template-marketplace .ys-ec-variant-select-btn,
.ys-ec-shop-template-marketplace .ys-ec-btn-disabled-card {
    width: calc(100% - 24px);
    margin: 8px 12px 12px;
    border-radius: 6px;
}

/* =============================================================
 * Showcase（圖片視覺型 + Hover 浮現按鈕） — v2.38.2 重做
 * 變更：
 *   1. 卡片加 box-shadow（解決原本「平」很醜的問題）
 *   2. 圖片新增 ::after 漸層遮罩（hover 時淡入，提供視覺反饋）
 *   3. 按鈕從 card 底部移至「圖片區域內」絕對定位（疊在遮罩上）
 *   4. Hover/focus-within 同步觸發遮罩 + 按鈕浮現
 *   5. @media (hover: none) 觸控裝置 fallback：按鈕恆顯示、無遮罩
 * ============================================================= */
.ys-ec-shop-template-showcase .ys-ec-product-grid {
    gap: 24px;
}

.ys-ec-shop-template-showcase .ys-ec-product-card {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 250ms ease, transform 250ms ease;
}

.ys-ec-shop-template-showcase .ys-ec-product-card:hover,
.ys-ec-shop-template-showcase .ys-ec-product-card:focus-within {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
    transform: translateY(-2px);
}

/* 圖片容器 — relative 用於 ::after 遮罩與絕對定位按鈕 */
.ys-ec-shop-template-showcase .ys-ec-product-image {
    position: relative;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    background: #f1f5f9;
}

/* 漸層遮罩 — 預設 opacity:0，hover/focus-within 時 fade in */
.ys-ec-shop-template-showcase .ys-ec-product-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 45%,
        rgba(0, 0, 0, 0.55) 100%
    );
    opacity: 0;
    transition: opacity 250ms ease;
    pointer-events: none;
    z-index: 1;
}

.ys-ec-shop-template-showcase .ys-ec-product-card:hover .ys-ec-product-image::after,
.ys-ec-shop-template-showcase .ys-ec-product-card:focus-within .ys-ec-product-image::after {
    opacity: 1;
}

/* 商品資訊區（圖片下方）— 置中 clean layout */
.ys-ec-shop-template-showcase .ys-ec-product-info {
    padding: 14px 16px 18px;
    text-align: center;
    gap: 4px;
}

.ys-ec-shop-template-showcase .ys-ec-product-title {
    font-size: 15px;
    font-weight: 500;
    color: #1f2937;
    margin: 0 0 6px;
    line-height: 1.4;
}

.ys-ec-shop-template-showcase .ys-ec-product-price {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    justify-content: center;
}

/* CTA 按鈕：絕對定位於「圖片區域內部」底部（疊在遮罩上） */
.ys-ec-shop-template-showcase .ys-ec-add-to-cart-btn,
.ys-ec-shop-template-showcase .ys-ec-variant-select-btn {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    margin: 0;
    padding: 12px 18px;
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 250ms ease, transform 250ms ease;
    z-index: 2;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.ys-ec-shop-template-showcase .ys-ec-add-to-cart-btn {
    background: rgba(255, 255, 255, 0.95);
    color: #111827;
}

.ys-ec-shop-template-showcase .ys-ec-add-to-cart-btn:hover {
    background: #111827;
    color: #fff;
}

.ys-ec-shop-template-showcase .ys-ec-variant-select-btn {
    background: var(--ys-ec-btn-color, #6b8a9a);
    color: #fff;
}

.ys-ec-shop-template-showcase .ys-ec-variant-select-btn:hover {
    background: var(--ys-ec-btn-hover, #5a7a8a);
    color: #fff;
}

/* Hover/focus-within 觸發按鈕浮現 */
.ys-ec-shop-template-showcase .ys-ec-product-card:hover .ys-ec-add-to-cart-btn,
.ys-ec-shop-template-showcase .ys-ec-product-card:hover .ys-ec-variant-select-btn,
.ys-ec-shop-template-showcase .ys-ec-product-card:focus-within .ys-ec-add-to-cart-btn,
.ys-ec-shop-template-showcase .ys-ec-product-card:focus-within .ys-ec-variant-select-btn {
    opacity: 1;
    transform: translateY(0);
}

/* 已售完 disabled 按鈕（恆顯示，不靠 hover 觸發） */
.ys-ec-shop-template-showcase .ys-ec-btn-disabled-card {
    margin: 8px 0 0;
    background: #f1f5f9;
    color: #94a3b8;
    border-radius: 8px;
    opacity: 0.7;
    cursor: not-allowed;
}

/* 觸控裝置：無 hover 概念 → 按鈕恆顯示於圖片下方、不顯示遮罩 */
@media (hover: none) {
    .ys-ec-shop-template-showcase .ys-ec-add-to-cart-btn,
    .ys-ec-shop-template-showcase .ys-ec-variant-select-btn {
        position: static;
        opacity: 1;
        transform: none;
        margin: 0 16px 16px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .ys-ec-shop-template-showcase .ys-ec-add-to-cart-btn {
        background: #111827;
        color: #fff;
    }
    .ys-ec-shop-template-showcase .ys-ec-variant-select-btn {
        background: var(--ys-ec-btn-color, #6b8a9a);
        color: #fff;
    }
    .ys-ec-shop-template-showcase .ys-ec-product-image::after {
        display: none;
    }
}

/* 圖一風格的 NEW / 本週新品 紅色 badge（沿用既有 .ys-ec-badge 結構） */
.ys-ec-shop-template-showcase .ys-ec-badge-wrapper {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 4;
}

.ys-ec-shop-template-showcase .ys-ec-badge {
    background: #dc2626;
    color: #fff;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* =============================================================
 * 響應式
 * ============================================================= */
@media (max-width: 768px) {
    .ys-ec-shop-template-tech {
        padding: 16px;
    }

    .ys-ec-shop-template-compact .ys-ec-add-to-cart-btn,
    .ys-ec-shop-template-compact .ys-ec-variant-select-btn,
    .ys-ec-shop-template-compact .ys-ec-btn-disabled-card {
        width: calc(100% - 28px);
        align-self: stretch !important;
    }
}