/*
Theme Name: OKTW Oral Dissolving Strips — Exact Website Edition
Theme URI: https://oktworalfilm.com/
Author: Guangzhou Shengmei Pharmaceutical Industry Co., Ltd
Description: Centered one-stop OKTW oral dissolving strips website with a complete homepage, individual product detail pages, inquiry routing and compliance pages.
Version: 1.5.3
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: oktw-exact
*/

@import url("assets/site.css");

@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-geist-sans: "Geist", Arial, sans-serif;
}

#inquiry {
  scroll-margin-top: 108px;
}

.legal-page { background: #fff; }
.legal-layout { max-width: 860px; }
.legal-layout h2 { margin: 48px 0 13px; font-size: clamp(24px, 2.5vw, 34px); letter-spacing: -.035em; }
.legal-layout p { color: var(--muted); margin: 0; font-size: 16px; line-height: 1.85; }
.legal-layout a, .sitemap-grid a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; font-weight: 750; }
.legal-updated { color: var(--green) !important; font-size: 13px !important; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.sitemap-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.sitemap-grid section { border: 1px solid var(--line); border-radius: 16px; padding: 30px; }
.sitemap-grid h2 { margin: 0 0 22px; font-size: 23px; letter-spacing: -.03em; }
.sitemap-grid a { display: block; margin: 0 0 14px; font-size: 14px; }
.cookie-banner { position: fixed; z-index: 300; left: 24px; bottom: 22px; width: min(530px, calc(100% - 48px)); display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #bde8d3; border-radius: 14px; background: #fff; box-shadow: 0 18px 52px #071b3140; padding: 17px 18px; color: var(--ink); }
.cookie-banner strong { font-size: 14px; }
.cookie-banner p { max-width: 355px; margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.cookie-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.cookie-actions a { color: var(--green); font-size: 12px; font-weight: 800; }
.cookie-actions button { border: 0; border-radius: 7px; background: var(--cyan); color: var(--navy); padding: 10px 14px; cursor: pointer; font-size: 12px; font-weight: 850; }
@media (max-width: 720px) { .sitemap-grid { grid-template-columns: 1fr; } .cookie-banner { bottom: 78px; left: 12px; width: calc(100% - 24px); align-items: flex-start; flex-direction: column; gap: 12px; } .cookie-actions { width: 100%; justify-content: space-between; } }

.function-page-overview { background: #fff; }
.function-page-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(34px, 6vw, 92px); align-items: center; }
.function-page-image { min-height: 430px; border-radius: 22px; overflow: hidden; background: var(--cloud); }
.function-page-image img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; display: block; }
.function-page-copy h2 { max-width: 600px; margin: 0 0 18px; font-size: clamp(34px, 4.4vw, 60px); line-height: 1; letter-spacing: -.06em; }
.function-page-copy > p { max-width: 650px; color: var(--muted); font-size: 17px; line-height: 1.72; }
.function-page-copy h3 { margin: 28px 0 12px; font-size: 14px; letter-spacing: .02em; }
.ingredient-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ingredient-pills span { border: 1px solid var(--line); border-radius: 999px; padding: 9px 12px; background: #f9fcfb; color: var(--ink); font-size: 13px; font-weight: 700; }
.function-steps { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.function-steps li { display: flex; gap: 11px; align-items: center; color: var(--muted); font-size: 14px; }
.function-steps li:before { counter-increment: step; content: '0' counter(step); min-width: 33px; color: var(--cyan-deep, #008fa5); font-weight: 850; font-size: 11px; letter-spacing: .04em; }
.function-page-products { background: #f4fafa; }
.section-title-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.section-title-row h2 { margin: 0; font-size: clamp(33px, 4vw, 56px); letter-spacing: -.06em; }
.manufacturing-callout { display: flex; align-items: center; justify-content: space-between; gap: 42px; border-radius: 22px; padding: clamp(30px, 5vw, 65px); background: linear-gradient(120deg, #031d33, #0a544f); color: #fff; }
.manufacturing-callout h2 { margin: 0 0 16px; max-width: 620px; font-size: clamp(31px, 4vw, 54px); letter-spacing: -.055em; line-height: 1; }
.manufacturing-callout p:not(.eyebrow) { max-width: 640px; margin: 0; color: #d8f4ee; line-height: 1.7; }
.callout-actions { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }
.function-page-disclaimer { padding: 0 0 72px; background: #fff; }
.function-page-disclaimer p { max-width: 920px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
@media (max-width: 820px) { .function-page-grid { grid-template-columns: 1fr; } .function-page-image, .function-page-image img { min-height: 300px; } .manufacturing-callout { display: block; } .callout-actions { margin-top: 24px; } }
@media (max-width: 560px) { .section-title-row { align-items: flex-start; flex-direction: column; } .callout-actions .button { width: 100%; justify-content: space-between; } }

/* ===== v1.5.1 · full-width light hero using the supplied oral-strip image ===== */
.hero.hero-light {
  background: #f4f9fd;
  min-height: 700px;
}
.hero.hero-light::after {
  background: transparent;
}
.hero-light .hero-bg {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
}
.hero-light .hero-panel {
  width: min(650px, 56%);
}
.hero-light .eyebrow.light {
  color: #087f92;
}
.hero-light h1,
.hero-light h1 span,
.hero-light .hero-stats strong {
  color: #0a2b43;
}
.hero-light .hero-copy,
.hero-light .hero-stats span {
  color: #456476;
}
.hero-light .button-ghost {
  color: #0a2b43;
  background: rgba(255,255,255,.58);
  border-color: rgba(10,43,67,.34);
}
.hero-light .button-ghost:hover {
  background: rgba(255,255,255,.82);
}
.hero-light .hero-stock {
  border-color: rgba(10,43,67,.28);
}
.hero-light .hero-stock span {
  color: #0a2b43;
  background: rgba(255,255,255,.52);
}
.hero-light .trust-row {
  color: #0a2b43;
}
.hero-light .trust-row span {
  border-color: rgba(10,43,67,.30);
  background: rgba(255,255,255,.35);
}
.hero-light .hero-stats div {
  color: #0a2b43;
  border-top-color: rgba(10,43,67,.24);
}
@media (max-width: 980px) {
  .hero-light .hero-panel,
  .hero-light .hero-stats { width: min(650px, 64%); }
}
@media (max-width: 720px) {
  .hero.hero-light { min-height: auto; }
  .hero-light .hero-bg { object-position: 64% center; }
  .hero-light .hero-panel,
  .hero-light .hero-stats { width: 100%; }
  .hero-light .hero-panel { background: rgba(255,255,255,.76); }
}


/* ===== v1.4.7 · audited terminology + SMHealthFood-style 3-step inquiry ===== */
.sm-project-form{--sm-ink:#123a2c;--sm-accent:#7c9845;--sm-green:#1eae7b;--sm-line:#d4ddd4;--sm-muted:#52645b;background:#fff;color:var(--sm-ink);padding:34px 38px 32px;max-width:920px;width:100%;box-shadow:0 20px 55px rgba(4,28,21,.08)}
.sm-project-form__intro{border-bottom:1px solid var(--sm-line);padding-bottom:22px;margin-bottom:26px}
.sm-project-form__eyebrow{font-size:10px!important;font-weight:800!important;letter-spacing:.18em!important;color:#607d37!important;margin:0 0 13px!important}
.sm-project-form__intro h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(42px,5vw,58px);line-height:.92;letter-spacing:-.045em;color:#173e31;margin:0 0 16px;font-weight:400}
.sm-project-form__intro h2 em{color:var(--sm-accent);font-weight:400}
.sm-project-form__intro>p:last-child{font-size:13px;color:#53675d;margin:0;max-width:640px}
.sm-step-form__status{margin:0 0 28px}
.sm-step-form__status-row{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.05em;color:#294b3f;margin-bottom:10px}
.sm-step-form__status-row strong{font-weight:800}.sm-step-form__status-row span{font-weight:800;color:#4d7d2f}
.sm-step-form__progress{height:6px;background:#e5ebe6;border-radius:999px;overflow:hidden}.sm-step-form__progress span{display:block;width:33.333%;height:100%;background:var(--sm-green);transition:width .28s ease}
.sm-form-step{animation:smFormIn .24s ease}.sm-form-step[hidden]{display:none!important}
@keyframes smFormIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sm-form-step__heading{margin-bottom:20px}.sm-form-step__heading h3{font-size:22px;line-height:1.2;color:#073a2d;margin:0 0 9px;font-weight:500;letter-spacing:-.02em}.sm-form-step__heading p{font-size:12px;color:#66776e;margin:0}
.sm-form-grid{display:grid;gap:18px 24px}.sm-form-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sm-form-field{display:flex;flex-direction:column;gap:8px;font-size:10px;font-weight:800;letter-spacing:.08em;color:#28483d}
.sm-form-field input,.sm-form-field select,.sm-form-field textarea{width:100%;border:0;border-bottom:1px solid #cbd6cd;background:#fff;border-radius:0;padding:10px 3px 11px;font-size:14px;font-weight:400;letter-spacing:.01em;color:#0c362a;outline:none;min-height:43px;transition:border-color .2s ease,box-shadow .2s ease}
.sm-form-field select{appearance:auto;padding-right:8px}.sm-form-field textarea{border:1px solid #d3dcd5;padding:12px;min-height:90px;resize:vertical}
.sm-form-field input:focus,.sm-form-field select:focus,.sm-form-field textarea:focus{border-color:var(--sm-green);box-shadow:0 1px 0 var(--sm-green)}
.sm-form-field input::placeholder,.sm-form-field textarea::placeholder{color:#78877f;opacity:1}
.sm-form-field .is-invalid,.sm-form-consent.is-invalid{border-color:#b44747!important;box-shadow:0 1px 0 #b44747!important}
.sm-form-field--message{margin-top:20px}
.sm-form-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:27px}.sm-form-actions--end{justify-content:flex-end}
.sm-form-next,.sm-form-submit{border:0;border-radius:8px;background:var(--sm-green);color:#fff;min-width:118px;padding:14px 19px;font-size:12px;font-weight:800;cursor:pointer;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}.sm-form-next:hover,.sm-form-submit:hover{background:#169b6d;transform:translateY(-1px);box-shadow:0 7px 18px rgba(30,174,123,.22)}
.sm-form-next span,.sm-form-submit span{margin-left:9px}.sm-form-back{border:0;background:transparent;color:#315347;font-size:12px;font-weight:700;padding:12px 0;cursor:pointer}
.sm-form-consent{display:flex;gap:9px;align-items:flex-start;font-size:10px;line-height:1.5;color:#66766e;margin-top:18px}.sm-form-consent input{margin-top:2px}.sm-form-consent a{text-decoration:underline}.sm-form-note{font-size:10px;color:#7a8881;margin:15px 0 0}
.home-inquiry-section .advanced-form-shell,.global-inquiry-section .advanced-form-shell{display:none!important}
.global-inquiry-section .sm-project-form{margin-left:auto;margin-right:auto}
.home-inquiry-section .global-inquiry-layout{align-items:stretch}.home-inquiry-section .global-inquiry-intro{display:flex;align-items:center}
.contact-form-wrap .sm-project-form{max-width:none;box-shadow:none;padding:0}
@media (max-width:720px){.sm-project-form{padding:27px 20px 24px}.sm-project-form__intro h2{font-size:44px}.sm-form-grid--2{grid-template-columns:1fr}.sm-form-actions{margin-top:22px}.sm-form-next,.sm-form-submit{min-width:128px}.global-inquiry-section .sm-project-form{padding:26px 18px}.contact-form-wrap .sm-project-form{padding:0}}

/* ===== v1.5.2 · wide-screen balance + complete hero artwork ===== */
@media (min-width: 981px) {
  .hero.hero-light {
    min-height: 700px;
    background: #f1f8fd;
  }
  .hero-light .hero-bg {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 60%;
    height: 100%;
    object-fit: contain;
    object-position: right center;
  }
  .hero-light .hero-panel {
    width: min(680px, 48%);
  }
  .hero-light .hero-stats {
    width: min(780px, 55%);
  }
}

@media (min-width: 1400px) {
  .container {
    width: calc(100% - 96px);
    max-width: none;
  }
  .applications-interactive > .container {
    width: calc(100% - 96px);
    max-width: none;
  }
  .hero.hero-light {
    min-height: clamp(720px, 33vw, 900px);
  }
  .hero-light .hero-bg {
    width: 58%;
  }
  .hero-light .hero-panel {
    width: min(760px, 42%);
  }
  .hero-light .hero-stats {
    width: min(860px, 48%);
  }
  .intro-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(90px, 10vw, 190px);
  }
  .capability-grid,
  .quality-preview-inner {
    gap: clamp(70px, 8vw, 160px);
  }
  .home-product-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* v1.6.0: unified cool-blue Hero and interactive development path. */
@media (min-width:981px){.hero.hero-light{background:linear-gradient(110deg,#f3faff 0%,#edf7fd 52%,#e6f4fc 100%)}.hero.hero-light::after{background:none}.hero-light .hero-bg{right:0;width:61%;height:100%;object-fit:cover;object-position:right center;opacity:.96;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 10%,#000 30%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 10%,#000 30%,#000 100%)}.hero-light .hero-panel{position:relative;z-index:2;width:min(510px,39%);padding:0;background:transparent}.hero-light .hero-panel h1{max-width:510px;font-size:clamp(48px,4.35vw,72px);line-height:.94;letter-spacing:-.065em}.hero-light .hero-copy{max-width:465px}.hero-light .hero-stats{position:relative;z-index:2;width:min(600px,46%)}.home-product-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.development-path{background:#07111a;color:#f4f8fa;padding:0 0 34px;overflow:hidden}.development-path-head{display:flex;justify-content:space-between;align-items:end;gap:60px;padding-top:82px;padding-bottom:40px}.development-path .eyebrow{color:#50d6ca}.development-path h2{font-size:clamp(44px,5.3vw,82px);line-height:.9;letter-spacing:-.065em;margin:0;color:#f6f8fb}.development-path-head>p{margin:0;max-width:410px;color:#b6c2cc;font-size:16px;line-height:1.65}.development-path-track{display:flex;width:100%;height:min(56vw,630px);min-height:480px;background:#0a1016}.development-step{position:relative;isolation:isolate;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;border-right:1px solid rgba(255,255,255,.16);transition:flex .52s cubic-bezier(.2,.7,.2,1);outline-offset:-5px}.development-step:last-child{border-right:0}.development-step.is-active{flex:2.1 1 0}.development-step>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7) saturate(.84);transition:transform .65s ease,filter .4s ease}.development-step.is-active>img{transform:scale(1.045);filter:brightness(.9) saturate(1)}.development-step-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(2,7,11,.92) 0%,rgba(2,7,11,.18) 62%,rgba(2,7,11,.08) 100%)}.development-step-copy{position:absolute;z-index:2;right:24px;bottom:25px;left:24px;color:#fff}.development-step-copy>span{display:block;margin-bottom:24px;color:#55dace;font-size:11px;font-weight:800;letter-spacing:.15em}.development-step h3{font-size:clamp(38px,5vw,76px);line-height:.84;letter-spacing:-.075em;margin:0;white-space:nowrap}.development-step p{max-width:330px;max-height:0;overflow:hidden;opacity:0;margin:0;color:#d5dce2;font-size:14px;line-height:1.5;transform:translateY(10px);transition:max-height .4s ease,opacity .3s ease,margin .35s ease,transform .35s ease}.development-step.is-active p{max-height:90px;opacity:1;margin-top:17px;transform:none}.development-path-foot{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-top:30px}.development-path-foot>span{font-size:11px;font-weight:800;letter-spacing:.14em;color:#8ca1ad}.development-path .button{min-width:190px;justify-content:center}.development-path .button b{font-size:15px;margin-left:16px}
@media(max-width:980px){.development-path-head{display:block;padding-top:62px}.development-path-head>p{margin-top:24px}.development-path-track{height:auto;min-height:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}.development-step,.development-step.is-active{flex:0 0 min(68vw,420px);height:500px;scroll-snap-align:start}.development-step h3{font-size:56px}.development-step p{max-height:90px;opacity:1;margin-top:17px;transform:none}.development-path-foot{padding-top:24px}.development-path-foot>span{max-width:270px;line-height:1.5}}
@media(max-width:620px){.development-path-head{padding-top:48px;padding-bottom:28px}.development-path h2{font-size:49px}.development-path-track{padding-left:16px}.development-step,.development-step.is-active{flex-basis:82vw;height:450px}.development-step-copy{right:20px;bottom:21px;left:20px}.development-step h3{font-size:54px}.development-path-foot{display:block;padding-top:24px}.development-path-foot .button{margin-top:18px;width:100%}}

@media (min-width: 2200px) {
  .container,
  .applications-interactive > .container {
    width: calc(100% - 128px);
  }
  .hero-light .hero-panel {
    width: min(820px, 38%);
  }
}

@media (max-width: 980px) {
  .hero-light .hero-bg {
    width: 100%;
    object-fit: cover;
    object-position: 68% center;
  }
}

/* ===== v1.5.3 · centered one-stop website ===== */
html {
  scroll-padding-top: 104px;
}
section[id] {
  scroll-margin-top: 104px;
}
@media (min-width: 981px) {
  .container,
  .applications-interactive > .container {
    width: min(1360px, calc(100% - 64px));
    max-width: 1360px;
    margin-inline: auto;
  }
  .hero.hero-light {
    min-height: 720px;
  }
  .hero-light .hero-bg {
    width: 56%;
    object-fit: contain;
    object-position: right center;
  }
  .hero-light .hero-panel {
    width: min(640px, 48%);
  }
  .hero-light .hero-stats {
    width: min(730px, 54%);
  }
  .home-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1400px) {
  .hero.hero-light {
    min-height: 740px;
  }
  .intro-grid {
    grid-template-columns: 1.05fr .95fr;
    gap: 110px;
  }
  .capability-grid,
  .quality-preview-inner {
    gap: 84px;
  }
}

/* v1.6.1: final desktop product grid override — ten concepts in two rows of five. */
@media (min-width: 981px) {
  .product-section .product-grid.home-product-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}