/*
Theme Name: Plant Chain
Theme URI: https://cationicsurfactants.com/
Author: Guangzhou Plant Chain Beauty Technology Co., Ltd.
Description: Lightweight premium B2B theme for cationic surfactant products and technical content.
Version: 1.3.0
Requires at least: 6.5
Requires PHP: 8.2
Text Domain: plant-chain
*/

:root {
  --pc-green-900: #073e2a;
  --pc-green-800: #085438;
  --pc-green-700: #0d6b46;
  --pc-green-600: #118357;
  --pc-green-100: #e7f2ec;
  --pc-ivory: #f7f5ef;
  --pc-paper: #ffffff;
  --pc-ink: #15241d;
  --pc-muted: #5f6d66;
  --pc-line: #d9e0dc;
  --pc-gold: #b78a3d;
  --pc-danger: #9c2d2d;
  --pc-shadow: 0 20px 50px rgba(7, 62, 42, 0.1);
  --pc-radius: 18px;
  --pc-container: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--pc-ink);
  background: var(--pc-paper);
  font-family: Aptos, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--pc-green-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pc-green-900); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #d5a851; outline-offset: 3px; }
.pc-container { width: var(--pc-container); margin-inline: auto; }
.pc-skip-link { position: fixed; left: 16px; top: -100px; z-index: 9999; padding: 12px 18px; background: var(--pc-paper); }
.pc-skip-link:focus { top: 16px; }

h1, h2, h3, h4 {
  margin: 0 0 0.65em;
  color: var(--pc-green-900);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.12;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6vw, 5.3rem); letter-spacing: -0.04em; }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.65rem); }
