/*
Theme Name: PlayForge Pengchi
Author: shopaii.net
Description: PlayForge child theme for pengchihealth.cn, built on the electronics/medical blue palette (diagnostic cyan, cool neutrals, precision geometry). The main menu bar is green with white top-level text and down-caret arrows on items that own submenus; dropdown submenus keep their white surface and dark text, and submenu links underline on hover. The brand colour is black and the footer is white with black text.
Version: 1.0
Template: playforge

This is the child theme for PlayForge theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)

--------------------------------------------------------------------------------
HOW THIS FILE WORKS — read before editing
--------------------------------------------------------------------------------
The parent theme declares every colour, font, weight, radius, shadow and band
background as a custom property in section 1 of playforge/style.css, and its
own rules read nothing else. Retinting a token there is therefore enough to
restyle the component that uses it, in the parent stylesheet AND in
playforge/assets/css/woocommerce.css.

The parent also fixes the stylesheet order (see inc/enqueue.php), so this file
is always printed after Bootstrap and after the parent sheet:

  bootstrap → bootstrap-icons → playforge/style.css → THIS FILE → woocommerce.css

That means this file needs no !important, no repeated base rules, and no
duplicate selectors. Almost all of it is section 1.

Sections 2 onward hold the small residue that has no token behind it: rules
that add something the parent has no property for at all (a hover underline on
the navbar, a focus ring, a print stylesheet). If you find yourself copying a
parent rule here just to change a value, that value wants a token in the parent
instead.
*/

/* ==========================================================================
   1. Design tokens — electronics / medical palette
   ========================================================================== */

