/* ============================================================
   探索選品平台 /shop — 列表 + 篩選
   look-v2：純白底 + 珊瑚粉 #FF4E6E；卡片圓角 + hover 柔陰影
   ============================================================ */
:root {
    --shop-coral: var(--sgtn-terracotta, #FF4E6E);
    --shop-coral-hover: var(--sgtn-terracotta-hover, #E83A5A);
    --shop-ink: var(--sgtn-cocoa, #1A1A1A);
    --shop-line: var(--sgtn-line-sand, #ECECEC);
    --shop-muted: #8a8a8a;
    --shop-radius: 16px;
}

.shop {
    background: #fff;
    color: var(--shop-ink);
    font-family: "Noto Sans TC", system-ui, sans-serif;
    padding-bottom: 6rem;
}

/* 容器：沿用站台 container-l，補一個寬度保險 */
.shop .container-l {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 2rem;
}

/* ── 標題列 ── */
.shop__hero {
    border-bottom: 1px solid var(--shop-line);
    padding: 3.2rem 0 2.4rem;
}
.shop__crumb {
    display: flex;
    gap: .6rem;
    align-items: center;
    font-size: 1.3rem;
    color: var(--shop-muted);
    margin-bottom: 1.2rem;
}
.shop__crumb a { color: var(--shop-muted); text-decoration: none; }
.shop__crumb a:hover { color: var(--shop-coral); }
.shop__crumb .is-current { color: var(--shop-ink); }
.shop__title {
    font-family: "Noto Serif TC", serif;
    font-weight: 700;
    font-size: 3.2rem;
    margin: 0 0 .8rem;
}
.shop__lead { color: var(--shop-muted); font-size: 1.5rem; margin: 0; max-width: 60ch; }

/* ── 版面：側邊 + 主內容 ── */
.shop__layout {
    display: grid;
    grid-template-columns: 264px 1fr;
    gap: 3.2rem;
    padding-top: 3rem;
    align-items: start;
}

/* ── 側邊欄 ── */
.shop__sidebar {
    position: sticky;
    top: 9rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.shop-filter { display: flex; flex-direction: column; gap: .9rem; }
.shop-filter__label {
    font-weight: 700;
    font-size: 1.45rem;
    letter-spacing: .02em;
}
.shop-filter__input,
.shop-filter__select {
    width: 100%;
    border: 1px solid var(--shop-line);
    border-radius: 10px;
    padding: .85rem 1.1rem;
    font-size: 1.35rem;
    background: #fff;
    color: var(--shop-ink);
}
.shop-filter__input:focus,
.shop-filter__select:focus {
    outline: none;
    border-color: var(--shop-coral);
    box-shadow: 0 0 0 3px rgba(255, 78, 110, .12);
}

.shop-filter__groups { list-style: none; margin: 0; padding: 0; }
.shop-filter__group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .7rem .9rem;
    border-radius: 9px;
    color: var(--shop-ink);
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 600;
}
.shop-filter__group:hover { background: var(--accent-soft, #FFE8ED); color: var(--shop-coral); }
.shop-filter__group.is-static { cursor: default; font-weight: 700; }
.shop-filter__group.is-static:hover { background: transparent; color: var(--shop-ink); }
.shop-filter__group.is-active { background: var(--shop-coral); color: #fff; }
.shop-filter__group.is-active .shop-filter__cnt { color: rgba(255,255,255,.85); }

.shop-filter__subcats {
    list-style: none;
    margin: .3rem 0 .6rem;
    padding: 0 0 0 .6rem;
    border-left: 2px solid var(--shop-line);
}
.shop-filter__check {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .6rem;
    font-size: 1.3rem;
    cursor: pointer;
    color: #444;
}
.shop-filter__check input { accent-color: var(--shop-coral); width: 1.5rem; height: 1.5rem; }
.shop-filter__check span:first-of-type { flex: 1; }
.shop-filter__cnt { color: var(--shop-muted); font-size: 1.15rem; }

/* 兩層篩選：第一層（主分類）字較大、第二層（系列）較小 */
.shop-filter__tree { list-style: none; margin: 0; padding: 0; }
.shop-filter__tree > li { margin-bottom: .2rem; }
.shop-filter__check--lv1 { font-size: 1.5rem; font-weight: 700; color: var(--shop-ink); padding: .55rem .6rem; }
.shop-filter__check--lv1 input { width: 1.7rem; height: 1.7rem; }
.shop-filter__check--lv2 { font-size: 1.3rem; }

.shop-filter__price { display: flex; align-items: center; gap: .6rem; }
.shop-filter__price .shop-filter__input { padding: .7rem .8rem; }
.shop-filter__dash { color: var(--shop-muted); }

.shop-filter__tags { display: flex; flex-wrap: wrap; gap: .6rem; }
.shop-filter__tag {
    font-size: 1.2rem;
    padding: .45rem 1rem;
    border: 1px solid var(--shop-line);
    border-radius: 999px;
    cursor: pointer;
    color: #555;
    transition: all .15s ease;
}
.shop-filter__tag:hover { border-color: var(--shop-coral); color: var(--shop-coral); }
.shop-filter__tag.is-active { background: var(--shop-coral); border-color: var(--shop-coral); color: #fff; }
.shop-filter__tag input { display: none; }

.shop-filter__actions { display: block; margin-top: 1.8rem; }
.shop-filter__apply {
    flex: 1;
    background: var(--shop-coral);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 1rem;
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}
.shop-filter__apply:hover { background: var(--shop-coral-hover); }
.shop-filter__reset {
    display: flex; align-items: center; justify-content: center; gap: .8rem;
    width: 100%; padding: 1.4rem 1.6rem;
    background: var(--shop-coral); color: #fff;
    border: none; border-radius: 12px;
    font-size: 1.6rem; font-weight: 700; text-decoration: none; cursor: pointer;
    box-shadow: 0 6px 16px rgba(255, 78, 110, .26);
    transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
}
.shop-filter__reset:hover {
    background: var(--shop-coral-hover); color: #fff;
    box-shadow: 0 8px 22px rgba(255, 78, 110, .34);
}
.shop-filter__reset:active { transform: translateY(1px); }

/* ── 主內容 ── */
.shop__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--shop-line);
}
.shop__count { font-size: 1.4rem; color: var(--shop-muted); }
.shop__sort { display: flex; align-items: center; gap: .8rem; font-size: 1.35rem; }
.shop__sort select {
    border: 1px solid var(--shop-line);
    border-radius: 10px;
    padding: .7rem 1.1rem;
    font-size: 1.35rem;
    background: #fff;
    cursor: pointer;
}

.shop__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.2rem;
}

/* ── 商品卡 ── */
.shop-card {
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    overflow: hidden;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}
.shop-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(26, 26, 26, .1);
}
.shop-card { display: flex; flex-direction: column; }
.shop-card__link { text-decoration: none; color: inherit; display: flex; flex-direction: column; flex: 1; }
.shop-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #f6f6f6;
    overflow: hidden;
}
.shop-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.shop-card:hover .shop-card__media img { transform: scale(1.05); }
.shop-card__tag {
    position: absolute; left: 1rem; top: 1rem;
    background: rgba(255,255,255,.92);
    color: var(--shop-ink);
    font-size: 1.15rem;
    padding: .35rem .9rem;
    border-radius: 999px;
}
.shop-card__badge {
    position: absolute; right: 1rem; top: 1rem;
    background: var(--shop-coral);
    color: #fff;
    font-size: 1.1rem;
    padding: .35rem .9rem;
    border-radius: 999px;
}
/* 大材積角標：磚紅、置左下，避免與右上「精選」重疊 */
.shop-card__badge--bulky {
    right: auto; left: 1rem; top: auto; bottom: 1rem;
    background: var(--accent-main, #FF4E6E);
    font-weight: 600;
}
.shop-card__body { padding: 1.4rem 1.5rem 1.7rem; flex: 1; display: flex; flex-direction: column; }
.shop-card__title {
    font-size: 1.55rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em; /* 固定 2 行高度，標題長短不影響下方對齊 */
}
.shop-card__desc {
    font-size: 1.25rem;
    color: var(--shop-muted);
    margin: 0 0 1rem;
    line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3em; /* 固定 2 行高度，簡介長短一致對齊 */
}
.shop-card__price {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 1.7rem;
    color: var(--shop-coral);
    margin-top: auto; /* 價格永遠貼齊卡片底部 */
}

/* ── 空狀態 ── */
.shop__empty {
    text-align: center;
    padding: 6rem 2rem;
    color: var(--shop-muted);
}
.shop__empty i { font-size: 4rem; color: var(--shop-line); margin-bottom: 1.5rem; }
.shop__empty p { font-size: 1.6rem; margin: 0 0 1.5rem; }
.shop__empty-link {
    color: var(--shop-coral);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--shop-coral);
    padding-bottom: 2px;
}

/* ── 無結果推薦 ── */
.shop__reco {
    margin-top: 1rem;
    padding-top: 3rem;
    border-top: 1px solid var(--shop-line);
}
.shop__reco-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 2rem;
    text-align: center;
    color: var(--shop-ink, var(--sgtn-cocoa, #1A1A1A));
}

/* ── 分頁 ── */
.shop__pagination { margin-top: 4rem; display: flex; justify-content: center; }
.shop-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem; border-bottom: 0; }
.shop-pager__num,
.shop-pager__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 4.4rem; height: 4.4rem; padding: 0 1.2rem;
    border: 1px solid var(--shop-line); border-radius: 12px; background: #fff;
    color: var(--shop-ink); font-size: 1.5rem; font-weight: 600; line-height: 1;
    text-decoration: none; cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.shop-pager__num:hover,
.shop-pager__btn:not(.is-disabled):hover {
    border-color: var(--shop-coral); color: var(--shop-coral);
    box-shadow: 0 4px 14px rgba(255, 78, 110, .14);
}
.shop-pager__num.is-active {
    background: var(--shop-coral); border-color: var(--shop-coral); color: #fff;
    box-shadow: 0 6px 16px rgba(255, 78, 110, .28);
}
.shop-pager__btn--prev,
.shop-pager__btn--next { font-size: 1.3rem; }
.shop-pager__btn.is-disabled { color: #cdcdcd; background: #faf8f8; cursor: default; pointer-events: none; }
.shop-pager__dots {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.4rem; height: 4.4rem; color: var(--shop-muted); font-size: 1.5rem;
}

/* ── 行動版「讀取更多」（桌機隱藏） ── */
.shop__loadmore { display: none; margin-top: 3rem; flex-direction: column; align-items: center; }
.shop__loadmore-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
    width: 100%; max-width: 42rem; padding: 1.4rem 2rem;
    border: 1px solid var(--shop-coral); border-radius: 14px;
    background: #fff; color: var(--shop-coral); font-size: 1.6rem; font-weight: 700;
    cursor: pointer; transition: background .18s ease, color .18s ease;
}
.shop__loadmore-btn:hover,
.shop__loadmore-btn:active { background: var(--shop-coral); color: #fff; }
.shop__loadmore-btn.is-loading { opacity: .65; pointer-events: none; }
.shop__loadmore-end { font-size: 1.5rem; color: var(--shop-muted); margin: 0; padding: 1rem 0; }

@media (max-width: 768px) {
    .shop__pagination { display: none; }
    .shop__loadmore { display: flex; }
}

@media (max-width: 480px) {
    .shop-pager { gap: .5rem; }
    .shop-pager__num, .shop-pager__btn { min-width: 3.8rem; height: 3.8rem; font-size: 1.35rem; }
}

/* ── 行動版 ── */
.shop__filter-toggle {
    display: none;
    align-items: center;
    gap: .6rem;
    background: #fff;
    border: 1px solid var(--shop-line);
    border-radius: 10px;
    padding: .9rem 1.4rem;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 1.6rem;
}

@media (max-width: 1024px) {
    .shop__grid { grid-template-columns: repeat(2, 1fr); }
    .shop__layout { grid-template-columns: 220px 1fr; gap: 2.2rem; }
}

@media (max-width: 768px) {
    .shop .container-l { padding-inline: 1.5rem; }
    .shop__layout { grid-template-columns: 1fr; }
    .shop__filter-toggle { display: inline-flex; }
    .shop__sidebar {
        position: static;
        display: none;
        border: 1px solid var(--shop-line);
        border-radius: 12px;
        padding: 1.8rem;
        margin-bottom: 2rem;
    }
    .shop__sidebar.is-open { display: flex; }
    .shop__grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
    .shop__title { font-size: 2.6rem; }
}

@media (max-width: 480px) {
    .shop__grid { grid-template-columns: 1fr 1fr; gap: 1.1rem; }
    .shop-card__body { padding: 1rem 1.1rem 1.3rem; }
    .shop-card__title { font-size: 1.4rem; }
    /* 手機字級較小，2 行佔位高度同步縮小 */
    .shop-card__desc { font-size: 1.2rem; min-height: 2.8em; margin-bottom: .7rem; }
}

/* ============================================================
   品牌落地頁 hero（/theme/brand/{brand}）
   ============================================================ */
.brand-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #FFFFFF 100%);
}
.brand-hero__cover {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.38;
    z-index: 0;
}
/* 底部漸層白罩：背景圖調明顯後，確保標題／敘述文字仍易讀 */
.brand-hero__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.65) 100%);
}
.brand-hero__inner {
    position: relative;
    z-index: 1;
    padding-block: 1rem 0.4rem;
}
.brand-hero__kicker {
    font-family: "Outfit", "Noto Sans TC", sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.22em;
    color: var(--shop-coral);
    margin: 0 0 0.6rem;
}
.brand-hero__title {
    font-family: "Noto Serif TC", "Chiron Sung HK", serif;
    font-weight: 700;
    font-size: 3.6rem;
    margin: 0;
}
.brand-hero__tagline {
    font-family: "Noto Serif TC", "Chiron Sung HK", serif;
    font-size: 1.9rem;
    color: var(--shop-ink);
    margin: 0.8rem 0 0;
}
.brand-hero__story {
    max-width: 64ch;
    margin-top: 1rem;
    line-height: 1.9;
}