p { margin: 0 0 1.2em; }
ul, ol { margin: 0 0 1.4em; padding-left: 1.35em; }
.pc-eyebrow {
  margin-bottom: 14px;
  color: var(--pc-green-700);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.pc-lede { max-width: 760px; color: #34463d; font-size: clamp(1.08rem, 2vw, 1.32rem); }

.pc-topbar { background: var(--pc-green-900); color: #dcebe3; font-size: 0.82rem; }
.pc-topbar .pc-container { display: flex; justify-content: space-between; gap: 24px; padding-block: 8px; }
.pc-topbar a { color: #fff; text-decoration: none; }
.pc-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(7, 62, 42, 0.1); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(14px); }
.pc-header__inner { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 28px; }
.pc-brand { display: flex; align-items: center; gap: 12px; color: var(--pc-green-900); text-decoration: none; }
.pc-brand img { width: 58px; height: 58px; object-fit: contain; }
.pc-brand__words { display: grid; line-height: 1.12; }
.pc-brand__name { font-family: Georgia, "Times New Roman", serif; font-size: 1.12rem; font-weight: 700; }
.pc-brand__detail { color: var(--pc-muted); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }
.pc-header__actions { display: flex; align-items: center; gap: 18px; }
.pc-locale-switcher { position: relative; z-index: 3; }
.pc-locale-switcher summary { display: flex; align-items: center; gap: 7px; border: 1px solid var(--pc-line); border-radius: 999px; padding: 8px 12px; color: var(--pc-green-900); cursor: pointer; font-size: .78rem; font-weight: 750; list-style: none; white-space: nowrap; }
.pc-locale-switcher summary::-webkit-details-marker { display: none; }
.pc-locale-switcher summary::after { content: "⌄"; color: var(--pc-green-700); font-size: 1rem; line-height: 1; }
.pc-locale-switcher[open] summary { border-color: var(--pc-green-600); background: var(--pc-green-100); }
.pc-locale-switcher__globe { color: var(--pc-green-700); font-size: 1rem; line-height: 1; }
.pc-locale-switcher__menu { position: absolute; right: 0; top: calc(100% + 9px); display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); width: 336px; max-height: min(500px, calc(100vh - 120px)); overflow: auto; border: 1px solid var(--pc-line); border-radius: 14px; padding: 9px; background: #fff; box-shadow: var(--pc-shadow); }
.pc-locale-switcher__option { padding: 9px 10px; border-radius: 9px; color: var(--pc-ink); font-size: .8rem; font-weight: 650; text-decoration: none; }
.pc-locale-switcher__option:hover, .pc-locale-switcher__option.is-active { background: var(--pc-green-100); color: var(--pc-green-900); }
.pc-locale-switcher__option.is-active::after { content: "✓"; float: right; color: var(--pc-green-700); }
.pc-nav ul { display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; list-style: none; }
.pc-nav a { color: var(--pc-ink); font-size: 0.94rem; font-weight: 650; text-decoration: none; }
.pc-nav .current-menu-item > a, .pc-nav a:hover { color: var(--pc-green-700); }
.pc-menu-toggle { display: none; border: 0; background: transparent; color: var(--pc-green-900); cursor: pointer; }
.pc-menu-toggle span { display: block; width: 26px; height: 2px; margin: 5px; background: currentColor; }

.pc-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--pc-green-700);
  border-radius: 999px;
  padding: 11px 22px;
  background: var(--pc-green-700);
  color: #fff;
  font-weight: 750;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.pc-button:hover { transform: translateY(-1px); background: var(--pc-green-900); color: #fff; box-shadow: 0 10px 24px rgba(7, 62, 42, 0.2); }
.pc-button--light { border-color: rgba(255,255,255,.7); background: #fff; color: var(--pc-green-900); }
.pc-button--light:hover { background: var(--pc-ivory); color: var(--pc-green-900); }
.pc-button--ghost { background: transparent; color: var(--pc-green-800); }
.pc-button--ghost:hover { color: #fff; }
.pc-text-link { font-weight: 750; text-decoration: none; }

.pc-hero { position: relative; overflow: clip; background: linear-gradient(125deg, #f8f6f0 0%, #edf5f0 65%, #dcece3 100%); }
.pc-hero::before { content: ""; position: absolute; width: 620px; height: 620px; right: -220px; top: -260px; border: 1px solid rgba(13,107,70,.18); border-radius: 50%; box-shadow: 0 0 0 70px rgba(13,107,70,.035), 0 0 0 140px rgba(13,107,70,.025); }
.pc-hero__grid { position: relative; display: grid; min-height: 690px; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(36px, 7vw, 92px); padding-block: 72px 82px; }
.pc-hero h1 { max-width: 760px; }
.pc-hero__content .pc-lede { margin-bottom: 30px; }
.pc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pc-hero__media { position: relative; }
.pc-hero__media img { width: 100%; aspect-ratio: 4 / 5; border-radius: 48% 48% 18px 18px; object-fit: cover; box-shadow: var(--pc-shadow); }
.pc-hero__note { position: absolute; left: -36px; bottom: 30px; max-width: 250px; border: 1px solid rgba(255,255,255,.75); border-radius: 16px; padding: 18px; background: rgba(255,255,255,.92); box-shadow: var(--pc-shadow); }
.pc-hero__note strong { display: block; color: var(--pc-green-900); font-family: Georgia, serif; font-size: 1.5rem; }

.pc-stats { border-block: 1px solid var(--pc-line); background: var(--pc-paper); }
.pc-stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.pc-stat { padding: 28px 32px; text-align: center; }
.pc-stat + .pc-stat { border-left: 1px solid var(--pc-line); }
.pc-stat strong { display: block; color: var(--pc-green-900); font-family: Georgia, serif; font-size: 2rem; }
.pc-stat span { color: var(--pc-muted); font-size: .9rem; }

.pc-section { padding-block: clamp(72px, 9vw, 126px); }
.pc-section--ivory { background: var(--pc-ivory); }
.pc-section--green { background: var(--pc-green-900); color: #e6f1eb; }
.pc-section--green h2, .pc-section--green h3, .pc-section--green .pc-eyebrow { color: #fff; }
.pc-section__head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 44px; }
.pc-section__head > div { max-width: 760px; }
.pc-content-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .42fr); gap: clamp(36px, 7vw, 90px); }
.pc-prose { max-width: 780px; }
.pc-prose > :first-child { margin-top: 0; }
.pc-prose h2 { margin-top: 1.5em; }
.pc-prose h3 { margin-top: 1.4em; }
.pc-prose a { font-weight: 650; }
.pc-prose blockquote { margin: 2em 0; border-left: 4px solid var(--pc-green-600); padding: 8px 0 8px 24px; color: var(--pc-green-900); font-family: Georgia, serif; font-size: 1.3rem; }

.pc-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pc-product-card { overflow: hidden; border: 1px solid var(--pc-line); border-radius: var(--pc-radius); background: #fff; transition: transform 180ms ease, box-shadow 180ms ease; }
.pc-product-card:hover { transform: translateY(-4px); box-shadow: var(--pc-shadow); }
.pc-product-card__image { display: block; overflow: hidden; background: #fff; }
.pc-product-card__image img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 300ms ease; }
.pc-product-card:hover .pc-product-card__image img { transform: scale(1.025); }
.pc-product-card__body { padding: 22px; }
.pc-product-card__body h3 { min-height: 2.25em; margin-bottom: 8px; font-size: 1.22rem; }
.pc-product-card__body h3 a { color: inherit; text-decoration: none; }
.pc-product-card__inci { min-height: 2.8em; margin: 0 0 8px; color: var(--pc-green-700); font-size: .88rem; line-height: 1.45; }
.pc-product-card__cas { color: var(--pc-muted); font-size: .88rem; }

.pc-app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pc-app-card { min-height: 240px; border: 1px solid var(--pc-line); border-radius: var(--pc-radius); padding: 30px; background: #fff; text-decoration: none; transition: background 160ms ease, transform 160ms ease; }
.pc-app-card:hover { transform: translateY(-3px); background: var(--pc-green-100); }
.pc-app-card__number { display: block; margin-bottom: 48px; color: var(--pc-gold); font-size: .82rem; font-weight: 800; }
.pc-app-card p { color: var(--pc-muted); }

.pc-page-hero { border-bottom: 1px solid var(--pc-line); background: linear-gradient(135deg, var(--pc-ivory), #eef5f1); }
.pc-page-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .45fr); align-items: center; gap: 60px; padding-block: 78px; }
.pc-page-hero h1 { font-size: clamp(2.5rem, 5vw, 4.8rem); }
.pc-page-hero__image img { width: 100%; max-height: 360px; border-radius: var(--pc-radius); object-fit: cover; box-shadow: var(--pc-shadow); }
.pc-breadcrumbs { margin-bottom: 20px; color: var(--pc-muted); font-size: .84rem; }
.pc-breadcrumbs a { color: inherit; text-decoration: none; }

.pc-product-hero { padding-block: 64px 76px; background: var(--pc-ivory); }
.pc-product-hero__grid { display: grid; grid-template-columns: minmax(360px, .85fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 7vw, 90px); }
.pc-product-hero__image { overflow: hidden; border-radius: var(--pc-radius); background: #fff; box-shadow: var(--pc-shadow); }
.pc-product-hero__image img { width: 100%; }
.pc-product-hero h1 { font-size: clamp(2.2rem, 4.7vw, 4.4rem); }
.pc-inci { color: var(--pc-green-700); font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 700; }
.pc-specs { display: grid; grid-template-columns: repeat(2, 1fr); margin: 28px 0; border-top: 1px solid var(--pc-line); }
.pc-spec { border-bottom: 1px solid var(--pc-line); padding: 15px 10px 15px 0; }
.pc-spec span { display: block; color: var(--pc-muted); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pc-spec strong { color: var(--pc-green-900); font-weight: 700; }
.pc-tag-list { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0 32px; padding: 0; list-style: none; }
.pc-tag-list li { border: 1px solid var(--pc-line); border-radius: 999px; padding: 7px 12px; background: #fff; color: var(--pc-muted); font-size: .82rem; }
.pc-note { border-left: 4px solid var(--pc-gold); border-radius: 0 12px 12px 0; padding: 20px 24px; background: #fbf6ea; color: #4d412c; }

.pc-inquiry-form { margin-top: 30px; border: 1px solid var(--pc-line); border-radius: var(--pc-radius); padding: clamp(24px, 4vw, 44px); background: #fff; box-shadow: var(--pc-shadow); }
.pc-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pc-inquiry-form label { display: grid; gap: 7px; margin-bottom: 20px; color: var(--pc-green-900); font-size: .9rem; font-weight: 700; }
.pc-inquiry-form input, .pc-inquiry-form select, .pc-inquiry-form textarea { width: 100%; border: 1px solid #bac7c0; border-radius: 10px; padding: 12px 14px; background: #fff; color: var(--pc-ink); }
.pc-inquiry-form input:focus, .pc-inquiry-form select:focus, .pc-inquiry-form textarea:focus { border-color: var(--pc-green-700); outline: 3px solid rgba(17,131,87,.14); }
.pc-form-consent { display: flex !important; grid-template-columns: 22px 1fr; align-items: start; font-weight: 500 !important; }
.pc-form-consent input { width: 18px; margin-top: 4px; }
.pc-form-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.pc-form-notice { margin: 20px 0; border-radius: 10px; padding: 15px 18px; }
.pc-form-notice--success { background: #e4f4eb; color: #0a5b39; }
.pc-form-notice--error { background: #fae7e7; color: var(--pc-danger); }

.pc-sidebar-card { position: sticky; top: 120px; border: 1px solid var(--pc-line); border-radius: var(--pc-radius); padding: 28px; background: var(--pc-ivory); }
.pc-sidebar-card h3 { font-size: 1.4rem; }
.pc-sidebar-card .pc-button { width: 100%; margin-top: 8px; }
.pc-contact-channels { position: sticky; top: 120px; align-self: start; border: 1px solid var(--pc-line); border-radius: var(--pc-radius); padding: 28px; background: var(--pc-ivory); }
.pc-contact-channels h2 { margin-bottom: 10px; font-size: 1.55rem; }
.pc-contact-channels__intro { color: var(--pc-muted); font-size: .92rem; }
.pc-contact-channels__grid { display: grid; gap: 18px; margin-top: 24px; }
.pc-contact-channel { border: 1px solid var(--pc-line); border-radius: 14px; padding: 18px; background: #fff; text-align: center; }
.pc-contact-channel h3 { margin-bottom: 12px; font-size: 1.12rem; }
.pc-contact-channel img { width: min(100%, 190px); height: auto; margin-inline: auto; }
.pc-contact-channel p { margin: 12px 0 0; color: var(--pc-muted); font-size: .84rem; }
.pc-child-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 50px; }
.pc-child-card { border-top: 1px solid var(--pc-line); padding: 24px 0; }
.pc-child-card a { color: inherit; text-decoration: none; }

.pc-footer { background: #062f21; color: #c9dbd1; }
.pc-footer a { color: #fff; }
.pc-footer__main { display: grid; grid-template-columns: 1.25fr .75fr .75fr; gap: 70px; padding-block: 72px 58px; }
.pc-footer .pc-brand { color: #fff; }
.pc-footer .pc-brand__detail { color: #afc7bb; }
.pc-footer h3 { color: #fff; font-family: inherit; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; }
.pc-footer ul { margin: 0; padding: 0; list-style: none; }
.pc-footer li { margin: 8px 0; }
.pc-footer__bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255,255,255,.14); padding-block: 22px; color: #9eb7aa; font-size: .82rem; }
.pc-footer__bottom ul { display: flex; gap: 20px; }

.pc-whatsapp-float {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 900;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 12px 30px rgba(7, 62, 42, 0.28);
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.pc-whatsapp-float:hover { transform: translateY(-2px); background: #1fbd5a; color: #fff; box-shadow: 0 16px 34px rgba(7, 62, 42, 0.34); }
.pc-whatsapp-float:focus-visible { outline-color: #d5a851; }
.pc-whatsapp-float svg { width: 30px; height: 30px; }

html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .pc-locale-switcher__menu { right: auto; left: 0; }
html[dir="rtl"] .pc-locale-switcher__option.is-active::after { float: left; }
html[dir="rtl"] .pc-prose blockquote { border-right: 4px solid var(--pc-green-600); border-left: 0; padding: 8px 24px 8px 0; }

.pc-404 { min-height: 65vh; display: grid; place-items: center; text-align: center; }
.pc-404 h1 { font-size: clamp(4rem, 14vw, 10rem); color: var(--pc-green-100); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

@media (max-width: 980px) {
  .pc-header__inner { min-height: 72px; }
  .pc-menu-toggle { display: block; }
  .pc-header__cta { display: none; }
  .pc-locale-switcher__menu { z-index: 6; }
  .pc-nav { position: absolute; left: 0; right: 0; top: 100%; display: none; border-top: 1px solid var(--pc-line); padding: 18px 20px 26px; background: #fff; box-shadow: var(--pc-shadow); }
  .pc-nav.is-open { display: block; }
  .pc-nav ul { width: var(--pc-container); margin-inline: auto; display: grid; gap: 4px; }
  .pc-nav a { display: block; padding: 10px 0; }
  .pc-hero__grid, .pc-product-hero__grid { grid-template-columns: 1fr; }
  .pc-hero__media { max-width: 660px; }
  .pc-hero__media img { aspect-ratio: 16 / 10; border-radius: var(--pc-radius); }
  .pc-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-app-grid, .pc-child-grid { grid-template-columns: repeat(2, 1fr); }
  .pc-page-hero__inner { grid-template-columns: 1fr; }
  .pc-content-grid { grid-template-columns: 1fr; }
  .pc-sidebar-card { position: static; }
  .pc-contact-channels { position: static; }
  .pc-contact-channels__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 660px) {
  :root { --pc-container: min(100% - 28px, 1180px); }
  body { font-size: 16px; }
  .pc-topbar .pc-container { justify-content: center; text-align: center; }
  .pc-topbar__detail { display: none; }
  .pc-brand__detail { display: none; }
  .pc-brand img { width: 48px; height: 48px; }
  .pc-locale-switcher summary { max-width: 142px; overflow: hidden; padding: 8px 10px; text-overflow: ellipsis; }
  .pc-locale-switcher summary span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .pc-locale-switcher__menu { right: -42px; grid-template-columns: 1fr; width: min(300px, calc(100vw - 28px)); }
  html[dir="rtl"] .pc-locale-switcher__menu { right: auto; left: -42px; }
  .pc-hero__grid { min-height: auto; padding-block: 60px; }
  .pc-hero__note { position: static; margin-top: 14px; }
  .pc-stats__grid { grid-template-columns: 1fr; }
  .pc-stat + .pc-stat { border-left: 0; border-top: 1px solid var(--pc-line); }
  .pc-section__head { display: block; }
  .pc-product-grid, .pc-app-grid, .pc-child-grid, .pc-form-grid, .pc-specs { grid-template-columns: 1fr; }
  .pc-product-card__body h3 { min-height: auto; }
  .pc-page-hero__inner { padding-block: 58px; }
  .pc-footer__main { grid-template-columns: 1fr; gap: 34px; }
  .pc-footer__bottom { display: grid; }
  .pc-footer__bottom ul { flex-wrap: wrap; }
  .pc-contact-channels__grid { grid-template-columns: 1fr; }
  .pc-whatsapp-float { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}