/* ============================================================
   賢記紙業 — 影印紙 品牌中心 + brand landing pages
   Scoped .cp-* to avoid clashing with styles.css / catalog.css.
   Extends styles.css tokens. Design rule: NO rounded corners.
   Accent passed via --acc (defaults to the 影印紙 category teal #0E7C99).
   On dark bands, text is white / accents use #1E90FF (never on light).
   ============================================================ */

/* ---------- shared ---------- */
.cp-scope { --acc: #0E7C99; }
.cp-eyebrow { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.cp-eyebrow .bar { width: 1.5rem; height: 2px; background: var(--acc, #0E7C99); flex: none; }
.cp-eyebrow span { font-family: var(--display); font-size: 0.92rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acc, #0E7C99); }

/* ============================================================
   HUB (catalog.html?cat=copy) — replaces the product grid
   ============================================================ */
.cp-hub { --acc: #0E7C99; }
.cp-hub-head { max-width: 46rem; margin-bottom: 2.25rem; }
.cp-hub-head h2 { font-family: var(--display); font-weight: 900; color: var(--navy); font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; }
.cp-hub-head p { font-family: var(--sans); color: #5a5a5a; font-size: 1rem; line-height: 1.8; margin-top: 0.9rem; }

.cp-brand-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 620px) { .cp-brand-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cp-brand-grid { grid-template-columns: repeat(3, 1fr); } }

.cp-brand-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid #e8e6e0;
  border-top: 3px solid var(--acc, #0E7C99); overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
.cp-brand-card:hover { box-shadow: 0 16px 34px rgba(0,0,0,.10); transform: translateY(-3px); }
.cp-pack { position: relative; aspect-ratio: 4 / 3; background: #f4f2ec; overflow: hidden; }
.cp-pack img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* placeholder shown until a real packshot is dropped in */
.cp-pack .cp-pack-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: #b7c2c6; letter-spacing: .04em;
  background: repeating-linear-gradient(45deg, #f0eee8, #f0eee8 10px, #eae7df 10px, #eae7df 20px); }
/* 彩色影印紙 card — 4-colour swatch band instead of a packshot */
.cp-color-pack { background: #fafafa; }
.cp-color-pack .cp-swatches { position: absolute; inset: 0; display: flex; z-index: 1; }
.cp-color-pack .cp-swatches i { flex: 1; height: 100%; }
.cp-kind {
  position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2;
  font-family: var(--display); font-weight: 700; font-size: 0.72rem; letter-spacing: .04em;
  color: #fff; background: var(--acc, #0E7C99); padding: 0.26rem 0.6rem;
}
.cp-brand-card .cp-body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.cp-brand-card .cp-name { font-family: var(--display); font-weight: 700; color: var(--navy); font-size: 1.3rem; line-height: 1.15; }
.cp-brand-card .cp-sub { font-family: var(--sans); font-size: 0.86rem; color: #6f6f6f; margin-top: 0.22rem; }
.cp-brand-card .cp-tag { font-family: var(--sans); font-size: 0.9rem; color: #6d6d6d; line-height: 1.6; margin: 0.7rem 0 1rem; }
.cp-brand-card .cp-go { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 0.85rem; border-top: 1px solid #f0ede7; }
.cp-brand-card .cp-go .t { font-family: var(--display); font-weight: 700; font-size: 0.88rem; color: var(--acc, #0E7C99); }
.cp-brand-card .cp-go svg { width: 16px; height: 16px; color: var(--acc, #0E7C99); transition: transform .2s ease; }
.cp-brand-card:hover .cp-go svg { transform: translateX(4px); }

.cp-hub-foot { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e6e3dc; }
.cp-hub-foot a { font-family: var(--display); font-weight: 600; font-size: 0.92rem; color: var(--navy); display: inline-flex; align-items: center; gap: 0.45rem; }
.cp-hub-foot a:hover { color: var(--acc, #0E7C99); }
.cp-hub-foot a svg { width: 15px; height: 15px; }

/* ============================================================
   BRAND LANDING PAGE
   ============================================================ */
.cp-page { --acc: #0E7C99; }

/* hero — asymmetric split (copy left, packshot right) */
.cp-hero { background: #fff; padding: 2.25rem 0 3rem; }
.cp-hero-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .cp-hero-grid { grid-template-columns: 1.25fr 1fr; gap: 3rem; } }
.cp-hero h1 { font-family: var(--display); font-weight: 900; color: var(--ink); font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.06; }
.cp-hero .cp-lead { font-family: var(--sans); font-size: 1.1rem; color: #4f4f4f; line-height: 1.85; max-width: 34rem; margin-top: 1.2rem; }
.cp-hero .cp-note { font-family: var(--sans); font-size: 0.9rem; color: #7a7a7a; line-height: 1.7; margin-top: 1rem; max-width: 34rem; }
.cp-hero-acts { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.cp-hero-media { position: relative; aspect-ratio: 4 / 3; background: #f4f2ec; border: 1px solid #e8e6e0; overflow: hidden; }
.cp-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-hero-media .cp-pack-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; color: #b7c2c6; letter-spacing: .04em; text-align: center; padding: 1rem;
  background: repeating-linear-gradient(45deg, #f0eee8, #f0eee8 12px, #eae7df 12px, #eae7df 24px); }

/* ---- feature hero (旗艦：深藍 field + 纖維場 signature) ---- */
.cp-hero.cp-hero-feature { position: relative; background: #0A2A6B; overflow: hidden; padding: 3rem 0 3.4rem; --acc: #1E90FF; }
.cp-hero.cp-hero-feature .container { position: relative; z-index: 2; }
.cp-hero.cp-hero-feature h1 { color: #fff; }
.cp-hero.cp-hero-feature .cp-lead { color: rgba(255,255,255,.9); }
.cp-hero.cp-hero-feature .cp-note { color: rgba(255,255,255,.6); }
.cp-hero.cp-hero-feature .cp-hero-media { background: transparent; border: 0; }
.cp-hero.cp-hero-feature .cp-hero-media img { object-fit: contain; filter: drop-shadow(0 22px 38px rgba(0,0,0,.5)); }
/* 纖維場：極細髮絲線（呼應「每克約 3,000 萬根纖維 → 紙面平整不卡紙」），克制、低對比 */
.cp-fiber { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 5px),
    radial-gradient(130% 90% at 78% 22%, rgba(30,144,255,.42), transparent 62%); }
/* hero 事實 spec-strip */
.cp-hero-strip { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.18); }
.cp-hero-strip .s { position: relative; font-family: var(--display); font-weight: 500; font-size: 0.82rem; letter-spacing: .01em; color: rgba(255,255,255,.9); }
.cp-hero-strip .s:not(:first-child)::before { content: "·"; position: absolute; left: -0.8rem; color: rgba(127,178,255,.7); }

/* generic section shell for the brand page */
.cp-sec { padding: 3rem 0; }
.cp-sec.alt { background: var(--bg-soft); }
.cp-sec > .container > h2 { font-family: var(--display); font-weight: 900; color: var(--navy); font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.15; margin-bottom: 1.4rem; }
.cp-sec > .container > h2::before { content: ""; display: inline-block; width: 0.9rem; height: 3px; background: var(--acc, #0E7C99); vertical-align: middle; margin-right: 0.6rem; }
.cp-answer { font-family: var(--sans); font-size: 1.02rem; color: #444; line-height: 1.9; max-width: 48rem; margin-bottom: 1.6rem; }

/* AI-citable facts panel */
.cp-facts { border: 1px solid #e6e3dc; border-left: 4px solid var(--acc, #0E7C99); background: #fff; padding: 1.4rem 1.5rem; max-width: 52rem; }
.cp-facts .cp-facts-label { font-family: var(--display); font-weight: 700; font-size: 0.98rem; letter-spacing: .04em; color: var(--acc, #0E7C99); margin-bottom: 0.95rem; }
.cp-facts ul { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.cp-facts li { position: relative; font-family: var(--sans); font-size: 0.98rem; color: #3f3f3f; line-height: 1.75; padding-left: 1.5rem; }
.cp-facts li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.6rem; height: 0.6rem; background: var(--acc, #0E7C99); }

/* features grid */
.cp-features { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 620px) { .cp-features { grid-template-columns: repeat(2, 1fr); } }
.cp-feat { background: #fff; border: 1px solid #e8e6e0; border-top: 3px solid var(--acc, #0E7C99); padding: 1.35rem 1.4rem; }
.cp-sec.alt .cp-feat { background: #fff; }
.cp-feat .cp-ico { width: 30px; height: 30px; color: var(--acc, #0E7C99); margin-bottom: 0.8rem; }
.cp-feat h3 { font-family: var(--display); font-weight: 700; color: var(--navy); font-size: 1.12rem; line-height: 1.25; margin-bottom: 0.5rem; }
.cp-feat p { font-family: var(--sans); font-size: 0.92rem; color: #666; line-height: 1.75; }

/* use cases */
.cp-uses { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 760px) { .cp-uses { grid-template-columns: repeat(3, 1fr); } }
.cp-use { border-left: 3px solid var(--acc, #0E7C99); padding: 0.4rem 0 0.4rem 1.1rem; }
.cp-use h3 { font-family: var(--display); font-weight: 700; color: var(--navy); font-size: 1.02rem; margin-bottom: 0.4rem; }
.cp-use p { font-family: var(--sans); font-size: 0.9rem; color: #666; line-height: 1.7; }

/* spec table (reuses catalog.css table.spec look via own class) */
.cp-spec-wrap { overflow-x: auto; border: 1px solid #e8e8e8; background: #fff; }
table.cp-spec { width: 100%; border-collapse: collapse; min-width: 22rem; }
table.cp-spec th, table.cp-spec td { font-family: var(--sans); font-size: 0.92rem; text-align: left; padding: 0.7rem 1rem; white-space: nowrap; }
table.cp-spec th { font-family: var(--display); font-weight: 700; color: #fff; background: var(--navy); font-size: 0.84rem; letter-spacing: .03em; }
table.cp-spec td { color: #555; border-top: 1px solid #f0f0f0; }
table.cp-spec tbody tr:nth-child(even) td { background: #fafafa; }
.cp-spec-note { font-family: var(--sans); font-size: 0.92rem; color: #777; line-height: 1.8; background: #fff; border: 1px dashed #cfc9bd; padding: 1.1rem 1.25rem; }
.cp-spec-note b { color: var(--navy); }

/* box packing — 購買單位（以箱供應） */
.cp-box { margin-top: 1.8rem; }
.cp-box h3 { font-family: var(--display); font-weight: 700; color: var(--navy); font-size: 1.1rem; margin-bottom: 0.5rem; }
.cp-box h3::before { content: ""; display: inline-block; width: 0.8rem; height: 3px; background: var(--acc, #0E7C99); vertical-align: middle; margin-right: 0.5rem; }
.cp-box-note { font-family: var(--sans); font-size: 0.9rem; color: #5f5f5f; line-height: 1.7; margin-bottom: 0.9rem; max-width: 46rem; }

/* brand story */
.cp-story .cp-story-lead { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 1.7; max-width: 46rem; margin-bottom: 1.2rem; }
.cp-story p { font-family: var(--sans); font-size: 1.05rem; color: #383838; line-height: 1.95; max-width: 46rem; margin-bottom: 1.1rem; }

/* FAQ */
.cp-faq { display: flex; flex-direction: column; gap: 0.7rem; max-width: 52rem; }
.cp-faq details { border: 1px solid #e6e3dc; background: #fff; }
.cp-sec.alt .cp-faq details { background: #fff; }
.cp-faq summary { font-family: var(--display); font-weight: 700; color: var(--navy); font-size: 1rem;
  padding: 1rem 1.15rem; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.cp-faq summary::-webkit-details-marker { display: none; }
.cp-faq summary::after { content: "+"; font-family: var(--display); font-weight: 700; color: var(--acc, #0E7C99); font-size: 1.35rem; line-height: 1; flex: none; }
.cp-faq details[open] summary::after { content: "–"; }
.cp-faq details[open] summary { border-bottom: 1px solid #f0f0f0; }
.cp-faq .cp-faq-a { font-family: var(--sans); font-size: 0.95rem; color: #555; line-height: 1.85; padding: 1rem 1.15rem 1.2rem; }

/* local CTA — dark band (on-dark text = #1E90FF accents, white body) */
.cp-cta { background: var(--navy); color: #fff; }
.cp-cta .container { padding-top: 3rem; padding-bottom: 3rem; }
.cp-cta h2 { font-family: var(--display); font-weight: 900; color: #fff; font-size: clamp(1.6rem, 3.6vw, 2.3rem); line-height: 1.12; }
.cp-cta .cp-cta-sub { font-family: var(--sans); font-size: 1rem; color: rgba(255,255,255,.82); line-height: 1.8; margin-top: 0.9rem; max-width: 40rem; }
.cp-cta .cp-cta-contact { font-family: var(--display); font-weight: 700; color: #1E90FF; font-size: 1.05rem; margin-top: 1.1rem; }
.cp-cta-acts { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }

/* related brands */
.cp-related h2 { font-family: var(--display); font-weight: 900; color: var(--navy); font-size: 1.5rem; margin-bottom: 1.4rem; }
.cp-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 760px) { .cp-related-grid { grid-template-columns: repeat(4, 1fr); } }
.cp-related-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e8e6e0; border-top: 3px solid var(--acc, #0E7C99); padding: 1rem 1.1rem 1.15rem; transition: box-shadow .2s ease, transform .2s ease; }
.cp-related-card:hover { box-shadow: 0 12px 26px rgba(0,0,0,.09); transform: translateY(-2px); }
.cp-related-card .cp-rimg { aspect-ratio: 4 / 3; background: #f4f2ec; margin: -1rem -1.1rem 0.85rem; overflow: hidden; }
.cp-related-card .cp-rimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-related-card .cp-rimg:empty { display: none; }
.cp-related-card .cp-rk { font-family: var(--display); font-weight: 700; font-size: 0.7rem; letter-spacing: .04em; color: var(--acc, #0E7C99); }
.cp-related-card .cp-rn { font-family: var(--display); font-weight: 700; color: var(--navy); font-size: 1.08rem; margin-top: 0.35rem; }
.cp-related-card .cp-rgo { font-family: var(--sans); font-size: 0.82rem; color: #8a8a8a; margin-top: 0.7rem; }