@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap
}

.page-banner{
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.55) 100%),url('/dayin/images/product/banner.webp') center/cover no-repeat,#0a0a0c;
  min-height:420px;display:flex;align-items:center;padding:220px 0;border-bottom:none
}
.page-banner::before{display:none}
.page-banner .crumbs{color:#aaa}
.page-banner .crumbs a{color:#aaa}
    .page-banner .crumbs .current {
        color: var(--accent);
    }

.pb-center{width:100%;text-align:center}
.page-banner h1 {
    font-size: clamp(30px,4.5vw,40px);
    color: #fff;
    margin: 50px 0 30px 0;
    text-align: left;
}
.pb-dash {
    display: block;
    width: 35px;
    height: 3px;
    background: var(--accent);
    margin: 20px auto 20px 0px
}
.page-banner p {
    text-align: left;
    color: #eee;
    font-size: 20px;
}
@media (max-width:767px){
    .page-banner {
        padding: 0;
        min-height: 70vh;
    }
        .page-banner h1{
            font-size: 20px
        }
        .page-banner p{
            font-size: 16px

        }
        .pb-center h1 {
            font-size: 20px
        }
}
.p-hero{padding:110px 0 50px;background:#fff}
.p-hero h2{margin-bottom:20px}
.p-hero .lead{color:var(--ink-3);font-size:17px;line-height:1.95;max-width:640px}
.p-hero .legend{text-align:right}
    .p-hero .legend .num {
        font-family: "Bebas Neue",sans-serif;
        font-family: "Metropolis","Noto Sans TC";
        font-size: clamp(80px,10vw,150px);
        color: var(--accent);
        line-height: .9;
        letter-spacing: .02em
    }
    .p-hero .legend .lbl {
        font-family: "Oswald",sans-serif;
        font-family: "Metropolis","Noto Sans TC";
        letter-spacing: .3em;
        font-size: 13px;
        color: var(--ink-3);
        text-transform: uppercase;
        margin-top: 6px;
        font-weight: 600
    }
.p-picker{padding:60px 0 20px;background:#fff}
.pick-row{display:flex;gap:14px;flex-wrap:wrap;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pick-chip {
    padding: 10px 22px;
    border: 1.5px solid var(--line);
    font-size: 13px;
    letter-spacing: .1em;
    cursor: pointer;
    transition: all .3s;
    font-family: "Noto Sans TC",sans-serif;
    font-family: "Metropolis","Noto Sans TC";
    font-weight: 700;
    color: var(--ink-2);
    background: #fff;
    text-decoration: none;
    display: inline-block
}
.pick-chip:hover{border-color:var(--accent);background:var(--accent);color:#fff}
.p-cats{padding:60px 0;background:#0a0a0c}
.pc-row{
  background:#fff;border-radius:14px;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:38px 56px;margin-bottom:20px
}
.pc-row:last-child{margin-bottom:0}
.pc-info h2{font-size:24px;font-weight:800;color:var(--ink);margin-bottom:12px;line-height:1.3}
.pc-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-4);margin-bottom:16px}
.pc-tags a{color:var(--ink-4);text-decoration:none}
.pc-tags a:hover{color:var(--accent)}
.pc-tags .dot{color:var(--accent);font-size:9px}
.pc-explore{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-weight:700;font-size:14px;text-decoration:none}
.pc-explore .plus{
  width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;flex:none
}
.pc-visual{flex:none;width:300px;display:flex;align-items:center;justify-content:center}
.pc-visual img{max-width:100%;max-height:250px;object-fit:contain}
.pc-placeholder{
  width:150px;height:150px;border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;
  background:#161618;color:#fff;display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:12px;font-weight:700;line-height:1.5;padding:14px
}
@media(max-width:767px){
    .pc-info h2{
        font-size: 18px;
    }
    .pc-info{
        padding: 30px 0;
    }
    .pc-row {
        flex-direction: column;
        text-align: center;
        padding: 10px 15px !important;
    }
  .pc-tags{justify-content:center}
  .pc-explore{justify-content:center}
}
.p-why{padding:110px 0;background:var(--bg-soft)}
.why-item{background:#fff;padding:40px 15px;text-align:center;position:relative;transition:all .3s;border-top:3px solid var(--accent)}
.why-item:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.07)}
    .why-item .ico {
        width: 64px;
        height: 64px;
        background: var(--accent-soft);
        color: var(--accent);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Bebas Neue",sans-serif;
        font-family: "Metropolis","Noto Sans TC";
        font-size: 26px;
        margin: 0 auto 20px;
        letter-spacing: .02em
    }
.why-item h4{font-size:17px;margin-bottom:10px}
.why-item p{color:var(--ink-3);font-size:13.5px;line-height:1.85}
.p-compare{padding:110px 0;background:#fff}
.compare-table{width:100%;border-collapse:collapse;background:#fff;font-size:14px}
    .compare-table thead th {
        padding: 20px 18px;
        background: var(--ink);
        color: #fff;
        text-align: left;
        font-family: "Oswald",sans-serif;
        font-family: "Metropolis","Noto Sans TC";
        font-size: 13px;
        letter-spacing: .15em;
        font-weight: 600
    }
.compare-table thead th:first-child{background:var(--accent)}
.compare-table tbody td{padding:20px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.compare-table tbody td:first-child{background:var(--bg-soft);font-weight:700}
.compare-table tbody tr:hover td{background:var(--accent-soft)}
.compare-table .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:8px}
@media(max-width:960px){
.pc{grid-template-columns:1fr !important}
  .pc:nth-child(even) .pc-visual,.pc-even .pc-visual,
  .pc:nth-child(even) .pc-visual-item,.pc-even .pc-visual-item{order:1}
  .pc:nth-child(even) .pc-body,.pc-even .pc-body{order:2}
  .pc-body{padding:36px 28px}
  .pc-subs a{border-right:none;border-bottom:1px solid var(--line)}
  .compare-table{font-size:12px}
  .compare-table thead th,.compare-table tbody td{padding:12px 10px}
}

/* ── ProductsCategory 子分類卡片 ── */

/* ── ProductsCategoryTable 左側分類側欄 ── */
.pcat-sidebar{position:sticky;top:100px}
.pcat-side-top{
  display:flex;align-items:center;gap:12px;padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid var(--line);font-size:17px;font-weight:800;color:var(--ink);text-decoration:none
}
.pcat-side-top .dot{width:9px;height:9px;background:var(--accent);flex:none;transform:rotate(45deg)}
.pcat-side-group{border-bottom:1px solid var(--line)}
.pcat-side-group:last-child{border-bottom:none}
.pcat-side-cat{
  display:block;padding:15px 2px;font-size:15px;font-weight:700;color:var(--ink-2);text-decoration:none;transition:color .2s
}
.pcat-side-cat:hover{color:var(--accent)}
.pcat-side-cat.active{color:var(--accent)}
.pcat-side-subs{padding:0 0 14px 18px;display:flex;flex-direction:column;gap:2px}
.pcat-side-sub{
  padding:8px 0;font-size:13.5px;color:var(--ink-3);text-decoration:none;position:relative;transition:color .2s
}
.pcat-side-sub:hover{color:var(--ink)}
.pcat-side-sub.active{color:var(--accent);font-weight:700}
.pcat-side-sub.active::after{content:"";position:absolute;left:0;bottom:2px;width:16px;height:2px;background:var(--accent)}
.pcat-heading{margin-bottom:32px}
.pcat-heading h2{font-size:24px;font-weight:800;color:var(--ink);margin-bottom:8px}
.pcat-heading p{color:var(--ink-3);font-size:16px;margin:0}

/* ── 產品卡片 ── */
.pcat-products{padding:70px 0 110px;background:#fff}
.prod-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--line);overflow:hidden;transition:all .35s;height:100%}
.prod-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.08)}
.prod-card-img{aspect-ratio:1/1;overflow:hidden;background:#eee;display:flex;align-items:center;justify-content:center}
.prod-card-img img{width:100%;height:100%;object-fit:contain;transition:transform .5s}
.prod-card:hover .prod-card-img img{transform:scale(1.06)}
.prod-card-body{padding:20px 10px;flex:1}
.prod-card-model {
    font-family: "Oswald",sans-serif;
    font-family: "Metropolis","Noto Sans TC";
    font-size: 11px;
    /*letter-spacing: .2em;*/
    color: var(--ink-4);
    /*text-transform: uppercase;*/
    margin-bottom: 5px
}
.prod-card-body h4{font-size:15px;line-height:1.4;margin:0;color:var(--ink)}

/* ── 分頁 ── */
.pcat-pager{display:flex;justify-content:center;gap:8px;margin-top:60px}
.pager-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--line);
    font-family: "Oswald",sans-serif;
    font-family: "Metropolis","Noto Sans TC";
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2);
    text-decoration: none;
    transition: all .25s
}
.pager-btn:hover,.pager-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ── 空狀態 ── */
.pcat-empty{padding:80px 0;text-align:center}
.pcat-empty p{font-size:16px;color:var(--ink-3);margin-bottom:28px}

@media(max-width:767px){
  .pcat-products{padding:50px 0 70px}
  .prod-card-body{padding:14px 5px}
  .prod-card-body h4{font-size:13px}
  .pcat-sidebar{position:static;margin-bottom:36px}
    .pcat-heading h2{
        font-size: 18px;
    }
    .pcat-heading p{
        font-size: 15px;

    }
}