/* ========== 變數 ========== */
:root {
    --color-bg:      #faf7f2;
    --color-text:    #3d2b1f;
    --color-accent:  #8b6b4a;
    --color-border:  #e5ddd4;
    --color-dark:    #2c1d12;
    --font-serif:    'Playfair Display', Georgia, serif;
    --font-sans:     'Lato', 'Noto Sans TC', sans-serif;
}

/* ========== 基礎 ========== */
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-weight: 400;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

a {
    color: var(--color-accent);
}

/* ========== 字型輔助 ========== */
.brand-logo {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--color-text);
    text-decoration: none;
}

/* ========== 導覽列 ========== */
.navbar {
    background-color: #f0ebe3;
    padding: 1rem 0;
}

.navbar-logo {
    height: 35px;
    width: auto;
    display: block;
    transition: opacity 0.2s;
}



.navbar-brand:hover .navbar-logo {
    opacity: 0.75;
}

.nav-link {
    color: var(--color-text) !important;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    padding: 0.4rem 0.8rem !important;
    transition: color 0.2s;
}

.nav-link:hover {
    color: var(--color-accent) !important;
}

/* ========== Hero ========== */
.hero-section {
    position: relative;
    overflow: hidden;
    height: 100vh;
    background-color: var(--color-bg);
    padding-top : 100px;
}

.hero-image {
    width: 100%;
      height: auto;
    max-height: 60vh;
    object-fit: contain;

    display: block;
}

.hero-brand {
    font-family: var(--font-serif);
    font-size: clamp(4rem, 12vw, 9rem);
    font-weight: 400;
    letter-spacing: 0.2em;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.hero-slogan {
    font-size: 0.95rem;
    font-weight: 300;
    letter-spacing: 0.18em;
    color: var(--color-accent);
    margin: 0;
}

/* 向下箭頭提示 */
.hero-scroll-hint {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-accent);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.7;
    animation: bounceDown 1.8s ease infinite;
}

.hero-scroll-hint i {
    display: block;
    font-size: 1.1rem;
    margin-top: 0.3rem;
}

@keyframes bounceDown {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}

/* ========== 格狀作品列表 ========== */
.bag-grid-section {
    padding: 3rem 4rem;
    background-color: var(--color-bg);
}

.bag-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.bag-item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--color-border);
}

.bag-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.bag-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* 黑底從下往上滑入 */
.bag-hover-info {
    position: absolute;
    bottom: -100%;
    left: 0;
    right: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: bottom 0.38s ease;
    pointer-events: none;
}

.bag-item:hover .bag-hover-info {
    bottom: 0;
}

.bag-hover-info span {
    color: #fff;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-align: center;
    padding: 0 1.2rem;
    line-height: 1.5;
}

/* ========== 商品詳情頁容器（限寬增加兩側留白）========== */
.bag-detail-outer {
    max-width: 1000px;
}
.bag-detail-outer .detail-full-section {
    overflow: hidden;   /* 讓 ql-content img 的負 margin 不產生橫向捲軸 */
}

