/* ================================================
   Herb 商城 UI 版面動態切換
   以 html[data-ui-*] 控制，僅在對應頁面區塊生效
   classic-grid / header-grid / split-pane / grid-2col 為 Herb 預設，無需額外規則
   ================================================ */

/* ── 首頁 Web：magazine-list（橫向商品列） ── */
@media (min-width: 769px) {
    html[data-ui-home-web="magazine-list"] .home-page .featured-section .product-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    html[data-ui-home-web="magazine-list"] .home-page .product-card-link {
        height: auto !important;
        display: block !important;
    }

    html[data-ui-home-web="magazine-list"] .home-page .product-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        height: auto !important;
        min-height: 160px;
    }

    html[data-ui-home-web="magazine-list"] .home-page .product-card .product-image {
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
        height: 160px !important;
        padding-top: 0 !important;
        flex-shrink: 0 !important;
    }

    html[data-ui-home-web="magazine-list"] .home-page .product-card .product-image img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    html[data-ui-home-web="magazine-list"] .home-page .product-card .product-info {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 12px 16px !important;
    }

    html[data-ui-home-web="magazine-list"] .home-page .featured-section h2 {
        text-align: left;
    }
}

/* ── 首頁 Web：magazine-grid（四欄網格） ── */
@media (min-width: 769px) {
    html[data-ui-home-web="magazine-grid"] .home-page .featured-section .product-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 24px !important;
    }

    html[data-ui-home-web="magazine-grid"] .home-page .featured-section h2 {
        text-align: left;
    }
}

/* ── 首頁 Mobile：list-compact（直向緊湊列表） ── */
@media (max-width: 768px) {
    html[data-ui-home-mobile="list-compact"] .home-page .featured-section .product-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 10px !important;
    }

    html[data-ui-home-mobile="list-compact"] .home-page .product-card-link {
        height: auto !important;
    }

    html[data-ui-home-mobile="list-compact"] .home-page .product-card {
        flex-direction: row !important;
        height: auto !important;
        min-height: 110px;
    }

    html[data-ui-home-mobile="list-compact"] .home-page .product-card .product-image {
        width: 110px !important;
        min-width: 110px !important;
        max-width: 110px !important;
        height: 110px !important;
        padding-top: 0 !important;
    }

    html[data-ui-home-mobile="list-compact"] .home-page .product-card .product-info {
        padding: 10px 12px !important;
    }
}

/* ── 首頁 Mobile：horizontal-rail（橫向滑動） ── */
@media (max-width: 768px) {
    html[data-ui-home-mobile="horizontal-rail"] .home-page .featured-section .product-grid-wrapper {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        touch-action: pan-x pan-y;
        overscroll-behavior-x: contain;
        padding: 4px 12px 16px;
        scrollbar-width: none;
        cursor: grab;
    }

    html[data-ui-home-mobile="horizontal-rail"] .home-page .product-grid-wrapper.is-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
        user-select: none;
    }

    html[data-ui-home-mobile="horizontal-rail"] .home-page .product-grid-wrapper.is-dragging .product-card-link {
        pointer-events: none;
    }

    html[data-ui-home-mobile="horizontal-rail"] .home-page .product-grid-wrapper.is-dragging .btn-add-to-cart {
        pointer-events: auto;
    }

    html[data-ui-home-mobile="horizontal-rail"] .home-page .product-grid-wrapper::-webkit-scrollbar {
        display: none;
    }

    html[data-ui-home-mobile="horizontal-rail"] .home-page .featured-section .product-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        gap: 14px !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
        width: max-content;
        min-width: 100%;
        min-height: 280px;
        scroll-snap-type: none;
    }

    html[data-ui-home-mobile="horizontal-rail"] .home-page .product-grid > .product-card-shell {
        flex: 0 0 auto;
        flex-shrink: 0;
        width: 42vw;
        max-width: 180px;
        min-width: 140px;
        scroll-snap-align: start;
        height: auto !important;
    }

    html[data-ui-home-mobile="horizontal-rail"] .home-page .product-card-link {
        flex: none !important;
        max-width: none !important;
        height: auto !important;
    }

    html[data-ui-home-mobile="horizontal-rail"] .home-page .product-card {
        height: 100% !important;
        flex-direction: column !important;
    }

    html[data-ui-home-mobile="horizontal-rail"] .home-page .product-grid-wrapper .product-card-shell {
        cursor: pointer;
    }

    html[data-ui-home-mobile="horizontal-rail"] .home-page .product-card-actions,
    html[data-ui-home-mobile="horizontal-rail"] .home-page .product-card-action-row {
        pointer-events: auto;
    }
}

