/* ============================================================
   成功醬油 — Page-Specific Styles
   ============================================================ */

/* ────────────────────────────────────────
   Product Detail (products/show)
──────────────────────────────────────── */
.pd-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.pd-img-main { border-radius:16px; overflow:hidden; border:1px solid var(--border); aspect-ratio:3/4; background:#fff; display:flex; align-items:center; justify-content:center; }
.pd-img-main img { width:100%; height:100%; object-fit:contain; padding:.75rem; }
.pd-thumbs { display:flex; gap:.7rem; margin-top:.9rem; flex-wrap:wrap; }
.pd-thumb { width:72px; height:72px; border-radius:9px; overflow:hidden; border:2px solid var(--border); cursor:pointer; transition:border-color .2s; flex-shrink:0; }
.pd-thumb.active,.pd-thumb:hover { border-color:var(--red); }
.pd-thumb img { width:100%; height:100%; object-fit:cover; }
.pd-badge { display:inline-block; background:var(--cream2); border:1px solid var(--border); border-radius:20px; padding:.25rem .9rem; font-size:.78rem; color:var(--red); font-weight:700; margin-bottom:1rem; }
.pd-name { font-size:clamp(1.5rem,2.5vw,2rem); font-weight:900; color:var(--brown-dk); line-height:1.25; margin-bottom:.4rem; }
.pd-sub { font-size:.93rem; color:var(--muted); margin-bottom:1.3rem; }
.pd-price-row { display:flex; align-items:baseline; gap:.8rem; margin-bottom:1.5rem; }
.pd-price { font-size:1.75rem; font-weight:900; color:var(--red); }
.pd-price-unit { font-size:.88rem; color:var(--muted); }
.pd-divider { border:none; border-top:1px solid var(--border); margin:1.5rem 0; }
.pd-spec-table { width:100%; border-collapse:collapse; font-size:.87rem; margin-bottom:1.8rem; }
.pd-spec-table tr { border-bottom:1px solid var(--border); }
.pd-spec-table td:first-child { color:var(--brown); font-weight:700; padding:.65rem .8rem .65rem 0; width:5.5rem; white-space:nowrap; }
.pd-spec-table td:last-child { color:var(--muted); padding:.65rem 0; }
.pd-actions { display:flex; gap:1rem; flex-wrap:wrap; }
.btn-pd-outline { display:inline-flex; align-items:center; gap:.5rem; border:2px solid var(--border); color:var(--muted); padding:.75rem 1.8rem; border-radius:28px; font-weight:600; font-size:.93rem; transition:all .2s; }
.btn-pd-outline:hover { border-color:var(--red); color:var(--red); }
.related-section { margin-top:4.5rem; padding-top:3rem; border-top:1px solid var(--border); }
.related-title { font-size:1.05rem; font-weight:800; color:var(--brown-dk); margin-bottom:1.5rem; }
@media(max-width:900px){ .pd-grid { grid-template-columns:1fr; gap:2rem; } }

/* ────────────────────────────────────────
   Process Page (process/index)
──────────────────────────────────────── */
.process-intro { background:var(--cream2); border:1px solid var(--border); border-radius:14px; padding:2rem 2.5rem; display:flex; gap:2rem; align-items:flex-start; flex-wrap:wrap; margin-bottom:3.5rem; }
.process-intro-text { flex:1; min-width:200px; }
.process-intro-label { font-size:.78rem; color:var(--red); font-weight:700; letter-spacing:1.5px; margin-bottom:.45rem; }
.process-intro-title { font-size:1rem; font-weight:700; color:var(--brown-dk); margin-bottom:.5rem; }
.process-intro-desc { font-size:.88rem; color:var(--muted); line-height:1.95; }
.process-intro-stats { display:flex; gap:2rem; flex-shrink:0; align-items:center; flex-wrap:wrap; }
.pi-stat { text-align:center; }
.pi-stat-num { font-size:1.8rem; font-weight:900; color:var(--red); line-height:1; }
.pi-stat-num small { font-size:1rem; }
.pi-stat-label { font-size:.75rem; color:var(--muted); margin-top:.2rem; }
.process-steps { display:flex; flex-direction:column; }
.process-step { display:grid; grid-template-columns:88px 1fr 300px; gap:2rem 2.5rem; align-items:center; padding:2rem 0; border-bottom:1px solid var(--border); opacity:0; transform:translateY(24px); transition:opacity .55s cubic-bezier(.4,0,.2,1),transform .55s cubic-bezier(.4,0,.2,1); }
.process-step:last-child { border-bottom:none; }
.process-step.ps-visible { opacity:1; transform:translateY(0); }
.step-num { width:80px; height:80px; border-radius:50%; background:var(--red); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:1.5rem; font-weight:900; flex-shrink:0; box-shadow:0 4px 16px rgba(153,51,0,.3); justify-self:center; }
.step-num small { font-size:.58rem; font-weight:400; opacity:.8; letter-spacing:1px; }
.step-title { font-size:1.05rem; font-weight:700; color:var(--brown-dk); margin-bottom:.6rem; display:flex; align-items:center; gap:.4rem; }
.step-title i { color:var(--red); font-size:1rem; }
.step-desc { font-size:.91rem; color:var(--muted); line-height:2; }
.step-img { border-radius:10px; overflow:hidden; border:1px solid var(--border); aspect-ratio:4/3; }
.step-img img { width:100%; height:100%; object-fit:cover; display:block; }
.step-img--duo { aspect-ratio:auto; display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.step-img--duo img { aspect-ratio:1/1; height:auto; }
@media(max-width:900px){ .process-step { grid-template-columns:72px 1fr; } .step-img { grid-column:1/-1; aspect-ratio:16/9; } }
@media(max-width:540px){ .process-step { grid-template-columns:60px 1fr; gap:1rem 1.2rem; } .step-num { width:60px; height:60px; font-size:1.2rem; } }

/* ────────────────────────────────────────
   News Article Detail (news/show)
──────────────────────────────────────── */
.article-meta { display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; flex-wrap:wrap; }
.article-date { font-size:.82rem; color:var(--muted); }
.article-cat { display:inline-block; background:var(--cream2); border:1px solid var(--border); border-radius:20px; padding:.2rem .85rem; font-size:.78rem; color:var(--red); font-weight:700; }
h1.article-title { font-size:clamp(1.35rem,2.8vw,1.9rem); font-weight:900; color:var(--brown-dk); line-height:1.4; margin-bottom:1.6rem; }
.article-sep { border:none; border-top:2px solid var(--border); margin-bottom:2.4rem; }
.article-body { font-size:.97rem; color:var(--text); line-height:2; min-height:240px; }
.article-body p { margin-bottom:1.25rem; }
.article-body img { border-radius:12px; margin:1.6rem 0; width:100%; border:1px solid var(--border); }
.article-body h2 { font-size:1.15rem; font-weight:800; color:var(--brown-dk); margin:2.2rem 0 .8rem; padding-bottom:.5rem; border-bottom:1px solid var(--border); }
.article-body h3 { font-size:1rem; font-weight:700; color:var(--brown-dk); margin:1.8rem 0 .6rem; }
.article-body ul,.article-body ol { padding-left:1.6rem; margin-bottom:1.25rem; }
.article-body li { margin-bottom:.45rem; }
.article-body a { color:var(--red); text-decoration:underline; text-underline-offset:3px; }
.article-body blockquote { border-left:4px solid var(--red); margin:1.5rem 0; padding:.8rem 1.2rem; background:var(--cream2); border-radius:0 8px 8px 0; color:var(--muted); font-style:italic; }
.article-footer { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.btn-back { display:inline-flex; align-items:center; gap:.5rem; border:1.5px solid var(--border); color:var(--muted); padding:.6rem 1.6rem; border-radius:28px; font-size:.88rem; font-weight:600; transition:all .2s; }
.btn-back:hover { border-color:var(--red); color:var(--red); }
.article-share { display:flex; align-items:center; gap:.6rem; font-size:.83rem; color:var(--muted); }
.share-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1.5px solid var(--border); border-radius:50%; color:var(--muted); font-size:1rem; transition:all .2s; cursor:pointer; }
.share-fb:hover { border-color:#1877F2; color:#1877F2; }
.share-line:hover { border-color:#06C755; color:#06C755; }

/* ────────────────────────────────────────
   Location Page
──────────────────────────────────────── */
.location-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:3rem; align-items:start; margin-top:2.5rem; }
.location-info-card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:2rem; }
.location-info-card h3 { font-size:1.05rem; font-weight:700; color:var(--brown-dk); margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--border); }
.location-row { display:flex; gap:1rem; align-items:flex-start; padding:.85rem 0; border-bottom:1px solid rgba(213,192,160,.4); }
.location-row:last-child { border-bottom:none; }
.location-row i { font-size:1.1rem; color:var(--red); flex-shrink:0; margin-top:.15rem; }
.location-label { font-size:.75rem; color:var(--muted); margin-bottom:.2rem; font-weight:600; letter-spacing:.5px; }
.location-value { font-size:.95rem; color:var(--brown-dk); font-weight:600; }
.location-value a { color:var(--brown-dk); }
.map-wrap { border-radius:14px; overflow:hidden; border:1px solid var(--border); box-shadow:0 4px 20px var(--shadow); }
.map-wrap iframe { display:block; }
.route-card { margin-top:1.5rem; background:var(--cream2); border:1px solid var(--border); border-radius:14px; padding:1.5rem; }
.route-card h4 { font-size:.9rem; font-weight:700; color:var(--brown-dk); margin-bottom:1rem; }
.route-item { display:flex; gap:.8rem; margin-bottom:.75rem; font-size:.85rem; color:var(--muted); }
.route-item:last-child { margin-bottom:0; }
.route-item i { color:var(--red); flex-shrink:0; margin-top:.15rem; }
.map-img-wrap { margin-top:1.5rem; border-radius:14px; overflow:hidden; border:1px solid var(--border); }
@media(max-width:768px){ .location-grid { grid-template-columns:1fr; } }

/* ────────────────────────────────────────
   About / Inspection Certifications
──────────────────────────────────────── */
.cert-intro { max-width:680px; font-size:.95rem; color:var(--muted); line-height:2; margin-bottom:3rem; }
.cert-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:3.5rem; }
.cert-card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:2.2rem 1.8rem; display:flex; flex-direction:column; align-items:center; text-align:center; transition:box-shadow .2s,transform .2s; }
.cert-card:hover { box-shadow:0 8px 28px var(--shadow); transform:translateY(-3px); }
.cert-icon { width:72px; height:72px; background:var(--cream2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2rem; color:var(--red); margin-bottom:1.2rem; border:2px solid var(--border); }
.cert-name { font-size:1rem; font-weight:800; color:var(--brown-dk); margin-bottom:.35rem; line-height:1.45; }
.cert-org { font-size:.78rem; color:var(--red); font-weight:700; letter-spacing:.5px; margin-bottom:.8rem; }
.cert-desc { font-size:.87rem; color:var(--muted); line-height:1.85; }
.lab-row { background:var(--cream2); border:1px solid var(--border); border-radius:14px; padding:2rem 2.5rem; display:flex; gap:2.5rem; flex-wrap:wrap; align-items:flex-start; }
.lab-row-icon { font-size:2.2rem; color:var(--red); flex-shrink:0; margin-top:.1rem; }
.lab-row-body h3 { font-size:1rem; font-weight:700; color:var(--brown-dk); margin-bottom:.5rem; }
.lab-row-body p { font-size:.9rem; color:var(--muted); line-height:1.9; margin:0; }
.lab-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem; }
.lab-tag { padding:.25rem .85rem; background:#fff; border:1px solid var(--border); border-radius:20px; font-size:.8rem; color:var(--muted); }
.docs-section { margin-top:3.5rem; padding-top:3rem; border-top:1px solid var(--border); }
.docs-section-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; }
.docs-filter { display:flex; gap:.5rem; flex-wrap:wrap; }
.doc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.doc-card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:1.5rem 1.2rem 1.2rem; display:flex; flex-direction:column; align-items:center; text-align:center; text-decoration:none; color:var(--text); transition:box-shadow .2s,transform .2s; cursor:pointer; }
.doc-card:hover { box-shadow:0 8px 24px var(--shadow); transform:translateY(-3px); color:var(--text); }
.doc-file-icon { width:64px; height:64px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:2rem; margin-bottom:1rem; }
.doc-file-icon--pdf { background:rgba(220,38,38,.08); color:#dc2626; }
.doc-file-icon--img { background:var(--cream2); color:var(--red); }
.doc-name { font-size:.88rem; font-weight:700; color:var(--brown-dk); margin-bottom:.35rem; line-height:1.45; }
.doc-meta { font-size:.76rem; color:var(--muted); margin-bottom:1rem; }
.doc-open-btn { font-size:.78rem; color:var(--red); font-weight:700; display:inline-flex; align-items:center; gap:.3rem; border:1px solid rgba(153,51,0,.25); border-radius:20px; padding:.2rem .75rem; transition:all .2s; }
.doc-card:hover .doc-open-btn { background:var(--red); color:#fff; border-color:var(--red); }
.doc-lightbox { display:none; position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.78); align-items:center; justify-content:center; }
.doc-lightbox.open { display:flex; }
.doc-lightbox-inner { position:relative; max-width:92vw; max-height:90vh; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,.5); }
.doc-lightbox-close { position:absolute; top:.6rem; right:.8rem; background:rgba(0,0,0,.5); color:#fff; border:none; border-radius:50%; width:36px; height:36px; font-size:1.1rem; cursor:pointer; z-index:10; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.doc-lightbox-close:hover { background:rgba(0,0,0,.8); }
.doc-lightbox-img { max-width:88vw; max-height:86vh; display:block; }
.doc-lightbox-pdf { width:82vw; height:86vh; border:none; display:block; }
@media(max-width:900px){ .doc-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:768px){ .cert-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:640px){ .doc-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .cert-grid { grid-template-columns:1fr; } .doc-grid { grid-template-columns:repeat(2,1fr); gap:.8rem; } }

/* ────────────────────────────────────────
   About Page / Brand Timeline
──────────────────────────────────────── */
.about-story { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; margin-bottom:5.5rem; }
.about-story-img { border-radius:16px; overflow:hidden; box-shadow:0 10px 40px rgba(42,18,0,.15); }
.about-story-img img { width:100%; display:block; }
.about-story-eyebrow { font-size:.78rem; font-weight:700; color:var(--red); letter-spacing:2px; text-transform:uppercase; margin-bottom:.8rem; }
.about-story-heading { font-size:1.45rem; font-weight:800; color:var(--brown-dk); line-height:1.55; margin-bottom:1.4rem; }
.about-story p { font-size:.93rem; color:var(--muted); line-height:2.1; margin-bottom:1rem; }
.about-story p:last-child { margin-bottom:0; }
.timeline-header { text-align:center; margin-bottom:4rem; position:relative; }
.timeline-header h2 { font-size:1.6rem; font-weight:800; color:var(--brown-dk); margin-top:.5rem; }
.timeline-header::after { content:''; display:block; width:40px; height:3px; background:var(--red); border-radius:2px; margin:1rem auto 0; }
.brand-timeline { position:relative; padding-bottom:1rem; }
.brand-timeline::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; background:linear-gradient(to bottom,transparent 0%,var(--border) 5%,var(--border) 95%,transparent 100%); transform:translateX(-50%); }
.tl-row { display:grid; grid-template-columns:1fr 100px 1fr; align-items:start; margin-bottom:3.5rem; }
.tl-row:last-child { margin-bottom:0; }
.tl-mid { display:flex; flex-direction:column; align-items:center; gap:.6rem; padding-top:1.5rem; position:relative; z-index:2; }
.tl-dot { width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--red); box-shadow:0 0 0 5px rgba(153,51,0,.12); flex-shrink:0; transition:box-shadow .3s; }
.tl-row:hover .tl-dot { box-shadow:0 0 0 8px rgba(153,51,0,.18); }
.tl-yr { background:var(--brown-dk); color:#F0C870; font-size:.68rem; font-weight:900; padding:.35rem .7rem; border-radius:8px; border:1px solid rgba(240,200,112,.2); box-shadow:0 2px 8px rgba(0,0,0,.25); text-align:center; line-height:1.65; letter-spacing:1px; white-space:nowrap; }
.tl-card { background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 4px 20px rgba(42,18,0,.07); transition:box-shadow .3s,transform .3s; }
.tl-card:hover { box-shadow:0 10px 36px rgba(42,18,0,.13); transform:translateY(-3px); }
.tl-card--left { margin-right:1.6rem; border-top:3px solid var(--red); }
.tl-card--right { margin-left:1.6rem; border-top:3px solid var(--red); }
.tl-img-slot { background:var(--cream2); aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; border-bottom:1px dashed var(--border); color:#C0A880; font-size:.82rem; }
.tl-img-slot i { font-size:2rem; opacity:.4; }
.tl-img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-bottom:1px solid var(--border); }
.tl-img--portrait { object-fit: contain; background: var(--cream2); }
.tl-card-body { padding:1.5rem 1.7rem; }
.tl-card-era { font-size:.7rem; font-weight:700; color:var(--red); letter-spacing:2px; text-transform:uppercase; margin-bottom:.35rem; }
.tl-card-title { font-size:1.05rem; font-weight:800; color:var(--brown-dk); margin-bottom:.8rem; line-height:1.45; }
.tl-card-text { font-size:.88rem; color:var(--muted); line-height:2.05; }
.tl-card--left,.tl-card--right,.tl-mid { opacity:0; transition:opacity .65s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1),box-shadow .3s; }
.tl-card--left { transform:translateX(-36px); }
.tl-card--right { transform:translateX(36px); }
.tl-mid { transform:scale(.6); transition-delay:.15s; }
.tl-row.tl-visible .tl-card--left,.tl-row.tl-visible .tl-card--right { opacity:1; transform:translateX(0); }
.tl-row.tl-visible .tl-mid { opacity:1; transform:scale(1); }
@media(max-width:900px){ .about-story { grid-template-columns:1fr; gap:2rem; } }
@media(max-width:680px){
  .brand-timeline::before { left:22px; transform:none; }
  .tl-row { grid-template-columns:52px 1fr; }
  .tl-mid { grid-column:1; grid-row:1; padding-top:.8rem; }
  .tl-card--left { grid-column:2; grid-row:1; margin:0; }
  .tl-card--right { grid-column:2; grid-row:1; margin:0; }
  .tl-empty { display:none; }
  .tl-card--left,.tl-card--right { transform:translateY(20px); }
  .tl-row.tl-visible .tl-card--left,.tl-row.tl-visible .tl-card--right { transform:translateY(0); }
}