/*
Theme Name: PMP Astra
Theme URI: https://peptidemicroneedlepatch.com/
Description: Astra child theme for the Peptide Microneedle Patch B2B OEM website.
Author: Peptide Microneedle Patch
Template: astra
Version: 1.0.4
Text Domain: pmp-astra
*/

:root {
  --pmp-navy: #0b2a4a;
  --pmp-navy-2: #123d67;
  --pmp-teal: #16a6a1;
  --pmp-sky: #38bdf8;
  --pmp-ink: #23364a;
  --pmp-muted: #607287;
  --pmp-line: #dbe7ef;
  --pmp-mist: #f3f8fb;
  --pmp-white: #fff;
  --pmp-radius: 18px;
  --pmp-shadow: 0 18px 55px rgba(11, 42, 74, .10);
}

html { scroll-behavior: smooth; }
body { color: var(--pmp-ink); font-family: Inter, "Segoe UI", Arial, sans-serif; }
a { text-underline-offset: 3px; }
.ast-container { max-width: 1240px; }
.site-header { border-bottom: 1px solid rgba(11,42,74,.08); box-shadow: 0 4px 24px rgba(11,42,74,.04); }
.site-primary-header-wrap.ast-container { max-width: 100%; padding-left: 12px; padding-right: 18px; }
.site-primary-header-wrap .ast-builder-grid-row { grid-template-columns: 280px minmax(0, 1fr); column-gap: 18px; }
.site-branding img, .custom-logo { max-width: 270px; width: min(270px, 42vw); height: auto; }
.site-title, .site-description { display: none !important; }
#primary { margin: 0 !important; }
.ast-builder-menu-1 .main-header-menu { flex-wrap: nowrap !important; justify-content: flex-end; }
.main-header-menu > .menu-item { white-space: nowrap; }
.main-header-menu > .menu-item > .menu-link { color: var(--pmp-navy); font-weight: 700; font-size: 13px; letter-spacing: 0; padding-left: 10px; padding-right: 10px; }
.main-header-menu > .menu-item > .menu-link:hover { color: var(--pmp-teal); }
.ast-header-button-1 .ast-custom-button { background: var(--pmp-teal); border-radius: 999px; }
.site-content .ast-container { max-width: none; padding: 0; }
.site-main > article { padding: 0; margin: 0; }
.entry-header { display: none; }
.entry-content { margin: 0; }