/* ── 分類 Web：sidebar-grid（側欄分類 + 三欄商品網格） ── */
@media (min-width: 769px) {
    .category-layout-web {
        display: block;
        width: 100%;
    }

    .category-sidebar-web {
        display: none;
    }

    .category-main-web {
        width: 100%;
    }

    html[data-ui-cat-web="sidebar-grid"] .category-layout-web {
        display: grid !important;
        grid-template-columns: 220px minmax(0, 1fr) !important;
        gap: 24px;
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 16px 24px;
        box-sizing: border-box;
        align-items: start;
    }

    html[data-ui-cat-web="sidebar-grid"] .category-sidebar-web {
        display: block !important;
        grid-column: 1;
        width: 220px;
        background: #f8f9fa;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 12px 0;
        position: sticky;
        top: 90px;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }

    html[data-ui-cat-web="sidebar-grid"] .category-main-web {
        grid-column: 2;
        min-width: 0;
        width: 100%;
    }

    html[data-ui-cat-web="sidebar-grid"] .category-web-nav {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    html[data-ui-cat-web="sidebar-grid"] .category-web-nav .category-web-nav-item {
        display: block;
        padding: 10px 16px;
        color: #455a64;
        text-decoration: none;
        font-size: 14px;
        border-left: 3px solid transparent;
    }

    html[data-ui-cat-web="sidebar-grid"] .category-web-nav .category-web-nav-item:hover {
        background: #eef2f7;
        color: var(--primary-color);
    }

    html[data-ui-cat-web="sidebar-grid"] .category-web-nav .category-web-nav-item.active {
        background: #fff;
        color: var(--primary-color);
        font-weight: 600;
        border-left-color: var(--primary-color);
    }

    html[data-ui-cat-web="sidebar-grid"] .category-main-web > .container {
        max-width: none;
        padding: 0;
        width: 100%;
        margin: 0;
    }

    html[data-ui-cat-web="sidebar-grid"] #productGrid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
    }

    html[data-ui-cat-web="sidebar-grid"] .category-header {
        display: none !important;
    }
}

/* ── 分類 Web：header-grid（預設，維持原多欄自適應） ── */
@media (min-width: 769px) {
    html[data-ui-cat-web="header-grid"] #productGrid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
        gap: 25px !important;
    }

    /* magazine-row / list-compact：單欄橫向商品列（模板2/3 分類頁） */
    html[data-ui-product-card-web="magazine-row"] #productGrid,
    html[data-ui-product-card-web="list-compact"] #productGrid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* ── 分類 Mobile：tabs-stack（上方分類標籤） ── */
@media (max-width: 768px) {
    html[data-ui-cat-mobile="tabs-stack"] .category-mobile-container {
        flex-direction: column !important;
    }

    html[data-ui-cat-mobile="tabs-stack"] .category-mobile-container .category-sidebar {
        width: 100% !important;
        max-width: none !important;
        border-right: none !important;
        border-bottom: 1px solid #eee;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-shrink: 0;
    }

    html[data-ui-cat-mobile="tabs-stack"] #mobileCategoryList {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 8px;
        padding: 8px !important;
        -webkit-overflow-scrolling: touch;
    }

    html[data-ui-cat-mobile="tabs-stack"] #mobileCategoryList .category-list-item {
        display: inline-flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: auto !important;
        min-width: 72px;
        flex-shrink: 0;
        border-bottom: none !important;
        border-radius: 8px;
        padding: 10px 12px !important;
    }
}

