/* =========================================================================
   Skin Glow Up - Home template. Everything scoped under .sgp / .sgp-body.
   Images are placeholders (.sgp-ph).
   ========================================================================= */

.sgp-body { margin: 0; }
.sgp {
	--sgp-orange: #ee6a1f;
	--sgp-orange-dark: #d65c15;
	--sgp-orange-soft: #fdecdf;
	--sgp-ink: #211c18;
	--sgp-muted: #7d746c;
	--sgp-cream: #fbf3ec;
	--sgp-band: #f9f0e7;
	--sgp-border: #efe4d6;
	--sgp-green: #1f3b30;
	--sgp-purple: #6c4cd6;
	--sgp-purple-soft: #efeafc;
	--sgp-topbar: #201b18;
	--sgp-serif: "Playfair Display", Georgia, serif;
	--sgp-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-family: var(--sgp-sans);
	color: var(--sgp-ink);
	line-height: 1.55;
	background: #fff;
}
.sgp *, .sgp *::before, .sgp *::after { box-sizing: border-box; }
.sgp a { text-decoration: none; color: inherit; }
.sgp img { max-width: 100%; }
.sgp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.sgp-i { width: 18px; height: 18px; display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* placeholders */
.sgp-ph { position: relative; background: linear-gradient(135deg,#efe0d0,#e7d5c3); border-radius: 14px; overflow: hidden; display: block; }
.sgp-ph::after { content: "IMAGE"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(120,110,100,.4); font-size: 11px; letter-spacing: 2px; font-weight: 700; }

/* headings / helpers */
.sgp-h2 { font-family: var(--sgp-serif); font-size: 34px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.3px; }
.sgp-sub { color: var(--sgp-muted); font-size: 15px; margin: 0; }
.sgp-center { text-align: center; }
.sgp-muted { color: var(--sgp-muted); }
.sgp-orange { color: var(--sgp-orange); }
.sgp-section { padding: 60px 0; }
.sgp-band { background: var(--sgp-band); }
.sgp-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.sgp-link { color: var(--sgp-orange-dark); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.sgp-link .sgp-i { width: 16px; height: 16px; }
.sgp-link-light { color: #f7d9be; }
.sgp-link-purple { color: var(--sgp-purple); }

/* buttons */
.sgp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 10px; font-weight: 600; font-size: 15px; border: none; cursor: pointer; font-family: var(--sgp-sans); transition: background .15s, color .15s, border-color .15s; }
.sgp-btn .sgp-i { width: 17px; height: 17px; }
.sgp-btn-primary { background: var(--sgp-orange); color: #fff; }
.sgp-btn-primary:hover { background: var(--sgp-orange-dark); }
.sgp-btn-outline { background: #fff; border: 1px solid var(--sgp-border); color: var(--sgp-ink); }
.sgp-btn-outline:hover { border-color: var(--sgp-orange); color: var(--sgp-orange); }
.sgp-btn-purple { background: var(--sgp-purple); color: #fff; }
.sgp-btn-purple:hover { background: #593dbd; }

/* ============ Topbar ============ */
.sgp-topbar { background: var(--sgp-orange); color: #fff; font-size: 13px; }
.sgp-topbar-in { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 9px 24px; }
.sgp-topbar span { display: inline-flex; align-items: center; gap: 8px; }
.sgp-topbar strong { font-weight: 700; }
.sgp-topbar .sgp-i { width: 15px; height: 15px; color: #fff; }

/* ============ Header ============ */
.sgp-header { background: #fff; border-bottom: 1px solid var(--sgp-border); position: sticky; top: 0; z-index: 40; }
.sgp-header-in { display: flex; align-items: center; gap: 22px; padding: 14px 24px; }
.sgp-logo { display: inline-flex; align-items: center; gap: 10px; }
.sgp-logo-mark { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--sgp-orange); color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sgp-logo-mark .sgp-i { width: 22px; height: 22px; }
.sgp-logo-text { font-family: var(--sgp-serif); font-weight: 800; font-size: 15px; line-height: 1; letter-spacing: 1px; }
.sgp-logo-img { height: 52px; width: auto; display: block; }
.sgp-foot-brand .sgp-logo-img { height: 60px; }
.sgp-nav { display: flex; align-items: center; gap: 6px; margin-left: 10px; flex-grow: 1; }
.sgp-nav-item { position: relative; }
.sgp-nav-link { display: inline-flex; align-items: center; gap: 4px; padding: 10px 12px; font-size: 14px; font-weight: 500; color: #45403b; border-radius: 8px; }
.sgp-nav-link:hover { color: var(--sgp-orange); }
.sgp-nav-link.is-active { color: var(--sgp-orange); font-weight: 600; }
.sgp-nav-link .sgp-i { width: 14px; height: 14px; }
.sgp-drop { position: absolute; top: 100%; left: 0; min-width: 210px; background: #fff; border: 1px solid var(--sgp-border); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.1); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .16s; z-index: 50; }
.sgp-nav-item:hover .sgp-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.sgp-drop a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: #45403b; }
.sgp-drop a:hover { background: var(--sgp-cream); color: var(--sgp-orange); }
.sgp-header-actions { display: flex; align-items: center; gap: 16px; }
.sgp-header-actions a { color: var(--sgp-ink); display: inline-flex; }
.sgp-header-actions a:hover { color: var(--sgp-orange); }
.sgp-header-actions .sgp-i { width: 22px; height: 22px; }
.sgp-cart { position: relative; }
.sgp-cart-count { position: absolute; top: -8px; right: -10px; background: var(--sgp-orange); color: #fff; font-size: 10px; font-weight: 700; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.sgp-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; margin-left: auto; }
.sgp-burger span { width: 24px; height: 2px; background: var(--sgp-ink); border-radius: 2px; }

/* ============ Hero ============ */
.sgp-hero { background: linear-gradient(180deg,#fdf3ea,#fbf4ed); overflow: hidden; }
.sgp-hero-in { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; }
.sgp-hero-copy { align-self: center; padding: 52px 44px 52px max(24px, calc((100vw - 1180px) / 2 + 24px)); }
.sgp-eyebrow { display: inline-block; color: var(--sgp-orange-dark); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; }
.sgp-hero-copy h1 { font-family: var(--sgp-serif); font-size: 50px; line-height: 1.08; font-weight: 800; margin: 0 0 18px; max-width: 560px; }
.sgp-hero-copy > p { font-size: 16px; color: #56504a; max-width: 470px; margin: 0 0 22px; }
.sgp-hero-reviews { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.sgp-avatars { display: flex; }
.sgp-avatars .sgp-ph { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; margin-left: -10px; }
.sgp-avatars .sgp-ph:first-child { margin-left: 0; }
.sgp-avatars .sgp-ph::after { content: ""; }
.sgp-stars { font-weight: 500; font-size: 14px; }
.sgp-stars .sgp-i { width: 16px; height: 16px; color: #f5a623; }
.sgp-stars strong { margin-left: 4px; }
.sgp-hero-reviews .sgp-muted { font-size: 13px; }
.sgp-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.sgp-hero-visual { position: relative; min-height: 480px; }
.sgp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 30px 0 0 30px; }
.sgp-promise { position: absolute; right: max(24px, calc((100vw - 1180px) / 2 + 24px)); top: 50%; transform: translateY(-50%); width: 250px; background: rgba(255,255,255,.94); backdrop-filter: blur(4px); border-radius: 14px; padding: 18px; box-shadow: 0 14px 40px rgba(0,0,0,.12); }
.sgp-promise h4 { font-family: var(--sgp-serif); margin: 0 0 12px; font-size: 16px; }
.sgp-promise ul { list-style: none; margin: 0; padding: 0; }
.sgp-promise li { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; padding: 7px 0; color: #45403b; }
.sgp-promise-i { color: var(--sgp-orange); flex-shrink: 0; }
.sgp-promise-i .sgp-i { width: 18px; height: 18px; }

/* ============ Stats bar ============ */
.sgp-statsbar { background: #fff; border: 1px solid var(--sgp-border); border-radius: 16px; box-shadow: 0 10px 30px rgba(32,28,25,.06); display: grid; grid-template-columns: repeat(6, 1fr); margin-top: -34px; position: relative; z-index: 5; }
.sgp-stat { display: flex; align-items: center; gap: 12px; padding: 20px 18px; border-right: 1px solid var(--sgp-border); }
.sgp-stat:last-child { border-right: none; }
.sgp-stat-i { color: var(--sgp-orange); }
.sgp-stat-i .sgp-i { width: 26px; height: 26px; }
.sgp-stat strong { display: block; font-size: 16px; }
.sgp-stat span { font-size: 12px; color: var(--sgp-muted); }

/* ============ Concerns ============ */
.sgp-concerns { display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; }
.sgp-concern { display: flex; flex-direction: column; gap: 10px; }
.sgp-concern-img { width: 100%; aspect-ratio: 3 / 4; border-radius: 14px; }
.sgp-concern-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 13px; font-weight: 600; }
.sgp-concern-foot .sgp-i { width: 16px; height: 16px; color: var(--sgp-orange); }
.sgp-concern:hover .sgp-concern-foot { color: var(--sgp-orange); }

/* ============ Articles ============ */
.sgp-articles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.sgp-article { background: #fff; border: 1px solid var(--sgp-border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.sgp-article:hover { box-shadow: 0 12px 28px rgba(32,28,25,.08); transform: translateY(-2px); }
.sgp-article-img { width: 100%; aspect-ratio: 4 / 3; border-radius: 0; }
.sgp-tag { position: absolute; top: 8px; left: 8px; background: #fff; color: var(--sgp-ink); font-size: 9px; font-weight: 700; letter-spacing: 1px; padding: 4px 8px; border-radius: 6px; z-index: 2; }
.sgp-article-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.sgp-article-body strong { font-family: var(--sgp-serif); font-size: 15px; line-height: 1.25; }
.sgp-article-body .sgp-muted { font-size: 12px; }
.sgp-read { font-size: 11px; color: #a49a90; margin-top: 4px; }

/* ============ Results ============ */
.sgp-results-wrap { position: relative; }
.sgp-results { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; }
.sgp-results::-webkit-scrollbar { display: none; }
.sgp-result { background: #fff; border: 1px solid var(--sgp-border); border-radius: 14px; overflow: hidden; }
.sgp-result-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.sgp-result-imgs .sgp-ph { aspect-ratio: 1 / 1; border-radius: 0; }
.sgp-ba { position: absolute; top: 8px; left: 8px; background: rgba(33,28,24,.72); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 1px; padding: 3px 8px; border-radius: 5px; z-index: 2; }
.sgp-result-imgs .sgp-ph:last-child .sgp-ba { left: auto; right: 8px; background: var(--sgp-orange); }
.sgp-result-body { padding: 14px; display: flex; flex-direction: column; gap: 3px; }
.sgp-result-body strong { font-family: var(--sgp-serif); font-size: 15px; }
.sgp-result-body .sgp-small { font-size: 11px; margin-top: 6px; }
.sgp-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--sgp-border); color: var(--sgp-orange); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.1); z-index: 6; }
.sgp-carousel-btn .sgp-i { width: 20px; height: 20px; }
.sgp-carousel-btn.prev { left: -18px; transform: translateY(-50%) rotate(90deg); }
.sgp-carousel-btn.next { right: -18px; transform: translateY(-50%) rotate(-90deg); }

/* ============ Tools ============ */
.sgp-tools { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.sgp-tool { background: #fff; border: 1px solid var(--sgp-border); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.sgp-tool-i { width: 46px; height: 46px; border-radius: 12px; background: var(--sgp-orange-soft); color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.sgp-tool-i .sgp-i { width: 22px; height: 22px; }
.sgp-tool strong { font-family: var(--sgp-serif); font-size: 16px; }
.sgp-tool p { font-size: 12px; color: var(--sgp-muted); margin: 0; flex-grow: 1; }
.sgp-tool .sgp-link { margin-top: 6px; }
.sgp-tool-dark { background: var(--sgp-green); border-color: var(--sgp-green); color: #fff; }
.sgp-tool-dark .sgp-tool-i { background: rgba(255,255,255,.12); color: #fff; }
.sgp-tool-dark p { color: rgba(255,255,255,.75); }
.sgp-tool-i-purple { background: var(--sgp-purple-soft); color: var(--sgp-purple); }

/* ============ Newsletter + Creator ============ */
.sgp-two { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: stretch; }
.sgp-newsletter { background: var(--sgp-cream); border: 1px solid var(--sgp-border); border-radius: 18px; padding: 32px; position: relative; overflow: hidden; min-height: 330px; }
.sgp-newsletter h3 { font-family: var(--sgp-serif); font-size: 24px; margin: 0 0 8px; }
.sgp-newsletter > p { color: #56504a; max-width: 420px; margin: 0 0 18px; }
.sgp-subscribe { display: flex; gap: 10px; max-width: 300px; position: relative; z-index: 2; }
.sgp-subscribe input { flex-grow: 1; padding: 13px 14px; border: 1px solid var(--sgp-border); border-radius: 10px; font-family: var(--sgp-sans); font-size: 14px; background: #fff; }
.sgp-subscribe input:focus { outline: none; border-color: var(--sgp-orange); }
.sgp-news-checks { display: flex; gap: 20px; margin-top: 16px; flex-wrap: wrap; position: relative; z-index: 2; max-width: 300px; }
.sgp-news-checks span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #56504a; }
.sgp-news-checks .sgp-i { width: 16px; height: 16px; color: var(--sgp-orange); }
.sgp-news-img { position: absolute; right: 10px; bottom: 0; width: 262px; height: auto; border-radius: 0; z-index: 1; }
.sgp-creatorcard { background: var(--sgp-purple-soft); border: 1px solid #e2d9fb; border-radius: 18px; padding: 32px; }
.sgp-creatorcard h3 { font-family: var(--sgp-serif); font-size: 24px; margin: 0 0 8px; }
.sgp-creatorcard > p { color: #56504a; margin: 0 0 18px; }
.sgp-creator-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.sgp-creator-feats span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.sgp-creator-feats .sgp-i { width: 18px; height: 18px; color: var(--sgp-purple); }

/* ============ Footer ============ */
.sgp-footer { background: #fff; border-top: 1px solid var(--sgp-border); padding: 40px 0 26px; }
.sgp-foot-trust { text-align: center; padding-bottom: 26px; border-bottom: 1px solid var(--sgp-border); }
.sgp-foot-trust strong { font-family: var(--sgp-serif); font-size: 20px; }
.sgp-foot-trust p { margin: 6px 0 18px; font-size: 13px; }
.sgp-trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 26px; }
.sgp-trust-row span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.sgp-trust-row .sgp-i { width: 18px; height: 18px; color: var(--sgp-orange); }
.sgp-foot-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 28px 0; flex-wrap: wrap; }
.sgp-foot-main h4 { font-family: var(--sgp-serif); margin: 0 0 12px; font-size: 17px; }
.sgp-foot-contact { display: flex; align-items: center; gap: 10px; font-size: 14px; margin: 6px 0; color: #45403b; }
.sgp-foot-contact .sgp-i { width: 18px; height: 18px; color: var(--sgp-orange); }
.sgp-socials { display: flex; gap: 12px; margin-top: 14px; }
.sgp-socials a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sgp-border); display: inline-flex; align-items: center; justify-content: center; color: var(--sgp-ink); }
.sgp-socials a:hover { border-color: var(--sgp-orange); color: var(--sgp-orange); }
.sgp-foot-brand { display: flex; align-items: center; gap: 12px; max-width: 320px; }
.sgp-foot-brand .sgp-logo-text { font-size: 15px; letter-spacing: 1px; }
.sgp-foot-brand p { margin: 4px 0 0; font-size: 13px; }
.sgp-foot-bottom { text-align: center; color: var(--sgp-muted); font-size: 13px; padding-top: 18px; border-top: 1px solid var(--sgp-border); }

/* real images swapped in from the mockup crops */
.sgp-hero-img, .sgp-concern-img, .sgp-article-img, .sgp-news-img { object-fit: cover; display: block; }
/* result before/after strips: show the full strip so BEFORE/AFTER labels aren't cropped */
.sgp-result-img { width: 100%; height: auto; display: block; border-radius: 0; }

/* ============ Responsive ============ */
@media (max-width: 1100px) {
	.sgp-concerns { grid-template-columns: repeat(4, 1fr); }
	.sgp-articles { grid-template-columns: repeat(3, 1fr); }
	.sgp-tools { grid-template-columns: repeat(3, 1fr); }
	.sgp-results { grid-auto-columns: calc((100% - 20px) / 2); }
	.sgp-statsbar { grid-template-columns: repeat(3, 1fr); }
	.sgp-stat:nth-child(3n) { border-right: none; }
}
@media (max-width: 860px) {
	.sgp-burger { display: flex; }
	.sgp-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 1px solid var(--sgp-border); padding: 12px; gap: 2px; box-shadow: 0 14px 30px rgba(0,0,0,.08); }
	.sgp-nav.is-open { display: flex; }
	.sgp-drop { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding: 0 0 0 14px; display: none; }
	.sgp-nav-item.is-open .sgp-drop { display: block; }
	.sgp-header-in { position: relative; }
	.sgp-hero-in { grid-template-columns: 1fr; }
	.sgp-hero-copy { padding: 36px 24px 22px; }
	.sgp-hero-visual { min-height: 340px; }
	.sgp-hero-img { border-radius: 0; }
	.sgp-promise { right: 16px; width: 220px; }
	.sgp-two { grid-template-columns: 1fr; }
	.sgp-creator-feats { grid-template-columns: 1fr; }
	.sgp-news-img { display: none; }
}
@media (max-width: 620px) {
	.sgp-hero-copy h1 { font-size: 36px; }
	.sgp-concerns { grid-template-columns: repeat(2, 1fr); }
	.sgp-articles { grid-template-columns: 1fr 1fr; }
	.sgp-tools { grid-template-columns: 1fr; }
	.sgp-statsbar { grid-template-columns: 1fr 1fr; }
	.sgp-stat { border-right: none; }
	.sgp-results { grid-auto-columns: 85%; }
	.sgp-h2 { font-size: 26px; }
	.sgp-topbar-in { font-size: 11px; gap: 8px; flex-wrap: wrap; justify-content: center; }
}

/* =========================================================================
   Skin Concerns page
   ========================================================================= */
.sgp-sc-hero { background: linear-gradient(180deg,#fdf3ea,#fbf4ed); overflow: hidden; }
.sgp-sc-hero-in { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; }
.sgp-sc-hero-copy { align-self: center; padding: 46px 44px 46px max(24px, calc((100vw - 1180px) / 2 + 24px)); }
.sgp-sc-hero-copy h1 { font-family: var(--sgp-serif); font-size: 44px; line-height: 1.12; font-weight: 800; margin: 8px 0 16px; }
.sgp-sc-hero-copy > p { color: #56504a; max-width: 440px; margin: 0 0 26px; }
.sgp-sc-hero-visual { position: relative; min-height: 380px; }
.sgp-sc-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 30px 0 0 30px; }
.sgp-sc-hero-checklist { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); z-index: 2; }
.sgp-sc-hero-checklist .sgp-sc-checks li { font-size: 14px; }
.sgp-sc-trust { display: flex; gap: 28px; flex-wrap: wrap; }
.sgp-sc-trust > div { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.sgp-sc-trust-i { width: 40px; height: 40px; border-radius: 11px; background: var(--sgp-orange-soft); color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sgp-sc-trust-i .sgp-i { width: 20px; height: 20px; }

.sgp-sc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; }
.sgp-sc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sgp-border); border-radius: 16px; overflow: hidden; box-shadow: var(--sgp-shadow); transition: box-shadow .15s, transform .15s; }
.sgp-sc-card:hover { box-shadow: 0 14px 32px rgba(32,28,25,.09); transform: translateY(-2px); }
.sgp-sc-card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.sgp-sc-card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.sgp-sc-card-body h3 { font-family: var(--sgp-serif); font-size: 18px; margin: 0; }
.sgp-sc-card-body p { color: var(--sgp-muted); font-size: 13px; margin: 0; flex-grow: 1; }
.sgp-sc-card-body .sgp-link { margin-top: 4px; }

.sgp-sc-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--sgp-orange-soft); border-radius: 16px; margin-top: 8px; }
.sgp-sc-stat { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-right: 1px solid rgba(210,170,130,.35); }
.sgp-sc-stat:last-child { border-right: none; }
.sgp-sc-stat-i { width: 46px; height: 46px; border-radius: 12px; background: #fff; color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sgp-sc-stat-i .sgp-i { width: 22px; height: 22px; }
.sgp-sc-stat strong { display: block; font-size: 16px; font-weight: 800; }
.sgp-sc-stat span { font-size: 12px; color: var(--sgp-muted); }

.sgp-sc-cta { background: linear-gradient(180deg,#fdeee1,#fbe6d4); padding: 52px 0; margin-top: 56px; }
.sgp-sc-cta-in { display: grid; grid-template-columns: 1.1fr 0.8fr 1fr; gap: 30px; align-items: center; }
.sgp-sc-cta-eyebrow { color: #56504a; font-size: 15px; margin: 0 0 6px; }
.sgp-sc-cta-copy h2 { font-family: var(--sgp-serif); font-size: 34px; margin: 0 0 12px; font-weight: 800; }
.sgp-sc-cta-copy > p { color: #56504a; max-width: 380px; margin: 0 0 20px; }
.sgp-sc-cta-phone { text-align: center; }
.sgp-sc-cta-phone img { max-width: 210px; display: inline-block; }
.sgp-sc-checks { list-style: none; margin: 0; padding: 0; }
.sgp-sc-checks li { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 15px; font-weight: 500; }
.sgp-sc-checks .sgp-i { width: 20px; height: 20px; color: var(--sgp-orange); }

@media (max-width: 1000px) {
	.sgp-sc-grid { grid-template-columns: repeat(2, 1fr); }
	.sgp-sc-cta-in { grid-template-columns: 1fr; }
	.sgp-sc-stats { grid-template-columns: repeat(2, 1fr); }
	.sgp-sc-stat:nth-child(2n) { border-right: none; }
}
@media (max-width: 860px) {
	.sgp-sc-hero-in { grid-template-columns: 1fr; }
	.sgp-sc-hero-copy { padding: 34px 24px 24px; }
	.sgp-sc-hero-visual { min-height: 300px; }
	.sgp-sc-hero-img { border-radius: 0; }
	.sgp-sc-hero-checklist { display: none; }
}
@media (max-width: 620px) {
	.sgp-sc-grid { grid-template-columns: 1fr; }
	.sgp-sc-stats { grid-template-columns: 1fr; }
	.sgp-sc-stat { border-right: none; }
	.sgp-sc-hero-copy h1 { font-size: 34px; }
}

/* =========================================================================
   Dark Knuckles guide page
   ========================================================================= */
.sgp-card-sub { color: var(--sgp-muted); font-size: 13px; margin: 0 0 12px; }
.sgp-dk-crumbs { font-size: 12px; color: var(--sgp-muted); margin-bottom: 14px; }
.sgp-dk-crumbs a { color: var(--sgp-muted); }
.sgp-dk-crumbs a:hover { color: var(--sgp-orange); }
.sgp-dk-crumbs span { color: var(--sgp-orange-dark); }

.sgp-dk-layout { display: grid; grid-template-columns: 1fr 330px; gap: 34px; align-items: start; }
.sgp-dk-main > h2 { margin-top: 44px; }
.sgp-dk-main > .sgp-sub { margin-bottom: 22px; }

.sgp-dk-guide { background: var(--sgp-band); border: 1px solid var(--sgp-border); border-radius: 16px; padding: 26px; }
.sgp-dk-guide h3 { font-family: var(--sgp-serif); font-size: 20px; margin: 0 0 2px; }
.sgp-dk-guide-icons { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-top: 18px; }
.sgp-dk-guide-icons > div { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 12px; font-weight: 500; }
.sgp-dk-gi { width: 46px; height: 46px; border-radius: 12px; background: #fff; color: var(--sgp-orange); border: 1px solid var(--sgp-border); display: inline-flex; align-items: center; justify-content: center; }
.sgp-dk-gi .sgp-i { width: 22px; height: 22px; }

.sgp-dk-causes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.sgp-dk-cause { background: #fff; border: 1px solid var(--sgp-border); border-radius: 14px; padding: 20px 16px; text-align: center; box-shadow: var(--sgp-shadow); }
.sgp-dk-cause-i { width: 44px; height: 44px; border-radius: 50%; background: var(--sgp-orange-soft); color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.sgp-dk-cause-i .sgp-i { width: 22px; height: 22px; }
.sgp-dk-cause strong { display: block; font-size: 14px; margin-bottom: 6px; }
.sgp-dk-cause p { color: var(--sgp-muted); font-size: 12px; margin: 0; }

.sgp-dk-note { display: flex; align-items: center; gap: 10px; background: var(--sgp-orange-soft); border-radius: 12px; padding: 14px 18px; margin-top: 20px; font-size: 14px; }
.sgp-dk-note .sgp-i { width: 18px; height: 18px; color: var(--sgp-orange); flex-shrink: 0; }
.sgp-dk-note.soft { background: var(--sgp-band); }

.sgp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.sgp-tab { border: 1px solid var(--sgp-border); background: #fff; color: #5f574f; padding: 9px 16px; border-radius: 100px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--sgp-sans); transition: background .15s, border-color .15s, color .15s; }
.sgp-tab:hover { border-color: var(--sgp-orange); color: var(--sgp-orange); }
.sgp-tab.is-active { background: var(--sgp-orange); border-color: var(--sgp-orange); color: #fff; }

.sgp-dk-treatment { display: grid; grid-template-columns: 260px 1fr; gap: 22px; background: #fff; border: 1px solid var(--sgp-border); border-radius: 16px; overflow: hidden; box-shadow: var(--sgp-shadow); }
.sgp-dk-treatment > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sgp-dk-treatment-body { padding: 22px 22px 22px 0; }
.sgp-dk-treatment-body h4 { font-family: var(--sgp-serif); font-size: 18px; margin: 0 0 8px; }
.sgp-dk-treatment-body > p { color: var(--sgp-muted); font-size: 14px; margin: 0 0 14px; }
.sgp-dk-checklist { list-style: none; margin: 0 0 16px; padding: 0; }
.sgp-dk-checklist li { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; }
.sgp-dk-checklist .sgp-i { width: 16px; height: 16px; color: var(--sgp-orange); }

.sgp-dk-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sgp-dk-tl-dot { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--sgp-orange-soft); color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.sgp-dk-tl-dot .sgp-i { width: 20px; height: 20px; }
.sgp-dk-tl strong { display: block; font-size: 14px; margin-bottom: 6px; }
.sgp-dk-tl p { color: var(--sgp-muted); font-size: 12px; margin: 0; }
.sgp-dk-center { text-align: center; margin-top: 24px; }

.sgp-dk-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 22px; }
.sgp-side-card { background: #fff; border: 1px solid var(--sgp-border); border-radius: 16px; padding: 20px; box-shadow: var(--sgp-shadow); }
.sgp-side-card h4 { font-family: var(--sgp-serif); font-size: 16px; margin: 0 0 14px; }
.sgp-dk-toc { list-style: none; margin: 0; padding: 0; }
.sgp-dk-toc li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; font-size: 13px; color: #5f574f; border-bottom: 1px solid #efe7de; }
.sgp-dk-toc li:last-child a { border-bottom: none; }
.sgp-dk-toc li a:hover { color: var(--sgp-orange); }
.sgp-dk-toc .sgp-i { width: 15px; height: 15px; color: var(--sgp-muted); }

.sgp-dk-product { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--sgp-border); }
.sgp-dk-product-img { width: 54px; height: 54px; border-radius: 10px; overflow: hidden; background: #f6efe6; flex-shrink: 0; }
.sgp-dk-product-img img { width: 100%; height: 100%; object-fit: cover; }
.sgp-dk-product strong { display: block; font-size: 13px; line-height: 1.3; }
.sgp-dk-stars { display: flex; align-items: center; gap: 4px; margin: 3px 0; }
.sgp-dk-stars .sgp-i { width: 12px; height: 12px; color: #f5a623; }
.sgp-dk-stars .sgp-muted { font-size: 11px; }
.sgp-dk-price { font-weight: 800; font-size: 14px; }
.sgp-side-card .sgp-btn-block { margin-top: 14px; }

.sgp-dk-expert { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.sgp-dk-expert img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.sgp-dk-expert strong { display: block; font-size: 14px; }
.sgp-dk-updated { font-size: 12px; color: var(--sgp-muted); margin: 12px 0 0; }

.sgp-dk-faq { border-bottom: 1px solid var(--sgp-border); padding: 12px 0; }
.sgp-dk-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-weight: 600; font-size: 13px; }
.sgp-dk-faq summary::-webkit-details-marker { display: none; }
.sgp-dk-faq .sgp-faq-mark { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.sgp-dk-faq .sgp-faq-mark::before, .sgp-dk-faq .sgp-faq-mark::after { content: ""; position: absolute; background: var(--sgp-orange); border-radius: 2px; }
.sgp-dk-faq .sgp-faq-mark::before { top: 6px; left: 0; width: 14px; height: 2px; }
.sgp-dk-faq .sgp-faq-mark::after { top: 0; left: 6px; width: 2px; height: 14px; }
.sgp-dk-faq[open] .sgp-faq-mark::after { display: none; }
.sgp-dk-faq p { margin: 10px 0 0; }
.sgp-dk-side .sgp-link { margin-top: 12px; display: inline-flex; }

.sgp-dk-cta { background: linear-gradient(180deg,#fdeee1,#fbe6d4); padding: 28px 0; }
.sgp-dk-cta-in { display: flex; align-items: center; gap: 24px; }
.sgp-dk-cta-ico { width: 50px; height: 50px; border-radius: 12px; background: #fff; color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sgp-dk-cta-copy { flex-grow: 1; }
.sgp-dk-cta-copy strong { font-family: var(--sgp-serif); font-size: 20px; display: block; }
.sgp-dk-cta-copy p { color: #56504a; margin: 4px 0 0; font-size: 14px; }
.sgp-dk-cta-phone img { height: 72px; display: block; }

@media (max-width: 1000px) {
	.sgp-dk-layout { grid-template-columns: 1fr; }
	.sgp-dk-side { position: static; }
	.sgp-dk-causes { grid-template-columns: repeat(2, 1fr); }
	.sgp-dk-timeline { grid-template-columns: repeat(2, 1fr); }
	.sgp-dk-guide-icons { grid-template-columns: repeat(4, 1fr); }
	.sgp-dk-cta-in { flex-wrap: wrap; }
	.sgp-dk-cta-phone { display: none; }
}
@media (max-width: 620px) {
	.sgp-dk-causes, .sgp-dk-timeline { grid-template-columns: 1fr; }
	.sgp-dk-guide-icons { grid-template-columns: repeat(3, 1fr); }
	.sgp-dk-treatment { grid-template-columns: 1fr; }
	.sgp-dk-treatment-body { padding: 0 20px 20px; }
}

/* ===== Hyperpigmentation guide extras (Types + light causes) ===== */
.sgp-hp-types { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.sgp-hp-types-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sgp-hp-types-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sgp-hp-type { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sgp-border); border-radius: 14px; overflow: hidden; box-shadow: var(--sgp-shadow); }
.sgp-hp-type img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; }
.sgp-hp-type-body { padding: 14px; }
.sgp-hp-type-body strong { display: block; font-family: var(--sgp-serif); font-size: 14px; line-height: 1.25; margin-bottom: 6px; }
.sgp-hp-type-body p { color: var(--sgp-muted); font-size: 12px; margin: 0; }
.sgp-hp-type-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; margin-top: 10px; }
.sgp-hp-type-badge.good { background: #e6f4ea; color: #1e7a3d; }
.sgp-hp-type-badge.mid { background: #fbeed9; color: #a3620a; }
.sgp-hp-type-badge.hard { background: #fce4e4; color: #b3392f; }

.sgp-hp-causes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.sgp-hp-causes-7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 18px; }
.sgp-hp-cause { text-align: center; }
.sgp-hp-cause-i { color: var(--sgp-orange); display: inline-flex; margin-bottom: 8px; }
.sgp-hp-cause-i .sgp-i { width: 26px; height: 26px; }
.sgp-hp-cause strong { display: block; font-size: 13px; margin-bottom: 5px; }
.sgp-hp-cause p { color: var(--sgp-muted); font-size: 11px; margin: 0; }

@media (max-width: 1000px) {
	.sgp-hp-types { grid-template-columns: repeat(3, 1fr); }
	.sgp-hp-types-4 { grid-template-columns: repeat(2, 1fr); }
	.sgp-hp-causes { grid-template-columns: repeat(3, 1fr); }
	.sgp-hp-causes-7 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 620px) {
	.sgp-hp-types { grid-template-columns: 1fr 1fr; }
	.sgp-hp-types-3 { grid-template-columns: 1fr; }
	.sgp-hp-types-4 { grid-template-columns: 1fr; }
	.sgp-hp-causes { grid-template-columns: 1fr 1fr; }
	.sgp-hp-causes-7 { grid-template-columns: 1fr 1fr; }
}

/* ===== Ingredients hub page ===== */
.sgp-ing-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.sgp-ing-card { background: #fff; border: 1px solid var(--sgp-border); border-radius: 16px; padding: 24px 20px; box-shadow: var(--sgp-shadow); }
.sgp-ing-card img { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 18px; }
.sgp-ing-card h3 { font-family: var(--sgp-serif); font-size: 17px; margin: 0 0 4px; }
.sgp-ing-tag { display: block; color: var(--sgp-orange); font-weight: 700; font-size: 12px; margin-bottom: 8px; }
.sgp-ing-card p { color: var(--sgp-muted); font-size: 12.5px; line-height: 1.5; margin: 0 0 14px; }

.sgp-ing-band { background: var(--sgp-band); border-radius: 20px; padding: 40px; }
.sgp-ing-band-in { display: grid; grid-template-columns: 250px 1fr; gap: 34px; align-items: center; }
.sgp-ing-band-copy h2 { font-family: var(--sgp-serif); font-size: 26px; line-height: 1.2; margin: 0 0 12px; }
.sgp-ing-band-copy p { color: #56504a; font-size: 14px; margin: 0 0 20px; }
.sgp-ing-choose-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.sgp-ing-choose-item { text-align: center; }
.sgp-ing-choose-i { width: 50px; height: 50px; border-radius: 50%; background: #fff; color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; box-shadow: var(--sgp-shadow); }
.sgp-ing-choose-item strong { display: block; font-size: 14px; margin-bottom: 6px; }
.sgp-ing-choose-item p { color: var(--sgp-muted); font-size: 12px; margin: 0; }

.sgp-ing-pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 26px 0 30px; }
.sgp-ing-pill { background: #fff; border: 1px solid var(--sgp-border); border-radius: 100px; padding: 10px 18px; font-size: 13px; font-weight: 600; color: #5f574f; }
.sgp-ing-center { text-align: center; }

@media (max-width: 1000px) {
	.sgp-ing-grid { grid-template-columns: repeat(3, 1fr); }
	.sgp-ing-band-in { grid-template-columns: 1fr; }
	.sgp-ing-choose-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.sgp-ing-grid { grid-template-columns: 1fr 1fr; }
	.sgp-ing-choose-grid { grid-template-columns: 1fr; }
}

/* ===== Ingredient Spotlight page (Vitamin C, etc.) ===== */
.sgp-ic-pill { display: inline-block; background: var(--sgp-orange-soft); color: var(--sgp-orange-dark); font-weight: 700; font-size: 12px; padding: 6px 14px; border-radius: 100px; margin-bottom: 14px; }
.sgp-ic-tagline { color: var(--sgp-orange); font-weight: 700; font-size: 17px; margin: 4px 0 14px; }
.sgp-ic-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 28px; }
.sgp-ic-feature { text-align: center; }
.sgp-ic-feature-i { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--sgp-orange); color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.sgp-ic-feature strong { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.35; }

.sgp-ic-benefits { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; text-align: center; }
.sgp-ic-benefits-6 { grid-template-columns: repeat(6, 1fr); }
.sgp-ic-benefit-i { width: 56px; height: 56px; border-radius: 50%; background: var(--sgp-orange-soft); color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.sgp-ic-benefits h3 { font-family: var(--sgp-serif); font-size: 16px; margin: 0 0 8px; }
.sgp-ic-benefits p { color: var(--sgp-muted); font-size: 12.5px; line-height: 1.5; margin: 0; }

.sgp-ic-info { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: 24px; align-items: start; }
.sgp-ic-card { background: #fff; border: 1px solid var(--sgp-border); border-radius: 16px; padding: 24px; }
.sgp-ic-card.soft { background: var(--sgp-band); border: none; }
.sgp-ic-card h3 { font-family: var(--sgp-serif); font-size: 18px; margin: 0 0 12px; }
.sgp-ic-card > p { color: #56504a; font-size: 13.5px; line-height: 1.6; margin: 0 0 18px; }
.sgp-ic-stack { display: flex; flex-direction: column; gap: 20px; }

.sgp-ic-flow { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.sgp-ic-flow-step { flex: 1; text-align: center; }
.sgp-ic-flow-i { width: 44px; height: 44px; border-radius: 50%; background: var(--sgp-orange-soft); color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.sgp-ic-flow-step span { display: block; font-size: 11px; color: var(--sgp-muted); line-height: 1.35; }
.sgp-ic-flow-arrow { color: var(--sgp-orange); flex-shrink: 0; margin-top: 12px; }
.sgp-ic-flow-arrow .sgp-i { width: 18px; height: 18px; }

.sgp-ic-sources { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.sgp-ic-sources-5 { grid-template-columns: repeat(5, 1fr); }
.sgp-ic-sources img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 12px; display: block; margin-bottom: 8px; }
.sgp-ic-sources span { font-size: 12px; font-weight: 600; text-align: center; display: block; }

.sgp-ic-checklist { list-style: none; margin: 0; padding: 0; }
.sgp-ic-checklist li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 7px 0; }
.sgp-ic-checklist .sgp-i { width: 17px; height: 17px; color: var(--sgp-orange); flex-shrink: 0; }

.sgp-ic-did-you-know h3, .sgp-ic-did-you-know h4 { display: flex; align-items: center; gap: 8px; }
.sgp-side-card.soft { background: var(--sgp-band); border: none; box-shadow: none; }
.sgp-ic-did-you-know .sgp-i { width: 20px; height: 20px; color: var(--sgp-orange); }

.sgp-ic-faqs { display: flex; flex-direction: column; }
.sgp-ic-faq { border-bottom: 1px solid var(--sgp-border); padding: 12px 0; }
.sgp-ic-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-weight: 600; font-size: 13.5px; }
.sgp-ic-faq summary::-webkit-details-marker { display: none; }
.sgp-ic-faq .sgp-faq-mark { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.sgp-ic-faq .sgp-faq-mark::before, .sgp-ic-faq .sgp-faq-mark::after { content: ""; position: absolute; background: var(--sgp-orange); border-radius: 2px; }
.sgp-ic-faq .sgp-faq-mark::before { top: 6px; left: 0; width: 14px; height: 2px; }
.sgp-ic-faq .sgp-faq-mark::after { top: 0; left: 6px; width: 2px; height: 14px; }
.sgp-ic-faq[open] .sgp-faq-mark::after { display: none; }
.sgp-ic-still { margin-top: 6px; font-size: 13px; color: var(--sgp-muted); }

.sgp-ic-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.sgp-ic-products-5 { grid-template-columns: repeat(5, 1fr); }
.sgp-ic-product img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 14px; display: block; margin-bottom: 16px; background: #f6efe6; }
.sgp-ic-product strong { display: block; font-family: var(--sgp-serif); font-size: 15px; margin-bottom: 6px; }
.sgp-ic-product p { color: var(--sgp-muted); font-size: 12.5px; line-height: 1.5; margin: 0 0 8px; }
.sgp-ic-product .sgp-dk-stars { margin-bottom: 6px; }
.sgp-ic-product .sgp-dk-price { display: block; margin-bottom: 8px; }

.sgp-ic-commit { background: var(--sgp-band); border-radius: 20px; padding: 30px 36px; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.sgp-ic-commit-i { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--sgp-orange); color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sgp-ic-commit-copy { flex: 1 1 220px; }
.sgp-ic-commit-copy strong { display: block; font-family: var(--sgp-serif); font-size: 16px; margin-bottom: 4px; }
.sgp-ic-commit-copy p { color: #56504a; font-size: 13px; margin: 0; }
.sgp-ic-commit-grid { display: flex; gap: 30px; flex: 2 1 400px; }
.sgp-ic-commit-item { flex: 1; text-align: center; }
.sgp-ic-commit-item .sgp-ing-choose-i { margin-bottom: 8px; }
.sgp-ic-commit-item span { display: block; font-size: 12.5px; font-weight: 600; }

@media (max-width: 1000px) {
	.sgp-ic-features { grid-template-columns: repeat(2, 1fr); }
	.sgp-ic-benefits, .sgp-ic-benefits-6 { grid-template-columns: repeat(3, 1fr); }
	.sgp-ic-info { grid-template-columns: 1fr; }
	.sgp-ic-sources, .sgp-ic-sources-5 { grid-template-columns: repeat(4, 1fr); }
	.sgp-ic-products, .sgp-ic-products-5 { grid-template-columns: repeat(2, 1fr); }
	.sgp-ic-commit-grid { flex-wrap: wrap; }
}
@media (max-width: 620px) {
	.sgp-ic-features { grid-template-columns: 1fr 1fr; }
	.sgp-ic-benefits, .sgp-ic-benefits-6 { grid-template-columns: 1fr 1fr; }
	.sgp-ic-sources, .sgp-ic-sources-5 { grid-template-columns: 1fr 1fr; }
	.sgp-ic-products, .sgp-ic-products-5 { grid-template-columns: 1fr; }
	.sgp-ic-flow { flex-direction: column; align-items: center; }
	.sgp-ic-flow-arrow { transform: rotate(90deg); margin: 4px 0; }
}

/* ===== Skin Academy hub page ===== */
.sgp-sa-topics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.sgp-sa-topic { background: #fff; border: 1px solid var(--sgp-border); border-radius: 16px; overflow: visible; box-shadow: var(--sgp-shadow); display: block; }
.sgp-sa-topic-img-wrap { position: relative; }
.sgp-sa-topic img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; border-radius: 16px 16px 0 0; }
.sgp-sa-topic-badge { position: absolute; bottom: -18px; left: 16px; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--sgp-shadow); }
.sgp-sa-topic-body { padding: 28px 16px 18px; }
.sgp-sa-topic-body h3 { font-family: var(--sgp-serif); font-size: 15px; margin: 0 0 6px; }
.sgp-sa-topic-body p { color: var(--sgp-muted); font-size: 12px; line-height: 1.5; margin: 0 0 10px; }

.sgp-sa-bands { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; }
.sgp-sa-band { background: var(--sgp-band); border-radius: 20px; padding: 32px; }
.sgp-sa-band h2 { font-family: var(--sgp-serif); font-size: 22px; margin: 0 0 4px; }
.sgp-sa-band > p { color: var(--sgp-muted); font-size: 13.5px; margin: 0 0 24px; }

.sgp-sa-path { display: flex; align-items: flex-start; justify-content: space-between; position: relative; }
.sgp-sa-path-step { flex: 1; text-align: center; position: relative; }
.sgp-sa-path-i { width: 56px; height: 56px; border-radius: 50%; background: var(--sgp-orange-soft); color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; position: relative; }
.sgp-sa-path-num { display: inline-block; background: var(--sgp-orange); color: #fff; font-size: 10px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; line-height: 18px; margin-bottom: 6px; }
.sgp-sa-path-step strong { display: block; font-size: 14px; margin-bottom: 6px; }
.sgp-sa-path-step p { color: var(--sgp-muted); font-size: 11.5px; line-height: 1.4; margin: 0; }
.sgp-sa-path-line { position: absolute; top: 28px; left: 0; right: 0; border-top: 2px dashed var(--sgp-orange-soft); z-index: 0; margin: 0 56px; }
.sgp-sa-path-cta { margin-top: 28px; text-align: left; }

.sgp-sa-works { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.sgp-sa-works li { display: flex; gap: 14px; align-items: flex-start; }
.sgp-sa-works .sgp-i { width: 22px; height: 22px; color: var(--sgp-orange); flex-shrink: 0; margin-top: 2px; }
.sgp-sa-works strong { display: block; font-size: 14.5px; margin-bottom: 3px; }
.sgp-sa-works p { color: var(--sgp-muted); font-size: 13px; margin: 0; }

.sgp-sa-triple { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; align-items: start; }
.sgp-sa-panel { background: #fff; border: 1px solid var(--sgp-border); border-radius: 16px; padding: 26px; box-shadow: var(--sgp-shadow); }
.sgp-sa-panel h3 { font-family: var(--sgp-serif); font-size: 17px; margin: 0 0 4px; }
.sgp-sa-panel > p { color: var(--sgp-muted); font-size: 12.5px; margin: 0 0 16px; }
.sgp-sa-lessons { list-style: none; margin: 0 0 12px; padding: 0; }
.sgp-sa-lessons li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--sgp-border); }
.sgp-sa-lessons li:last-child { border-bottom: none; }
.sgp-sa-lessons img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sgp-sa-lessons strong { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.sgp-sa-lessons span { font-size: 11px; color: var(--sgp-muted); }
.sgp-sa-video { width: 100%; border-radius: 12px; display: block; margin-bottom: 14px; }
.sgp-sa-expert-checks { list-style: none; margin: 0 0 18px; padding: 0; }
.sgp-sa-expert-checks li { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 0; }
.sgp-sa-expert-checks .sgp-i { width: 16px; height: 16px; color: var(--sgp-orange); }
.sgp-sa-expert-photo { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; float: right; margin: -8px 0 10px 12px; }

.sgp-sa-community { background: var(--sgp-band); border-radius: 20px; padding: 32px 36px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.sgp-sa-community-copy { flex: 1 1 260px; }
.sgp-sa-community-copy h2 { font-family: var(--sgp-serif); font-size: 22px; margin: 0 0 6px; }
.sgp-sa-community-copy p { color: #56504a; font-size: 13.5px; margin: 0 0 18px; }
.sgp-sa-stats { display: flex; gap: 36px; flex: 2 1 400px; }
.sgp-sa-stat { text-align: center; }
.sgp-sa-stat .sgp-i { width: 26px; height: 26px; color: var(--sgp-orange); margin-bottom: 8px; }
.sgp-sa-stat strong { display: block; font-family: var(--sgp-serif); font-size: 22px; }
.sgp-sa-stat span { font-size: 12px; color: var(--sgp-muted); }

@media (max-width: 1000px) {
	.sgp-sa-topics { grid-template-columns: repeat(3, 1fr); }
	.sgp-sa-bands { grid-template-columns: 1fr; }
	.sgp-sa-triple { grid-template-columns: 1fr; }
	.sgp-sa-stats { flex-wrap: wrap; gap: 24px; }
}
@media (max-width: 620px) {
	.sgp-sa-topics { grid-template-columns: 1fr 1fr; }
	.sgp-sa-path { flex-wrap: wrap; gap: 24px; }
	.sgp-sa-path-line { display: none; }
}

/* ===== Skin Academy lesson article (Hyperpigmentation, etc.) ===== */
.sgp-ac-guide-card { position: absolute; left: 24px; right: 60px; bottom: -36px; background: #fff; border-radius: 16px; padding: 22px 26px; box-shadow: 0 12px 30px rgba(0,0,0,.14); z-index: 2; }
.sgp-ac-guide-card h4 { font-family: var(--sgp-serif); font-size: 15px; margin: 0 0 12px; }
.sgp-ac-guide-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; list-style: none; margin: 0; padding: 0; }
.sgp-ac-guide-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sgp-ac-guide-list .sgp-i { width: 15px; height: 15px; color: var(--sgp-orange); flex-shrink: 0; }
.sgp-ac-main > h2:not(:first-child) { margin-top: 48px; }

.sgp-ac-row { display: grid; gap: 22px; text-align: center; }
.sgp-ac-row-4 { grid-template-columns: repeat(4, 1fr); }
.sgp-ac-row-5 { grid-template-columns: repeat(5, 1fr); }
.sgp-ac-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--sgp-orange-soft); color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.sgp-ac-row strong { display: block; font-size: 13.5px; margin-bottom: 6px; }
.sgp-ac-row p { color: var(--sgp-muted); font-size: 12px; line-height: 1.5; margin: 0; }
.sgp-ac-row-4 strong { font-weight: 600; margin-bottom: 0; }

.sgp-hp-type-body .sgp-ac-areas { margin-top: 6px; }

@media (max-width: 1000px) {
	.sgp-ac-row-4, .sgp-ac-row-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
	.sgp-ac-row-4, .sgp-ac-row-5 { grid-template-columns: 1fr 1fr; }
	.sgp-ac-guide-list { grid-template-columns: 1fr; }
}

/* ===== Skin Academy lesson: Skincare Basics ===== */
.sgp-sb-steps { display: flex; align-items: stretch; gap: 6px; }
.sgp-sb-step { position: relative; flex: 1; background: #fff; border: 1px solid var(--sgp-border); border-radius: 14px; padding: 26px 18px 20px; text-align: center; box-shadow: var(--sgp-shadow); display: flex; flex-direction: column; }
.sgp-sb-step-num { position: absolute; top: 14px; left: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--sgp-orange-soft); color: var(--sgp-orange-dark); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.sgp-sb-step .sgp-dk-cause-i { margin: 4px auto 12px; }
.sgp-sb-step strong { display: block; font-family: var(--sgp-serif); font-size: 15px; margin-bottom: 8px; }
.sgp-sb-step > p { color: var(--sgp-muted); font-size: 12.5px; line-height: 1.5; margin: 0 0 14px; flex-grow: 1; }
.sgp-sb-why { background: var(--sgp-orange-soft); border-radius: 10px; padding: 10px 12px; font-size: 11.5px; line-height: 1.4; text-align: left; color: #6b5f52; }
.sgp-sb-why strong { color: var(--sgp-orange-dark); }
.sgp-sb-step-arrow { display: flex; align-items: center; color: var(--sgp-orange); flex-shrink: 0; }
.sgp-sb-step-arrow .sgp-i { width: 18px; height: 18px; }

.sgp-sb-ampm { display: flex; gap: 28px; margin-bottom: 20px; }
.sgp-sb-routine { flex: 1; }
.sgp-sb-routine h3 { display: flex; align-items: center; gap: 8px; font-family: var(--sgp-serif); font-size: 15px; margin: 0 0 12px; }
.sgp-sb-routine h3 .sgp-i { width: 18px; height: 18px; color: var(--sgp-orange); }
.sgp-sb-routine ol { margin: 0 0 14px; padding-left: 20px; font-size: 13px; color: #56504a; line-height: 1.85; }
.sgp-sb-focus { font-size: 12.5px; font-weight: 700; color: var(--sgp-ink); margin: 0; }

.sgp-sb-layer-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
.sgp-sb-layer-item { flex: 1; text-align: center; }
.sgp-sb-layer-i { width: 62px; height: 62px; border-radius: 50%; background: var(--sgp-orange-soft); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; overflow: hidden; }
.sgp-sb-layer-i img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sgp-sb-layer-item strong { display: block; font-size: 12.5px; margin-bottom: 3px; }
.sgp-sb-layer-item span { display: block; font-size: 10.5px; color: var(--sgp-muted); line-height: 1.35; }
.sgp-sb-layer-arrow { color: var(--sgp-orange); flex-shrink: 0; margin-top: 24px; }
.sgp-sb-layer-arrow .sgp-i { width: 16px; height: 16px; }

.sgp-sb-skintypes { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sgp-sb-skintypes li { display: flex; align-items: flex-start; gap: 10px; }
.sgp-sb-skintypes .sgp-i { width: 18px; height: 18px; color: var(--sgp-orange); flex-shrink: 0; margin-top: 2px; }
.sgp-sb-skintypes strong { display: block; font-size: 13px; }
.sgp-sb-skintypes span { display: block; font-size: 11.5px; color: var(--sgp-muted); }
.sgp-sb-lookfor { background: var(--sgp-band); border-radius: 12px; padding: 16px 18px; }
.sgp-sb-lookfor strong { display: block; font-size: 12.5px; margin-bottom: 8px; }

.sgp-sb-mistakes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sgp-sb-mistakes li { display: flex; align-items: flex-start; gap: 10px; }
.sgp-sb-mistakes .sgp-i { width: 18px; height: 18px; color: #e0473f; flex-shrink: 0; margin-top: 2px; }
.sgp-sb-mistakes strong { display: block; font-size: 13px; }
.sgp-sb-mistakes span { display: block; font-size: 11.5px; color: var(--sgp-muted); }

.sgp-sb-routineflow-label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; margin: 0 0 14px; }
.sgp-sb-routineflow-label .sgp-i { width: 16px; height: 16px; color: var(--sgp-orange); }
.sgp-sb-routineflow + .sgp-sb-routineflow-label { margin-top: 24px; }
.sgp-sb-routine-note { color: var(--sgp-muted); font-size: 12px; margin: 18px 0 0; }

@media (max-width: 1000px) {
	.sgp-sb-steps { flex-wrap: wrap; }
	.sgp-sb-step { flex: 1 1 calc(50% - 6px); }
	.sgp-sb-step-arrow { display: none; }
	.sgp-sb-ampm { flex-direction: column; gap: 18px; }
}
@media (max-width: 620px) {
	.sgp-sb-step { flex: 1 1 100%; }
	.sgp-sb-layer-row { flex-wrap: wrap; }
	.sgp-sb-layer-item { flex: 1 1 30%; }
	.sgp-sb-layer-arrow { display: none; }
}

/* ===== Skin Academy lesson: Sun Protection ===== */
.sgp-ac-row-2 { grid-template-columns: repeat(2, 1fr); }
.sgp-sp-uvbadge { width: 52px; height: 52px; border-radius: 50%; background: var(--sgp-orange-soft); color: var(--sgp-orange-dark); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; font-weight: 800; font-size: 12px; }
.sgp-sp-uva-block { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.sgp-sp-uva-block:last-of-type { margin-bottom: 0; }
.sgp-sp-uvab { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--sgp-orange-soft); color: var(--sgp-orange-dark); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 10px; }
.sgp-sp-uva-block strong { display: block; color: var(--sgp-orange-dark); font-size: 13.5px; margin-bottom: 3px; }
.sgp-sp-uva-block p { color: var(--sgp-muted); font-size: 12.5px; line-height: 1.5; margin: 0; }

.sgp-sp-mf { display: flex; flex-direction: column; gap: 12px; }
.sgp-sp-mf-row { display: flex; align-items: center; gap: 10px; }
.sgp-sp-myth, .sgp-sp-fact { flex: 1; border-radius: 12px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; }
.sgp-sp-myth { background: #fdecec; }
.sgp-sp-fact { background: #eaf6ec; }
.sgp-sp-myth .sgp-i { width: 16px; height: 16px; color: #d6453d; flex-shrink: 0; margin-top: 2px; }
.sgp-sp-fact .sgp-i { width: 16px; height: 16px; color: #2f9e4f; flex-shrink: 0; margin-top: 2px; }
.sgp-sp-myth strong, .sgp-sp-fact strong { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 3px; }
.sgp-sp-myth strong { color: #c23b34; }
.sgp-sp-fact strong { color: #248140; }
.sgp-sp-myth p, .sgp-sp-fact p { font-size: 12.5px; line-height: 1.4; margin: 0; color: #4a4540; }
.sgp-sp-mf-arrow { color: var(--sgp-orange); flex-shrink: 0; }
.sgp-sp-mf-arrow .sgp-i { width: 16px; height: 16px; }

@media (max-width: 620px) {
	.sgp-sp-mf-row { flex-direction: column; align-items: stretch; }
	.sgp-sp-mf-arrow { transform: rotate(90deg); align-self: center; }
}

/* ===== Skin Academy lesson: Ingredients 101 ===== */
.sgp-i101-why { background: var(--sgp-orange-soft); border-radius: 20px; padding: 30px 36px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.sgp-i101-why-i { width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid var(--sgp-orange); color: var(--sgp-orange); background: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sgp-i101-why-copy { flex: 1 1 300px; }
.sgp-i101-why-copy h2 { font-family: var(--sgp-serif); font-size: 19px; margin: 0 0 6px; }
.sgp-i101-why-copy p { color: #56504a; font-size: 12.5px; line-height: 1.5; margin: 0; }
.sgp-i101-why-list { display: flex; gap: 26px; flex: 1 1 420px; }
.sgp-i101-why-list > div { flex: 1; text-align: center; }
.sgp-i101-why-i2 { width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.sgp-i101-why-list span { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.35; }

.sgp-i101-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.sgp-i101-cat { background: #fff; border: 1px solid var(--sgp-border); border-radius: 14px; padding: 20px 18px; box-shadow: var(--sgp-shadow); }
.sgp-i101-cat img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; margin-bottom: 14px; }
.sgp-i101-cat strong { display: block; font-family: var(--sgp-serif); font-size: 14.5px; margin-bottom: 6px; }
.sgp-i101-cat > p { color: var(--sgp-muted); font-size: 12px; line-height: 1.5; margin: 0 0 10px; }
.sgp-i101-cat-ex { font-size: 11px; color: #56504a; line-height: 1.5; margin: 0 0 10px; }
.sgp-i101-cat-ex b { font-weight: 700; }

.sgp-i101-breakdown-list { background: var(--sgp-band); border-radius: 12px; padding: 16px 18px; font-size: 12.5px; line-height: 1.7; color: #3d3833; margin-bottom: 20px; }
.sgp-i101-breakdown-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sgp-i101-bd-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; flex-shrink: 0; }
.sgp-i101-breakdown-cols strong { display: flex; align-items: center; font-size: 11.5px; margin-bottom: 6px; }
.sgp-i101-breakdown-cols p { font-size: 11px; color: var(--sgp-muted); margin: 0; line-height: 1.5; }

.sgp-i101-pops { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.sgp-i101-pop { text-align: center; }
.sgp-i101-pop img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 12px; }
.sgp-i101-pop strong { display: block; font-family: var(--sgp-serif); font-size: 14px; margin-bottom: 6px; }
.sgp-i101-pop p { color: var(--sgp-muted); font-size: 11.5px; line-height: 1.5; margin: 0 0 8px; }

@media (max-width: 1000px) {
	.sgp-i101-cats, .sgp-i101-pops { grid-template-columns: repeat(3, 1fr); }
	.sgp-i101-breakdown-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.sgp-i101-cats, .sgp-i101-pops { grid-template-columns: 1fr 1fr; }
	.sgp-i101-why-list { flex-wrap: wrap; gap: 16px; }
	.sgp-i101-why-list > div { flex: 1 1 40%; }
}

/* ===== Results — "Real Transformations" page ===== */
.sgp-tr-hero { background: linear-gradient(180deg,#fdf3ea,#fbf4ed); padding: 40px 0; }
.sgp-tr-hero-in { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.sgp-tr-hero h1 { font-family: var(--sgp-serif); font-size: 42px; line-height: 1.15; font-weight: 800; margin: 4px 0 16px; }
.sgp-tr-hero h1 .accent { color: var(--sgp-orange); display: block; }
.sgp-tr-hero-copy > p { color: #56504a; font-size: 14px; max-width: 460px; margin: 0; }
.sgp-tr-stats-box { background: var(--sgp-orange-soft); border-radius: 20px; padding: 26px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.sgp-tr-stat { text-align: center; }
.sgp-tr-stat-i { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.sgp-tr-stat span { display: block; font-size: 12px; font-weight: 600; line-height: 1.3; }

.sgp-tr-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 28px; }
.sgp-tr-filter-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--sgp-orange); color: #fff; border: none; border-radius: 100px; padding: 9px 16px; font-size: 13px; font-weight: 600; }
.sgp-tr-filter-btn .sgp-i { width: 15px; height: 15px; }
.sgp-tr-filter-pill { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--sgp-border); border-radius: 100px; padding: 9px 16px; font-size: 13px; font-weight: 600; color: #5f574f; }
.sgp-tr-filter-pill .sgp-i { width: 14px; height: 14px; }
.sgp-tr-filter-sort { margin-left: auto; }

.sgp-tr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sgp-tr-card { background: #fff; border: 1px solid var(--sgp-border); border-radius: 14px; padding: 16px; box-shadow: var(--sgp-shadow); }
.sgp-tr-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.sgp-tr-card-head strong { font-size: 13.5px; }
.sgp-tr-card-head .sgp-tr-weeks { text-align: right; font-size: 11.5px; font-weight: 700; color: var(--sgp-orange-dark); line-height: 1.3; }
.sgp-tr-card-loc { color: var(--sgp-muted); font-size: 11.5px; margin: 0 0 10px; }
.sgp-tr-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.sgp-tr-photo img { width: 100%; aspect-ratio: 1/1.05; object-fit: cover; border-radius: 10px; display: block; margin-bottom: 6px; }
.sgp-tr-photo span { display: block; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--sgp-orange-dark); background: var(--sgp-orange-soft); border-radius: 100px; padding: 3px 0; }
.sgp-tr-quote { font-size: 12px; line-height: 1.5; color: #4a4540; margin: 0 0 10px; }
.sgp-tr-routine { display: flex; align-items: center; gap: 6px; }
.sgp-tr-routine-label { font-size: 10.5px; color: var(--sgp-muted); margin-right: 2px; }
.sgp-tr-routine-thumbs { display: flex; }
.sgp-tr-routine-thumbs img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--sgp-border); margin-left: -8px; }
.sgp-tr-routine-thumbs img:first-child { margin-left: 0; }
.sgp-tr-routine-more { width: 26px; height: 26px; border-radius: 50%; background: var(--sgp-orange-soft); color: var(--sgp-orange-dark); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-left: -8px; border: 2px solid #fff; }

.sgp-tr-testi-band { background: var(--sgp-band); border-radius: 20px; padding: 34px 60px; position: relative; }
.sgp-tr-testi-band h2 { font-family: var(--sgp-serif); font-size: 22px; text-align: center; margin: 0 0 22px; }
.sgp-tr-testi-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 20px) / 3); gap: 20px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.sgp-tr-testi-track::-webkit-scrollbar { display: none; }
.sgp-tr-testi { background: #fff; border-radius: 14px; padding: 22px; text-align: center; }
.sgp-tr-testi .sgp-dk-stars { justify-content: center; }
.sgp-tr-testi p { font-size: 13px; line-height: 1.55; margin: 8px 0 10px; font-style: italic; }
.sgp-tr-testi strong { font-size: 12.5px; color: var(--sgp-muted); font-style: normal; }

.sgp-tr-cta { background: var(--sgp-band); border-radius: 20px; padding: 32px 36px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.sgp-tr-cta-i { width: 56px; height: 56px; border-radius: 50%; background: var(--sgp-orange); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sgp-tr-cta-copy { flex: 1 1 260px; }
.sgp-tr-cta-copy h2 { font-family: var(--sgp-serif); font-size: 24px; margin: 0 0 8px; }
.sgp-tr-cta-copy p { color: #56504a; font-size: 13.5px; margin: 0; }
.sgp-tr-cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sgp-tr-cta img { width: 220px; max-width: 100%; border-radius: 14px; display: block; flex: 1 1 220px; }

@media (max-width: 1000px) {
	.sgp-tr-hero-in { grid-template-columns: 1fr; }
	.sgp-tr-grid { grid-template-columns: repeat(2, 1fr); }
	.sgp-tr-testi-track { grid-auto-columns: 85%; }
}
@media (max-width: 620px) {
	.sgp-tr-grid { grid-template-columns: 1fr; }
	.sgp-tr-stats-box { grid-template-columns: 1fr 1fr; }
	.sgp-tr-cta { flex-direction: column; text-align: center; }
	.sgp-tr-cta-actions { align-items: center; }
}

/* ===== Results HUB page ===== */
.sgp-trh-card p { font-weight: 700; font-size: 13.5px; margin: 0 0 4px; line-height: 1.4; }
.sgp-trh-flow { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; }
.sgp-trh-flow-step { text-align: center; }
.sgp-trh-flow-i { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--sgp-orange); color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.sgp-trh-flow-i .sgp-i { width: 16px; height: 16px; }
.sgp-trh-flow-step span { display: block; font-size: 10px; font-weight: 600; white-space: nowrap; }
.sgp-trh-flow-arrow { color: var(--sgp-orange); flex-shrink: 0; margin-top: 8px; }
.sgp-trh-flow-arrow .sgp-i { width: 12px; height: 12px; }

.sgp-trh-stats { background: var(--sgp-orange-soft); padding: 30px 0; }
.sgp-trh-stats-in { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.sgp-trh-stats-in strong { display: block; font-family: var(--sgp-serif); font-size: 30px; color: var(--sgp-orange-dark); margin-bottom: 6px; }
.sgp-trh-stats-in span { font-size: 12.5px; font-weight: 600; }

.sgp-trh-cards-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.sgp-trh-cards-track::-webkit-scrollbar { display: none; }

.sgp-trh-pct { font-family: var(--sgp-serif); font-size: 26px; color: var(--sgp-ink); margin: 8px 0 4px; display: block; }

.sgp-trh-share { background: var(--sgp-band); border-radius: 20px; padding: 30px 36px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.sgp-trh-share-copy { flex: 1 1 220px; }
.sgp-trh-share-i { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.sgp-trh-share-copy strong { display: block; font-family: var(--sgp-serif); font-size: 16px; margin-bottom: 4px; }
.sgp-trh-share-copy p { color: #56504a; font-size: 13px; margin: 0 0 8px; }
.sgp-trh-share-photos { display: flex; gap: 8px; flex: 1 1 320px; }
.sgp-trh-share-photos img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 12px; display: block; }
.sgp-trh-share-cta { flex: 1 1 220px; }
.sgp-trh-share-cta strong { display: block; font-family: var(--sgp-serif); font-size: 18px; margin-bottom: 6px; }
.sgp-trh-share-cta p { color: #56504a; font-size: 13px; margin: 0 0 12px; }

@media (max-width: 1000px) {
	.sgp-trh-stats-in { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.sgp-trh-cards-track { grid-auto-columns: calc((100% - 20px) / 2); }
}
@media (max-width: 620px) {
	.sgp-trh-stats-in { grid-template-columns: 1fr; }
	.sgp-trh-cards-track { grid-auto-columns: 85%; }
	.sgp-trh-share-photos { flex-wrap: wrap; }
	.sgp-trh-share-photos img { width: calc(50% - 4px); }
}

/* ===== Products area (hub, category, single product) ===== */
.sgp-shop-tabsrow { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 28px; }
.sgp-shop-tabs { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; flex: 1; }
.sgp-shop-tab { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--sgp-muted); font-size: 12px; font-weight: 600; }
.sgp-shop-tab .sgp-i { width: 20px; height: 20px; }
.sgp-shop-tab.is-active { color: var(--sgp-orange); }

.sgp-shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.sgp-shop-card-img { position: relative; margin-bottom: 14px; }
.sgp-shop-badge { position: absolute; top: 10px; left: 10px; background: var(--sgp-orange-soft); color: var(--sgp-orange-dark); font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 100px; z-index: 2; }
.sgp-shop-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 14px; display: block; background: #f6efe6; }
.sgp-shop-card strong { display: block; font-family: var(--sgp-serif); font-size: 15px; margin-bottom: 2px; }
.sgp-shop-card-sub { color: var(--sgp-orange-dark); font-size: 11.5px; font-weight: 600; margin: 0 0 8px; }
.sgp-shop-card-desc { color: var(--sgp-muted); font-size: 12px; line-height: 1.5; margin: 0 0 8px; }
.sgp-shop-benefits { list-style: none; margin: 0 0 10px; padding: 0; }
.sgp-shop-benefits li { display: flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 2px 0; }
.sgp-shop-benefits .sgp-i { width: 13px; height: 13px; color: var(--sgp-orange); flex-shrink: 0; }
.sgp-shop-note { color: var(--sgp-muted); font-size: 11px; margin: 0 0 8px; }
.sgp-shop-price-row { margin-bottom: 12px; }
.sgp-shop-actions { display: flex; gap: 8px; }
.sgp-shop-wish { width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--sgp-border); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--sgp-ink); background: #fff; }
.sgp-shop-wish .sgp-i { width: 18px; height: 18px; }

.sgp-shop-layout { display: grid; grid-template-columns: 230px 1fr; gap: 30px; align-items: start; }
.sgp-shop-filter-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.sgp-shop-filter-head h4 { font-family: var(--sgp-serif); font-size: 16px; margin: 0; }
.sgp-shop-filter-head a { font-size: 12px; color: var(--sgp-muted); }
.sgp-shop-fgroup { border-bottom: 1px solid var(--sgp-border); padding: 16px 0; }
.sgp-shop-fgroup summary { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 13px; cursor: pointer; list-style: none; }
.sgp-shop-fgroup summary::-webkit-details-marker { display: none; }
.sgp-shop-fgroup summary .sgp-i { width: 14px; height: 14px; color: var(--sgp-muted); }
.sgp-shop-fgroup ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sgp-shop-fgroup li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #3d3833; }
.sgp-shop-fgroup input[type=checkbox] { accent-color: var(--sgp-orange); width: 15px; height: 15px; flex-shrink: 0; }
.sgp-shop-fgroup li .sgp-shop-count { color: var(--sgp-muted); font-size: 12px; margin-left: auto; }
.sgp-shop-results-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.sgp-shop-results-head p { margin: 0; font-size: 14px; color: #3d3833; }

.sgp-shop-why { background: var(--sgp-band); border-radius: 20px; padding: 30px 36px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 34px; }
.sgp-shop-why-col h4 { font-family: var(--sgp-serif); font-size: 15px; margin: 0 0 10px; }
.sgp-shop-why-col > p { color: #56504a; font-size: 12.5px; line-height: 1.55; margin: 0; }
.sgp-shop-why-i { color: var(--sgp-orange); display: inline-flex; margin-bottom: 10px; }
.sgp-shop-why-i .sgp-i { width: 26px; height: 26px; }

@media (max-width: 1000px) {
	.sgp-shop-grid { grid-template-columns: repeat(2, 1fr); }
	.sgp-shop-layout { grid-template-columns: 1fr; }
	.sgp-shop-why { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.sgp-shop-grid { grid-template-columns: 1fr; }
	.sgp-shop-tabsrow { flex-direction: column; align-items: flex-start; }
}

/* ===== Single product page ===== */
.sgp-pd-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.sgp-pd-gallery img { width: 100%; border-radius: 16px; display: block; }
.sgp-pd-badge { display: inline-block; background: var(--sgp-orange-soft); color: var(--sgp-orange-dark); font-size: 10.5px; font-weight: 700; letter-spacing: .5px; padding: 5px 12px; border-radius: 100px; margin-bottom: 12px; }
.sgp-pd-info h1 { font-family: var(--sgp-serif); font-size: 34px; margin: 0 0 4px; }
.sgp-pd-sub { color: var(--sgp-muted); font-size: 14px; margin: 0 0 10px; }
.sgp-pd-rating { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #56504a; margin-bottom: 14px; }
.sgp-pd-rating .sgp-dk-stars { margin: 0; }
.sgp-pd-desc { color: #56504a; font-size: 14px; line-height: 1.6; margin: 0 0 20px; }
.sgp-pd-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--sgp-border); }
.sgp-pd-benefits strong { display: block; font-size: 12px; font-weight: 600; line-height: 1.35; }
.sgp-pd-price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.sgp-pd-price-row .sgp-dk-price { font-size: 24px; }
.sgp-pd-pay { font-size: 12.5px; color: var(--sgp-muted); margin: 0 0 20px; display: flex; align-items: center; gap: 8px; }
.sgp-pd-pay-badge { background: #d7f5df; color: #1f7a3d; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.sgp-pd-label { display: block; font-size: 12.5px; font-weight: 700; margin: 0 0 8px; }
.sgp-pd-sizes { display: flex; gap: 10px; margin-bottom: 20px; }
.sgp-pd-sizes .sgp-tab { cursor: default; }
.sgp-shop-qty { display: inline-flex; align-items: center; border: 1px solid var(--sgp-border); border-radius: 10px; overflow: hidden; margin-bottom: 20px; }
.sgp-shop-qty button { width: 38px; height: 38px; background: #fff; border: none; display: inline-flex; align-items: center; justify-content: center; color: var(--sgp-ink); cursor: pointer; }
.sgp-shop-qty button .sgp-i { width: 14px; height: 14px; }
.sgp-shop-qty span { width: 40px; text-align: center; font-weight: 700; font-size: 14px; }
.sgp-pd-actions { display: flex; gap: 12px; }
.sgp-pd-actions .sgp-btn { flex: 1; justify-content: center; }

.sgp-pd-trust { background: var(--sgp-band); display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px; padding: 24px 20px; text-align: center; }
.sgp-pd-trust > div { max-width: 130px; }
.sgp-pd-trust .sgp-sc-trust-i { margin: 0 auto 8px; }
.sgp-pd-trust span { font-size: 12px; font-weight: 600; line-height: 1.3; }

.sgp-pd-tabslayout { display: grid; grid-template-columns: 200px 1fr; gap: 34px; align-items: start; }
.sgp-pd-tabs { display: flex; flex-direction: column; gap: 2px; }
.sgp-pd-tabs a { padding: 10px 0 10px 14px; font-size: 13.5px; font-weight: 600; color: var(--sgp-muted); border-left: 2px solid transparent; }
.sgp-pd-tabs a.is-active { color: var(--sgp-orange); border-left-color: var(--sgp-orange); }
.sgp-pd-content { display: grid; grid-template-columns: 1fr 260px; gap: 24px; align-items: start; }
.sgp-pd-content h3 { font-family: var(--sgp-serif); font-size: 18px; margin: 0 0 16px; }
.sgp-shop-results { background: var(--sgp-band); border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.sgp-shop-results-copy { padding: 22px; }
.sgp-shop-results-copy h4 { font-family: var(--sgp-serif); font-size: 14px; margin: 0 0 16px; }
.sgp-shop-results-stat { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.sgp-shop-results-stat:last-child { margin-bottom: 0; }
.sgp-shop-results-stat strong { font-family: var(--sgp-serif); font-size: 24px; color: var(--sgp-orange-dark); flex-shrink: 0; }
.sgp-shop-results-stat span { font-size: 11.5px; color: #56504a; line-height: 1.35; }
.sgp-shop-results img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sgp-pd-routine { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.sgp-pd-routine-item { text-align: center; border: 2px solid transparent; border-radius: 14px; padding: 12px; }
.sgp-pd-routine-item.is-current { border-color: var(--sgp-orange); }
.sgp-pd-routine-item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 10px; display: block; margin-bottom: 10px; background: #f6efe6; }
.sgp-pd-routine-item strong { display: block; font-size: 12.5px; margin-bottom: 4px; }
.sgp-pd-routine-item .sgp-dk-price { font-size: 13px; display: block; margin-bottom: 8px; }

@media (max-width: 1000px) {
	.sgp-pd-layout { grid-template-columns: 1fr; }
	.sgp-pd-tabslayout { grid-template-columns: 1fr; }
	.sgp-pd-tabs { flex-direction: row; overflow-x: auto; }
	.sgp-pd-content { grid-template-columns: 1fr; }
	.sgp-pd-routine { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
	.sgp-pd-benefits { grid-template-columns: repeat(2, 1fr); }
	.sgp-pd-routine { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Research Centre ===== */
.sgp-rc-mission { background: var(--sgp-band); border-radius: 20px; padding: 32px 36px; display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.sgp-rc-mission-col { flex: 1 1 220px; }
.sgp-rc-mission-col h3 { font-family: var(--sgp-serif); font-size: 18px; margin: 0 0 10px; }
.sgp-rc-mission-col p { color: #56504a; font-size: 13px; line-height: 1.6; margin: 0 0 10px; }
.sgp-rc-stats { display: flex; gap: 24px; flex: 1 1 320px; }
.sgp-rc-stat { text-align: center; flex: 1; }
.sgp-rc-stat-i { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 8px; box-shadow: var(--sgp-shadow); }
.sgp-rc-stat strong { display: block; font-family: var(--sgp-serif); font-size: 24px; }
.sgp-rc-stat span { font-size: 10.5px; color: var(--sgp-muted); line-height: 1.3; }

.sgp-rc-articles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.sgp-rc-article img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; display: block; margin-bottom: 12px; }
.sgp-rc-tag { display: inline-block; background: var(--sgp-orange-soft); color: var(--sgp-orange-dark); font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 100px; margin-bottom: 10px; }
.sgp-rc-article h3 { font-family: var(--sgp-serif); font-size: 14.5px; line-height: 1.32; margin: 0 0 8px; }
.sgp-rc-article > p { color: var(--sgp-muted); font-size: 12px; line-height: 1.5; margin: 0 0 12px; }
.sgp-rc-article-foot { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--sgp-muted); }

/* ===== Research Centre: article page ===== */
.sgp-rc-art-hero-img { width: 100%; aspect-ratio: 16/6; object-fit: cover; border-radius: 16px; display: block; margin: 18px 0 22px; }
.sgp-rc-art-meta { display: flex; gap: 22px; flex-wrap: wrap; font-size: 12.5px; color: var(--sgp-muted); margin-bottom: 4px; }
.sgp-rc-art-meta span { display: inline-flex; align-items: center; gap: 6px; }
.sgp-rc-art-meta .sgp-i { width: 15px; height: 15px; color: var(--sgp-orange); }
.sgp-rc-art-tabs { display: flex; gap: 6px; flex-wrap: wrap; background: var(--sgp-band); border-radius: 12px; padding: 6px; margin: 24px 0 34px; }
.sgp-rc-art-tabs a { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #5f574f; }
.sgp-rc-art-tabs a.is-active { background: #fff; color: var(--sgp-orange); box-shadow: var(--sgp-shadow); }
.sgp-rc-art-tabs .sgp-i { width: 15px; height: 15px; }
.sgp-rc-art-body h2 { font-family: var(--sgp-serif); font-size: 22px; margin: 34px 0 12px; }
.sgp-rc-art-body h2:first-child { margin-top: 0; }
.sgp-rc-art-body > p { color: #3d3833; font-size: 14px; line-height: 1.7; margin: 0 0 14px; }
.sgp-rc-art-findings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; background: var(--sgp-band); border-radius: 14px; padding: 26px; margin: 18px 0; }
.sgp-rc-art-findings div { text-align: center; }
.sgp-rc-art-findings strong { display: block; font-family: var(--sgp-serif); font-size: 30px; color: var(--sgp-orange-dark); margin-bottom: 6px; }
.sgp-rc-art-findings span { font-size: 12px; color: #56504a; }
.sgp-rc-compounds { list-style: none; margin: 0; padding: 0; border: 1px solid var(--sgp-border); border-radius: 14px; overflow: hidden; }
.sgp-rc-compounds li { display: flex; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--sgp-border); }
.sgp-rc-compounds li:last-child { border-bottom: none; }
.sgp-rc-compounds .sgp-i { width: 20px; height: 20px; color: var(--sgp-orange); flex-shrink: 0; margin-top: 2px; }
.sgp-rc-compounds strong { display: block; font-size: 13.5px; margin-bottom: 2px; }
.sgp-rc-compounds p { color: var(--sgp-muted); font-size: 12px; margin: 0; line-height: 1.45; }
.sgp-rc-evidence { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 18px 0; }
.sgp-rc-evidence-card { background: #fff; border: 1px solid var(--sgp-border); border-radius: 12px; padding: 18px; }
.sgp-rc-evidence-card strong { display: block; font-size: 13px; margin-bottom: 8px; }
.sgp-rc-evidence-card p { color: #56504a; font-size: 12px; line-height: 1.5; margin: 0 0 10px; }
.sgp-rc-evidence-card .sgp-rc-source { color: var(--sgp-muted); font-size: 11px; }
.sgp-rc-conclusion-tags { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; }
.sgp-rc-conclusion-tags span { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.sgp-rc-conclusion-tags .sgp-i { width: 17px; height: 17px; color: var(--sgp-orange); }
.sgp-rc-side-card { background: var(--sgp-band); border-radius: 16px; padding: 22px; margin-bottom: 20px; }
.sgp-rc-side-card h4 { font-family: var(--sgp-serif); font-size: 15px; margin: 0 0 16px; }
.sgp-rc-side-row { margin-bottom: 14px; }
.sgp-rc-side-row:last-of-type { margin-bottom: 0; }
.sgp-rc-side-row span { display: block; }
.sgp-rc-side-row .sgp-rc-side-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--sgp-muted); margin-bottom: 3px; }
.sgp-rc-side-row .sgp-rc-side-val { font-size: 13px; font-weight: 600; }
.sgp-rc-related { display: flex; gap: 12px; margin-bottom: 14px; }
.sgp-rc-related img { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.sgp-rc-related strong { display: block; font-size: 12.5px; line-height: 1.3; margin-bottom: 4px; }
.sgp-rc-related span { font-size: 10.5px; color: var(--sgp-muted); }

@media (max-width: 1000px) {
	.sgp-rc-articles { grid-template-columns: repeat(2, 1fr); }
	.sgp-rc-art-findings, .sgp-rc-evidence { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.sgp-rc-articles { grid-template-columns: 1fr; }
	.sgp-rc-mission { flex-direction: column; align-items: stretch; }
}

/* ===== Find Your Skin Solution — new landing (screen 0 preview cards) ===== */
.sgs-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.sgs-preview-card { background: #fff; border: 1px solid var(--sgp-border); border-radius: 16px; padding: 24px; box-shadow: var(--sgp-shadow); }
.sgs-preview-card h3 { font-family: var(--sgp-serif); font-size: 16px; margin: 0 0 2px; }
.sgs-preview-step { font-size: 11.5px; color: var(--sgp-muted); display: flex; justify-content: space-between; margin-bottom: 8px; }
.sgs-preview-bar { background: var(--sgp-band); height: 6px; border-radius: 100px; overflow: hidden; margin-bottom: 20px; }
.sgs-preview-bar span { display: block; height: 100%; background: var(--sgp-orange); }
.sgs-preview-q { font-weight: 700; font-size: 14px; margin: 0 0 4px; }
.sgs-preview-sub { color: var(--sgp-muted); font-size: 12px; margin: 0 0 14px; }
.sgs-preview-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.sgs-preview-tile { border: 1px solid var(--sgp-border); border-radius: 10px; padding: 12px 8px; text-align: center; font-size: 11px; font-weight: 600; position: relative; }
.sgs-preview-tile.is-sel { border-color: var(--sgp-orange); background: #fff7f0; color: var(--sgp-orange-dark); }
.sgs-preview-tile .sgp-i { width: 20px; height: 20px; color: var(--sgp-orange); display: block; margin: 0 auto 6px; }
.sgs-preview-check { position: absolute; top: 6px; right: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--sgp-orange); color: #fff; display: flex; align-items: center; justify-content: center; }
.sgs-preview-check .sgp-i { width: 9px; height: 9px; margin: 0; color: #fff; }
.sgs-preview-nav { display: flex; justify-content: space-between; align-items: center; }
.sgs-preview-back { color: var(--sgp-muted); font-size: 12.5px; font-weight: 600; }
.sgs-preview-score { width: 108px; height: 108px; border-radius: 50%; border: 6px solid var(--sgp-orange-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto 14px; }
.sgs-preview-score strong { font-family: var(--sgp-serif); font-size: 28px; color: var(--sgp-orange-dark); line-height: 1; }
.sgs-preview-score span { font-size: 10px; color: var(--sgp-muted); margin-top: 2px; }
.sgs-preview-score .sgs-preview-great { color: var(--sgp-orange-dark); font-weight: 700; font-size: 11px; }
.sgs-preview-rows { margin: 0 0 16px; }
.sgs-preview-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 8px 0; border-bottom: 1px solid var(--sgp-border); }
.sgs-preview-row span:first-child { color: var(--sgp-muted); }
.sgs-preview-row span:last-child { font-weight: 600; text-align: right; }

@media (max-width: 1000px) {
	.sgs-preview-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Home (client redesign)
   ========================================================================= */
.sgp-hx-hero { background: linear-gradient(180deg,#fdf3ea,#fbf4ed); overflow: hidden; }
.sgp-hx-hero-in { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.sgp-hx-hero-copy { padding: 40px 46px 40px max(24px, calc((100vw - 1200px) / 2 + 24px)); }
.sgp-hx-hero-copy h1 { font-family: var(--sgp-serif); font-size: 50px; line-height: 1.08; font-weight: 800; margin: 14px 0 20px; }
.sgp-hx-hero-copy > p { color: #56504a; font-size: 15px; margin: 0 0 16px; max-width: 480px; }
.sgp-hx-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 22px 0 20px; }
.sgp-hx-hero .sgp-hero-reviews { margin-bottom: 8px; }
.sgp-hx-hero-visual { align-self: stretch; }
.sgp-hx-hero-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* concern grid */
.sgp-hx-concerns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 36px; }
.sgp-hx-concern { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sgp-border); border-radius: 14px; overflow: hidden; box-shadow: var(--sgp-shadow); transition: box-shadow .15s, transform .15s; }
.sgp-hx-concern:hover { box-shadow: 0 14px 30px rgba(32,28,25,.09); transform: translateY(-2px); }
.sgp-hx-concern img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; display: block; }
.sgp-hx-concern-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.sgp-hx-concern-body h3 { font-family: var(--sgp-serif); font-size: 15px; line-height: 1.28; margin: 0; }
.sgp-hx-concern-body p { color: var(--sgp-muted); font-size: 12px; margin: 0; flex-grow: 1; }
.sgp-hx-concern-body .sgp-link { margin-top: 2px; }

/* assessment strip */
.sgp-hx-assess { background: var(--sgp-orange-soft); border-radius: 20px; padding: 28px 30px; display: grid; grid-template-columns: 1.1fr 1.3fr; gap: 30px; align-items: center; }
.sgp-hx-assess-lead { display: grid; grid-template-columns: 128px 1fr; gap: 20px; align-items: center; }
.sgp-hx-assess-img { width: 128px; height: 150px; border-radius: 14px; object-fit: cover; display: block; }
.sgp-hx-assess-lead h3 { font-family: var(--sgp-serif); font-size: 22px; margin: 0 0 8px; }
.sgp-hx-assess-lead p { color: #56504a; font-size: 14px; margin: 0 0 16px; }
.sgp-hx-assess-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; border-left: 1px solid rgba(210,170,130,.4); padding-left: 30px; }
.sgp-hx-assess-i { color: var(--sgp-orange); display: inline-flex; margin-bottom: 8px; }
.sgp-hx-assess-i .sgp-i { width: 30px; height: 30px; }
.sgp-hx-assess-feats strong { display: block; font-size: 13px; margin-bottom: 5px; }
.sgp-hx-assess-feats p { color: var(--sgp-muted); font-size: 11px; margin: 0; }

/* stats bar */
.sgp-hx-stats { display: grid; grid-template-columns: repeat(5, 1fr); }
.sgp-hx-stat { display: flex; align-items: center; gap: 14px; padding: 8px 22px; border-right: 1px solid var(--sgp-border); }
.sgp-hx-stat:last-child { border-right: none; }
.sgp-hx-stat-i { color: var(--sgp-orange); flex-shrink: 0; }
.sgp-hx-stat-i .sgp-i { width: 30px; height: 30px; }
.sgp-hx-stat strong { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; }
.sgp-hx-stat span { font-size: 11px; color: var(--sgp-muted); }

@media (max-width: 1000px) {
	.sgp-hx-hero-in { grid-template-columns: 1fr; }
	.sgp-hx-hero-copy { padding: 34px 24px 24px; }
	.sgp-hx-concerns { grid-template-columns: repeat(3, 1fr); }
	.sgp-hx-assess { grid-template-columns: 1fr; }
	.sgp-hx-assess-feats { border-left: none; padding-left: 0; }
	.sgp-hx-stats { grid-template-columns: repeat(2, 1fr); gap: 10px 0; }
	.sgp-hx-stat:nth-child(2n) { border-right: none; }
}
@media (max-width: 620px) {
	.sgp-hx-hero-copy h1 { font-size: 36px; }
	.sgp-hx-concerns { grid-template-columns: 1fr 1fr; }
	.sgp-hx-assess-lead { grid-template-columns: 1fr; text-align: center; }
	.sgp-hx-assess-img { margin: 0 auto; }
	.sgp-hx-assess-feats { grid-template-columns: 1fr 1fr; }
	.sgp-hx-stats { grid-template-columns: 1fr; }
	.sgp-hx-stat { border-right: none; }
}

/* =========================================================================
   Skin Assessment wizard
   ========================================================================= */
.sga { background: #fbf4ed; min-height: 100vh; }
.sga-header { background: #fff; border-bottom: 1px solid var(--sgp-border); position: sticky; top: 0; z-index: 40; padding: 12px 0; }
.sga-header-in { display: flex; align-items: center; justify-content: space-between; }
.sga-secure { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sgp-muted); }
.sga-secure .sga-i { width: 15px; height: 15px; }
.sga-stage { padding: 40px 0; }
.sga-screen { display: none; }
.sga-screen.is-active { display: block; animation: sgaFade .25s ease; }
@keyframes sgaFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sga-intro { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid var(--sgp-border); border-radius: 22px; overflow: hidden; box-shadow: var(--sgp-shadow); }
.sga-intro-copy { padding: 50px; }
.sga-intro-copy h1 { font-family: var(--sgp-serif); font-size: 40px; line-height: 1.1; font-weight: 800; margin: 10px 0 18px; }
.sga-intro-copy > p { color: #56504a; font-size: 15px; margin: 0 0 14px; }
.sga-time { display: inline-flex; align-items: center; gap: 8px; color: var(--sgp-orange-dark); font-size: 14px; font-weight: 600; margin: 6px 0 22px !important; }
.sga-time .sga-i { width: 16px; height: 16px; }
.sga-note { display: flex; align-items: center; gap: 8px; color: var(--sgp-muted); font-size: 12px; margin: 20px 0 0 !important; }
.sga-note .sga-i { width: 14px; height: 14px; }
.sga-intro-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sga-step { background: #fff; border: 1px solid var(--sgp-border); border-radius: 22px; padding: 40px; box-shadow: var(--sgp-shadow); position: relative; }
.sga-step h2 { font-family: var(--sgp-serif); font-size: 27px; font-weight: 800; text-align: center; margin: 0 0 4px; }
.sga-sub { color: var(--sgp-muted); font-size: 14px; margin: 0 0 24px; }
.sga-step .sga-sub { text-align: center; }
.sga-center { text-align: center; }
.sga-steplabel { position: absolute; top: 40px; right: 40px; color: var(--sgp-orange-dark); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }

.sga-progress { display: flex; align-items: center; justify-content: space-between; max-width: 360px; margin: 0 auto 24px; position: relative; }
.sga-progress::before { content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 2px; background: #ecdcc9; }
.sga-prog-node { width: 14px; height: 14px; border-radius: 50%; background: #ecdcc9; border: 2px solid #fff; position: relative; z-index: 1; }
.sga-prog-node.done { background: var(--sgp-orange); }
.sga-prog-node.current { background: var(--sgp-orange); box-shadow: 0 0 0 4px var(--sgp-orange-soft); }

.sga-checkgrid, .sga-goalgrid { display: grid; gap: 14px; max-width: 840px; margin: 0 auto; }
.sga-checkgrid { grid-template-columns: 1fr 1fr; }
.sga-goalgrid { grid-template-columns: repeat(3, 1fr); }
.sgp .sga-check { display: flex; align-items: flex-start; gap: 12px; text-align: left; background: #fff; color: var(--sgp-ink); border: 1px solid var(--sgp-border); border-radius: 12px; padding: 14px 16px; cursor: pointer; font-family: var(--sgp-sans); transition: border-color .15s, background .15s; }
.sgp .sga-box { width: 20px; height: 20px; border: 2px solid #d9cbb8; border-radius: 6px; flex-shrink: 0; margin-top: 1px; position: relative; background: #fff; }
.sgp .sga-opt.is-sel { border-color: var(--sgp-orange); background: #fff7f0; color: var(--sgp-ink); }
.sgp .sga-opt.is-sel .sga-box { background: var(--sgp-orange); border-color: var(--sgp-orange); }
.sgp .sga-opt.is-sel .sga-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sgp .sga-opt-ico { color: var(--sgp-orange); display: inline-flex; flex-shrink: 0; }
.sgp .sga-opt-ico .sga-i { width: 22px; height: 22px; }
.sgp .sga-opt-text strong { display: block; font-size: 14px; line-height: 1.25; color: var(--sgp-ink); }
.sgp .sga-opt-text span { color: var(--sgp-muted); font-size: 12px; display: block; margin-top: 2px; }

.sga-tilerow { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.sgp .sga-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 120px; padding: 20px 10px; background: #fff; border: 1px solid var(--sgp-border); border-radius: 14px; cursor: pointer; font-size: 13px; font-weight: 500; text-align: center; font-family: var(--sgp-sans); color: var(--sgp-ink); }
.sga-tile-ico { color: var(--sgp-orange); }
.sga-tile-ico .sga-i { width: 26px; height: 26px; }
.sga-tile-tall { width: 170px; min-height: 130px; justify-content: flex-start; }
.sga-pill { background: #fff; border: 1px solid var(--sgp-border); border-radius: 10px; padding: 12px 18px; cursor: pointer; font-size: 13px; font-weight: 500; font-family: var(--sgp-sans); color: var(--sgp-ink); }

.sga-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; gap: 12px; }
.sga-nav .sgp-btn-ghost .sgp-i { transform: rotate(90deg); }

.sga-result-head h2 .sga-i { width: 22px; height: 22px; color: var(--sgp-orange); vertical-align: -2px; }
.sga-tags { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; margin-bottom: 26px; }
.sga-tags span { background: var(--sgp-orange-soft); color: var(--sgp-orange-dark); padding: 6px 14px; border-radius: 100px; font-size: 13px; font-weight: 600; }
.sga-card { background: #fff; border: 1px solid var(--sgp-border); border-radius: 18px; padding: 26px; margin-bottom: 22px; box-shadow: var(--sgp-shadow); }
.sga-card h3 { font-family: var(--sgp-serif); font-size: 20px; margin: 0 0 18px; }
.sga-routine { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.sga-routine-item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sga-routine-step { width: 22px; height: 22px; border-radius: 50%; background: var(--sgp-orange-soft); color: var(--sgp-orange-dark); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.sga-routine-label { font-size: 10px; letter-spacing: 1px; color: var(--sgp-muted); font-weight: 700; }
.sga-routine-img { height: 120px; display: flex; align-items: center; justify-content: center; }
.sga-routine-img img { max-height: 120px; width: auto; }
.sga-routine-item strong { font-size: 13px; margin-top: 4px; }
.sga-routine-item p { font-size: 11px; color: var(--sgp-muted); margin: 0; }
.sga-routine-cta { display: flex; align-items: center; gap: 22px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

.sga-why { display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; align-items: center; }
.sga-why-icons { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0; }
.sga-why-icons > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; flex: 1; min-width: 90px; font-size: 11px; color: #56504a; }
.sga-why-ico { width: 42px; height: 42px; border-radius: 50%; background: var(--sgp-orange-soft); color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; }
.sga-why-ico .sga-i { width: 20px; height: 20px; }
.sga-edu { background: var(--sgp-cream); border-radius: 14px; padding: 20px; margin-top: 12px; }
.sga-edu h4 { font-family: var(--sgp-serif); margin: 0 0 8px; font-size: 16px; }
.sga-edu ul { list-style: none; margin: 0 0 12px; padding: 0; }
.sga-edu li { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; }
.sga-edu li .sga-i { color: var(--sgp-orange); width: 16px; height: 16px; }
.sga-why-img img { width: 100%; border-radius: 16px; display: block; }

.sga-glance { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 26px; align-items: start; }
.sga-glance-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sga-glance h5 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 12px; }
.sga-glance ol { list-style: none; counter-reset: sga; margin: 0; padding: 0; }
.sga-glance ol li { counter-increment: sga; display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 6px 0; }
.sga-glance ol li::before { content: counter(sga); width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--sgp-border); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--sgp-muted); flex-shrink: 0; }
.sga-glance-tips ul { list-style: none; padding: 0; margin: 0; }
.sga-glance-tips li { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 6px 0; }
.sga-glance-tips li .sga-i { color: var(--sgp-orange); width: 16px; height: 16px; }
.sga-glance-img img { width: 100%; border-radius: 14px; display: block; }

.sga-explore-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 30px; }
.sga-explore-grid a { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 7px 0; }
.sga-explore-grid a .sga-i { color: var(--sgp-orange); width: 18px; height: 18px; }

@media (max-width: 1000px) {
	.sga-intro, .sga-why, .sga-glance { grid-template-columns: 1fr; }
	.sga-routine { grid-template-columns: repeat(2, 1fr); }
	.sga-goalgrid { grid-template-columns: 1fr 1fr; }
	.sga-glance-img { display: none; }
}
@media (max-width: 620px) {
	.sga-checkgrid, .sga-goalgrid, .sga-explore-grid, .sga-glance-cols, .sga-routine { grid-template-columns: 1fr; }
	.sga-intro-copy, .sga-step { padding: 26px 20px; }
	.sga-steplabel { position: static; display: block; text-align: right; margin-bottom: 6px; }
}

/* =========================================================================
   Find Your Skin Solution (concern-specific)
   ========================================================================= */
.sgs-narrow { max-width: 560px; }
.sgs-intro { display: block !important; text-align: center; }
.sgs-intro .sga-intro-copy { padding: 44px; }
.sgs-intro .sgp-eyebrow, .sgs-intro h1 { text-align: center; }
.sgs-intro-points { list-style: none; padding: 0; margin: 18px 0 24px; display: inline-flex; flex-direction: column; gap: 8px; text-align: left; }
.sgs-intro-points li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #56504a; }
.sgs-intro-points .sga-i { width: 18px; height: 18px; color: var(--sgp-orange); }

.sgs-list { display: flex; flex-direction: column; gap: 10px; }
.sgs-row { width: 100%; align-items: center; }
.sgs-note { display: flex; align-items: center; gap: 10px; background: var(--sgp-orange-soft); border-radius: 12px; padding: 12px 16px; font-size: 13px; margin-top: 14px; color: #6b5f52; }
.sgs-note .sga-i { width: 18px; height: 18px; color: var(--sgp-orange); flex-shrink: 0; }
.sgs-pick-warn { display: flex; align-items: center; gap: 8px; color: #b5432f; font-size: 13px; font-weight: 600; margin-top: 14px; }
.is-hidden { display: none !important; }

/* results header + profile */
.sgs-solution { display: grid; grid-template-columns: 1.4fr 1fr; gap: 26px; align-items: start; }
.sgs-solution-title { font-family: var(--sgp-serif); color: var(--sgp-orange-dark); font-size: 26px; font-weight: 800; margin: 0 0 8px; }
.sgs-solution-title .sga-i { width: 22px; height: 22px; color: var(--sgp-orange); }
.sgs-priorities { list-style: none; padding: 0; margin: 14px 0 0; }
.sgs-priorities li { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 6px 0; }
.sgs-priorities .sga-i { width: 18px; height: 18px; color: var(--sgp-orange); }
.sgs-profile { background: var(--sgp-cream); border: 1px solid var(--sgp-border); border-radius: 14px; padding: 20px; }
.sgs-profile h4 { font-family: var(--sgp-serif); margin: 0 0 12px; font-size: 15px; color: var(--sgp-orange-dark); text-transform: uppercase; letter-spacing: .5px; }
.sgs-profile table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.sgs-profile th { text-align: left; font-size: 12px; color: var(--sgp-muted); font-weight: 600; padding: 7px 8px 7px 0; vertical-align: top; width: 42%; }
.sgs-profile td { font-size: 13px; padding: 7px 0; font-weight: 600; }

.sgs-section { margin: 34px 0; }
.sgs-section > h3 { font-family: var(--sgp-serif); font-size: 24px; margin: 0 0 4px; }

/* goal products */
.sgs-goalgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.sgs-goalcard { display: flex; flex-direction: column; }
.sgs-goalcard h5 { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-align: center; margin: 0 0 16px; color: var(--sgp-ink); }
.sgs-prodrow { display: flex; gap: 8px; justify-content: center; flex-grow: 1; flex-wrap: wrap; margin-bottom: 16px; }
.sgs-prod { width: 72px; text-align: center; }
.sgs-prod-ph { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 5; background: linear-gradient(135deg,#f4e8d9,#efe0cf); border-radius: 8px; color: #cbb59c; margin-bottom: 6px; }
.sgs-prod-ph.wide { aspect-ratio: 16 / 7; margin: 8px 0 14px; }
.sgs-prod-ph-img { background: none; padding: 0; overflow: hidden; }
.sgs-prod-ph-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.sgs-prod-ph .sga-i { width: 20px; height: 20px; }
.sgs-prod-name { font-size: 10px; display: block; line-height: 1.2; }
.sgs-prod-price { font-size: 11px; font-weight: 700; color: var(--sgp-orange-dark); display: block; margin-top: 2px; }
.sgs-goalcard .sgp-btn { margin: 0 auto; }
.sgs-notsure { text-align: center; }
.sgs-notsure p { font-size: 13px; color: var(--sgp-muted); }
.sgs-trust { display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: center; padding: 16px; }
.sgs-goalgrid .sgs-trust { grid-column: 1 / -1; background: var(--sgp-cream); border-radius: 14px; }
.sgs-trust > div { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.sgs-trust .sga-i { width: 18px; height: 18px; color: var(--sgp-orange); }
.sgs-trust-wide { margin-top: 20px; }

/* routine products */
.sgs-routinegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.sgs-routinecard { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sgs-routinecard h5 { font-size: 13px; font-weight: 700; margin: 0 0 12px; }
.sgs-routinecard p { font-size: 12px; color: var(--sgp-muted); margin: 0 0 12px; flex-grow: 1; }
.sgs-routinecard.is-warn { border-color: #e7b7a0; }
.sgs-warn-i { color: var(--sgp-orange); margin-bottom: 10px; }
.sgs-warn-i .sga-i { width: 34px; height: 34px; }
.sgs-prod-note { font-size: 11px; color: var(--sgp-muted); font-style: italic; margin-bottom: 10px; }
.sgs-routine-cta { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.sgs-routine-cta .sgp-btn { width: 100%; }

/* recommended routine steps (numbered) */
.sgs-routinesteps { max-width: 640px; margin: 26px auto 0; display: flex; flex-direction: column; gap: 14px; }
.sgs-routinestep { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--sgp-border); border-radius: 14px; padding: 16px 18px; }
.sgs-routinestep-num { width: 28px; height: 28px; border-radius: 50%; background: var(--sgp-orange); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sgs-routinestep-body { flex: 1; }
.sgs-routinestep-body strong { display: block; font-size: 13px; letter-spacing: .3px; margin-bottom: 3px; }
.sgs-routinestep-body p { font-size: 13px; color: var(--sgp-muted); margin: 0; }
.sgs-routinestep-img { width: 52px; height: 52px; aspect-ratio: auto; flex-shrink: 0; margin: 0; border-radius: 10px; }

/* recommended for you */
.sgs-recgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.sgs-recgroup { grid-column: 1 / -1; font-family: var(--sgp-serif); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--sgp-orange-dark); margin: 10px 0 -4px; }
.sgs-recgroup:first-child { margin-top: 0; }
.sgs-reccard { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sgs-reccard strong { font-size: 13px; margin-bottom: 2px; }
.sgs-reccard-desc { font-size: 12px; color: var(--sgp-muted); margin: 0 0 10px; }
.sgs-reccard .sgs-prod-price { font-size: 14px; margin-bottom: 14px; }
.sgs-dyk { display: flex; flex-direction: column; justify-content: center; background: var(--sgp-orange-soft); border: none; }
.sgs-dyk-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--sgp-orange-dark); margin-bottom: 8px; }
.sgs-dyk p { font-size: 13px; margin: 0 0 10px; }
.sgs-prod-price-multi { display: flex; flex-direction: column; gap: 1px; }

/* education & tips + do's & don'ts, side by side */
.sgs-triplerow { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: start; margin: 34px 0; }
.sgs-triplerow .sga-card { margin-bottom: 0; height: 100%; }
.sgs-dosdonts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0 20px; }
.sgs-dos h5, .sgs-donts h5 { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; margin: 0 0 10px; }
.sgs-dos h5 { color: #2f8f52; }
.sgs-donts h5 { color: #c0392b; }
.sgs-dos h5 .sgp-i, .sgs-donts h5 .sgp-i { width: 16px; height: 16px; }
.sgs-dos ul, .sgs-donts ul { list-style: none; padding: 0; margin: 0; }
.sgs-dos li, .sgs-donts li { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; padding: 5px 0; color: #45403b; line-height: 1.3; }
.sgs-dos .sgp-i { color: #2f8f52; width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.sgs-donts .sgp-i { color: #c0392b; width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }

/* learn + explore */
.sgs-learnrow { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sgs-learn-list, .sgs-explore-list { margin: 12px 0 18px; }
.sgs-learn-list a, .sgs-explore-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--sgp-border); border-radius: 10px; margin-bottom: 8px; font-size: 13px; color: #45403b; background: #fff; }
.sgs-learn-list a:hover, .sgs-explore-list a:hover { border-color: var(--sgp-orange); color: var(--sgp-orange); }
.sgs-learn-list .sga-i, .sgs-explore-list .sga-i { width: 15px; height: 15px; color: var(--sgp-muted); flex-shrink: 0; }

@media (max-width: 1000px) {
	.sgs-goalgrid, .sgs-routinegrid, .sgs-recgrid { grid-template-columns: repeat(2, 1fr); }
	.sgs-solution, .sgs-learnrow, .sgs-triplerow { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.sgs-goalgrid, .sgs-routinegrid, .sgs-recgrid { grid-template-columns: 1fr; }
	.sgs-routinestep { flex-wrap: wrap; }
	.sgs-dosdonts { grid-template-columns: 1fr; }
}

/* Skin Academy > Guides hub */
.sgp-gd-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 32px; }
.sgp-gd-card { display: flex; flex-direction: column; align-items: flex-start; background: #fff; border: 1px solid var(--sgp-border); border-radius: 16px; padding: 24px 20px; box-shadow: var(--sgp-shadow); transition: box-shadow .15s, transform .15s; }
.sgp-gd-card:hover { box-shadow: 0 14px 32px rgba(32,28,25,.09); transform: translateY(-2px); }
.sgp-gd-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--sgp-orange-soft); color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.sgp-gd-ico .sgp-i { width: 28px; height: 28px; }
.sgp-gd-card h3 { font-family: var(--sgp-serif); font-size: 16px; margin: 0 0 4px; }
.sgp-gd-card .sgp-gd-tag { color: var(--sgp-muted); font-size: 11.5px; font-weight: 600; margin: 0 0 8px; }
.sgp-gd-card p { color: var(--sgp-muted); font-size: 13px; margin: 0 0 16px; flex-grow: 1; }

.sgp-gd-shop { display: flex; align-items: center; gap: 30px; background: var(--sgp-band); border-radius: 20px; padding: 28px; margin-bottom: 44px; }
.sgp-gd-shop img { width: 210px; height: 170px; object-fit: cover; border-radius: 14px; flex-shrink: 0; }
.sgp-gd-shop-copy h3 { display: flex; align-items: center; gap: 8px; color: var(--sgp-orange-dark); font-family: var(--sgp-serif); font-size: 20px; margin: 0 0 10px; }
.sgp-gd-shop-copy p { color: var(--sgp-muted); font-size: 14px; margin: 0 0 16px; }

.sgp-gd-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.sgp-gd-toc li a { justify-content: flex-start; }
.sgp-gd-toc li a span.sgp-gd-num { color: var(--sgp-orange-dark); font-weight: 700; margin-right: 6px; }
.sgp-gd-toc li a .sgp-i { margin-left: auto; }
.sgp-gd-toc li a.is-active { color: var(--sgp-orange-dark); font-weight: 700; }

.sgp-agd-back { display: inline-flex; align-items: center; gap: 6px; color: var(--sgp-orange-dark); font-weight: 600; font-size: 13px; margin-bottom: 14px; }
.sgp-agd-back .sgp-i { width: 15px; height: 15px; transform: rotate(180deg); }
.sgp-agd-block { display: flex; gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--sgp-border); }
.sgp-agd-block:last-of-type { border-bottom: none; }
.sgp-agd-block-i { width: 56px; height: 56px; border-radius: 50%; background: var(--sgp-orange-soft); color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sgp-agd-block-i .sgp-i { width: 26px; height: 26px; }
.sgp-agd-block h2 { font-family: var(--sgp-serif); font-size: 22px; margin: 8px 0 10px; }
.sgp-agd-block p { color: #45403b; font-size: 14.5px; line-height: 1.6; margin: 0; }
.sgp-agd-block ul { list-style: disc; padding-left: 18px; margin: 0; color: #45403b; font-size: 14.5px; line-height: 1.85; }

.sgp-dbp-strip { position: absolute; inset: 0; display: flex; border-radius: 30px 0 0 30px; overflow: hidden; }
.sgp-dbp-panel { position: relative; flex: 1 1 0; height: 100%; overflow: hidden; }
.sgp-dbp-panel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sgp-dbp-badge { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: var(--sgp-orange); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 6px 12px; border-radius: 7px; white-space: nowrap; }
@media (max-width: 860px) {
	.sgp-dbp-strip { border-radius: 0; }
	.sgp-dbp-badge { font-size: 9px; padding: 5px 8px; }
}

/* How to Use hub */
.sgp-htu-hero { text-align: center; padding: 54px 24px 20px; }
.sgp-htu-hero h1 { font-family: var(--sgp-serif); font-size: 40px; font-weight: 800; margin: 8px 0 10px; }
.sgp-htu-hero p { color: var(--sgp-muted); max-width: 560px; margin: 0 auto; }
.sgp-htu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; margin-top: 10px; }
.sgp-htu-col { display: flex; flex-direction: column; gap: 34px; }
.sgp-htu-col:first-child { border-right: 1px solid var(--sgp-border); padding-right: 60px; }
.sgp-htu-cat h3 { font-family: var(--sgp-serif); font-size: 18px; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--sgp-border); }
.sgp-htu-cat ul { list-style: disc; padding-left: 18px; margin: 0; color: #45403b; font-size: 13.5px; line-height: 1.9; }
.sgp-htu-cat ul a { color: #45403b; }
.sgp-htu-cat ul a:hover { color: var(--sgp-orange-dark); }

.sgp-htu-steps { counter-reset: htu-step; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.sgp-htu-steps > li { counter-increment: htu-step; position: relative; padding-left: 46px; font-size: 15px; line-height: 1.7; color: #302b26; min-height: 34px; }
.sgp-htu-steps > li::before { content: counter(htu-step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--sgp-orange-soft); color: var(--sgp-orange-dark); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }

.sgp-htu-tagline { text-align: center; color: var(--sgp-muted); font-size: 14px; font-weight: 600; letter-spacing: .3px; margin: 6px 0 0; }
.sgp-htu-note { display: flex; align-items: center; gap: 14px; background: var(--sgp-band); border: 1px solid var(--sgp-border); border-radius: 14px; padding: 16px 20px; margin: 26px 0; font-size: 13.5px; }
.sgp-htu-note .sgp-i { width: 24px; height: 24px; color: var(--sgp-orange); flex-shrink: 0; }
.sgp-htu-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin: 22px 0 6px; }
.sgp-htu-pill { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #45403b; }
.sgp-htu-pill .sgp-i { width: 15px; height: 15px; color: var(--sgp-orange); }

.sgp-htu-directions { counter-reset: htu-dir; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.sgp-htu-directions > li { counter-increment: htu-dir; position: relative; padding: 0 0 16px 44px; }
.sgp-htu-directions > li:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 32px; bottom: 4px; border-left: 1px dashed var(--sgp-border); }
.sgp-htu-directions > li::before { content: counter(htu-dir); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--sgp-orange); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.sgp-htu-directions strong { display: block; font-size: 14.5px; margin-bottom: 3px; }
.sgp-htu-directions p { margin: 0; color: var(--sgp-muted); font-size: 13.5px; line-height: 1.6; }

.sgp-htu-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 30px 0; align-items: start; }
.sgp-htu-two-col h3 { font-family: var(--sgp-serif); font-size: 17px; margin: 0 0 12px; }
.sgp-htu-tips-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.sgp-htu-tips-cols ul { list-style: disc; padding-left: 16px; margin: 0; font-size: 12.5px; line-height: 1.9; color: #45403b; }

.sgp-htu-routines { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 28px 0; }
.sgp-htu-routine { background: var(--sgp-band); border: 1px solid var(--sgp-border); border-radius: 14px; padding: 18px 20px; }
.sgp-htu-routine h4 { font-family: var(--sgp-serif); font-size: 14px; margin: 0 0 10px; color: var(--sgp-orange-dark); }
.sgp-htu-routine-steps { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.sgp-htu-routine-note { font-size: 12px; color: var(--sgp-muted); margin: 0; padding-top: 8px; border-top: 1px solid var(--sgp-border); }

.sgp-htu-result { display: flex; align-items: center; gap: 16px; background: var(--sgp-orange-soft); border-radius: 16px; padding: 22px 24px; margin-top: 10px; }
.sgp-htu-result .sgp-i { width: 30px; height: 30px; color: var(--sgp-orange); flex-shrink: 0; }
.sgp-htu-result strong { color: var(--sgp-orange-dark); }
.sgp-htu-result p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; }

@media (max-width: 700px) {
	.sgp-htu-two-col { grid-template-columns: 1fr; }
	.sgp-htu-tips-cols { grid-template-columns: 1fr; }
	.sgp-htu-routines { grid-template-columns: 1fr; }
}

.sgp-htu-kits { margin-top: 50px; padding-top: 34px; border-top: 1px solid var(--sgp-border); }
.sgp-htu-kits > h2 { font-family: var(--sgp-serif); font-size: 26px; margin: 0 0 22px; }
.sgp-htu-kits-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.sgp-htu-kits-col { display: flex; flex-direction: column; gap: 26px; }
.sgp-htu-kits-col .sgp-htu-cat h3 { font-size: 14px; border-bottom: none; padding-bottom: 0; color: var(--sgp-orange-dark); }
.sgp-htu-kits-col .sgp-htu-cat ul { font-size: 13px; line-height: 1.8; }

@media (max-width: 860px) {
	.sgp-htu-cols { grid-template-columns: 1fr; }
	.sgp-htu-col:first-child { border-right: none; padding-right: 0; border-bottom: 1px solid var(--sgp-border); padding-bottom: 20px; }
	.sgp-htu-kits-cols { grid-template-columns: 1fr; }
}

.sgp-dbp-badge.is-before { background: #2b2622; }
.sgp-dbp-ba-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; z-index: 2; }
.sgp-dbp-ba-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; gap: 1px; z-index: 3; }
.sgp-dbp-ba-handle .sgp-i { width: 11px; height: 11px; color: var(--sgp-orange-dark); }

.sgp-gd-quiz { text-align: center; }
.sgp-gd-quiz-i { width: 54px; height: 54px; border-radius: 14px; background: var(--sgp-orange-soft); color: var(--sgp-orange); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.sgp-gd-quiz p { color: var(--sgp-muted); font-size: 13px; margin: 0 0 16px; }

@media (max-width: 980px) {
	.sgp-gd-grid { grid-template-columns: repeat(3, 1fr); }
	.sgp-gd-features { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
	.sgp-gd-grid { grid-template-columns: repeat(2, 1fr); }
	.sgp-gd-shop { flex-direction: column; text-align: center; }
	.sgp-gd-shop-copy h3 { justify-content: center; }
	.sgp-gd-features { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.sgp-gd-grid { grid-template-columns: 1fr; }
}