:root {
  /* --- Palette ---------------------------------------------------------- */

  /* Cool clinical neutrals — bluer and lighter than a warm grey scale. */
  --ink: #0f1c2e;
  --muted: #5b6b7f;
  --line: #dde5ee;
  --soft: #f4f8fc;
  --sky: #e6f4fb;

  /* Black brand: fills buttons and drives link colours. White text on the fill.
     --brand-dark is a lifted near-black (#1f1f1f) so a black control still has
     a visible hover/active state rather than sitting perfectly flat. */
  --brand: #000000;
  --brand-dark: #1f1f1f;

  /* Diagnostic cyan, deliberately deepened from a bright cyan so it clears
     3:1 behind white icons AND 4.5:1 behind the dark badge text below. */
  --accent: #0093b8;

  /* The same three colours as channels, for the translucent overlays. Miss
     these and the banner gradients keep the parent's teal. */
  --brand-rgb: 0, 0, 0;
  --brand-dark-rgb: 31, 31, 31;
  --accent-rgb: 0, 147, 184;

  --surface-alt: #f1f6fb;
  --line-soft: #eaf1f8;
  --line-alt: var(--line);
  --ink-prose: #22303f;
  --ink-quote: var(--ink-prose);
  --on-accent: #06222b;         /* 4.6:1 on --accent */

  /* Brand washes. --brand-edge borders an outlined control, --brand-tint
     fills it on hover. */
  --brand-tint: #eaf3fc;
  --brand-edge: #cfe2f7;
  --brand-ring: var(--brand);
  --accent-dark: #007a99;       /* local: hover for the cyan CTA */

  /* Cyan reads as instrumentation, so icons take the accent rather than the
     brand blue. */
  --icon-ink: var(--accent);

  /* Dark instrument surfaces. */
  --panel: #0c1f34;
  --panel-deep: #071726;
  --panel-ink: #c3d3e3;
  --panel-icon-ink: var(--accent);
  --panel-border: 1px solid rgba(255, 255, 255, .06);
  --footer-ink: #a7b9ca;
  --footer-link-ink: #bccbd8;
  --footer-icon-ink: var(--accent);
  --footer-border-top: 3px solid var(--brand);

  /* A fine technical grid over the dark bands. Reads as PCB substrate on
     electronics pages and as graph paper on clinical ones — kept
     near-invisible so it stays a texture and never competes with content. */
  --panel-texture:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 34px);
  --footer-texture: var(--panel-texture);

  /* Recoloured to the cool palette but deliberately still conspicuous — this
     notice is the theme's licence enforcement and must not blend in. */
  --notice-bg: #14283d;
  --notice-border: #274361;
  --notice-ink: #ffd48a;

  /* --- Typography ------------------------------------------------------- */

  --font-body: Inter, "Helvetica Neue", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Restrained weights throughout. A 900 black reads as consumer/leisure;
     medical and electronics buyers respond to a quieter, more technical
     voice. Moving the three scale steps carries every role with them. */
  --fw-black: 700;
  --fw-extrabold: 600;
  --fw-bold: 600;

  /* Roles that should not follow the steps above. */
  --fw-heading: 700;            /* bare h1–h6, which the parent leaves at 500 */
  --fw-menu: var(--fw-medium);
  --fw-prose-heading: 700;
  --fw-price: 700;
  --fw-card-title: 700;

  /* Optical correction: the larger the type, the tighter it wants to be set. */
  --tracking-heading: -.012em;
  --tracking-display: -.024em;
  --tracking-label: .1em;
  --tracking-btn: .004em;

  /* Figures line up in a column wherever numbers carry meaning — and on a
     specification sheet, they always do. */
  --numeric-figures: tabular-nums;

  --prose-width: 100%;
  --prose-line-height: 1.78;
  --prose-link-ink: var(--brand-dark);

  /* --- Geometry --------------------------------------------------------- */

  /* Precision geometry: tighter than a soft consumer radius, and one radius
     per role rather than a range. Instrument, not toy. */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 6px;
  --radius-btn: var(--radius-sm);
  --radius-control: var(--radius-sm);
  --radius-media: var(--radius-sm);
  --radius-pill: var(--radius-sm);
  /* The squared pill above is wanted for the map hint and the tags, but the
     header cart count reads as a count only while it stays round. */
  --radius-badge: 999px;
  --radius-float: 12px;

  /* --- Elevation -------------------------------------------------------- */

  --shadow-card: 0 1px 2px rgba(15, 28, 46, .05);
  --shadow-navbar: 0 1px 0 var(--line), 0 6px 22px rgba(15, 28, 46, .05);
  --shadow-dropdown: 0 14px 36px rgba(15, 28, 46, .12);
  --shadow-form: 0 24px 60px rgba(4, 14, 26, .34);
  --shadow-float: 0 8px 22px rgba(var(--brand-dark-rgb), .32);
  --ring: 0 0 0 .2rem rgba(var(--brand-rgb), .18);

  /* Hover changes the border and shadow rather than lifting the card: no
     layout jitter, and the restraint suits a clinical register. */
  --card-hover-lift: none;
  --blog-hover-lift: none;
  --card-hover-border: var(--brand);
  --shadow-card-hover: 0 10px 30px rgba(var(--brand-rgb), .12);
  --shadow-blog-hover: var(--shadow-card-hover);

  /* --- Bands ------------------------------------------------------------ */

  --hero-overlay: linear-gradient(90deg, rgba(7, 23, 38, .86) 0%, rgba(7, 23, 38, .62) 45%, rgba(7, 23, 38, .18) 100%);
  --hero-bg: #123047;
  --hero-lead-ink: #dbe7f1;
  --hero-title-size: clamp(2.2rem, 4.6vw, 4.4rem);
  --hero-title-size-sm: 2.35rem;
  --hero-title-line-height: 1.06;
  --tracking-hero: -.026em;

  /* Cyan eyebrow — the warm cream tint belonged to the amber accent this
     palette replaces. */
  --eyebrow-ink: #9fdcee;
  --eyebrow-icon-ink: var(--accent);
  --eyebrow-size: .8rem;

  /* Section kickers are set one notch smaller than the parent's. */
  --kicker-size: .74rem;

  --metric-grid: rgba(255, 255, 255, .16);
  --metric-bg: rgba(7, 23, 38, .55);
  --metric-ink: #b9cddd;
  --metric-value-ink: #fff;
  --fw-metric-value: 700;
  --metric-label-size: .8rem;
  --metric-label-transform: uppercase;
  --metric-label-tracking: .06em;

  /* The banner gradient stays translucent so a header image set in the theme
     options still reads through it, and --page-header-bg keeps the band solid
     when no image is set. */
  --page-header-overlay: linear-gradient(100deg, rgba(var(--brand-dark-rgb), .96) 0%, rgba(var(--brand-rgb), .89) 58%, rgba(var(--accent-rgb), .80) 100%);
  --page-header-bg: var(--brand-dark);
  --page-header-lead-ink: #d6e8f7;
  --page-header-padding: 3.5rem 0 3rem;
  --page-header-padding-sm: 2.5rem 0 2.25rem;
  --page-header-border-bottom: 3px solid var(--accent);
  --page-title-size: clamp(2rem, 4vw, 3.2rem);
  --page-header-texture:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 30px);

  --breadcrumb-bg: var(--soft);
  --breadcrumb-divider-ink: #76899e;

  --factory-min-height-md: 340px;
  --factory-overlay: linear-gradient(180deg, rgba(var(--brand-rgb), .10), rgba(var(--accent-rgb), .12));
  --factory-bg: #cddcea;

  --quote-form-border: rgba(255, 255, 255, .16);

  /* A rule top and bottom turns the alternating band into a defined register. */
  --band-border-top: 1px solid var(--line);
  --band-border-bottom: 1px solid var(--line);

  /* --- Components ------------------------------------------------------- */

  --section-padding: 1rem 0;
  --page-padding: 1rem 0;

  /* A compliance chip: outlined, uppercase, letter-spaced. Certifications
     carry real commercial weight in both industries — CE, RoHS, REACH,
     ISO 13485, IEC 60601 — so they are set as chips, not as soft tags. */
  --tag-bg: var(--surface);
  --tag-border: var(--brand-edge);
  --tag-size: .72rem;
  --tag-transform: uppercase;
  --tag-tracking: .07em;
  --tag-hover-bg: var(--brand-tint);
  --tag-hover-border: var(--brand);

  /* …and the certification card gets a rule of accent across the top. */
  --cert-border-top: 3px solid var(--accent);

  --step-bg: var(--brand);
  --step-ink: var(--on-brand);
  --step-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);

  --control-border: #ccd8e5;
  --control-focus-border: var(--brand);
  --label-ink: #3b4c60;
  --label-size: .84rem;
  --label-transform: uppercase;
  --label-tracking: .05em;
  --fw-form-label: var(--fw-semibold);

  /* The parent gives the WooCommerce block buttons a grey border so they stay
     quiet under the product images. This child borders every other outlined
     control with --brand-edge, so these follow suit, and the hover fills with
     the brand wash the tags and price panel already use. */
  --block-btn-border: var(--brand-edge);
  --block-btn-bg-hover: var(--brand-tint);
  --block-btn-border-hover: var(--brand);

  /* The price is the answer to the buyer's first question, so it is given a
     tinted panel with a coloured leading edge rather than a grey box. */
  --price-block-bg: var(--brand-tint);
  --price-block-border: var(--brand-edge);
  --price-block-edge: 3px solid var(--brand);

  /* The specification table is the element that closes the sale in both
     industries, so it is treated as a datasheet: a quiet uppercase label
     column against solid values. */
  --spec-label-ink: var(--muted);
  --spec-label-size: .8rem;
  --spec-label-transform: uppercase;
  --spec-label-tracking: .05em;
  --spec-value-ink: var(--ink);
  --spec-label-width-sm: 42%;

  --widget-title-ink: var(--brand-dark);
  --widget-title-size: .82rem;
  --widget-title-border: 2px solid var(--accent);
  --widget-divider: var(--soft);
  --fw-widget-title: var(--fw-semibold);

  --pagination-hover-border: var(--brand);
  --pagination-hover-ink: var(--brand-dark);

  --map-hint-bg: rgba(var(--brand-rgb), .95);
  --map-hint-weight: var(--fw-medium);

  --nav-ink: #24384f;
}

