/* Skin&Co. Treatments — front-end
   Tailwind (from WPCode Header) does the styling; this file only
   shields our pages from theme/Elementor styles and styles rich text. */

body:has(.skinco-page) { background: #fff9ed; }

:where(.skinco-page, .skinco-block) { font-family: Manrope, sans-serif !important; color: #1f1c0d !important; line-height: 1.5 !important; }
:where(.skinco-page, .skinco-block) :where(h1, h2, h3, h4, h5, h6, p, blockquote, figure, ul, ol) { margin: 0 !important; padding: 0 !important; }
:where(.skinco-page, .skinco-block) :where(h1, h2, h3, h4, h5, h6) { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-transform: none !important; color: inherit !important; }
:where(.skinco-page, .skinco-block) :where(ul, ol) { list-style: none !important; }
:where(.skinco-page, .skinco-block) :where(a, a:hover, a:focus, a:visited, a:active) { color: inherit !important; text-decoration: none !important; }
:where(.skinco-page, .skinco-block) :where(button, button:hover, button:focus, button:active) { background-color: transparent !important; border: 0 none !important; padding: 0 !important; border-radius: 0 !important; color: inherit !important; font: inherit !important; text-transform: none !important; letter-spacing: inherit !important; box-shadow: none !important; min-height: 0 !important; }
:where(.skinco-page, .skinco-block) :where(img) { border: none !important; box-shadow: none !important; max-width: 100% !important; }

/* Rich text written in the editor (About, Causes, Desired Results) */
.skinco-page .skinco-rich p { margin: 0 0 1rem !important; }
.skinco-page .skinco-rich p:last-child { margin-bottom: 0 !important; }
.skinco-page .skinco-rich ul,
.skinco-page .skinco-rich ol { margin: 0 0 1rem !important; padding: 0 !important; display: grid; gap: 1rem; }
.skinco-page .skinco-rich ul:last-child,
.skinco-page .skinco-rich ol:last-child { margin-bottom: 0 !important; }
.skinco-page .skinco-rich li { position: relative; padding-left: 1.25rem; color: #1f1c0d; }
.skinco-page .skinco-rich ul > li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 9999px; background: #2d3423; }
.skinco-page .skinco-rich ol { counter-reset: skinco; }
.skinco-page .skinco-rich ol > li { counter-increment: skinco; }
.skinco-page .skinco-rich ol > li::before { content: counter(skinco) "."; position: absolute; left: 0; color: #2d3423; font-weight: 600; }
.skinco-page .skinco-rich strong,
.skinco-page .skinco-rich b { font-weight: 600; color: #2d3423; }
.skinco-page .skinco-rich a { text-decoration: underline !important; text-underline-offset: 3px; }

/* ---------- Site header + menu ([skinco_header]) ---------- */
.skinco-site-header { top: 0; }
body.admin-bar .skinco-site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .skinco-site-header { top: 46px; } }

.skinco-menu { position: fixed; inset: 0; z-index: 100000; visibility: hidden; pointer-events: none; }
.skinco-menu.is-open { visibility: visible; pointer-events: auto; }
.skinco-menu__backdrop { position: absolute; inset: 0; background: rgba(67, 75, 56, .3); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .4s ease; }
.skinco-menu.is-open .skinco-menu__backdrop { opacity: 1; }
.skinco-menu__panel { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; max-width: 440px; background: #FCF6DE; border-right: 1px solid #E8E0C9; box-shadow: 0 25px 50px -12px rgba(45, 52, 35, .25); overflow: hidden; transform: translateX(-100%); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.skinco-menu.is-open .skinco-menu__panel { transform: translateX(0); }
.skinco-menu__level { position: absolute; inset: 0; display: flex; flex-direction: column; background: #FCF6DE; opacity: 0; visibility: hidden; transform: translateX(28px); transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .45s; }
.skinco-menu__level.is-active { opacity: 1; visibility: visible; transform: translateX(0); transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.skinco-menu__scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html.skinco-menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
	.skinco-menu__panel, .skinco-menu__level, .skinco-menu__backdrop { transition: none; }
}

/* ---------- Contact form ---------- */
.skinco-page .sc-input { background: transparent !important; border: 1px solid rgba(252, 246, 222, .28) !important; color: #FCF6DE !important; box-shadow: none !important; height: auto !important; min-height: 48px; line-height: 1.4 !important; outline: none !important; transition: border-color .2s ease, background-color .2s ease; }
.skinco-page .sc-input:focus, .skinco-page .sc-input:focus-within, .skinco-page .sc-input[aria-expanded="true"] { border-color: rgba(252, 246, 222, .95) !important; background: rgba(252, 246, 222, .03) !important; }
.skinco-page .sc-input::placeholder { color: rgba(252, 246, 222, .45) !important; opacity: 1; }
.skinco-page .sc-input.sc-invalid { border-color: #ffb4ab !important; }
.skinco-page .sc-select { -webkit-appearance: none; appearance: none; background-image: none !important; }
.skinco-page .sc-select:invalid { color: rgba(252, 246, 222, .45) !important; }
.skinco-page .sc-select option { background: #434B38; color: #FCF6DE; }
.skinco-page .sc-opt { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .75rem; border-radius: 8px; cursor: pointer; color: #FCF6DE; font-size: 14px; text-align: left; }
.skinco-page .sc-opt:hover, .skinco-page .sc-opt:focus { background: rgba(252, 246, 222, .08); outline: none; }
.skinco-page .sc-opt__box { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(252, 246, 222, .5); flex: 0 0 16px; display: flex; align-items: center; justify-content: center; }
.skinco-page .sc-opt[aria-selected="true"] .sc-opt__box { background: #FCF6DE; border-color: #FCF6DE; }
.skinco-page .sc-opt[aria-selected="true"] .sc-opt__box::after { content: ""; width: 8px; height: 4px; border-left: 2px solid #2d3423; border-bottom: 2px solid #2d3423; transform: rotate(-45deg) translate(1px, -1px); }
.skinco-page .sc-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .75rem; background: #FCF6DE; color: #2D3423; border-radius: 9999px; font-size: 12px; font-weight: 500; }
.skinco-page .sc-chip__x { cursor: pointer; line-height: 1; font-size: 14px; opacity: .7; }
.skinco-page .sc-chip__x:hover { opacity: 1; }

.skinco-page .sc-input { border-radius: 12px !important; }
.skinco-page [data-sc-panel] { border-radius: 12px !important; }

/* ---------- Careers apply modal ---------- */
.sc-modal { display: none !important; }
.sc-modal.is-open { display: flex !important; }
html.sc-modal-open { overflow: hidden; }
.skinco-page .sc-cv-input { background: rgba(255, 255, 255, .45) !important; border: 1px solid #E8E0C9 !important; color: #2d3423 !important; box-shadow: none !important; height: auto !important; min-height: 48px; border-radius: 12px !important; outline: none !important; transition: border-color .2s ease; }
.skinco-page .sc-cv-input:focus { border-color: #434B38 !important; box-shadow: 0 0 0 1px #434B38 !important; }
.skinco-page .sc-cv-input::placeholder { color: rgba(45, 52, 35, .4) !important; opacity: 1; }
.skinco-page .sc-cv-input.sc-invalid, .skinco-page .sc-drop.sc-invalid { border-color: #ba1a1a !important; }
.skinco-page .sc-drop.is-over { border-color: #434B38 !important; background: rgba(67, 75, 56, .05); }

/* ---------- Blogs ---------- */
.sc-noscroll { scrollbar-width: none; -ms-overflow-style: none; }
.sc-noscroll::-webkit-scrollbar { display: none; }
.sc-grow { position: relative; }
.sc-grow::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: #434B38; transition: width .25s ease-in-out; }
.group:hover .sc-grow::after { width: 100%; }
.skinco-page .sc-share:hover { background: #434B38 !important; border-color: #434B38 !important; color: #FCF6DE !important; }
.skinco-page .sc-share.is-copied::after { content: "Copied"; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background: #434B38; color: #FCF6DE; font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }

/* Article body (written in the WordPress editor) */
.skinco-page .skinco-prose { font-family: Manrope, sans-serif !important; font-size: 18px !important; line-height: 1.8 !important; color: rgba(45, 52, 35, .85) !important; }
.skinco-page .skinco-prose > * + * { margin-top: 24px !important; }
.skinco-page .skinco-prose p { margin-bottom: 0 !important; }
.skinco-page .skinco-prose h2 { font-family: "EB Garamond", serif !important; font-size: 36px !important; line-height: 1.2 !important; font-weight: 400 !important; color: #2D3423 !important; margin: 56px 0 16px !important; }
.skinco-page .skinco-prose h3 { font-family: "EB Garamond", serif !important; font-size: 26px !important; line-height: 1.3 !important; font-weight: 400 !important; color: #2D3423 !important; margin: 40px 0 12px !important; }
.skinco-page .skinco-prose h4 { font-family: "EB Garamond", serif !important; font-size: 22px !important; font-weight: 500 !important; color: #2D3423 !important; margin: 32px 0 8px !important; }
.skinco-page .skinco-prose h2 + *, .skinco-page .skinco-prose h3 + *, .skinco-page .skinco-prose h4 + * { margin-top: 0 !important; }
.skinco-page .skinco-prose em { font-style: italic; }
.skinco-page .skinco-prose strong, .skinco-page .skinco-prose b { font-weight: 600; color: #2D3423; }
.skinco-page .skinco-prose a { color: #434B38 !important; text-decoration: underline !important; text-underline-offset: 3px; }
.skinco-page .skinco-prose ul, .skinco-page .skinco-prose ol { padding: 0 !important; display: grid; gap: 12px; }
.skinco-page .skinco-prose li { position: relative; padding-left: 24px; }
.skinco-page .skinco-prose ul > li::before { content: ""; position: absolute; left: 4px; top: .75em; width: 6px; height: 6px; border-radius: 9999px; background: #434B38; }
.skinco-page .skinco-prose ol { counter-reset: scp; }
.skinco-page .skinco-prose ol > li { counter-increment: scp; }
.skinco-page .skinco-prose ol > li::before { content: counter(scp) "."; position: absolute; left: 0; font-weight: 600; color: #434B38; }
.skinco-page .skinco-prose blockquote, .skinco-page .skinco-prose .wp-block-pullquote { margin: 40px 0 !important; padding: 4px 0 4px 24px !important; border: 0 !important; border-left: 2px solid #434B38 !important; text-align: left !important; }
.skinco-page .skinco-prose blockquote p, .skinco-page .skinco-prose .wp-block-pullquote p { font-family: "EB Garamond", serif !important; font-style: italic !important; font-size: 28px !important; line-height: 1.4 !important; color: #434B38 !important; }
.skinco-page .skinco-prose blockquote cite, .skinco-page .skinco-prose figcaption { display: block; margin-top: 10px; font-family: Manrope, sans-serif; font-size: 13px !important; font-style: italic; color: rgba(45, 52, 35, .6) !important; text-align: left; }
.skinco-page .skinco-prose figure { margin-left: 0 !important; margin-right: 0 !important; }
.skinco-page .skinco-prose img { border-radius: 16px; display: block; margin: 0 auto; width: auto; height: auto; max-width: 100%; max-height: 560px; }
.skinco-page .skinco-prose figcaption { text-align: center !important; }
.skinco-page .skinco-prose hr { border: 0; border-top: 1px solid #E8E0C9; margin: 48px 0 !important; }

/* ---------- Policy pages (text from the WordPress editor) ---------- */
.skinco-page .skinco-policy { font-family: Manrope, sans-serif !important; color: rgba(45, 52, 35, .9) !important; }
.skinco-page .skinco-policy > :first-child { font-size: 18px !important; color: rgba(45, 52, 35, .85) !important; }
.skinco-page .skinco-policy p { font-size: 17px !important; line-height: 1.8 !important; margin: 0 0 20px !important; }
.skinco-page .skinco-policy h2 { font-family: "EB Garamond", serif !important; font-size: 30px !important; line-height: 38px !important; font-weight: 400 !important; letter-spacing: -0.01em !important; color: #2D3423 !important; margin: 48px 0 16px !important; }
.skinco-page .skinco-policy h3 { font-family: "EB Garamond", serif !important; font-size: 22px !important; line-height: 30px !important; font-weight: 400 !important; color: #2D3423 !important; margin: 28px 0 12px !important; }
.skinco-page .skinco-policy em { font-style: italic; }
.skinco-page .skinco-policy strong, .skinco-page .skinco-policy b { font-weight: 600; color: #2D3423; }
.skinco-page .skinco-policy a { color: #434B38 !important; text-decoration: underline !important; text-underline-offset: 3px; }
.skinco-page .skinco-policy ul, .skinco-page .skinco-policy ol { padding: 0 0 0 4px !important; margin: 4px 0 24px !important; display: grid; gap: 12px; }
.skinco-page .skinco-policy li { position: relative; padding-left: 18px; font-size: 16px; line-height: 26px; }
.skinco-page .skinco-policy ul > li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 9999px; background: #434B38; }
.skinco-page .skinco-policy ol { counter-reset: scpol; }
.skinco-page .skinco-policy ol > li { counter-increment: scpol; padding-left: 24px; }
.skinco-page .skinco-policy ol > li::before { content: counter(scpol) "."; position: absolute; left: 0; font-weight: 600; color: #434B38; }
/* Quote block = "Please note" box */
.skinco-page .skinco-policy blockquote { margin: 8px 0 28px !important; padding: 24px !important; background: rgba(246, 237, 214, .6) !important; border: 1px solid #E8E3CB !important; border-radius: 16px !important; font-style: normal !important; }
.skinco-page .skinco-policy blockquote::before { content: "Please note"; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-family: Manrope, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #434B38; padding-left: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23434B38' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9.5'/%3E%3C/svg%3E") left center / 18px 18px no-repeat; }
.skinco-page .skinco-policy blockquote p { font-size: 15px !important; line-height: 24px !important; color: #2D3423 !important; margin: 0 !important; font-style: normal !important; }
.skinco-page .skinco-policy blockquote cite { display: none; }