/* ==============================================
   public/front/assets/css/pages.css
   首頁以外的前台頁面：商品列表／商品頁、搜尋、靜態頁（.hy-prose）、常見問題、最新消息、門市、聯絡我們、
   會員登入註冊、會員中心
   外觀照舊官網 hoangyen.com.tw 的同類頁面（規格 12-A）
   ============================================== */

/* ── 商品列表 ── */
.hy-filters { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 48px; }
.hy-list-meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; color: var(--hy-ink-3); font-size: 13px; letter-spacing: .1em; }

/* ── 商品頁 ── */
.hy-pd { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.hy-pd-gallery { position: sticky; top: 120px; }
.hy-pd-main { position: relative; aspect-ratio: 1; background: var(--hy-bg-3); overflow: hidden; }
.hy-pd-main img { width: 100%; height: 100%; object-fit: cover; }
.hy-pd-main .placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--hy-serif); font-size: 120px; color: var(--hy-gold-soft); }
.hy-pd-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.hy-pd-thumbs button { flex: 0 0 72px; height: 72px; padding: 0; border: 1px solid var(--hy-line-2); background: var(--hy-bg-3); cursor: pointer; opacity: .65; transition: all .3s var(--hy-ease); }
.hy-pd-thumbs button.active, .hy-pd-thumbs button:hover { opacity: 1; border-color: var(--hy-gold-2); }
.hy-pd-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.hy-pd-info .cat { font-family: var(--hy-latin); font-style: italic; color: var(--hy-gold-2); font-size: 14px; letter-spacing: .1em; }
.hy-pd-info h1 { font-size: 38px; line-height: 1.3; margin: 12px 0 8px; letter-spacing: .04em; }
.hy-pd-info .jp { font-size: 13px; color: var(--hy-ink-3); letter-spacing: .2em; margin-bottom: 20px; }
.hy-pd-info .tagline { font-family: var(--hy-serif); color: var(--hy-ink-2); line-height: 2; margin-bottom: 24px; }
.hy-pd-price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid var(--hy-line-2); border-bottom: 1px solid var(--hy-line-2); margin-bottom: 24px; }
.hy-pd-price .price { font-family: var(--hy-serif); font-size: 30px; }
.hy-pd-price s { color: var(--hy-ink-3); }
.hy-pd-price .pack { font-size: 13px; color: var(--hy-ink-3); letter-spacing: .1em; margin-left: auto; }
.hy-pd-price .soldout { color: var(--hy-danger); font-size: 13px; letter-spacing: .15em; }
.hy-pd-siblings { margin-bottom: 24px; }
.hy-pd-siblings .label { font-family: var(--hy-serif); font-size: 13px; letter-spacing: .1em; color: var(--hy-ink-2); margin-bottom: 10px; }
.hy-pd-siblings .list { display: flex; gap: 8px; flex-wrap: wrap; }
.hy-pd-siblings .list a, .hy-pd-siblings .list span { padding: 10px 16px; border: 1px solid var(--hy-line); font-size: 13px; text-decoration: none; letter-spacing: .08em; }
.hy-pd-siblings .list span.current { border-color: var(--hy-ink); background: var(--hy-ink); color: var(--hy-bg); }
.hy-pd-siblings .list a:hover { border-color: var(--hy-gold-2); color: var(--hy-gold-2); }
.hy-pd-buy { display: grid; grid-template-columns: 132px minmax(0, 1fr) 52px; gap: 10px; }
.hy-qty { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; border: 1px solid var(--hy-line); height: 52px; }
.hy-qty button { background: none; border: 0; cursor: pointer; font-size: 18px; color: var(--hy-ink-2); }
.hy-qty input { width: 100%; border: 0; text-align: center; background: transparent; font-family: var(--hy-latin); font-size: 18px; outline: none; -moz-appearance: textfield; }
.hy-qty input::-webkit-outer-spin-button, .hy-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hy-pd-buy .hy-btn { min-height: 52px; }
.hy-fav-btn { height: 52px; border: 1px solid var(--hy-line); background: transparent; cursor: pointer; font-size: 20px; color: var(--hy-gold-2); }
.hy-fav-btn.on { background: var(--hy-bg-2); }
.hy-pd-trust { display: grid; gap: 8px; margin-top: 24px; font-size: 13px; color: var(--hy-ink-3); letter-spacing: .08em; }
.hy-pd-trust div { display: flex; gap: 10px; align-items: center; }
.hy-pd-trust .bi { color: var(--hy-gold-2); }
.hy-pd-tabs { margin-top: 96px; border-top: 1px solid var(--hy-line); }
.hy-pd-tabs nav { display: flex; gap: 40px; justify-content: center; border-bottom: 1px solid var(--hy-line-2); overflow-x: auto; }
.hy-pd-tabs nav button { background: none; border: 0; padding: 22px 0 18px; cursor: pointer; text-align: center; border-bottom: 2px solid transparent; white-space: nowrap; color: var(--hy-ink-3); }
.hy-pd-tabs nav button .zh { display: block; font-family: var(--hy-serif); font-size: 16px; letter-spacing: .1em; }
.hy-pd-tabs nav button .en { display: block; font-family: var(--hy-latin); font-style: italic; font-size: 11px; letter-spacing: .2em; margin-top: 2px; }
.hy-pd-tabs nav button.active { color: var(--hy-ink); border-bottom-color: var(--hy-gold-2); }
.hy-pd-tabs .panel { display: none; max-width: 860px; margin: 0 auto; padding: 56px 0 0; }
.hy-pd-tabs .panel.active { display: block; }
.hy-pd-blocks { margin-top: 80px; display: grid; gap: 64px; }