/* ==========================================================================
   2. Additions with no token behind them
   Everything below adds a property the parent theme does not set at all. Value
   changes belong in section 1, not here.
   ========================================================================== */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Underlines in prose sit clear of the descenders. */
.blog-body a,
.pf-content a,
.entry-content a {
  text-underline-offset: .16em;
  text-decoration-thickness: 1px;
}
.blog-body a:hover,
.pf-content a:hover,
.entry-content a:hover { color: var(--brand); }

/* Cyan secondary action, for "Download datasheet" / "Request sample" calls
   that should not compete with the primary blue. The parent's .btn-accent
   holds the amber accent flat across its states; cyan can take a darker
   hover, so the variant is restated. */
.btn-accent {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-dark);
  --bs-btn-hover-border-color: var(--accent-dark);
  --bs-btn-active-bg: var(--accent-dark);
  --bs-btn-active-border-color: var(--accent-dark);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

.float-cta a.email:hover { background: var(--accent-dark); }

/* Brand buttons take a bright blue fill with white text on hover and keyboard
   focus, site-wide. Covers the homepage "Request a quote" buttons, "Explore
   the product range", and the "Back to home" button on empty-category / 404
   pages; every other .btn-brand (search GO, comment submit, WooCommerce)
   matches it for one consistent button language. Border is restated so no dark
   ring survives around the blue fill. */
