/*
Theme Name: Derma Inspire OEM
Author: Derma Inspire
Description: OEM / ODM website with categorized ingredient library.
Version: 3.0.0
Requires PHP: 7.4
Text Domain: derma-inspire
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap');
:root{--ink:#243d33;--green:#385744;--paper:#faf9f5;--muted:#777f74;--line:#dfe2d9;--cream:#edece3;--gold:#a58b5d}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans','Noto Sans Thai',sans-serif;font-size:14px}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ae8f51;outline-offset:4px}h1,h2,h3,p{margin:0}p{line-height:1.9}button{border:0;background:none}.topline{height:35px;background:var(--ink);color:#f2f2e8;display:flex;justify-content:space-between;align-items:center;padding:0 5%;font-size:10px;letter-spacing:1.5px}.topline a{letter-spacing:.3px}header{height:100px;margin:0 5%;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:13px;align-items:center;font-size:17px;letter-spacing:2px;font-weight:600;white-space:nowrap}.brand small{display:block;font-size:8px;letter-spacing:1.7px;margin-top:4px}.brandmark{font-family:Georgia,serif;font-size:48px;letter-spacing:-8px;line-height:1;margin-right:7px;font-weight:400}.brandmark>span{color:var(--gold)}nav{display:flex;gap:30px;font-size:12px}nav a:hover,.text-link:hover{color:var(--gold)}.outline,.primary{display:inline-flex;align-items:center;justify-content:center;gap:22px;border:1px solid var(--ink);padding:13px 20px;font-size:12px;min-height:46px}.primary{background:var(--ink);color:white}.primary:hover{background:#42634e}.outline:hover{background:#e9ece3}.count{background:var(--ink);color:white;border-radius:50%;font-size:10px;width:21px;height:21px;display:inline-grid;place-items:center}.hero{display:grid;grid-template-columns:1.05fr 1fr;padding:58px 5% 65px;min-height:610px;gap:5%}.hero-copy{padding-top:18px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:600;color:#6c7e6e;display:flex;align-items:center;gap:10px}.eyebrow>span{width:6px;height:6px;background:#8f9d73;border-radius:50%}h1{font-size:clamp(32px,3.75vw,58px);line-height:1.45;font-weight:400;letter-spacing:-1.3px;margin:24px 0}h1>span,.contact h2>span{color:#9aab82}.hero-copy>p{color:var(--muted);font-size:14px;line-height:2}.hero-actions{display:flex;align-items:center;gap:25px;margin-top:30px}.text-link{font-size:12px;border-bottom:1px solid #b2baad;padding-bottom:4px}.hero-foot{display:flex;gap:18px;align-items:center;margin-top:49px;font-size:9px;letter-spacing:2px;color:#7d8878}.hero-foot i{width:4px;height:4px;border-radius:50%;background:#9ba489}.hero-art{position:relative;min-height:440px}.atlas{background-image:url('assets/ingredient-atlas.png');background-size:200% 200%;background-repeat:no-repeat}.hero-photo{height:100%;min-height:440px;background-position:0 0;border-radius:48% 48% 2px 2px}.image-caption{position:absolute;bottom:18px;left:24px;right:24px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;color:#62583d}.floating-label{position:absolute;right:-12px;top:30px;background:#faf9f1e8;padding:17px 20px;display:flex;gap:14px;font-size:11px;line-height:1.7;box-shadow:0 8px 25px #4a443a07}.spark{font-size:34px;color:#8d9b71}.intro{margin:0 5%;padding:44px 0 52px;border-top:1px solid var(--line);display:grid;grid-template-columns:.7fr 1.1fr 1.2fr;gap:35px}.intro>.eyebrow{align-self:start;line-height:1.8;max-width:140px}h2{font-size:32px;font-weight:400;line-height:1.55;letter-spacing:-.6px}.intro p{font-size:12px;color:var(--muted);margin-bottom:16px}.catalog{padding:65px 5% 70px;background:#f0f1e9}.section-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:40px}.section-top h2{margin-top:12px;font-size:38px}.section-top h2>span{color:#85917d}.section-top>p{font-size:11px;color:var(--muted)}.section-top b{font-weight:500;color:var(--ink)}.catalog-layout{display:grid;grid-template-columns:225px 1fr;gap:38px}.aside-title{font-size:12px;border-bottom:1px solid #d0d7c9;padding:0 10px 18px;display:flex;justify-content:space-between}#categories{padding:10px 0}.category{display:flex;width:100%;text-align:left;justify-content:space-between;padding:14px 12px;font-size:12px;border-radius:2px;gap:7px}.category span{font-size:10px;color:#78866c}.category.active{background:var(--ink);color:#fff}.category.active span{color:#c5d4b9}.category:hover:not(.active){background:#e1e6d8}.help-box{border:1px solid #d3dacb;padding:20px;margin-top:30px}.help-box>span{font-size:13px;font-weight:500}.help-box p{color:var(--muted);font-size:11px;margin:8px 0 13px}.help-box a{font-size:11px;border-bottom:1px solid #a7b29a}.search-row{display:flex;gap:16px}.search{display:flex;align-items:center;gap:13px;background:var(--paper);border:1px solid #dce1d5;padding:10px 15px;flex:1}.search>span{font-size:26px;line-height:1}.search input{width:100%;border:0;outline:0;background:none;font-size:12px;color:var(--ink);min-width:0}.sort{font-size:10px;display:flex;align-items:center;gap:8px;color:var(--muted)}select{border:0;border-bottom:1px solid #cad2c0;padding:10px 0;background:transparent;color:var(--ink);font-size:11px}.results-meta{display:flex;justify-content:space-between;margin:22px 0 17px;color:var(--muted);font-size:11px}#reset{font-size:10px;color:#6e7d63}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 19px}.card{background:var(--paper);border:1px solid #e1e5d9;display:flex;flex-direction:column}.card-image{height:180px;position:relative;width:100%;display:block}.card-image .badge{position:absolute;left:12px;bottom:12px;background:#faf9f3e8;padding:4px 9px;font-size:8px;color:#637054}.powder{background-position:0 0}.liquid{background-position:100% 0}.botanical{background-position:0 100%}.gel{background-position:100% 100%}.card-copy{padding:18px 17px 0;flex:1}.card h3{font-size:15px;font-weight:500;line-height:1.5;min-height:44px;overflow-wrap:anywhere}.card h3 button{text-align:left;padding:0}.card p{color:var(--muted);font-size:11px;margin:8px 0 18px}.card-bottom{border-top:1px solid #e7e9df;margin:0 17px;padding:12px 0;display:flex;align-items:center;justify-content:space-between;gap:5px}.detail-link{font-size:10px;padding:0}.add{font-size:10px;color:var(--green);background:#e7ecdf;padding:7px 9px}.add.selected{background:var(--ink);color:white}.pagination{display:flex;align-items:center;justify-content:center;gap:8px;padding-top:30px}.pagination button{border:1px solid #ccd5c2;min-width:35px;height:35px;font-size:11px}.pagination button.active{background:var(--ink);color:white}.pagination button:disabled{opacity:.4;cursor:default}.image-note{font-size:10px;color:#808878;line-height:1.8;margin-top:24px}.empty{grid-column:1/-1;text-align:center;padding:70px 20px;border:1px dashed #b7c2ac}.process{display:grid;grid-template-columns:1fr 1.1fr;gap:12%;padding:80px 8%}.process h2{margin:15px 0 20px}.process>div>p{font-size:12px;color:var(--muted);margin-bottom:25px}.process ol{list-style:none;margin:0;padding:0}.process li{border-bottom:1px solid var(--line);padding:25px 0;display:flex;gap:28px}.process li>span{font-family:Georgia,serif;color:#a2ae91;font-size:25px}.process h3{font-size:17px;font-weight:400}.process li p{font-size:12px;color:var(--muted);margin-top:7px}.contact{padding:65px 6%;background:#e5e9dc;text-align:center}.contact>.eyebrow{justify-content:center}.contact h2{font-size:43px;margin:18px 0}.contact p{font-size:13px;color:var(--muted)}.contact-actions{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:27px}footer{padding:38px 5%;display:flex;align-items:center;justify-content:space-between;gap:20px}footer .brand{font-size:13px}footer .brandmark{font-size:37px}footer p,footer>span{font-size:10px;color:var(--muted)}dialog{border:0;padding:38px;width:630px;max-width:calc(100% - 32px);max-height:90vh;color:var(--ink);background:var(--paper);box-shadow:0 20px 90px #142c3140}dialog::backdrop{background:#19362a99;backdrop-filter:blur(3px)}.close{position:absolute;right:12px;top:6px;font-size:30px}.detail-art{height:225px;margin:-38px -38px 25px}.detail-category{font-size:11px;color:var(--muted);margin-bottom:8px}dialog h2{font-size:28px;overflow-wrap:anywhere}dialog p{font-size:13px;margin-top:12px;color:var(--muted)}.detail-facts{padding:18px 0;margin:18px 0;border-block:1px solid var(--line);font-size:12px;line-height:2}.selected-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--line);font-size:13px}.selected-row button{font-size:11px;color:#8c675a}.brief-label{font-size:12px;display:block;margin-top:24px}textarea{display:block;width:100%;min-height:95px;border:1px solid #ced5c5;margin-top:9px;padding:12px;background:white;color:var(--ink);resize:vertical}.dialog-actions{display:flex;gap:10px;margin-top:22px}.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);padding:13px 22px;background:var(--ink);color:white;font-size:12px;z-index:30;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw}.toast.show{opacity:1}@media(min-width:1500px){body>main,body>header,body>footer{max-width:1500px;margin-inline:auto}}@media(max-width:1100px){nav{gap:15px;font-size:10px}.brand{font-size:14px}.catalog-layout{grid-template-columns:195px 1fr;gap:25px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{gap:4%}h1{font-size:38px}.hero-actions{gap:15px}.intro{grid-template-columns:.7fr 1.2fr 1.2fr;gap:20px}.intro h2{font-size:27px}}@media(max-width:760px){.topline{font-size:8px;letter-spacing:.8px}.topline>a{font-size:9px}header{height:82px;flex-wrap:wrap}.brand{font-size:12px;letter-spacing:1px}.brand small{font-size:6px}.brandmark{font-size:38px}header nav{display:none}.shortlist-trigger{font-size:10px;padding:8px 10px;gap:7px;min-height:38px}.hero{grid-template-columns:1fr;padding-top:28px;gap:35px}.hero-copy{padding-top:0}h1{font-size:38px;margin:20px 0}.hero-copy>p{font-size:13px}.hero-foot{margin-top:28px}.hero-art,.hero-photo{min-height:360px}.hero-art{margin:0 4%}.floating-label{right:-10px;top:20px}.intro{grid-template-columns:1fr;padding-block:30px;gap:16px}.intro>.eyebrow{max-width:none;font-size:8px}.intro h2{font-size:28px}.catalog{padding-top:38px}.section-top{align-items:start;gap:15px;margin-bottom:25px}.section-top h2{font-size:28px}.section-top h2 span{display:block}.section-top>p{font-size:9px;min-width:115px;padding-top:25px}.catalog-layout{display:block}.aside-title,.help-box{display:none}#categories{display:flex;overflow-x:auto;gap:7px;padding:0 0 20px;max-width:100%}.category{min-width:max-content;border:1px solid #d5ddcb;padding:10px;gap:12px}.search-row{flex-wrap:wrap;gap:7px}.search{flex-basis:100%}.sort{margin-left:auto}.cards{gap:14px 10px}.card-image{height:145px}.card-copy{padding:13px 12px 0}.card h3{font-size:13px;min-height:40px}.card p{font-size:10px}.card-bottom{margin:0 12px;gap:6px;flex-wrap:wrap}.card-bottom button{font-size:10px}.process{grid-template-columns:1fr;padding:48px 6%;gap:25px}.process li{padding:20px 0}.contact{padding-block:45px}.contact h2{font-size:33px}.contact-actions{flex-wrap:wrap;gap:12px}.contact-actions .primary,.contact-actions .outline{font-size:11px}footer{align-items:start;flex-direction:column;padding-block:30px;gap:16px}dialog{padding:28px}.detail-art{margin:-28px -28px 20px}.dialog-actions{flex-wrap:wrap}.desktop{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}