/* Supplied 7.1 / 7.2 artwork with native, localized website text. */
.nss-nc-details {
  --nc-gutter: 24px;
  --ncb-art: url('../images/neuro-skin-science-20260915/neurocosmetics-details/benefits-clean.png');
  --nci-art: url('../images/neuro-skin-science-20260915/neurocosmetics-details/ingredients-clean.png');
  padding: 0 var(--nc-gutter) 64px;
  background: #fff;
}
.nss-nc-detail > summary { padding-inline: 0; }
.nss-nc-detail > summary > span { min-width: 0; }
.nss-nc-detail > summary > i { flex: 0 0 auto; }
.nss-nc-detail > summary:focus-visible { outline: 2px solid #347baa; outline-offset: 5px; }
.nss-nc-detail-panel { position: relative; padding: 36px 0 48px; }
.nss-nc-detail-canvas { position: relative; container-type: inline-size; }
html body.nss-page #main .nss-nc-details :is(h2,h3,p,ul,li) {
  font-family: "DM Sans", "Noto Sans Thai", "Noto Sans JP", "Noto Sans SC", "Noto Sans TC", sans-serif !important;
  text-transform: none !important;
  white-space: normal;
}
html body.nss-page #main .nss-nc-details :is(h2,h3,p,ul) { margin: 0 !important; }
html body.nss-page #main .nss-nc-details h2 { font-size: 36px !important; line-height: 1.12 !important; font-weight: 700 !important; letter-spacing: -.04em !important; }
html body.nss-page #main .nss-nc-details h3 { font-size: 25px !important; line-height: 1.18 !important; font-weight: 700 !important; letter-spacing: -.035em !important; }
html body.nss-page #main .nss-nc-details p,
html body.nss-page #main .nss-nc-details li { font-size: 18px !important; line-height: 1.45 !important; letter-spacing: -.02em; }
html body.nss-page #main .nss-nc-details header > p { margin-top: 14px !important; }
.ncb-context { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 18px; margin-block: 30px 42px; }
.ncb-context-art { grid-column: 1 / -1; justify-self: center; width: min(100%, 320px); aspect-ratio: 360 / 746; background: var(--ncb-art) 22.512% 50.455% / 568.889% 118.597% no-repeat; }
html body.nss-page #main .ncb-context h3 { font-size: 23px !important; }
html body.nss-page #main .ncb-context p,
html body.nss-page #main .ncb-context ul { margin-top: 10px !important; }
.ncb-dysfunction ul { padding: 0; list-style: none; }
.ncb-benefits { display: grid; gap: 28px; }
.ncb-benefit { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 16px; padding-bottom: 26px; border-bottom: 1px solid #dbe4ec; }
.ncb-icon { width: 76px; aspect-ratio: 1; border-radius: 50%; background: var(--ncb-art) 41.383% var(--icon-y) / 1861.818% 804.305% no-repeat; }
.ncb-benefit:nth-child(1) { --icon-y: 25.428%; --row-y: 221; }
.ncb-benefit:nth-child(2) { --icon-y: 40.788%; --row-y: 340; }
.ncb-benefit:nth-child(3) { --icon-y: 55.89%; --row-y: 459; }
.ncb-benefit:nth-child(4) { --icon-y: 71.25%; --row-y: 578; }
.ncb-benefit:nth-child(5) { --icon-y: 86.74%; --row-y: 697; }
html body.nss-page #main .ncb-benefit-label p { margin-top: 7px !important; }
.ncb-benefit > ul { grid-column: 1 / -1; padding-left: 24px; list-style: disc; }
.nci-signaling { display: flex; align-items: center; gap: 18px; margin-block: 28px; }
.nci-signaling-rule { flex: 1; min-width: 35px; position: relative; border-top: 1px solid #36527e; }
.nci-signaling-rule i { position: absolute; top: -7px; right: 0; width: 12px; height: 12px; color: #69c8eb; font-size: 12px; border-radius: 50%; background: currentColor; box-shadow: 0 0 5px currentColor; }
.nci-signaling-rule i::before { content: none; }
.nci-signaling-rule i:last-child { right: -14px; color: #efb456; }
.nci-categories { display: grid; gap: 36px; }
.nci-category { border-bottom: 1px solid #dbe4ec; padding-bottom: 28px; }
html body.nss-page #main .nci-category p { margin-top: 10px !important; }
.nci-category-art { width: min(100%,240px); aspect-ratio: 1; margin: 22px auto 0; border-radius: 50%; background: var(--nci-art) var(--image-x) 55.134% / 975.238% 421.303% no-repeat; }
.nci-category:nth-child(1) { --image-x: 22.7965%; --column-x: 426; --column-w: 220; }
.nci-category:nth-child(2) { --image-x: 36.9967%; --column-x: 690; --column-w: 204; }
.nci-category:nth-child(3) { --image-x: 50%; --column-x: 940; --column-w: 194; }
.nci-category:nth-child(4) { --image-x: 63.058%; --column-x: 1170; --column-w: 221; }
.nci-category:nth-child(5) { --image-x: 77.0947%; --column-x: 1433; --column-w: 202; }
.nci-skin-art { width: 100%; aspect-ratio: 1438 / 328; margin-top: 36px; background: var(--nci-art) 51.148% 100% / 142.42% 269.737% no-repeat; }
@media (min-width: 700px) {
  .ncb-context { grid-template-columns: minmax(200px,1fr) 1fr; }
  .ncb-context-art { grid-column: 1; grid-row: 1 / 3; width: 240px; }
  .ncb-stress { align-self: end; }
  .ncb-dysfunction { grid-column: 2; }
  .ncb-benefit { grid-template-columns: 90px minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 24px; }
  .ncb-icon { width: 90px; }
  .ncb-benefit > ul { grid-column: auto; }
  .nci-categories { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px 32px; }
}
@media (min-width: 801px) { .nss-nc-details { --nc-gutter: 40px; } }
@media (min-width: 1200px) { .nss-nc-details { --nc-gutter: 150px; } }
@media (min-width: 1400px) {
  .nss-nc-detail-panel { padding: 0; margin-inline: calc(-1 * var(--nc-gutter)); padding-inline: var(--nc-gutter); overflow: clip; }
  .nss-nc-detail-canvas { isolation: isolate; }
  .nss-nc-detail-canvas::before { content: ''; position: absolute; z-index: -1; inset-block: 0; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
  .ncb-canvas { --nc-unit: calc(100cqw / 1254); aspect-ratio: 1254 / 884.736; }
  .ncb-canvas::before { left: calc(-396 / 1254 * 100%); width: calc(2048 / 1254 * 100%); background-image: var(--ncb-art); }
  .ncb-heading { position: absolute; top: calc(90 * var(--nc-unit)); left: calc(377 * var(--nc-unit)); width: calc(875 * var(--nc-unit)); }
  html body.nss-page #main .ncb-heading h2 { font-size: calc(44 * var(--nc-unit)) !important; }
  html body.nss-page #main .ncb-heading > p { margin-top: calc(5 * var(--nc-unit)) !important; font-size: calc(18.5 * var(--nc-unit)) !important; line-height: 1.25 !important; }
  .ncb-context, .ncb-benefits, .ncb-benefit { display: contents; }
  .ncb-context-art, .ncb-icon { display: none; }
  .ncb-stress { position: absolute; left: 0; top: calc(206 * var(--nc-unit)); width: calc(135 * var(--nc-unit)); }
  .ncb-dysfunction { position: absolute; left: 0; top: calc(630 * var(--nc-unit)); width: calc(227 * var(--nc-unit)); }
  html body.nss-page #main .ncb-context h3 { font-size: calc(21 * var(--nc-unit)) !important; line-height: 1.08 !important; }
  html body.nss-page #main .ncb-context p,
  html body.nss-page #main .ncb-context li { font-size: calc(15 * var(--nc-unit)) !important; line-height: 1.22 !important; }
  html body.nss-page #main .ncb-context p,
  html body.nss-page #main .ncb-context ul { margin-top: calc(5 * var(--nc-unit)) !important; }
  .ncb-benefit-label { position: absolute; left: calc(564 * var(--nc-unit)); top: calc(var(--row-y) * var(--nc-unit)); width: calc(337 * var(--nc-unit)); }
  html body.nss-page #main .ncb-benefit h3 { font-size: calc(24 * var(--nc-unit)) !important; line-height: 1.16 !important; }
  html body.nss-page #main .ncb-benefit-label p { margin-top: calc(4 * var(--nc-unit)) !important; font-size: calc(21 * var(--nc-unit)) !important; line-height: 1.2 !important; }
  .ncb-benefit > ul { position: absolute; left: calc(956 * var(--nc-unit)); top: calc(var(--row-y) * var(--nc-unit)); width: calc(290 * var(--nc-unit)); padding-left: calc(21 * var(--nc-unit)); }
  html body.nss-page #main .ncb-benefit li { font-size: calc(18 * var(--nc-unit)) !important; line-height: 1.3 !important; }
  .nci-canvas { --nc-unit: calc(100cqw / 1203); aspect-ratio: 1203 / 884.736; }
  .nci-canvas::before { left: calc(-426 / 1203 * 100%); width: calc(2048 / 1203 * 100%); background-image: var(--nci-art); }
  .nci-heading { position: absolute; left: 0; top: calc(95 * var(--nc-unit)); width: 100%; }
  html body.nss-page #main .nci-heading h2 { font-size: calc(43 * var(--nc-unit)) !important; }
  html body.nss-page #main .nci-heading > p { margin-top: calc(7 * var(--nc-unit)) !important; width: calc(1070 * var(--nc-unit)); font-size: calc(18 * var(--nc-unit)) !important; line-height: 1.2 !important; }
  .nci-signaling { position: absolute; top: calc(211 * var(--nc-unit)); left: 0; right: 0; gap: calc(18 * var(--nc-unit)); margin: 0; }
  html body.nss-page #main .nci-signaling h3 { font-size: calc(20.5 * var(--nc-unit)) !important; line-height: 1.2 !important; }
  .nci-signaling-rule { margin-right: calc(20 * var(--nc-unit)); }
  .nci-categories { display: contents; }
  .nci-category { position: absolute; left: calc((var(--column-x) - 426) * var(--nc-unit)); top: calc(257 * var(--nc-unit)); width: calc(var(--column-w) * var(--nc-unit)); padding: 0; border: 0; }
  html body.nss-page #main .nci-category h3 { min-height: calc(48 * var(--nc-unit)); font-size: calc(20.5 * var(--nc-unit)) !important; line-height: 1.12 !important; letter-spacing: -.04em !important; }
  html body.nss-page #main .nci-category p { margin-top: calc(5 * var(--nc-unit)) !important; font-size: calc(16 * var(--nc-unit)) !important; line-height: 1.16 !important; }
  html[lang="th"] body.nss-page #main .nci-category h3 { font-size: calc(18.5 * var(--nc-unit)) !important; }
  .nci-category-art, .nci-skin-art { display: none; }
}