/*
Theme Name: Chien Chen
Theme URI: https://example.com
Author: Chien Chen Plastic Co., Ltd.
Description: 建禎股份有限公司官方網站佈景主題（區塊主題，支援 Polylang 中英雙語）
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: chienchen
*/

/* ---- base tweaks not expressible in theme.json ---- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }

/* Sticky header */
.cc-header { position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 var(--wp--preset--color--line); }
.admin-bar .cc-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .cc-header { top: 46px; } }

.cc-brand .wp-block-site-title a { text-decoration: none; }
.cc-brand-en { font-size: 12px; letter-spacing: .08em; color: var(--wp--preset--color--slate); text-transform: uppercase; margin: 0; }

/* Language switcher */
.cc-lang { display: inline-flex; gap: 2px; border: 1px solid var(--wp--preset--color--line); border-radius: 999px; padding: 2px; font-size: 13px; }
.cc-lang a { padding: 4px 10px; border-radius: 999px; text-decoration: none; color: var(--wp--preset--color--slate); }
.cc-lang a.is-current { background: var(--wp--preset--color--navy); color: #fff; }

/* Eyebrow label */
.cc-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }

/* Cards */
.cc-card { border: 1px solid var(--wp--preset--color--line); border-radius: 12px; overflow: hidden; background: #fff; height: 100%; transition: box-shadow .2s, transform .2s; }
.cc-card:hover { box-shadow: 0 12px 28px color-mix(in srgb, var(--wp--preset--color--navy) 12%, transparent); transform: translateY(-2px); }
.cc-card .wp-block-image { margin: 0; }
.cc-card .wp-block-image img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }

/* Image placeholders (until real photos are uploaded) */
.cc-ph { aspect-ratio: 4/3; display: grid; place-items: center; color: rgba(255,255,255,.75); font-size: 14px; letter-spacing: .05em;
  background: linear-gradient(135deg, var(--wp--preset--color--navy) 0%, var(--wp--preset--color--navy-2) 100%); }

/* Stats */
.cc-stat-num { font-variant-numeric: tabular-nums; line-height: 1; }

/* Process steps */
.cc-step { border-top: 3px solid var(--wp--preset--color--orange); padding-top: 16px; }
.cc-step-no { color: var(--wp--preset--color--orange); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Spec table */
.cc-table table { border-collapse: collapse; width: 100%; }
.cc-table th, .cc-table td { border-bottom: 1px solid var(--wp--preset--color--line); padding: 12px 8px; text-align: left; vertical-align: top; }
.cc-table th { width: 32%; color: var(--wp--preset--color--slate); font-weight: 600; }

/* Contact Form 7 */
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 textarea, .wpcf7 select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--wp--preset--color--line); border-radius: 8px; font: inherit; background: #fff; box-sizing: border-box; }
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: 2px solid var(--wp--preset--color--orange); outline-offset: 1px; }
.wpcf7 label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 14px; }
.wpcf7 input[type=submit] { background: var(--wp--preset--color--orange); color: #fff; border: 0; border-radius: 8px; padding: 14px 28px; font-weight: 600; cursor: pointer; font: inherit; }
.wpcf7 input[type=submit]:hover { background: var(--wp--preset--color--orange-dark); }
.cc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .cc-form-grid { grid-template-columns: 1fr; } }

/* Card body padding */
.cc-card > .wp-block-group { padding: 20px 22px 24px; }
.cc-card > .wp-block-cover { border-radius: 0; }
.cc-card h3 { margin-top: 0; }

/* Tables: horizontal rules only */
.cc-table table, .cc-table th, .cc-table td { border: 0; }
.cc-table th, .cc-table td { border-bottom: 1px solid var(--wp--preset--color--line); }
@media (max-width: 1024px) { .cc-form-grid { grid-template-columns: 1fr; } }

/* ---- Palette-driven gradients ----
   All colors come from theme.json presets, so switching a style variation
   (外觀 → 編輯器 → 樣式) recolors the whole site. Roles:
   navy = primary (dark), navy-2 = primary light, orange = accent, orange-dark = accent dark */