/* 商品補充內容區塊（版型照水映美 front/products/partials/content-blocks，class 名稱 pdr- 沿用） */
.pdr-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.pdr-story--img-right .pdr-story__img { order: 2; }
.pdr-story__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pdr-story__label { font-family: var(--hy-latin); font-style: italic; color: var(--hy-gold-2); letter-spacing: .15em; font-size: 13px; }
.pdr-story__title { font-size: 32px; line-height: 1.4; margin: 10px 0 18px; }
.pdr-story__body { font-family: var(--hy-serif); color: var(--hy-ink-2); line-height: 2; white-space: pre-line; }
.pdr-story__list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.pdr-story__list .bi { color: var(--hy-gold-2); margin-right: 8px; }
.pdr-story__link { color: var(--hy-gold-2); text-decoration: none; border-bottom: 1px solid currentColor; }
.pdr-banner { position: relative; }
.pdr-banner img { width: 100%; }
.pdr-banner__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px; color: #fff; background: linear-gradient(to top, rgba(20, 15, 8, .6), transparent); }
.pdr-banner__title { font-family: var(--hy-serif); font-size: 30px; margin: 0; }
.pdr-banner__sub { font-family: var(--hy-latin); font-style: italic; letter-spacing: .2em; margin: 6px 0 0; }
.pdr-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.pdr-duo img { width: 100%; }
.pdr-video__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.pdr-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── 編輯器內容（靜態頁、商品說明、最新消息、常見問題答案） ── */
.hy-prose { font-family: var(--hy-serif); color: var(--hy-ink-2); line-height: 2.1; font-size: 16px; overflow-wrap: anywhere; }
.hy-prose h2 { font-size: 34px; color: var(--hy-ink); margin: 16px 0 12px; line-height: 1.4; }
.hy-prose h3 { font-size: 24px; color: var(--hy-ink); margin: 40px 0 16px; }
.hy-prose h4 { font-size: 18px; color: var(--hy-ink); margin: 28px 0 12px; }
.hy-prose strong { color: var(--hy-gold-2); font-weight: 500; }
.hy-prose a { color: var(--hy-gold-2); }
.hy-prose ul, .hy-prose ol { padding-left: 1.4em; }
.hy-prose li { margin-bottom: 8px; }
.hy-prose hr { border: 0; border-top: 1px solid var(--hy-line); margin: 56px 0; }
.hy-prose img { margin: 24px auto; }
.hy-prose blockquote { margin: 24px 0; padding: 24px 28px; border-left: 2px solid var(--hy-gold-soft); background: var(--hy-bg-2); }
.hy-prose blockquote p { margin: 0 0 8px; }
.hy-prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.hy-prose th, .hy-prose td { border: 1px solid var(--hy-line); padding: 10px 12px; text-align: left; }
.hy-prose .hy-eyebrow { margin: 0; }
.hy-prose .hy-latin { color: var(--hy-gold-2); }
.hy-article { max-width: 860px; margin: 0 auto; }