@media (max-width: 768px) {
    .brand-hero__title { font-size: 2.6rem; }
    .brand-hero__tagline { font-size: 1.6rem; }
}

/* ── 價格篩選：常用區間 + 自訂 min/max + 雙把手 slider（Baymard 式）── */
.shop-filter--price .price-presets {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.1rem;
}
.price-preset {
    border: 1px solid var(--shop-line);
    background: #fff;
    color: var(--shop-ink);
    font-size: 1.25rem;
    line-height: 1;
    padding: .7rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.price-preset:hover { border-color: var(--shop-coral); color: var(--shop-coral); }
.price-preset.is-active {
    background: var(--shop-coral);
    border-color: var(--shop-coral);
    color: #fff;
}
.price-error {
    color: var(--shop-coral);
    font-size: 1.2rem;
    margin: .6rem 0 0;
}

/* 雙把手 slider：兩個重疊的 range input + 上色區間 */
.price-slider {
    position: relative;
    height: 3.2rem;
    margin: 1.4rem .4rem .4rem;
}
.price-slider__rail,
.price-slider__fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    border-radius: 999px;
}
.price-slider__rail { left: 0; right: 0; background: var(--shop-line); }
.price-slider__fill { background: var(--shop-coral); }
.price-slider__handle {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3.2rem;
    margin: 0;
    background: none;
    pointer-events: none;
}
.price-slider__handle::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--shop-coral);
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    cursor: pointer;
}
.price-slider__handle::-moz-range-thumb {
    pointer-events: auto;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--shop-coral);
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    cursor: pointer;
}
.price-slider__handle::-moz-range-track { background: none; }

