/*
Theme Name: OKTW Oral Film — Exact Website Edition
Theme URI: https://oktworalfilm.com/
Author: Guangzhou Shengmei Pharmaceutical Industry Co., Ltd
Description: Exact WordPress migration of the OKTW oral film website, including all products, images, layouts, interactive sections, inquiry forms, editable content and SEO-ready markup.
Version: 1.4.0
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; } }