/* ── 常見問題 ── */
.hy-faq { max-width: 900px; margin: 0 auto; }
.hy-faq-group { margin-bottom: 56px; }
.hy-faq-group h2 { font-size: 22px; letter-spacing: .1em; padding-bottom: 16px; border-bottom: 1px solid var(--hy-ink); margin-bottom: 0; }
.hy-faq details { border-bottom: 1px solid var(--hy-line-2); }
.hy-faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font-family: var(--hy-serif); font-size: 17px; }
.hy-faq summary::-webkit-details-marker { display: none; }
.hy-faq summary::after { content: '+'; position: absolute; right: 4px; top: 18px; font-family: var(--hy-latin); font-size: 24px; color: var(--hy-gold-2); transition: transform .3s var(--hy-ease); }
.hy-faq details[open] summary::after { transform: rotate(45deg); }
.hy-faq .answer { padding: 0 0 24px; }

/* ── 最新消息 ── */
.hy-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.hy-news-card { text-decoration: none; color: inherit; display: block; }
.hy-news-card .media { aspect-ratio: 3 / 2; background: var(--hy-bg-3); overflow: hidden; }
.hy-news-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--hy-ease); }
.hy-news-card:hover .media img { transform: scale(1.04); }
.hy-news-card .date { font-family: var(--hy-latin); font-style: italic; color: var(--hy-gold-2); font-size: 13px; letter-spacing: .15em; margin-top: 18px; }
.hy-news-card h3 { font-size: 19px; margin: 8px 0; line-height: 1.5; }
.hy-news-card p { font-size: 14px; color: var(--hy-ink-3); margin: 0; }
.hy-news-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--hy-line); flex-wrap: wrap; }
.hy-news-nav a { text-decoration: none; font-family: var(--hy-serif); max-width: 48%; }
.hy-news-nav a:hover { color: var(--hy-gold-2); }

/* ── 門市 ── */
.hy-stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.hy-store-card { border: 1px solid var(--hy-line-2); background: var(--hy-surface); padding: 32px; }
.hy-store-card h2 { font-size: 22px; margin-bottom: 14px; }
.hy-store-card dl { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 14px; }
.hy-store-card dt { font-family: var(--hy-latin); font-style: italic; color: var(--hy-gold-2); letter-spacing: .1em; }
.hy-store-card dd { margin: 0; color: var(--hy-ink-2); }
.hy-store-card .map { display: inline-block; margin-top: 18px; }

/* ── 聯絡我們 ── */
.hy-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 72px; align-items: start; }
.hy-contact-info dl { display: grid; gap: 22px; margin: 0; }
.hy-contact-info dt { font-family: var(--hy-latin); font-style: italic; color: var(--hy-gold-2); letter-spacing: .15em; font-size: 13px; }
.hy-contact-info dd { margin: 4px 0 0; font-family: var(--hy-serif); font-size: 16px; }
.hy-contact-info a { text-decoration: none; }

/* ── 會員登入註冊 ── */
.hy-auth { max-width: 520px; margin: 0 auto; }
.hy-auth.wide { max-width: 720px; }
.hy-auth-card { background: var(--hy-surface); border: 1px solid var(--hy-line-2); padding: 48px 44px; }
.hy-auth-foot { text-align: center; margin-top: 24px; font-size: 14px; color: var(--hy-ink-3); }
.hy-auth-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.hy-divider { display: flex; align-items: center; gap: 14px; color: var(--hy-ink-3); font-family: var(--hy-latin); font-style: italic; font-size: 13px; letter-spacing: .15em; margin: 8px 0; }
.hy-divider::before, .hy-divider::after { content: ''; flex: 1; height: 1px; background: var(--hy-line); }
.hy-social-btns { display: grid; gap: 10px; }
.hy-social-btns a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border: 1px solid var(--hy-line); text-decoration: none; font-size: 14px; letter-spacing: .1em; background: var(--hy-bg); }
.hy-social-btns a:hover { border-color: var(--hy-ink); }
.hy-code-input { letter-spacing: .6em; text-align: center; font-family: var(--hy-latin); font-size: 26px; }