/* ========== 格狀列表 POST 表單按鈕還原 ========== */
.bag-item form {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
button.bag-link {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

/* ========== 作品詳情 ========== */
.detail-carousel,
.detail-single-img {
    border-radius: 4px;
    overflow: hidden;
    background-color: #f0ebe3;
}

.detail-img {
    max-height: 560px;
    object-fit: contain;
    background-color: #f0ebe3;
}

.detail-title {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.detail-divider {
    border-color: var(--color-border);
    margin: 1rem 0 1.5rem;
}

.detail-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.3rem;
    font-weight: 700;
}

.detail-desc {
    line-height: 1.8;
    white-space: pre-wrap;
}

.sold-badge .badge {
    background-color: var(--color-text);
    color: #e5ddd4;
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: 0.1em;
}

/* ========== 按鈕 ========== */
.btn-inquiry {
    background-color: var(--color-text);
    border-color: var(--color-text);
    color: #fff;
    letter-spacing: 0.05em;
    font-size: 0.95rem;
    padding: 0.65rem 1.5rem;
    border-radius: 2px;
    transition: background-color 0.2s, border-color 0.2s;
}

.btn-inquiry:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.btn-inquiry-line {
    background-color: #06c755;
    border-color: #06c755;
    color: #fff;
    letter-spacing: 0.05em;
    font-size: 0.95rem;
    padding: 0.65rem 1.5rem;
    border-radius: 2px;
    transition: background-color 0.2s;
}

.btn-inquiry-line:hover {
    background-color: #05b04c;
    border-color: #05b04c;
    color: #fff;
}

/* ========== 靜態內容頁面 ========== */
.content-page {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5rem 2rem;
    overflow: hidden;   /* 讓圖片負 margin 不造成橫向捲軸 */
}

.content-header {
    padding: 3rem 0 0;
}

.content-title {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.05em;
}

.content-subtitle {
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: var(--color-accent);
    text-transform: uppercase;
    margin: 0;
}

.content-body {
    line-height: 1.9;
}

.info-block h5 {
    color: var(--color-text);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.story-value i {
    color: var(--color-accent);
}

/* ========== Footer ========== */
.site-footer {
    background-color: #f0ebe3;
    color: var(--color-text);
}

.footer-brand {
    font-family: var(--font-serif);
    color: var(--color-text);
    font-size: 1.5rem;
}

.footer-slogan {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin: 0;
}

.footer-copy {
    font-size: 0.75rem;
    color: #9a8070;
    margin: 0;
}

.btn-footer-social {
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    background-color: transparent;
    font-size: 0.85rem;
    padding: 0.4rem 1.1rem;
    border-radius: 2px;
    letter-spacing: 0.05em;
    transition: background-color 0.2s, color 0.2s, transform 0.1s;
}

.btn-footer-social:hover {
    background-color: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.btn-footer-social:active {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    color: #fff;
    transform: scale(0.96);
}

/* ========== 波浪分隔 ========== */
.wave-divider {
    display: block;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    background-color: var(--color-bg); /* 中間內容色，SVG 填色為 header/footer 色 */
}

.wave-divider svg {
    display: block;
    width: 100%;
    height: 64px;
}

.footer-logo {
    height: 40px;
    width: auto;
    display: block;
    margin: 0 auto 1rem;
    transition: opacity 0.2s;
}

/* ========== 後台 ========== */
.admin-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--color-border);
}

.admin-preview-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--color-border);
}

.form-section-title {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
    font-weight: 700;
}

/* ========== 空狀態 ========== */
.empty-state {
    padding: 5rem 1rem;
    color: #9a8070;
}

/* ========== Quill 詳細描述渲染（前台）========== */
.detail-full-section .ql-content { text-align: center; }
.detail-full-section .ql-content ul,
.detail-full-section .ql-content ol { list-style-position: inside; padding-left: 0; }
.ql-content p       { margin-bottom: 0.8em; }
.ql-content img {
    display: block;
    height: auto;
    /* 衝出文字欄 2rem padding，填滿容器全寬，連續圖片無縫 */
    width: calc(100% + 4rem);
    max-width: calc(100% + 4rem);
    margin: 0 -2rem;
}
.ql-content h1,
.ql-content h2,
.ql-content h3      { font-family: var(--font-serif); font-weight: 400; margin: 1.5em 0 0.5em; }
.ql-content strong  { font-weight: 700; }
.ql-content em      { font-style: italic; }
.ql-content ul,
.ql-content ol      { padding-left: 1.5em; margin-bottom: 0.8em; }
.ql-content li      { margin-bottom: 0.3em; }
.ql-content a       { color: var(--color-accent); text-decoration: underline; }
.ql-content .ql-size-large  { font-size: 1.25em; }
.ql-content .ql-size-huge   { font-size: 1.6em; }
.ql-content .ql-size-small  { font-size: 0.85em; }
/* Quill 對齊：Quill 以 class 輸出對齊（非 inline style），前台需自行補樣式 */
.ql-content .ql-align-center  { text-align: center; }
.ql-content .ql-align-right   { text-align: right; }
.ql-content .ql-align-justify { text-align: justify; }

