/* GUOWIN public UI contract v2 — docs/uiux-visual-spec.md.
   Loaded after the legacy stylesheet. Keep shared component refinements here. */
:root {
  --ui-field-border:#819588;
  --ui-error-ink:#912b22;
  --ui-error-surface:#fff5f3;
  --ui-control:44px;
  --ui-field:48px;
  --ui-radius:12px;
  --ui-gutter:clamp(20px,3.2vw,40px);
  --ui-section:clamp(48px,6vw,88px);
  --ui-reading:68ch;
  --ui-duration:160ms;
}
.container { padding-inline:var(--ui-gutter); }
.section,.wwd-section { padding-block:var(--ui-section); }
main :is(h1,h2,h3) { letter-spacing:-.015em; }
main :is(.section-heading-row,.about-section-heading) { margin-bottom:32px; align-items:flex-end; }
main :is(.section-heading-row,.about-section-heading) p { max-width:var(--ui-reading); }
:is(.prose,.news-article) p { max-width:var(--ui-reading); }
main :is(.catalog-series-card,.catalog-product-card,.zg-news-card) {
  border:1px solid var(--line-soft); border-radius:var(--ui-radius);
  box-shadow:none; transition:border-color var(--ui-duration) ease;
}
main :is(.catalog-series-card,.catalog-product-card,.zg-news-card):hover {
  border-color:var(--brand-green-700); box-shadow:none; transform:none;
}
.catalog-series-card__copy,.catalog-product-card>span:not(.catalog-photo),.zg-news-card .zg-reveal-panel { padding:24px; }
.catalog-series-card__copy p,.catalog-product-card p { font-size:15px; }
.catalog-series-card__copy h3 { font-size:22px; }
.catalog-series-card__copy>span { padding-top:8px; }
.catalog-series-grid,.catalog-product-grid { gap:24px; }
:is(.btn-cta,.btn-outline,.btn-primary,.brand-cta-primary,.ind-btn-primary,.hero-action,
 .catalog-actions .btn-cta,.catalog-actions .btn-outline,.about-contact-strip .btn-cta) {
  min-height:var(--ui-control)!important; height:auto!important;
  padding:12px 22px!important; white-space:normal; text-align:center;
  box-shadow:none; transition:background-color var(--ui-duration) ease,border-color var(--ui-duration) ease;
}
:is(.btn-cta,.btn-outline,.hero-action):hover { transform:none; box-shadow:none; }
.site-header .header-bar :is(.header-tool,.header-contact,.language-button) {
  min-height:var(--ui-control)!important; height:auto!important;
}
:is(.contact-copy,.catalog-related a,.catalog-filters-header button,.catalog-empty button,.catalog-active-filters button) {
  min-height:var(--ui-control)!important; height:auto!important; padding-block:10px!important;
}
:is(.section-heading-link,.catalog-detail-nav a,.about-page-nav a,.page-breadcrumb a) {
  display:inline-flex; align-items:center; min-height:var(--ui-control);
}
.page-breadcrumb ol { padding-block:4px; font-size:13px; }
.page-breadcrumb li { align-items:center; }
.language-options :is(a,span[aria-current]) { min-height:44px; display:flex; align-items:center; }
.site-header .logo-area a { display:inline-flex; align-items:center; min-height:44px; }
.header-search-panel .site-search__input { min-height:48px; font-size:16px; }
.site-search__results { max-height:min(55dvh,480px); overscroll-behavior:contain; border:1px solid var(--line-soft); box-shadow:var(--shadow-lg); }
.site-search__item { min-height:52px; padding:12px 20px; }
.site-search__item-title { font-size:15px; line-height:1.5; }
.site-search__item-path { overflow-wrap:anywhere; }
.site-search__group-title { font-size:12px; color:var(--ink-500); }
.contact-form-panel { box-shadow:none; padding:32px; }
.contact-form-panel :is(input:not([type=checkbox]):not([type=hidden]),select,textarea) {
  font-size:16px; border:1px solid var(--ui-field-border); background:var(--surface-000); color:var(--ink-900);
}
.contact-form-panel :is(input:not([type=checkbox]):not([type=hidden]),select) { min-height:var(--ui-field); }
.contact-form-panel textarea { min-height:160px; resize:vertical; }
.contact-form-panel :is(input,textarea)::placeholder { color:var(--ink-500); opacity:1; }
.contact-form-panel :is(input,select,textarea):focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.contact-form-panel summary { min-height:44px; padding-block:12px; cursor:pointer; }
.contact-form-panel label:has(input[type=checkbox]),.contact-consent { min-height:44px; align-items:center; }
.contact-path { transition:border-color var(--ui-duration) ease,background-color var(--ui-duration) ease; }
.contact-path:hover { transform:none; box-shadow:none; }
.contact-path.is-selected { border-color:var(--brand-green-700); background:var(--brand-green-050); box-shadow:inset 3px 0 var(--brand-green-700); }
[data-form-status]:not(:empty) { margin-top:16px; padding:16px; border:1px solid var(--line-soft); border-radius:8px; }
[data-form-status].is-error { background:var(--ui-error-surface); color:var(--ui-error-ink); border-color:#c17b72; }
[data-form-status].is-success { background:var(--brand-green-050); color:var(--brand-green-800); }
:where(button,[type=submit]):disabled { cursor:wait; opacity:.65; }
footer .social-link { min-width:44px; min-height:44px; }
footer a:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.back-to-top:focus-visible,.whatsapp-float:focus-visible { outline:3px solid #fff; outline-offset:2px; box-shadow:0 0 0 6px var(--brand-green-900); }
@media(min-width:701px) {
 .page-home .hero-slogan { margin-left:max(var(--ui-gutter),calc((100vw - 1280px)/2 + var(--ui-gutter))); padding-right:24px; }
 .page-home:lang(zh-CN) .hero-title { max-width:12em; font-size:clamp(42px,4.2vw,60px); line-height:1.25!important; }
 .hero-points li { font-size:13px; color:#e0eae5; }
}
@media(max-width:700px) {
 .site-header .header-bar { grid-template-columns:auto minmax(0,1fr) auto; gap:8px; padding-inline:12px; }
 .site-header .header-tools { gap:0; }
 .site-header .header-actions-top { gap:0; }
 .site-header .header-bar :is(.header-tool,.header-contact,.language-button) { width:44px!important; min-width:44px!important; }
 .site-header .header-bar .header-contact { width:auto!important; padding-inline:6px!important; font-size:12px; }
 .site-header .logo-area img { width:clamp(76px,22vw,112px); height:auto; }
 .site-header .logo-area { min-width:0; }
 .site-header .header-bar .language-button { font-size:12px; }
 .page-home .hero-title { font-size:clamp(30px,8.5vw,44px); line-height:1.2!important; }
 .page-home:lang(zh-CN) .hero-title { line-height:1.3!important; }
 .page-home .hero-slogan { width:calc(100% - 40px); margin-left:20px; padding-block:88px 40px; }
 .page-home .hero { min-height:560px; }
 .hero-video-toggle { top:16px; right:20px; }
 .hero-actions { gap:12px; }
 main :is(.section-heading-row,.about-section-heading) { margin-bottom:24px; align-items:flex-start; }
 .catalog-series-card__copy,.catalog-product-card>span:not(.catalog-photo),.zg-news-card .zg-reveal-panel { padding:20px; }
 .contact-form-panel { padding:24px 20px; }
 .catalog-detail-nav { gap:8px 20px; padding-block:8px; }
 .catalog-fast-specs>div { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:16px; }
 .brand-experience__note { font-size:13px; }
 .whatsapp-float { bottom:max(14px,env(safe-area-inset-bottom)); }
 .back-to-top.visible { bottom:calc(74px + env(safe-area-inset-bottom)); }
 footer { padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
}
@media(max-width:700px) {
 .site-header .header-bar .language-button { width:56px!important; min-width:56px!important; padding-inline:2px!important; gap:4px; white-space:nowrap; }
}
/* Application references connect product and editorial pages with reviewed contexts. */
.application-backlinks { border-block:1px solid var(--line-soft); padding:32px 0; margin:32px 0; background:var(--surface-050); }
.application-backlinks h2 { font-size:23px; margin-bottom:12px; }
.application-backlinks p { font-size:15px; max-width:68ch; }
.application-backlinks nav { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:16px; }
.application-backlinks a { display:inline-flex; align-items:center; gap:12px; min-height:44px; color:var(--brand-green-700); font-size:14px; font-weight:600; }
/* v3: About and Contact use the same reading rhythm as application pages. */
.page-about .hero.hero--compact { height:320px; min-height:0; padding:40px 0; }
.page-about .hero.hero--compact .hero-slogan { max-width:1280px; padding-inline:var(--ui-gutter); }
.page-about .hero.hero--compact::after { background:linear-gradient(90deg,rgba(8,34,28,.86),rgba(8,34,28,.35) 70%); }
.page-about .hero-title,.page-contact .hero-title { font-size:clamp(30px,3.2vw,44px); max-width:20ch; margin-left:0; }
.about-page-nav .container { flex-wrap:wrap; gap:0 28px; min-height:64px; overflow:visible; padding-block:8px; }
.about-page-nav a { font-size:14px; }
.about-intro-grid { gap:32px 48px; }
.about-intro-copy p { max-width:68ch; font-size:16px; }
.about-facts { margin-top:0; }
.about-facts>div,.about-facts>div+div { padding:24px; border:0; border-top:1px solid var(--line-soft); }
.about-facts>div:nth-child(4) { grid-column:span 2; }
.about-facts dt { font-size:13px; margin-bottom:10px; }
.about-facts dd { font-size:15px; font-weight:600; }
.about-entity { padding-bottom:32px; }
.about-entity>details { border:1px solid var(--line-soft); border-radius:12px; background:var(--surface-050); }
.about-entity summary { cursor:pointer; min-height:56px; padding:16px 24px; color:var(--brand-green-700); font-size:15px; font-weight:600; }
.about-entity .entity-intro { padding:24px 0; border-top:1px solid var(--line-soft); background:transparent; }
.about-entity .entity-intro>.container { padding-inline:24px; }
.about-entity .entity-intro h2 { font-size:23px; margin-bottom:16px; }
.about-entity .entity-intro :is(p,.lead) { font-size:15px; max-width:78ch; }
.about-entity #trademark-details { scroll-margin-top:112px; }
.about-entity .entity-intro h3 { font-size:18px; margin-top:24px; }
.about-purpose__statements article { min-height:0; padding-block:28px; }
.about-purpose__statements h3 { font-size:clamp(22px,2.1vw,28px); line-height:1.5; }
.about-values-grid { gap:20px; border:0; background:transparent; }
.about-value { min-height:0; padding:24px; border:1px solid #4c7567; border-radius:12px; }
.about-value h3 { margin:0 0 12px; font-size:19px; }
.about-value p { font-size:15px; color:#e0eae5; }
.about-portfolio-grid { gap:24px; border:0; background:transparent; }
.about-portfolio-item { min-height:0; padding:24px; border:1px solid var(--line-soft); }
.about-portfolio-item>div { display:flex; flex-direction:column; min-width:0; }
.about-portfolio-item h3 { font-size:21px; }
.about-portfolio-item p { font-size:15px; flex:1; }
.about-portfolio-item strong { min-height:44px; align-items:center; font-size:14px; }
.page-contact .hero.hero--compact { padding:36px 0; background:var(--brand-green-050); }
.page-contact .hero.hero--compact .hero-slogan { max-width:1280px; padding-inline:var(--ui-gutter); }
.page-contact .contact-layout { gap:40px; grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr); }
.contact-aside { position:static; }
.contact-aside>.section-eyebrow { display:none; }
.contact-path { min-height:112px; padding:16px; border-radius:12px!important; }
.contact-path strong { font-size:15px; }
.contact-direct>a { overflow-wrap:anywhere; min-width:0; }
.page-contact .buyer-next-step__panel { grid-template-columns:minmax(0,1fr) auto; gap:32px; padding:36px; }
.page-contact .buyer-next-step__panel h2 { font-size:clamp(25px,2.5vw,32px); }
.page-contact .buyer-next-step__actions { max-width:300px; }
#inquiry-form { scroll-margin-top:112px; }
:is(.about-entity summary,.about-page-nav a,.contact-path):focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
@media(max-width:1000px) {
 .page-contact .contact-layout { grid-template-columns:minmax(0,1fr); }
 .contact-path { min-height:96px; }
 .about-values-grid,.about-portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
 .page-about .hero.hero--compact { height:auto; padding:calc(100vw / 3 + 24px) 0 24px; background-size:100% auto; background-position:center top; background-color:var(--surface-050); flex-direction:column; }
 .page-about .hero.hero--compact::after { display:none; }
 .page-about .hero.hero--compact :is(.hero-title,.hero-sub) { color:var(--ink-900); text-shadow:none; }
 .page-contact .hero.hero--compact { padding:28px 0; }
 .about-page-nav .container { gap:0 20px; padding-block:8px; }
 .about-facts { grid-template-columns:minmax(0,1fr); }
 .about-facts>div:nth-child(4) { grid-column:auto; }
 .about-facts>div,.about-facts>div+div { padding:20px 0; }
 .about-values-grid,.about-portfolio-grid { grid-template-columns:minmax(0,1fr); }
 .about-purpose__statements article+article { padding-left:0; }
 .about-entity summary { padding:16px 20px; }
 .about-entity .entity-intro>.container { padding-inline:20px; }
 .page-contact .contact-layout { gap:20px; }
 .contact-aside { display:contents; }
 .contact-aside__lead { margin:0; }
 .contact-paths { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .contact-path { min-height:64px; padding:12px; }
 .contact-path strong { margin:0; font-size:14px; }
 .contact-path>span:last-child { display:none; }
 .page-contact .contact-form-panel { order:1; margin-top:4px; }
 .contact-direct { order:2; margin-top:0; }
 .page-contact .buyer-next-step__panel { grid-template-columns:minmax(0,1fr); padding:24px 20px; gap:24px; }
 .page-contact .buyer-next-step__actions { max-width:none; }
 .page-contact .buyer-next-step__actions .btn-cta { width:100%; }
}