/* ── 會員中心 ── */
.hy-member { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
.hy-member-nav { border: 1px solid var(--hy-line-2); background: var(--hy-surface); }
.hy-member-nav .who { padding: 24px; border-bottom: 1px solid var(--hy-line-2); }
.hy-member-nav .who .hello { font-family: var(--hy-latin); font-style: italic; color: var(--hy-gold-2); font-size: 13px; }
.hy-member-nav .who .name { font-family: var(--hy-serif); font-size: 18px; margin-top: 4px; overflow-wrap: anywhere; }
.hy-member-nav ul { list-style: none; margin: 0; padding: 8px 0; }
.hy-member-nav a, .hy-member-nav button { display: flex; gap: 12px; align-items: center; width: 100%; padding: 12px 24px; text-decoration: none; font-family: var(--hy-serif); font-size: 14px; letter-spacing: .08em; background: none; border: 0; cursor: pointer; text-align: left; color: var(--hy-ink-2); }
.hy-member-nav a:hover, .hy-member-nav button:hover { color: var(--hy-gold-2); }
.hy-member-nav a.active { color: var(--hy-ink); background: var(--hy-bg-2); box-shadow: inset 2px 0 0 var(--hy-gold-2); }
.hy-member-nav .bi { color: var(--hy-gold-2); }
.hy-member-main h1 { font-size: 30px; margin-bottom: 8px; }
.hy-member-main .lead { color: var(--hy-ink-3); margin-bottom: 32px; font-family: var(--hy-serif); }
.hy-panel { background: var(--hy-surface); border: 1px solid var(--hy-line-2); padding: 32px; margin-bottom: 24px; }
.hy-panel h2 { font-size: 18px; letter-spacing: .1em; margin-bottom: 20px; }
.hy-bound { display: flex; gap: 10px; flex-wrap: wrap; }
.hy-bound span { padding: 6px 14px; border: 1px solid var(--hy-line); font-size: 13px; }
.hy-bound span.on { border-color: var(--hy-success); color: var(--hy-success); }
.hy-addr-list { display: grid; gap: 16px; }
.hy-addr { border: 1px solid var(--hy-line-2); background: var(--hy-surface); padding: 22px 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.hy-addr.default { border-color: var(--hy-gold-2); }
.hy-addr .who { font-family: var(--hy-serif); font-size: 16px; }
.hy-addr .badge { font-size: 11px; letter-spacing: .15em; background: var(--hy-gold-2); color: var(--hy-bg); padding: 2px 8px; margin-left: 8px; }
.hy-addr .meta { color: var(--hy-ink-3); font-size: 14px; margin-top: 6px; overflow-wrap: anywhere; }
.hy-addr .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.hy-addr .actions button, .hy-addr .actions a { background: none; border: 1px solid var(--hy-line); padding: 6px 12px; font-size: 13px; cursor: pointer; text-decoration: none; }
.hy-addr .actions button:hover { border-color: var(--hy-ink); }

@media (max-width: 990px) {
    .hy-pd { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .hy-pd-gallery { position: static; }
    .hy-pd-info h1 { font-size: 28px; }
    .hy-pd-tabs { margin-top: 56px; }
    .hy-pd-tabs nav { gap: 24px; justify-content: flex-start; }
    .pdr-story { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .pdr-story--img-right .pdr-story__img { order: 0; }
    .hy-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hy-stores { grid-template-columns: minmax(0, 1fr); }
    .hy-contact { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .hy-member { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .hy-member-nav ul { display: flex; overflow-x: auto; padding: 0; }
    .hy-member-nav li { flex: 0 0 auto; }
    .hy-member-nav a.active { box-shadow: inset 0 -2px 0 var(--hy-gold-2); }
}
@media (max-width: 560px) {
    .hy-news-grid { grid-template-columns: minmax(0, 1fr); }
    .hy-auth-card, .hy-panel { padding: 28px 20px; }
    .hy-pd-buy { grid-template-columns: minmax(0, 1fr) 52px; }
    .hy-pd-buy .hy-qty { grid-column: 1 / -1; }
    .hy-pd-buy .hy-btn { padding: 14px 12px; letter-spacing: .15em; }
    .hy-addr { grid-template-columns: minmax(0, 1fr); }
    .hy-addr .actions { justify-content: flex-start; }
    .pdr-duo { grid-template-columns: minmax(0, 1fr); }
}