.price-actions {
    display: flex;
    gap: .8rem;
    margin-top: 1.2rem;
}
.price-clear,
.price-apply {
    flex: 1;
    font-size: 1.3rem;
    font-weight: 600;
    padding: .8rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.price-clear {
    background: #fff;
    border: 1px solid var(--shop-line);
    color: var(--shop-muted);
}
.price-clear:hover { border-color: var(--shop-coral); color: var(--shop-coral); }
.price-apply {
    background: var(--shop-coral);
    border: 1px solid var(--shop-coral);
    color: #fff;
}
.price-apply:hover { background: var(--shop-coral-hover); border-color: var(--shop-coral-hover); }

/* ── 已選條件 chips（列表上方）── */
.shop-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
    margin: 0 0 1.6rem;
}
.shop-chips__label { font-size: 1.3rem; color: var(--shop-muted); }
.shop-chip {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--accent-soft, #FFE8ED);
    border: 1px solid rgba(255,78,110,.25);
    color: var(--shop-ink);
    font-size: 1.3rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background .15s ease;
}
.shop-chip:hover { background: var(--accent-soft, #FFE8ED); color: var(--shop-ink); text-decoration: none; }
.shop-chip i { font-size: 1.05rem; color: var(--shop-coral); }
.shop-chip--clear {
    color: var(--shop-coral);
    font-weight: 600;
    border-color: transparent;
    background: transparent;
}
.shop-chip--clear:hover { background: var(--accent-soft, #FFE8ED); color: var(--shop-coral); }

/* slider 的兩個 range input 會繼承全站 input 外框；明確移除外匡/底色 */
.price-slider__handle,
.price-slider__handle:focus,
.price-slider__handle:hover {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}
.price-slider__handle::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: transparent;
    border: none;
}

/* ===== 捲動進場（reveal-on-scroll）：進入視窗才淡入＋上滑浮現（與首頁一致）
   以 html.reveal-on 為開關：只有掛了 observer 的頁面（/shop index）會由早期 inline
   script 加上 reveal-on，才會把 .reveal 預設藏起來。共用的 product-card 被其他頁面
   （brand / gift-guide）沿用時不會有 reveal-on，.reveal 即為惰性，卡片照常顯示。
   reduced-motion 由 inline script 直接略過 reveal-on，故此處不需另設媒體查詢。 */
html.reveal-on .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .9, .3, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}
html.reveal-on .reveal.is-in { opacity: 1; transform: none; }