.btn-brand:hover,
.btn-brand:focus-visible {
  --pf-brand-hover-blue: #1687ff;
  background-color: var(--pf-brand-hover-blue);
  border-color: var(--pf-brand-hover-blue);
  color: #fff;
}

/* Padding the parent leaves at Bootstrap's default. */
.btn { --bs-btn-padding-x: 1.1rem; --bs-btn-padding-y: .58rem; }

/* .btn-primary: dark green fill, light green on hover, white text in every
   state. The parent maps .btn-primary onto the (black) brand; the same
   specificity here wins because the child stylesheet loads afterwards.
   #15803d matches the green menu bar; #22c55e is its lighter hover. */
.btn-primary {
  --pf-btn-green: #15803d;
  --pf-btn-green-hover: #22c55e;
  --pf-btn-green-active: #16a34a;
  --bs-btn-bg: var(--pf-btn-green);
  --bs-btn-border-color: var(--pf-btn-green);
  --bs-btn-hover-bg: var(--pf-btn-green-hover);
  --bs-btn-hover-border-color: var(--pf-btn-green-hover);
  --bs-btn-active-bg: var(--pf-btn-green-active);
  --bs-btn-active-border-color: var(--pf-btn-green-active);
  --bs-btn-disabled-bg: var(--pf-btn-green);
  --bs-btn-disabled-border-color: var(--pf-btn-green);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 34, 197, 94;
}
.navbar-nav .dropdown-menu { padding: .4rem; }
.navbar-nav .dropdown-item { padding: .45rem .7rem; }
.navbar-nav .dropdown-divider { margin: .35rem .3rem; }

/* Bootstrap's own dropdown hover is a flat grey; the brand wash ties the menu
   to the rest of the palette. The underline is the requested hover cue for
   submenu links; the offset keeps it clear of the descenders. */
.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
  background-color: var(--brand-tint);
  color: var(--brand-dark);
  text-decoration: underline;
  text-underline-offset: .16em;
}

/* Blockquotes are set upright rather than italic: technical and regulatory
   text is frequently quoted verbatim, and italics slow that reading down. */
.blog-body blockquote {
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--soft);
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
  font-style: normal;
}

.blog-body code, .pf-content code {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .1rem .35rem;
  color: var(--brand-dark);
  font-size: .92em;
}

.blog-card .meta { text-transform: uppercase; letter-spacing: .05em; font-weight: var(--fw-semibold); font-size: .74rem; }