/* ── 輪播樣式 ── */
@media (min-width: 769px) {
    html[data-ui-carousel-web="wide-cinematic"] .hero-carousel {
        height: min(56vw, 640px) !important;
        max-height: 640px;
    }

    html[data-ui-carousel-web="rounded-card"] .hero-section-wrapper {
        padding: 16px;
        box-sizing: border-box;
    }

    html[data-ui-carousel-web="rounded-card"] .hero-carousel {
        border-radius: 16px;
        overflow: hidden;
        height: 420px !important;
        max-height: 420px;
    }
}

@media (max-width: 768px) {
    html[data-ui-carousel-mobile="ratio-16-9"] .hero-carousel {
        height: calc(100vw * 9 / 16) !important;
        min-height: calc(100vw * 9 / 16) !important;
        max-height: 480px;
    }

    html[data-ui-carousel-mobile="compact"] .hero-carousel {
        height: calc(100vw * 0.45) !important;
        min-height: 180px !important;
        max-height: 320px;
    }

    html[data-ui-carousel-mobile="compact"] .carousel-indicators {
        bottom: 8px;
    }
}

/* ── 商品卡片樣式（三模板） ── */
.product-card-shell {
    height: 100%;
}

.product-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Herb 經典：圓形實心購物車按鈕 */
html[data-ui-product-card-web="classic-vertical"] .btn-add-to-cart:not(.product-card-action-btn),
html[data-ui-product-card-web="classic-vertical"] #productGrid .btn-add-to-cart:not(.product-card-action-btn),
html[data-ui-product-card-mobile="grid-2col"] .btn-add-to-cart:not(.product-card-action-btn),
html[data-ui-product-card-mobile="grid-2col"] .product-add-btn.btn-add-to-cart {
    background: var(--primary-color) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
}

/* Neo 雜誌：圓角方形按鈕 */
html[data-ui-product-card-web="magazine-row"] .btn-add-to-cart:not(.product-card-action-btn),
html[data-ui-product-card-web="magazine-row"] #productGrid .btn-add-to-cart:not(.product-card-action-btn),
html[data-ui-product-card-mobile="list-compact"] .btn-add-to-cart:not(.product-card-action-btn),
html[data-ui-product-card-mobile="list-compact"] .product-add-btn.btn-add-to-cart {
    background: var(--primary-color) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 20% !important;
}

/* Universal：描邊方形按鈕 */
html[data-ui-product-card-web="grid-vertical"] .product-card-action-btn,
html[data-ui-product-card-web="grid-vertical"] #productGrid .product-card-action-btn,
html[data-ui-product-card-mobile="horizontal-rail"] .product-card-action-btn,
html[data-ui-product-card-mobile="horizontal-rail"] .product-add-btn.btn-add-to-cart {
    background-color: #fff !important;
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

html[data-ui-product-card-web="grid-vertical"] .product-card-action-btn:hover,
html[data-ui-product-card-mobile="horizontal-rail"] .product-card-action-btn:hover,
html[data-ui-product-card-mobile="horizontal-rail"] .product-add-btn.btn-add-to-cart:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

/* 分類 Web：magazine-row 橫向商品卡（由 product-card-shell--row 驅動） */
@media (min-width: 769px) {
    html[data-ui-product-card-web="magazine-row"] #productGrid .product-card-shell--row,
    html[data-ui-product-card-web="list-compact"] #productGrid .product-card-shell--row {
        height: auto !important;
    }
}

/* 橫向滑動模式：隱藏眼睛按鈕（僅保留卡片連結進詳情） */
html[data-ui-product-card-mobile="horizontal-rail"] .btn-view-product {
    display: none !important;
}

/* 商品来源标签 — 全站固定显示（首页、分类页 Web/手机） */
.product-card .product-image .product-tags,
.product-card-shell--row .product-image .product-tags {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    pointer-events: none;
}

.origin-tag,
.product-card .product-tag--promo,
.product-card .product-tag--brand {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
    line-height: 1.2;
}

.origin-tag.overseas {
    background: #eddaf1;
    color: #9C27B0;
}

.origin-tag.domestic {
    background: var(--bg-primary-lightest, #e8f5e9);
    color: var(--primary-color, #2e7d32);
}

.product-tag--promo {
    background: #FF5722;
    color: #fff;
}

.product-tag--brand {
    background: var(--bg-primary-lightest, #e8f5e9);
    color: var(--primary-color, #2e7d32);
}