:root {
  --cc-primary: var(--wp--preset--color--navy);
  --cc-primary-2: var(--wp--preset--color--navy-2);
  --cc-accent: var(--wp--preset--color--orange);
  --cc-accent-2: var(--wp--preset--color--orange-dark);
  /* 全站統一的淡漸層：大色塊一律「上深下淺」，深淺差距很小 */
  --cc-base: var(--wp--preset--color--white);
  --cc-grad-primary: linear-gradient(180deg, var(--cc-primary) 0%, color-mix(in srgb, var(--cc-primary) 55%, var(--cc-primary-2)) 100%);
  --cc-grad-accent: linear-gradient(180deg, var(--cc-accent) 0%, color-mix(in srgb, var(--cc-accent) 86%, #fff) 100%);
  --cc-grad-mist: linear-gradient(180deg, var(--wp--preset--color--mist) 0%, color-mix(in srgb, var(--wp--preset--color--mist) 45%, var(--cc-base)) 100%);
  --cc-flat-accent: linear-gradient(var(--cc-accent), var(--cc-accent));
  --cc-grad-accent-hover: linear-gradient(var(--cc-accent-2), var(--cc-accent-2));
  --cc-glow: transparent;
}

/* Hero / band: primary gradient with a soft accent glow */
.cc-hero .wp-block-cover__background {
  background-image: radial-gradient(circle at 88% 18%, var(--cc-glow) 0%, transparent 42%), var(--cc-grad-primary);
}
.cc-band .wp-block-cover__background {
  background-image: radial-gradient(circle at 10% 90%, var(--cc-glow) 0%, transparent 45%), var(--cc-grad-primary);
}
.cc-photo .wp-block-cover__background, .cc-ph { background-image: var(--cc-grad-primary); }

/* Full-width sections */
.alignfull.has-navy-background-color { background-image: var(--cc-grad-primary); }
.cc-cta.has-orange-background-color { background-image: var(--cc-grad-accent); }
.alignfull.has-mist-background-color { background-image: var(--cc-grad-mist); }

/* Footer text on dark primary */
.cc-muted { color: rgba(255,255,255,.72); }
.cc-muted-2 { color: rgba(255,255,255,.55); }
.cc-rule { border: 0; height: 1px; background: rgba(255,255,255,.14); }

/* Buttons (outline / white buttons keep their style) */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background),
.wpcf7 input[type=submit] {
  background-color: var(--cc-accent);
  background-image: var(--cc-flat-accent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--cc-accent) 28%, transparent);
  transition: transform .15s, box-shadow .15s;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover,
.wpcf7 input[type=submit]:hover {
  background-image: var(--cc-grad-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--cc-accent) 34%, transparent);
}

/* Header: thin brand gradient line */
.cc-header { border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--cc-primary), var(--cc-primary-2) 60%, var(--cc-accent)) 1; }