.footer h6, .footer .widget-title {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.pf-privacy-link a { color: inherit; }

/* White footer, black text. The parent ships a dark band (--panel-deep fill,
   light inks); the fill and every ink are overridden together. The hover rule
   matters: the parent's footer hover is var(--surface) = white, which would
   disappear against a white background — hover here underlines instead. */
.footer {
  background: #fff;
  color: #000;
  border-top: 3px solid var(--brand);
}
.footer h6,
.footer .brand-name { color: #000; }
.footer a { color: #000; }
.footer a:hover { color: #000; text-decoration: underline; }
.footer i { color: #000; }

/* Green main menu bar. The green is painted on .navbar directly rather than
   by retinting --surface: that token also fills cards, widgets, inputs and the
   dropdown menus, all of which must stay white. Only the bar and the
   top-level links change — the dropdown keeps its white surface and dark text.
   #15803d is 5.6:1 behind white, so the top-level text clears WCAG AA. */
.navbar {
  --pf-nav-green: #15803d;
  background-color: var(--pf-nav-green);
}

/* Top-level links, the text-logo fallback and the search icon read white. */
.navbar .navbar-brand,
.navbar-nav > .nav-item > .nav-link,
.navbar .pf-search-toggle { color: #fff; }

.navbar-nav > .nav-item > .nav-link:hover,
.navbar-nav > .nav-item > .nav-link:focus { color: rgba(255, 255, 255, .82); }

/* The mobile chevron button is rendered right after parent links; on the green
   bar its glyph must be white (it would otherwise inherit the dark body ink).
   Nested chevrons inside the white dropdowns keep their inherited dark colour. */
.navbar-nav > .nav-item > .pf-submenu-toggle { color: #fff; }

/* Bare controls on the bar take a translucent white wash instead of the dark
   --hover-wash, which was meant for a white bar. The chevron selector covers
   the mobile stacked menu; inside the white dropdowns the parent wash stands. */
.navbar .pf-search-toggle:hover,
.navbar .pf-search-toggle:focus-visible,
.navbar .pf-search-toggle[aria-expanded="true"],
.navbar-nav > .nav-item > .pf-submenu-toggle:hover,
.navbar-nav > .nav-item > .pf-submenu-toggle:focus-visible {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

/* Hamburger: white glyph and outline on the green bar. */
.navbar .navbar-toggler { border-color: rgba(255, 255, 255, .45); }
.navbar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .22); }
.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Down arrow on top-level items that own a submenu. The walker tags those
   links with Bootstrap's .dropdown-toggle, whose ::after draws the caret in
   currentColor — white on the green bar. The hover/active rule used to occupy
   that same ::after (carried over from the blue theme, where it reset the
   caret's border), which erased the arrow. The rule now lives on the <li>
   below, leaving the link's ::after free for the caret. */
@media (min-width: 992px) {
  .navbar-nav > .nav-item.dropdown > .nav-link.dropdown-toggle::after {
    display: inline-block;
    margin-left: .35em;
    vertical-align: .15em;
  }

  /* Thin white rule under top-level items as a wayfinding cue. */
  .navbar-nav > .nav-item { position: relative; }
  .navbar-nav > .nav-item::after {
    content: "";
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: 0;
    height: 2px;
    background: #fff;
    transform: scaleX(0);
    transition: transform .18s ease;
  }
  .navbar-nav > .nav-item:hover::after,
  .navbar-nav > .nav-item.current-menu-item::after,
  .navbar-nav > .nav-item.current-menu-parent::after,
  .navbar-nav > .nav-item.current-menu-ancestor::after { transform: scaleX(1); }
}

/* ==========================================================================
   3. WooCommerce
   woocommerce.css is printed after this file, so these carry a leading `body`
   to outrank it. Only what that file does NOT read through a token needs to be
   here — the rest is already handled by section 1.
   ========================================================================== */

/* Review stars stay gold: they inherit var(--accent) in woocommerce.css, and
   cyan stars stop reading as a rating. Deepened from a bright gold so the
   glyphs clear 3:1 against both white and --soft; a rating is a meaningful
   graphic, not decoration. */
body .woocommerce p.stars a { color: #b0760a; }

/* ==========================================================================
   4. Accessibility
   Procurement in both industries routinely asks for a WCAG statement, so the
   focus indicator is made explicit rather than left to the browser default.
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  box-shadow: var(--ring);
}

/* ==========================================================================
   5. Print — specification sheets
   Buyers and clinical engineers print product pages into tender files, so the
   printed page drops the furniture and keeps the datasheet.
   ========================================================================== */

@media print {
  .top-strip,
  .navbar,
  .float-cta,
  .quote-band,
  .footer,
  .pf-sidebar,
  .pf-pagination,
  .breadcrumb-wrap,
  .pf-license-notice { display: none !important; }

  :root {
    --page-padding: 0;
    --section-padding: 0;
    --page-header-padding: 0 0 .75rem;
    --page-header-texture: none;
    --page-header-overlay: none;
    --page-header-bg: transparent;
    --page-header-ink: #000;
    --page-header-lead-ink: #333;
    --page-header-border-bottom: 2px solid #000;
    --spec-label-bg: #f2f2f2;
    --spec-label-ink: #000;
    --shadow-card: none;
    --line: #999;
  }

  body { color: #000; }

  /* Print the destination of prose links, which are otherwise lost on paper. */
  .blog-body a[href^="http"]::after,
  .pf-content a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: .8em;
    word-break: break-all;
  }
}

/* ==========================================================================
   6. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .product-card,
  .blog-card,
  .float-cta a,
  .map-static img,
  .thumb-row img,
  .tag,
  .navbar-nav > .nav-item::after {
    transition: none;
  }
  .float-cta a:hover { transform: none; }
  .map-static:hover img { transform: none; }
}

/* ==========================================================================
   About Us page — Bootstrap 5 content lives directly in the page editor
   (page slug: about-us). Markup is wrapped in .pfabout; the styles below
   cover the simple info sections and the three designed sections:
   Why Pengchi, Inside the Factory and Worldwide Trade.
   ========================================================================== */
.pfabout{
  --pfa-green:#15803d;
  --pfa-green-dark:#0f6b31;
  --pfa-green-soft:rgba(21,128,61,.10);
  --pfa-navy:#0c1f34;
  --pfa-cyan:#0093b8;
  --pfa-ink:#0f1c2e;
  --pfa-muted:#5b6b7f;
  --pfa-line:#e2e9f1;
  --pfa-soft:#f5f8fb;
  color:var(--pfa-ink);
}
.pfabout .pfa-section{padding-block:clamp(2.6rem,5vw,4rem)}
.pfabout .pfa-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pfa-green);margin-bottom:.9rem;
}
.pfabout .pfa-eyebrow::before{content:"";width:26px;height:2px;background:var(--pfa-green);display:inline-block}
.pfabout h2.pfa-title{font-weight:800;letter-spacing:-.02em;font-size:clamp(1.65rem,3.2vw,2.35rem);line-height:1.2;margin-bottom:1rem}
.pfabout .pfa-lead{color:var(--pfa-muted);font-size:1.06rem;line-height:1.8}

/* Intro / simple text */
.pfabout .pfa-profile p{color:var(--pfa-muted);line-height:1.85;margin-bottom:1rem}

/* Simple information tables: General Information, Trade Capacity, etc. */
.pfabout .pfa-info{margin-bottom:0}
.pfabout .pfa-info th{
  width:230px;background:var(--pfa-soft);color:var(--pfa-ink);
  font-weight:700;vertical-align:middle;
}
.pfabout .pfa-info td{color:var(--pfa-muted);vertical-align:middle;line-height:1.6}
.pfabout .pfa-verified{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;color:var(--pfa-green);font-weight:600;margin-bottom:.9rem}

/* Cards (Why Pengchi) */
.pfabout .pfa-card{
  height:100%;background:#fff;border:1px solid var(--pfa-line);border-radius:1rem;
  padding:1.6rem 1.5rem;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.pfabout .pfa-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(12,31,52,.10);border-color:#cdd9e5}
.pfabout .pfa-icon{
  width:54px;height:54px;border-radius:.8rem;display:flex;align-items:center;justify-content:center;
  background:var(--pfa-green-soft);color:var(--pfa-green);font-size:1.5rem;margin-bottom:1.05rem;
}
.pfabout .pfa-card h3{font-size:1.08rem;font-weight:700;margin-bottom:.5rem}
.pfabout .pfa-card p{font-size:.93rem;line-height:1.7;color:var(--pfa-muted);margin-bottom:0}

/* Photos */
.pfabout .pfa-photo{border-radius:1.1rem;overflow:hidden;box-shadow:0 18px 40px rgba(12,31,52,.16)}
.pfabout .pfa-photo img{display:block;width:100%;height:100%;object-fit:cover}

/* Equipment chips (Inside the Factory) */
.pfabout .pfa-chip{
  display:flex;align-items:center;gap:.8rem;height:100%;
  background:#fff;border:1px solid var(--pfa-line);border-radius:.8rem;
  padding:.85rem 1.1rem;font-weight:600;font-size:.95rem;
  transition:border-color .2s ease,transform .2s ease;
}
.pfabout .pfa-chip:hover{border-color:var(--pfa-green);transform:translateY(-2px)}
.pfabout .pfa-chip i{color:var(--pfa-green);font-size:1.2rem}

/* Trade information rows (Worldwide Trade) */
.pfabout .pfa-fact-row{
  display:flex;gap:.8rem;padding:.8rem 0;border-bottom:1px dashed var(--pfa-line);font-size:.95rem;
}
.pfabout .pfa-fact-row:last-child{border-bottom:0}
.pfabout .pfa-fact-row i{color:var(--pfa-green);font-size:1.05rem;margin-top:.2rem}
.pfabout .pfa-fact-row .k{flex:0 0 132px;font-weight:700}
.pfabout .pfa-fact-row .v{color:var(--pfa-muted);line-height:1.6}
.pfabout .pfa-market{
  display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid var(--pfa-line);border-radius:999px;
  padding:.45rem .95rem;font-size:.88rem;font-weight:600;background:#fff;margin:0 .45rem .45rem 0;
}
.pfabout .pfa-market i{color:var(--pfa-green)}

/* ==========================================================================
   Contact Us page — Bootstrap 5 content lives directly in the page editor
   (page slug: contact-us). Markup is wrapped in .pfcontact: left column is
   the contact details + social icons, right column is a clickable map.
   ========================================================================== */
.pfcontact{
  --pfc-green:#15803d;
  --pfc-green-dark:#0f6b31;
  --pfc-green-soft:rgba(21,128,61,.10);
  --pfc-ink:#0f1c2e;
  --pfc-muted:#5b6b7f;
  --pfc-line:#e2e9f1;
  color:var(--pfc-ink);
}
.pfcontact .pfc-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pfc-green);margin-bottom:.9rem;
}
.pfcontact .pfc-eyebrow::before{content:"";width:26px;height:2px;background:var(--pfc-green);display:inline-block}
.pfcontact h2.pfc-title{font-weight:800;letter-spacing:-.02em;font-size:clamp(1.65rem,3.2vw,2.35rem);line-height:1.2;margin-bottom:1rem}
.pfcontact .pfc-company{font-weight:700;font-size:1.05rem;margin-bottom:1.2rem}
.pfcontact .pfc-list{margin:0}
.pfcontact .pfc-list li{
  display:flex;align-items:flex-start;gap:1rem;
  padding:.95rem 0;border-bottom:1px dashed var(--pfc-line);
}
.pfcontact .pfc-list li:last-child{border-bottom:0}
.pfcontact .pfc-ic{
  flex:0 0 48px;width:48px;height:48px;border-radius:.7rem;
  display:flex;align-items:center;justify-content:center;
  background:var(--pfc-green-soft);color:var(--pfc-green);font-size:1.35rem;
}
.pfcontact .pfc-label{
  display:block;font-size:.74rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pfc-muted);margin-bottom:.2rem;
}
.pfcontact .pfc-list a{font-weight:600;color:var(--pfc-ink);text-decoration:none;transition:color .2s ease}
.pfcontact .pfc-list a:hover{color:var(--pfc-green)}
.pfcontact .pfc-links{display:flex;flex-direction:column;gap:.3rem}
.pfcontact .pfc-links a{overflow-wrap:anywhere}
.pfcontact .pfc-addr{color:var(--pfc-muted);line-height:1.65}
.pfcontact .pfc-social-label{font-weight:700;margin:1.5rem 0 .75rem}
.pfcontact .pfc-social{display:flex;flex-wrap:wrap;gap:.7rem}
.pfcontact .pfc-social a{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--pfc-green-soft);color:var(--pfc-green);font-size:1.1rem;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.pfcontact .pfc-social a:hover{
  background:var(--pfc-green);color:#fff;transform:translateY(-2px);
}
.pfcontact .pfc-map{
  position:relative;display:block;width:100%;
  border:1px solid var(--pfc-line);border-radius:1.1rem;overflow:hidden;
  box-shadow:0 18px 40px rgba(12,31,52,.16);
}
.pfcontact .pfc-map img{
  display:block;width:100%;height:100%;object-fit:cover;
  aspect-ratio:4/3;transition:transform .35s ease;
}
.pfcontact .pfc-map:hover img{transform:scale(1.04)}
.pfcontact .pfc-map-cta{
  position:absolute;left:1rem;bottom:1rem;
  background:rgba(255,255,255,.94);color:var(--pfc-ink);
  font-weight:700;font-size:.9rem;padding:.55rem 1.05rem;border-radius:999px;
  box-shadow:0 6px 18px rgba(12,31,52,.18);
}
.pfcontact .pfc-map-cta i{color:var(--pfc-green);margin-right:.35rem}
.pfcontact .pfc-form{
  margin-top:clamp(2.4rem,4vw,3.4rem);
  padding-top:clamp(2.2rem,3.5vw,3rem);
  border-top:1px solid var(--pfc-line);
}