.pmp-wrap { overflow: hidden; }
.pmp-section { padding: 84px 24px; }
.pmp-section--mist { background: var(--pmp-mist); }
.pmp-section--navy { background: var(--pmp-navy); color: #fff; }
.pmp-inner { max-width: 1180px; margin: 0 auto; }
.pmp-narrow { max-width: 840px; margin: 0 auto; }
.pmp-eyebrow { color: var(--pmp-teal); text-transform: uppercase; letter-spacing: .14em; font-size: 13px; font-weight: 800; margin-bottom: 14px; }
.pmp-title { color: var(--pmp-navy); font-size: clamp(34px, 5vw, 64px); line-height: 1.08; letter-spacing: -.035em; margin: 0 0 22px; }
.pmp-section h2 { color: var(--pmp-navy); font-size: clamp(30px, 4vw, 44px); line-height: 1.15; letter-spacing: -.025em; margin: 0 0 18px; }
.pmp-section h3 { color: var(--pmp-navy); font-size: 22px; line-height: 1.25; margin: 0 0 12px; }
.pmp-section--navy h2, .pmp-section--navy h3, .pmp-section--navy p { color: #fff; }
.pmp-lead { color: var(--pmp-muted); font-size: clamp(18px, 2vw, 22px); line-height: 1.65; max-width: 830px; }
.pmp-copy { color: var(--pmp-muted); font-size: 17px; line-height: 1.75; }
.pmp-hero { min-height: 690px; display: grid; align-items: center; padding: 80px 24px; background: linear-gradient(122deg, #f8fbfd 0%, #f8fbfd 54%, #e7f5f4 54%, #f6fbfd 100%); position: relative; }
.pmp-hero:after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 42px, rgba(11,42,74,.025) 42px 44px); pointer-events: none; }
.pmp-hero__grid { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 70px; }
.pmp-hero__visual { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 44% 38%, #fff 0 8%, #dff4f2 8% 35%, #b9e8e5 35% 36%, #ecf8f7 36% 55%, #cfeeed 55% 56%, #fff 56%); box-shadow: var(--pmp-shadow); position: relative; }
.pmp-hero__visual:before { content: "PEPTIDE\A ACTIVITY\A PROTECTION"; white-space: pre; position: absolute; inset: 0; display: grid; place-items: center; color: var(--pmp-navy); font-weight: 800; text-align: center; letter-spacing: .12em; line-height: 1.7; font-size: clamp(16px,2vw,23px); }
.pmp-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.pmp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 13px 24px; border-radius: 999px; background: var(--pmp-teal); color: #fff !important; text-decoration: none !important; font-weight: 800; box-shadow: 0 10px 28px rgba(22,166,161,.24); }
.pmp-btn:hover { background: #118b87; transform: translateY(-1px); }
.pmp-btn--ghost { background: transparent; color: var(--pmp-navy) !important; border: 1px solid var(--pmp-navy); box-shadow: none; }
.pmp-section--navy .pmp-btn--ghost { color: #fff !important; border-color: rgba(255,255,255,.65); }
.pmp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 38px; }
.pmp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pmp-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pmp-card { background: #fff; border: 1px solid var(--pmp-line); border-radius: var(--pmp-radius); padding: 30px; box-shadow: 0 12px 38px rgba(11,42,74,.05); }
.pmp-card p { color: var(--pmp-muted); line-height: 1.7; margin-bottom: 0; }
.pmp-card__num { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #e4f6f5; color: var(--pmp-teal); font-weight: 900; margin-bottom: 18px; }
.pmp-tags { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0; }
.pmp-tag { border: 1px solid #cfe3e9; background: #fff; color: var(--pmp-navy); border-radius: 999px; padding: 8px 13px; font-size: 13px; font-weight: 750; }
.pmp-list { padding-left: 1.2em; color: var(--pmp-muted); line-height: 1.8; }
.pmp-list li::marker { color: var(--pmp-teal); }
.pmp-statbar { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,.18); border-radius: var(--pmp-radius); overflow: hidden; margin-top: 38px; }
.pmp-stat { padding: 28px; background: rgba(255,255,255,.06); text-align: center; }
.pmp-stat strong { display: block; font-size: 24px; color: #fff; }
.pmp-stat span { font-size: 13px; color: rgba(255,255,255,.72); }
.pmp-process { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; counter-reset: step; margin-top: 38px; }
.pmp-process > div { counter-increment: step; border-top: 3px solid var(--pmp-teal); padding: 22px 8px; }
.pmp-process > div:before { content: "0" counter(step); display: block; color: var(--pmp-sky); font-weight: 900; font-size: 14px; margin-bottom: 10px; }
.pmp-note { border-left: 4px solid var(--pmp-teal); background: #edf8f7; padding: 20px 24px; border-radius: 0 12px 12px 0; color: var(--pmp-ink); }
.pmp-faq { border-bottom: 1px solid var(--pmp-line); padding: 24px 0; }
.pmp-faq summary { cursor: pointer; color: var(--pmp-navy); font-weight: 800; font-size: 18px; }
.pmp-faq p { color: var(--pmp-muted); line-height: 1.7; padding-right: 30px; }
.pmp-article { max-width: 860px; margin: 0 auto; padding: 70px 24px 90px; }
.pmp-article h1 { color: var(--pmp-navy); font-size: clamp(36px, 5vw, 56px); line-height: 1.08; }
.pmp-article h2 { color: var(--pmp-navy); margin-top: 48px; }
.pmp-article h3 { color: var(--pmp-navy); margin-top: 30px; }
.pmp-article p, .pmp-article li { color: #42566c; font-size: 18px; line-height: 1.78; }
.pmp-article__answer { background: var(--pmp-mist); border: 1px solid var(--pmp-line); border-radius: var(--pmp-radius); padding: 26px; margin: 28px 0; }
.pmp-article__meta { color: var(--pmp-muted); font-size: 14px; }
.pmp-form label { color: var(--pmp-navy); font-weight: 750; }
.pmp-form input, .pmp-form select, .pmp-form textarea { width: 100%; border: 1px solid #cddce5; border-radius: 10px; padding: 13px 14px; background: #fff; }
.pmp-form .wpcf7-submit { width: auto; border: 0; border-radius: 999px; padding: 15px 28px; background: var(--pmp-teal); color: #fff; font-weight: 800; }
.pmp-disclaimer { font-size: 13px; color: #718296; line-height: 1.6; }
.pmp-whatsapp { position: fixed; right: 22px; bottom: 22px; z-index: 9999; width: 58px; height: 58px; display: grid; place-items: center; background: #25d366; color: #fff !important; border-radius: 50%; box-shadow: 0 10px 28px rgba(0,0,0,.22); text-decoration: none !important; font-size: 28px; }
.pmp-whatsapp:hover { transform: translateY(-2px); }
.site-footer { background: #071d32; color: rgba(255,255,255,.75); }
.site-footer a { color: #fff; }
.pmp-footer-contact { background: #071d32; color: rgba(255,255,255,.78); padding: 26px 24px; }
.pmp-footer-contact .pmp-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pmp-footer-contact strong { color: #fff; }
.pmp-footer-contact a { color: #fff; }

@media (max-width: 980px) {
  .pmp-hero__grid, .pmp-grid, .pmp-grid--2, .pmp-grid--4 { grid-template-columns: 1fr 1fr; }
  .pmp-hero { min-height: auto; }
  .pmp-hero__visual { max-width: 420px; width: 100%; justify-self: center; }
  .pmp-statbar, .pmp-process { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 921.99px) {
  .site-primary-header-wrap .ast-builder-grid-row { grid-template-columns: auto auto; }
}
@media (max-width: 640px) {
  .pmp-section { padding: 62px 20px; }
  .pmp-hero { padding: 58px 20px; }
  .pmp-hero__grid, .pmp-grid, .pmp-grid--2, .pmp-grid--4, .pmp-statbar, .pmp-process { grid-template-columns: 1fr; }
  .pmp-hero__visual { max-width: 300px; }
  .pmp-card { padding: 24px; }
  .pmp-whatsapp { right: 14px; bottom: 14px; width: 52px; height: 52px; }
}