/* Process steps, stats */
.cc-step { border-top: 0; position: relative; }
.cc-step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--cc-grad-accent); }
.cc-stat-num { background: var(--cc-grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* LINE button: uses the site's primary color (neutral) with the LINE logo */
.cc-line-btn .wp-block-button__link, a.cc-line-float {
  background: var(--cc-primary) !important; background-image: none !important; color: #fff !important;
  box-shadow: none !important;
}
a.cc-line-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none;
}
a.cc-line-float:hover { transform: translateY(-1px); }
a.cc-line-float svg { width: 22px; height: 22px; }
@media (max-width: 600px) { a.cc-line-float span { display: none; } a.cc-line-float { padding: 12px; } }

/* Eyebrow on dark hero/band: lighten accent for contrast */
.cc-hero .cc-eyebrow, .cc-band .cc-eyebrow { color: color-mix(in srgb, var(--cc-accent) 45%, #fff) !important; }

/* ---- 文青單色風格：平塗、細線、小圓角、無陰影 ---- */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background),
.wpcf7 input[type=submit] { box-shadow: none; }
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover,
.wpcf7 input[type=submit]:hover { box-shadow: none; transform: none; }
.wp-element-button, .wpcf7 input[type=submit] { border-radius: 4px !important; letter-spacing: .06em; }
.cc-card { border-radius: 6px; }
.cc-card:hover { box-shadow: none; transform: none; border-color: var(--cc-accent); }
.cc-header { border-image: linear-gradient(var(--cc-accent), var(--cc-accent)) 1; border-top-width: 2px; }
.cc-step::before { height: 1px; border-radius: 0; background: var(--cc-accent); }
.cc-stat-num { background: none; -webkit-text-fill-color: currentColor; color: var(--cc-accent); }
.cc-lang, .cc-lang a { border-radius: 4px; }

/* ---- Light / premium mode support ----
   Text color on "primary" surfaces (hero, banners, footer) comes from
   settings.custom.onPrimary, so a variation can use a light primary surface. */
:root { --cc-on: var(--wp--custom--on-primary, #fff); }
.cc-hero, .cc-band, .cc-photo,
.has-navy-background-color, .has-navy-background-color.has-white-color,
.has-navy-background-color a, .has-navy-background-color h1, .has-navy-background-color h2,
.has-navy-background-color h3, .has-navy-background-color h4,
.cc-hero .has-white-color, .cc-band .has-white-color, .cc-photo .has-white-color,
.has-navy-background-color .has-white-color { color: var(--cc-on) !important; }
.cc-muted { color: color-mix(in srgb, var(--cc-on) 75%, transparent); }
.cc-muted-2 { color: color-mix(in srgb, var(--cc-on) 58%, transparent); }
.cc-rule { background: color-mix(in srgb, var(--cc-on) 16%, transparent); }
.cc-hero .cc-eyebrow, .cc-band .cc-eyebrow { color: var(--wp--custom--eyebrow-on-primary, color-mix(in srgb, var(--cc-accent) 45%, #fff)) !important; }
.cc-lang a.is-current { background: var(--cc-accent); color: #fff; }
a.cc-line-float, .cc-line-btn .wp-block-button__link { background: var(--cc-accent) !important; }

/* Materials table */
.cc-mat-table table { table-layout: auto; font-size: 15px; }
.cc-mat-table thead th { width: auto; color: var(--wp--preset--color--slate); font-weight: 600; border-bottom: 1px solid var(--wp--preset--color--ink); font-size: 13px; letter-spacing: .06em; }
.cc-mat-table td:first-child { white-space: nowrap; }
@media (max-width: 640px) { .cc-mat-table { overflow-x: auto; } .cc-mat-table table { min-width: 560px; } }

/* Header on mid-size screens: keep everything on one line */
.cc-lang a, .cc-brand-en, .cc-header .wp-block-site-title { white-space: nowrap; }
.cc-header .wp-block-navigation-item__content { white-space: nowrap; }
@media (max-width: 1000px) {
  .cc-header .wp-block-navigation { --navigation-layout-gap: 14px; gap: 14px; font-size: .88rem; }
  .cc-brand-en { display: none; }
}

/* Hero lead: calmer size, comfortable line length */
.cc-hero p.has-large-font-size { font-size: 1.125rem !important; line-height: 1.95; max-width: 640px; margin-left: max(0px, calc((100% - 1200px) / 2)) !important; margin-right: auto !important; }

/* =========================================================
   Corporate style (references: 龍成塑膠 / 麒立 / 集泉塑膠)
   White background · one bronze brand color · icon cards ·
   big counters · rounded image panels · solid walnut footer
   ========================================================= */

/* Top contact bar */
.cc-topbar { font-size: 13px; }
.cc-topbar a { color: rgba(255,255,255,.88) !important; text-decoration: none; }
.cc-topbar a:hover { color: #fff !important; }
.cc-topbar-contact { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.cc-topbar-hours { color: rgba(255,255,255,.6); }
.cc-topbar .cc-lang { border-color: rgba(255,255,255,.3); }
.cc-topbar .cc-lang a { color: rgba(255,255,255,.8) !important; padding: 2px 10px; }
.cc-topbar .cc-lang a.is-current { background: rgba(255,255,255,.18); color: #fff !important; }
@media (max-width: 760px) { .cc-topbar-contact a[href^="mailto"], .cc-topbar-hours { display: none; } }

/* Header */
.cc-header { border-top: 0; box-shadow: 0 1px 0 var(--wp--preset--color--line), 0 6px 18px rgba(63,68,71,.05); }
a.cc-header-cta { display: inline-block; white-space: nowrap; background: var(--cc-accent); color: #fff !important; padding: 9px 18px; border-radius: 6px; font-weight: 600; font-size: 14px; text-decoration: none; }
a.cc-header-cta:hover { background: var(--cc-accent-2); }
.cc-header .wp-block-navigation-item__content:hover { color: var(--cc-accent); }
@media (max-width: 600px) { a.cc-header-cta { display: none; } }

/* Section headings: small English label + title + short bronze rule */
.cc-sec-title { position: relative; padding-bottom: 14px; margin-top: 4px !important; }
.cc-sec-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 2px; background: var(--cc-accent); }
.cc-sec-title.is-center::after, .cc-sec-title.has-text-align-center::after { left: 50%; transform: translateX(-50%); }
.cc-eyebrow { letter-spacing: .18em; font-size: 12px !important; margin-bottom: 0 !important; }

/* Buttons */
.wp-element-button, .wpcf7 input[type=submit] { border-radius: 6px !important; letter-spacing: .04em; }

/* Hero (walnut overlay; a background photo added later shows through) */
.cc-hero { color: #fff; }
.cc-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); letter-spacing: .03em; }

/* Counters */
.cc-counters .wp-block-column { text-align: center; position: relative; }
.cc-counters .wp-block-column + .wp-block-column::before { content: ""; position: absolute; left: calc(var(--wp--style--block-gap, 2em) / -2); top: 15%; bottom: 15%; width: 1px; background: var(--wp--preset--color--line); }
p.cc-counter-num { font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 700; color: var(--cc-accent); line-height: 1.1; margin: 0; letter-spacing: .01em; }
p.cc-counter-label { margin-top: 6px !important; }
@media (max-width: 781px) { .cc-counters .wp-block-column + .wp-block-column::before { display: none; } }

/* Icon cards */
.cc-icon-card { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 16px; padding: 34px 22px 26px !important; height: 100%; transition: transform .2s, box-shadow .2s; }
.cc-icon-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(63,68,71,.10); }
.cc-icon-card h3 { margin-top: 18px !important; margin-bottom: 6px; }
.cc-icon { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: var(--cc-accent); color: #fff; display: grid; place-items: center; }
.cc-icon svg { width: 30px; height: 30px; }
.has-mist-background-color .cc-icon-card { background: #fff; }

/* Rounded image panels (集泉 style) */
.cc-photo, .cc-photo .wp-block-cover__background { border-radius: 16px; overflow: hidden; }
.cc-photo-feature, .cc-photo-feature .wp-block-cover__background { border-radius: 16px 96px 16px 16px; }
.cc-card { border-radius: 16px; box-shadow: 0 2px 10px rgba(63,68,71,.04); }
.cc-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(63,68,71,.10); border-color: var(--wp--preset--color--line); }
.cc-card > .wp-block-cover, .cc-card > .wp-block-cover .wp-block-cover__background { border-radius: 0; }

/* Values */
.cc-value { padding: 10px 18px; }

/* Footer */
.cc-slogan { color: var(--wp--custom--eyebrow-on-primary, #E6CFA6) !important; letter-spacing: .12em; font-size: 15px; margin-top: 4px !important; }

/* Process step accent line back to brand bronze */
.cc-step::before { height: 2px; background: var(--cc-accent); }

.cc-icon-card h3 { font-size: 1.2rem !important; }
.cc-icon-card p { line-height: 1.7; }
.cc-card h3 { font-size: 1.25rem !important; }

/* ---- 1. Locked (sticky) header ----
   The whole header sticks; the thin contact bar (45px) slides away,
   the logo + menu row stays pinned at the top while scrolling. */
.cc-header { position: relative; top: auto; }
header.wp-block-template-part { position: sticky; top: -45px; z-index: 50; }
.admin-bar header.wp-block-template-part { top: -13px; }               /* 32px admin bar − 45px */
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: -45px; } }
.cc-topbar { min-height: 45px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.cc-topbar-contact { flex-wrap: nowrap; white-space: nowrap; }

/* ---- Current page highlighted in the menu ---- */
.cc-header .wp-block-navigation-item__content { position: relative; padding: 6px 0; transition: color .15s; }
.cc-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.cc-header .wp-block-navigation-item__content[aria-current="page"] { color: var(--cc-accent) !important; font-weight: 700; }
.cc-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.cc-header .wp-block-navigation-item__content[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--cc-accent);
}
.cc-header .wp-block-navigation-item__content:hover { color: var(--cc-accent) !important; }

/* ---- 3. Clean Chinese line breaks ----
   No single orphaned character at the end of a paragraph, balanced short lines,
   and punctuation never starts a line. */
body { line-break: strict; }
p, li, td, th { text-wrap: pretty; }
h1, h2, h3, h4, .has-text-align-center, .cc-icon-card p, .cc-counter-label, .cc-card p { text-wrap: balance; }
h1, h2, h3, h4, .cc-counter-num, .cc-counter-label, .wp-block-button__link, .cc-header-cta { word-break: keep-all; }

/* Short Chinese text breaks only at punctuation/clauses (never inside a word like 模具);
   overflow-wrap is a safety net for very narrow screens. */
.cc-hero p, .cc-band p, .cc-icon-card p, .cc-card p, .cc-cta p, .cc-step p,
.cc-counter-label, .cc-table td, .cc-sec-title, .cc-value p, .cc-slogan, .wp-block-list li {
  word-break: keep-all; overflow-wrap: anywhere;
}
/* the old per-row sticky offsets no longer apply (the whole <header> is sticky now) */
.cc-header, .admin-bar .cc-header { top: auto !important; }
/* Apply clause-level breaking to all body copy in the page content */
main p, main li, main td, main th, footer p { word-break: keep-all; overflow-wrap: anywhere; }

/* ---- Photos ---- */
.cc-img { margin: 0; }
.cc-img img { display: block; width: 100%; height: auto; border-radius: 16px; }
/* product cut-outs on white: keep the whole product visible */
.cc-card .cc-img img { aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-radius: 0; padding: 10px; box-sizing: border-box; }
.cc-card .cc-img { border-bottom: 1px solid var(--wp--preset--color--line); }
/* product rows on the products page */
.wp-block-column > .cc-img:only-child img { aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border: 1px solid var(--wp--preset--color--line); }
/* feature photo: big rounded corner, cropped to fill */
.cc-img.cc-photo-feature img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px 96px 16px 16px; }
/* hero collage */
.cc-hero-img img { border-radius: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
@media (max-width: 781px) { .cc-hero-img { margin-top: 12px; } }
/* gallery */
.cc-gallery { gap: 18px !important; }
.cc-gal-item { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 14px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.cc-gal-item:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(63,68,71,.10); }
.cc-gal-item img { border-radius: 0; aspect-ratio: 1 / 1; object-fit: contain; }
.cc-gal-item figcaption { text-align: center; font-size: 14px; color: var(--wp--preset--color--ink); margin: 0 !important; padding: 10px 8px 14px; border-top: 1px solid var(--wp--preset--color--line); }
@media (max-width: 781px) { .cc-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ---- Header v3: no top bar; language switch beside the contact button ---- */
header.wp-block-template-part { top: 0; }
.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 46px; } }
@media (max-width: 600px) { .admin-bar header.wp-block-template-part { top: 0; } }
.cc-header .cc-lang { flex-shrink: 0; }
.cc-header .cc-lang a { padding: 5px 11px; font-size: 13px; }
a.cc-header-cta.is-current { background: var(--cc-accent-2); box-shadow: inset 0 -3px 0 rgba(255,255,255,.35); }
/* Mobile header: brand | 中文/EN | 聯絡詢價 | ☰ */
@media (max-width: 600px) {
  a.cc-header-cta { display: inline-block !important; padding: 7px 12px; font-size: 13px; }
  .cc-header .cc-lang a { padding: 4px 8px; font-size: 12px; }
  .cc-header .wp-block-navigation { order: 3; }
  .cc-header > .wp-block-group > .wp-block-group:last-child { gap: 10px !important; }
  .cc-header .wp-block-site-title { font-size: 1rem; }
}

/* Factory photos (製造能力) */
.cc-fac-item { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 14px; overflow: hidden; }
.cc-fac-item img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.cc-fac-item figcaption { text-align: center; font-size: 14px; margin: 0 !important; padding: 10px 8px 14px; color: var(--wp--preset--color--ink); }
/* Hero: the mold photo sits under the walnut overlay */
.cc-hero .wp-block-cover__image-background { filter: grayscale(.35) contrast(1.05); }
/* hand-drawn factory: no heavy rounding, sits on paper */
.cc-img.cc-photo-feature img[src*="factory-sketch"] { border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--mist); }
/* 3-column photo grids (industrial parts, factory) */
.cc-gallery-3 .cc-gal-item img { aspect-ratio: 1 / 1; }
.cc-gallery-3 .cc-fac-item img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 781px) { .cc-gallery-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ---- News list (最新消息) ---- */
.cc-banner-sub { opacity: .8; margin-top: 6px !important; font-size: 1rem; }
.cc-news .wp-block-post-template { gap: 28px; }
.cc-news-card { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 16px; overflow: hidden; height: 100%; transition: transform .2s, box-shadow .2s; position: relative; }
.cc-news-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cc-accent); }
.cc-news-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(63,68,71,.10); }
.cc-news-card .wp-block-post-featured-image { margin: 0; }
.cc-news-body { padding: 26px 26px 28px; }
.cc-news-date { font-size: 13px; letter-spacing: .08em; color: var(--cc-accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-news-date.cc-on-dark { color: var(--wp--custom--eyebrow-on-primary, #E6CFA6); }
.cc-news-title { font-size: 1.15rem !important; line-height: 1.55 !important; margin: 10px 0 0 !important; }
.cc-news-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.cc-news-title a:hover { color: var(--cc-accent); }
.cc-news-excerpt { margin-top: 12px !important; }
.cc-news-excerpt p { font-size: 15px; line-height: 1.85; color: var(--wp--preset--color--slate); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.cc-news-excerpt .wp-block-post-excerpt__more-text { display: none; }
@media (max-width: 781px) { .cc-news .wp-block-post-template { grid-template-columns: 1fr !important; } }

/* Product showcase sub-headings */
.cc-sub-title { box-sizing: border-box; font-size: 1.2rem !important; margin-top: 0 !important; margin-bottom: 14px !important; padding-left: 12px; border-left: 3px solid var(--cc-accent); }

/* Single post navigation */
.cc-post-nav { margin-top: 28px !important; gap: 24px; align-items: stretch; }
.cc-post-nav .post-navigation-link-previous, .cc-post-nav .post-navigation-link-next { flex: 1 1 50%; max-width: 50%; }
.cc-post-nav a { display: block; padding: 16px 18px; border: 1px solid var(--wp--preset--color--line); border-radius: 12px; text-decoration: none; color: var(--wp--preset--color--ink); font-size: 15px; line-height: 1.6; transition: border-color .15s, color .15s; }
.cc-post-nav a:hover { border-color: var(--cc-accent); color: var(--cc-accent); }
.cc-post-nav .post-navigation-link-next { text-align: right; margin-left: auto; }
.cc-post-nav .wp-block-post-navigation-link__arrow-previous, .cc-post-nav .wp-block-post-navigation-link__arrow-next { color: var(--cc-accent); }
.cc-back-news { margin-top: 28px !important; }
a.cc-back-btn { display: inline-block; padding: 10px 22px; border: 1px solid var(--cc-accent); border-radius: 6px; color: var(--cc-accent); text-decoration: none; font-weight: 600; font-size: 14px; }
a.cc-back-btn:hover { background: var(--cc-accent); color: #fff; }
@media (max-width: 600px) { .cc-post-nav { flex-direction: column; } .cc-post-nav > * { max-width: 100% !important; } }
/* fallback cover */
.cc-news-fallback { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--wp--preset--color--mist); }
/* arrow + link inside one box */
.cc-post-nav .wp-block-post-navigation-link { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border: 1px solid var(--wp--preset--color--line); border-radius: 12px; transition: border-color .15s; }
.cc-post-nav .wp-block-post-navigation-link:hover { border-color: var(--cc-accent); }
.cc-post-nav .post-navigation-link-next { flex-direction: row-reverse; text-align: right; }
.cc-post-nav .wp-block-post-navigation-link a { border: 0; padding: 0; }
.cc-post-nav .wp-block-post-navigation-link:empty { display: none; }

/* Header button: short label on phones */
.cc-label-short { display: none; }
@media (max-width: 600px) {
  .cc-label-long { display: none; }
  .cc-label-short { display: inline; }
  .cc-header .wp-block-site-title { white-space: normal !important; font-size: .95rem; line-height: 1.3; }
  .cc-header .cc-brand { min-width: 0; flex: 1 1 auto; }
}

/* Markets: 5 cards + "new market" badge */
.cc-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--cc-accent); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .06em; vertical-align: middle; }
/* lightbox: hint that photos can be enlarged */
.cc-gal-item img, .cc-fac-item img { cursor: zoom-in; }
.cc-fac-item img[src*="mold-cavity"] { object-position: center 40%; }
.cc-mkt-grid { gap: 20px !important; }
@media (max-width: 781px) { .cc-mkt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ================= Homepage animations ================= */
/* 1. hero background: very slow push-in */
@keyframes ccKenBurns { from { transform: scale(1); } to { transform: scale(1.09); } }

/* 4. product collage: gentle float */
@keyframes ccFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* 3. reveal on scroll (only when the script is running) */
.cc-anim .cc-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.cc-anim .cc-reveal.is-in { opacity: 1; transform: none; }
.cc-anim .cc-icon-card.cc-reveal.is-in:hover, .cc-anim .cc-card.cc-reveal.is-in:hover, .cc-anim .cc-gal-item.cc-reveal.is-in:hover, .cc-anim .cc-news-card.cc-reveal.is-in:hover { transform: translateY(-3px); }
/* 2. numbers keep their width while counting */
.cc-counter-num { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .cc-hero .wp-block-cover__image-background, .cc-hero-img img { animation: none !important; }
  .cc-reveal { opacity: 1 !important; transform: none !important; }
}

/* ---- Hero product slideshow ---- */
.cc-hero-slides { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.cc-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .7s ease; }
.cc-slide.is-active { opacity: 1; }
.cc-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cc-slide figcaption { position: absolute; left: 16px; bottom: 14px; margin: 0; padding: 5px 12px; border-radius: 999px; background: rgba(63,68,71,.88); color: #fff; font-size: 13px; letter-spacing: .04em; }
.cc-slide-dots { position: absolute; right: 16px; bottom: 18px; display: flex; gap: 8px; z-index: 2; }
.cc-slide-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(63,68,71,.28); cursor: pointer; transition: width .3s, background .3s; }
.cc-slide-dots button.is-active { width: 24px; border-radius: 6px; background: var(--cc-accent); }
@media (max-width: 781px) { .cc-hero-slides { margin-top: 12px; } }
@media (prefers-reduced-motion: reduce) { .cc-hero-slides { animation: none !important; } .cc-slide { transition: none; } }

/* Page intro line (e.g. 產品應用): aligned with the page title, one sentence per line */
p.cc-lead { box-sizing: border-box; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.85; color: color-mix(in srgb, var(--wp--preset--color--ink) 82%, var(--wp--preset--color--slate)) !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-left: 18px; border-left: 3px solid var(--cc-accent); }
@media (max-width: 600px) { p.cc-lead { font-size: 1.2rem; line-height: 1.85; } p.cc-lead br { display: none; } }

/* =========================================================
   Typography system (one scale for every page, zh + en)
   H1 48 · H2 42 · H3 20 · body 17 · secondary 15 · labels 12–13
   ========================================================= */
:root { --cc-fs-body: 1.0625rem; --cc-fs-small: .9375rem; --cc-fs-h3: 1.25rem; }
/* H1: pages and single posts share one size */
main h1.wp-block-post-title, main .has-navy-background-color h1 { font-size: var(--wp--preset--font-size--huge) !important; }
.cc-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important; }
/* H3 family: card / icon card / sub-title / news / step / values */
.cc-card h3, .cc-icon-card h3, .cc-sub-title, .cc-news-title, .cc-step h4, .cc-value h3, main .wp-block-column > h3 { font-size: var(--cc-fs-h3) !important; line-height: 1.5 !important; }
.cc-value h3.has-orange-color { color: var(--wp--preset--color--ink) !important; }
/* body */
main p, main li, main td { font-size: var(--cc-fs-body); }
/* secondary text */
main p.has-small-font-size, .cc-card p, .cc-icon-card p, .cc-step p, .cc-counter-label, .cc-news-excerpt p,
main figcaption, .cc-gal-item figcaption, .cc-fac-item figcaption, footer p.has-small-font-size, .cc-slogan {
  font-size: var(--cc-fs-small) !important; line-height: 1.75;
}
/* tables: header cell 15 / value cell 17, every table */
.cc-table th, .cc-mat-table thead th { font-size: var(--cc-fs-small) !important; }
.cc-table td, .cc-mat-table td { font-size: var(--cc-fs-body) !important; }
/* labels */
.cc-eyebrow { font-size: 12px !important; }
.cc-step-no { font-size: 13px !important; }
/* hero intro a touch larger than body; page lead larger still */
.cc-hero p.has-large-font-size { font-size: 1.125rem !important; }
/* footer company name */
footer h3.has-large-font-size { font-size: 1.625rem !important; }
/* labels keep their small size (more specific than the secondary-text rule) */
main p.cc-eyebrow { font-size: 12px !important; }
main p.cc-step-no { font-size: 13px !important; }
main .cc-slide figcaption { font-size: 13px !important; }
.cc-banner-sub { font-size: var(--cc-fs-body) !important; }

/* ---------- Logo ---------- */
.cc-brand .wp-block-site-logo img { width: 44px; height: 44px; object-fit: contain; display: block; }
footer .cc-logo { display: block; width: 56px; height: 56px; margin: 0 0 14px; }
@media (max-width: 600px) { .cc-brand .wp-block-site-logo img { width: 36px; height: 36px; } }

/* =========================================================
   明亮版 (body.cc-bright)：主視覺、頁面標題區、頁尾改淺色底深色字；圓角加大
   ========================================================= */
body.cc-bright {
  --cc-on: var(--wp--preset--color--ink);
  --cc-grad-primary: linear-gradient(180deg, var(--wp--preset--color--mist) 0%, color-mix(in srgb, var(--wp--preset--color--mist) 35%, #fff) 100%);
  --wp--custom--eyebrow-on-primary: var(--wp--preset--color--orange);
}
.cc-bright .cc-hero .wp-block-cover__background { opacity: .88 !important; }
.cc-bright .cc-hero .wp-block-cover__image-background { filter: grayscale(1) contrast(.9); }
.cc-bright .cc-hero p:not(.cc-eyebrow) { color: var(--wp--preset--color--slate) !important; }
.cc-bright .cc-hero .is-style-outline .wp-block-button__link { border-color: var(--wp--preset--color--ink) !important; color: var(--wp--preset--color--ink) !important; }
.cc-bright .cc-hero-slides { box-shadow: 0 18px 48px color-mix(in srgb, var(--wp--preset--color--navy) 14%, transparent); }
.cc-bright main > .alignfull.has-navy-background-color:first-child,
.cc-bright .wp-site-blocks > .alignfull.has-navy-background-color { border-bottom: 1px solid var(--wp--preset--color--line); }
.cc-bright footer .has-navy-background-color { border-top: 1px solid var(--wp--preset--color--line); }

.cc-bright footer .cc-slogan { color: var(--wp--preset--color--orange) !important; }
.cc-bright footer a:hover { color: var(--wp--preset--color--orange) !important; }
/* 圓角加大 */
.cc-bright .wp-element-button, .cc-bright .wp-block-button__link, .cc-bright .wpcf7 input[type=submit],
.cc-bright a.cc-header-cta, .cc-bright a.cc-back-btn { border-radius: 12px !important; }
.cc-bright .cc-lang, .cc-bright .cc-lang a { border-radius: 10px; }
.cc-bright .cc-card, .cc-bright .cc-icon-card, .cc-bright .cc-news-card { border-radius: 22px; }
.cc-bright .cc-gal-item, .cc-bright .cc-fac-item, .cc-bright .cc-post-nav a,
.cc-bright .cc-post-nav .wp-block-post-navigation-link { border-radius: 18px; }
.cc-bright .cc-hero-slides { border-radius: 28px; }
.cc-bright .cc-img img, .cc-bright .cc-photo, .cc-bright .cc-photo .wp-block-cover__background { border-radius: 22px; }
.cc-bright .cc-img.cc-photo-feature img, .cc-bright .cc-photo-feature { border-radius: 22px 110px 22px 22px; }
.cc-bright .wpcf7 input:not([type=submit]), .cc-bright .wpcf7 textarea, .cc-bright .wpcf7 select { border-radius: 12px; }