/* how to buy：指向 new in / collections 的連結自動渲染成膠囊按鈕 */
.ql-content a[href="/latest-works"],
.ql-content a[href="/collection"] {
    display: inline-block;
    margin: 0.2em 0;
    padding: 0.1em 0.6em;
    background: #8ecdd4;
    color: #fff;
    border-radius: 2em;
    font-size: 1.4em;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-decoration: none;
}
.ql-content a[href="/latest-works"]:hover,
.ql-content a[href="/collection"]:hover {
    background: #79bcc4;
    color: #fff;
}

/* ========== 後台：上傳預覽縮圖框 ========== */
.thumb-item-admin {
    position: relative;
    display: inline-block;
}

/* ========== 麵包屑 ========== */
.breadcrumb {
    font-size: 0.85rem;
}

.breadcrumb-item a {
    color: var(--color-accent);
    text-decoration: none;
}

/* ========== 回到置頂 ========== */
#backToTop {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-accent);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, background 0.2s;
    z-index: 1050;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
#backToTop.visible {
    opacity: 1;
    visibility: visible;
}
#backToTop:hover {
    background: var(--color-bg);
    border-color: var(--color-accent);
}

/* ========== 響應式 ========== */
@media (max-width: 768px) {
    .hero-section {
        height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .bag-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .bag-grid {
        gap: 6px;          /* columns 已由 768px 設為 2 欄，此處只縮小間距 */
    }

    .bag-grid-section {
        padding: 2rem 1.25rem;
    }

    .hero-section {
        padding: 2rem 1.25rem;
    }

    .detail-img {
        max-height: 380px;
    }
}

/* ========== 首頁 section 標題列 ========== */
.section-heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.5rem !important;
}

.section-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-text);
    margin: 0;
    letter-spacing: 0.05em;
}

.section-more-link {
    font-size: 0.8rem;
    color: var(--color-accent);
    text-decoration: none;
    letter-spacing: 0.05em;
    white-space: nowrap;
    position: absolute;
    right: 0;
}

.section-more-link:hover {
    color: var(--color-dark);
    text-decoration: underline;
}

.bag-grid-section--collection {
    background-color: #f3ede4;
}

/* ========== 作品列表頁：側欄 + 格狀並排 ========== */
.works-layout {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
}

.works-grid-area {
    flex: 1;
    min-width: 0;
}

/* ========== 分類側欄 ========== */
.category-sidebar {
    width: 140px;
    flex-shrink: 0;
    padding: 0;
    border-right: 1px solid var(--color-border);
    padding-right: 1.5rem;
}

.category-sidebar-title {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: 700;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.category-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-sidebar-list li {
    margin-bottom: 0.25rem;
}

.category-sidebar-link {
    display: block;
    padding: 0.45rem 0.75rem;
    font-size: 0.9rem;
    color: var(--color-text);
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.category-sidebar-link:hover {
    background-color: var(--color-border);
    color: var(--color-accent);
}

.category-sidebar-link.active {
    background-color: var(--color-accent);
    color: #fff;
    font-weight: 600;
}

@media (max-width: 767px) {
    .works-layout {
        flex-direction: column;
        gap: 1rem;
    }

    .category-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding-right: 0;
        padding-bottom: 1rem;
    }

    .category-sidebar-list {
        display: flex;
        gap: 0.5rem;
    }
}

/* ========== 覆蓋 Bootstrap 預設藍色 ========== */

/* 後台分類篩選 Pills（全部 / 最新作品 / 作品集）*/
.nav-pills .nav-link {
    color: var(--color-text) !important;
    background-color: transparent;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.nav-pills .nav-link:hover {
    background-color: var(--color-border);
    color: var(--color-accent) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--color-accent) !important;
    color: #fff !important;
    box-shadow: none;
}

/* 導覽列下拉選單（作品列表）*/
.dropdown-menu {
    background-color: #f0ebe3;
    border: 1px solid #e0d8ce;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(61, 43, 31, 0.1);
    padding: 0.25rem 0;
}

.dropdown-item {
    color: var(--color-text);
    font-size: 0.95rem;
    padding: 0.5rem 1.2rem;
    transition: background 0.15s, color 0.15s;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #e8e1d6;
    color: var(--color-accent);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--color-accent);
    color: #fff;
}