/* Slim Skin Professional – component styles (front end and editor) */

:root {
	--ss-radius: 20px;
	--ss-radius-lg: 28px;
	--ss-line: #e3e3e5;
}

/* ---------- Type helpers ---------- */
.ss-eyebrow {
	font-family: var(--wp--preset--font-family--sarabun);
	font-size: 0.875rem !important;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--pink-dark);
	margin-bottom: 0.5rem !important;
}
.ss-eyebrow.is-sage { color: var(--wp--preset--color--sage-dark); }
.ss-eyebrow.is-light { color: #f3a9ba; }
.ss-label {
	font-family: var(--wp--preset--font-family--sarabun);
	font-size: 0.8125rem !important;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--charcoal);
}
.ss-lead { font-size: 1.1875rem; }
.ss-muted { color: var(--wp--preset--color--charcoal); }
.ss-big-number {
	font-family: var(--wp--preset--font-family--sarabun);
	font-size: 3rem !important;
	font-weight: 700;
	line-height: 1 !important;
	color: #f3a9ba;
}
.ss-stat {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.5rem, 5vw, 3.25rem) !important;
	font-weight: 700;
	line-height: 1.1 !important;
	color: var(--wp--preset--color--ink);
	margin-bottom: 0 !important;
}

/* ---------- Cards ---------- */
.ss-card { border-radius: var(--ss-radius); }
.ss-card-lg { border-radius: var(--ss-radius-lg); overflow: hidden; }
.ss-card-border { border: 1px solid var(--ss-line); border-radius: var(--ss-radius); }
.ss-card > :first-child, .ss-card-border > :first-child { margin-top: 0; }
.ss-card h3, .ss-card h4, .ss-card-border h3, .ss-card-border h4 { margin-bottom: 0.25rem; }
.ss-fill { height: 100%; }
.wp-block-columns.ss-equal > .wp-block-column > .ss-card,
.wp-block-columns.ss-equal > .wp-block-column > .ss-card-border { height: 100%; }

/* Images with rounded corners */
.ss-rounded img, img.ss-rounded { border-radius: var(--ss-radius-lg); }
.ss-rounded-sm img { border-radius: var(--ss-radius); }

/* ---------- Chips ---------- */
.ss-chips { gap: 0.625rem !important; }
.ss-chips > p {
	margin: 0 !important;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--sarabun);
	font-size: 0.9375rem;
	font-weight: 600;
	background: var(--wp--preset--color--blush);
	color: #5a2f39;
}
.ss-chips.is-sage > p { background: var(--wp--preset--color--white); color: #2f3d37; }
.ss-chips.is-dark > p { background: transparent; border: 1px solid #8a8a90; color: #fff; font-weight: 500; }

/* ---------- Row lists (audience selector, kit contents) ---------- */
.ss-rows { list-style: none; padding: 0 !important; margin: 0; }
.ss-rows li {
	border-top: 1px solid var(--ss-line);
	font-family: var(--wp--preset--font-family--sarabun);
	font-size: 1.125rem;
	font-weight: 500;
}
.ss-rows li:last-child { border-bottom: 1px solid var(--ss-line); }
.ss-rows li a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.85rem 0;
	min-height: 44px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.ss-rows li a::after { content: "→"; color: var(--wp--preset--color--pink-dark); }
.ss-rows li a:hover { color: var(--wp--preset--color--pink-dark); }
.ss-rows.is-plain li { padding: 0.6rem 0; }

.ss-ticks { list-style: none; padding: 0 !important; }
.ss-ticks li { padding-left: 1.75rem; position: relative; margin-bottom: 0.5rem; }
.ss-ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--wp--preset--color--pink-dark); font-weight: 700; }

/* ---------- Buttons ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1.5px solid currentColor;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { color: var(--wp--preset--color--pink-dark); background: transparent; }
.has-pink-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-ink-background-color .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff; }
.wp-block-button.ss-btn-white > .wp-block-button__link { background: #fff; color: #b81d44; }
.wp-block-button.ss-btn-white > .wp-block-button__link:hover { background: var(--wp--preset--color--blush-light); color: #9e1838; }
.wp-block-button.ss-btn-dark > .wp-block-button__link { background: var(--wp--preset--color--ink); color: #fff; }
.wp-block-button.ss-btn-dark > .wp-block-button__link:hover { background: #000; }
.wp-block-button__link { min-height: 44px; }

/* ---------- Header ---------- */
.ss-topbar { font-family: var(--wp--preset--font-family--sarabun); font-size: 0.875rem; }
.ss-topbar a { font-weight: 600; }
.ss-header { border-bottom: 1px solid #eee6e3; }
.ss-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.ss-brand img { width: 46px; height: auto; }
.ss-brand-name { white-space: nowrap; font-family: var(--wp--preset--font-family--sarabun); font-size: 1.125rem; letter-spacing: 5px; color: var(--wp--preset--color--ink); line-height: 1.1; }
.ss-brand-sub { display: block; font-size: 0.6875rem; letter-spacing: 2.5px; font-weight: 700; color: var(--wp--preset--color--charcoal); }
.ss-header .wp-block-navigation a { color: var(--wp--preset--color--ink); }
.ss-header .wp-block-navigation a:hover,
.ss-header .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--pink-dark); }
.ss-header .wp-block-buttons .wp-block-button__link { padding: 0.65rem 1.25rem; font-size: 0.9375rem; }
.ss-header .ss-portal-link a { color: var(--wp--preset--color--ink); font-weight: 600; text-decoration: none; font-family: var(--wp--preset--font-family--sarabun); }

/* ---------- Footer ---------- */
.ss-footer a { color: #d6d6d9; text-decoration: none; }
.ss-footer a:hover { color: #fff; text-decoration: underline; }
.ss-footer h4 { color: #fff; font-size: 1rem; }
.ss-footer .wp-block-social-links .wp-social-link { background: transparent; border: 1px solid #6c6c70; }

@media (min-width: 782px) { .ss-nav-mobile-only { display: none !important; } }

/* Sticky "Become a Stockist" on phones */
.wp-block-buttons.ss-sticky-cta { display: none; }
@media (max-width: 781px) {
	.wp-block-buttons.ss-sticky-cta {
		display: block;
		position: fixed;
		left: 1rem; right: 1rem; bottom: 1rem;
		z-index: 50;
		margin: 0 !important;
	}
	.ss-sticky-cta .wp-block-button, .ss-sticky-cta .wp-block-button__link { width: 100%; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
	body { padding-bottom: 5rem; }
	.ss-header .ss-header-cta { display: none; }
}

/* ---------- Hero media (desktop + mobile video) ---------- */
.ss-hero-media figure, .ss-hero-media video, .ss-hero-media img { border-radius: var(--ss-radius-lg); }
.ss-hero-media .ss-hero-video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: var(--ss-radius-lg); background: var(--wp--preset--color--blush); }
@media (max-width: 781px) { .ss-hero-media .ss-hero-video { aspect-ratio: 4 / 5; } }
/* Empty video placeholders never show on the live site */
.ss-hero-media figure.wp-block-video:not(:has(video)) { display: none; }

/* ---------- Timeline ---------- */
.ss-timeline { border-left: 2px solid var(--wp--preset--color--blush); padding-left: 2rem !important; }
.ss-timeline .ss-year { font-family: var(--wp--preset--font-family--sarabun); font-weight: 700; color: var(--wp--preset--color--pink-dark); margin-bottom: 0.25rem !important; }

/* ---------- Testimonials ---------- */
.ss-quote { font-size: 1.0625rem; color: var(--wp--preset--color--ink); }
.ss-quote-lead { font-family: var(--wp--preset--font-family--sarabun); font-weight: 700; font-size: 1.25rem; color: var(--wp--preset--color--ink); }
.ss-avatar img { border-radius: 999px; width: 64px; height: 64px; object-fit: cover; }

/* ---------- Before & after ---------- */
.ss-ba .wp-block-image { position: relative; }
.ss-ba figcaption {
	position: absolute; top: 0.75rem; left: 0.75rem; margin: 0 !important;
	background: rgba(47,47,51,.85); color: #fff; padding: 0.25rem 0.75rem; border-radius: 999px;
	font-family: var(--wp--preset--font-family--sarabun); font-size: 0.8125rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.ss-ba img { border-radius: var(--ss-radius); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; background: var(--wp--preset--color--blush-light); }

/* ---------- Schedule ---------- */
.ss-session { border-top: 1px solid var(--ss-line); padding-top: 0.75rem; }
.ss-session .ss-when { font-family: var(--wp--preset--font-family--sarabun); font-weight: 700; margin-bottom: 0 !important; }
.ss-session .ss-when.is-lipo { color: #b81d44; }
.ss-session .ss-when.is-micro { color: #3a7a5f; }
.ss-session .ss-when.is-lipo::before, .ss-session .ss-when.is-micro::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; margin-right: 0.4em; vertical-align: 0.08em; background: currentColor; }
.ss-session p { margin: 0 !important; }

/* ---------- Template note (only visible to editors) ---------- */
.ss-dashed { border: 2px dashed var(--wp--preset--color--sage); border-radius: var(--ss-radius-lg); }

/* ---------- Layout helpers ---------- */
.ss-section > .wp-block-heading:first-child { margin-top: 0; }
.wp-block-columns.ss-gap-lg { gap: clamp(2rem, 5vw, 3.5rem); }
@media (max-width: 781px) {
	.ss-stack-mobile { flex-direction: column; }
}

/* ---------- WooCommerce touches ---------- */
.woocommerce a.button, .woocommerce button.button, .wc-block-components-button:not(.is-link) {
	border-radius: 999px !important;
	font-family: var(--wp--preset--font-family--sarabun);
	font-weight: 700;
}
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li { padding: 0; margin: 0 0 2px; border: 0; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 0.6rem 1rem; border-radius: 12px; color: var(--wp--preset--color--ink); text-decoration: none; font-family: var(--wp--preset--font-family--sarabun); font-weight: 500; }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--wp--preset--color--blush-light); color: #b81d44; font-weight: 700; }

/* Footer lists: no row lines or arrows */
.ss-footer .ss-rows li { border: 0 !important; padding: 0.3rem 0 !important; font-family: var(--wp--preset--font-family--open-sans); font-weight: 400; font-size: 0.9375rem; }
.ss-footer .ss-rows li a { display: inline; padding: 0; min-height: 0; color: #d6d6d9; }
.ss-footer .ss-rows li a::after { content: none; }

/* Keep the header on one line on laptops */
.ss-header .wp-block-navigation { font-size: 0.9375rem; }
.ss-header .wp-block-navigation__container { gap: 1.25rem !important; }
.ss-header .wp-block-navigation-item__content, .ss-header .ss-portal-link, .ss-header .wp-block-button__link { white-space: nowrap; }
@media (min-width: 782px) and (max-width: 1180px) {
	.ss-header .ss-portal-link { display: none; }
	.ss-header .wp-block-navigation__container { gap: 0.9rem !important; }
}

/* Section details */
.ss-on-dark { color: #e4e4e6; }
.ss-on-dark-link a { color: #f3a9ba; font-weight: 600; font-family: var(--wp--preset--font-family--sarabun); }
.ss-sub { font-family: var(--wp--preset--font-family--sarabun); font-weight: 600; color: #b81d44; font-size: 0.9375rem; margin-top: 0 !important; }
.ss-mt-lg { margin-top: var(--wp--preset--spacing--50) !important; }
.ss-spacer { height: var(--wp--preset--spacing--40); }
.ss-reason-num { font-family: var(--wp--preset--font-family--sarabun); font-weight: 700; color: var(--wp--preset--color--pink-dark); margin-bottom: 0 !important; }
.ss-reason h4 { margin-top: 0.25rem; }
.ss-stat-label { font-family: var(--wp--preset--font-family--sarabun); color: #4a3a3e; margin-top: 0.25rem !important; }
.ss-fineprint { font-size: 0.8125rem; font-style: italic; }
.ss-crop-wide img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.ss-card-lg > .wp-block-image { margin: 0; }
.ss-card-lg > .wp-block-image img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; display: block; }
.ss-pairing { margin-top: auto !important; color: #2f3d37; }
.ss-pairing p { margin: 0; }
.ss-card-border.ss-fill { display: flex; flex-direction: column; }
.ss-chips.is-mist > p { background: var(--wp--preset--color--mist); color: #2f3d37; }
.ss-muted, .ss-muted * { color: var(--wp--preset--color--charcoal); font-weight: 400; }
h3 .ss-muted { font-size: 1rem; }
.wp-block-grid, .is-layout-grid { align-items: stretch; }

/* Inner pages */
.ss-step { display: block; font-family: var(--wp--preset--font-family--sarabun); font-size: 0.8125rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--wp--preset--color--pink-dark); margin-bottom: 0.25rem; }
.ss-step.is-big { font-size: 2rem; letter-spacing: 0; line-height: 1; margin-bottom: 0.5rem; }
.has-mist-light-background-color .ss-step, .has-mist-background-color .ss-step { color: var(--wp--preset--color--sage-dark); }
.ss-price { font-family: var(--wp--preset--font-family--display); font-size: 3.5rem !important; font-weight: 700; line-height: 1.1 !important; color: #fff; margin: 0.5rem 0 !important; }
.ss-price.is-dark { color: var(--wp--preset--color--ink); }
.ss-badge { display: inline-block; background: var(--wp--preset--color--blush); color: #5a2f39; border-radius: 999px; padding: 0.35rem 0.9rem; font-family: var(--wp--preset--font-family--sarabun); font-size: 0.875rem !important; font-weight: 700; margin: 0 !important; }
.ss-note { background: var(--wp--preset--color--blush-light); border-radius: var(--ss-radius); padding: 1.1rem 1.4rem; font-size: 0.9375rem; }
.has-mist-light-background-color .ss-note { background: #fff; }
.ss-mt-md { margin-top: var(--wp--preset--spacing--40) !important; }
.ss-kit-list { list-style: none; padding: 0 !important; font-size: 0.9375rem; }
.ss-kit-list li { padding: 0.35rem 0; border-top: 1px solid var(--ss-line); }
.has-ink-background-color .ss-kit-list li { border-color: #4a4a4e; color: #e4e4e6; }
.ss-featured { border: 2px solid var(--wp--preset--color--sage) !important; }
.ss-dark-card { background: #3d3d42; }
.ss-ritual { gap: 0.5rem 2rem !important; flex-wrap: wrap; }
.ss-ritual .ss-ritual-name { flex: 0 0 13rem; margin: 0 !important; font-size: 1.375rem; }
.ss-ritual .ss-ritual-sub { flex: 0 0 13rem; margin: 0 !important; }
.ss-ritual .ss-ritual-text { flex: 1 1 16rem; margin: 0 !important; }
.ss-ritual-list { width: 100%; }
.ss-ritual-list > * { width: 100%; }
.ss-course { font-family: var(--wp--preset--font-family--sarabun); font-weight: 600; color: var(--wp--preset--color--ink); }
.ss-session + .ss-session { margin-top: 0.75rem; }
.ss-steps { padding-left: 1.25rem; }
.ss-steps li { margin-bottom: 0.6rem; }
.ss-steps li::marker { color: var(--wp--preset--color--pink-dark); font-weight: 700; }
.ss-rec li { font-family: var(--wp--preset--font-family--open-sans); font-size: 1rem; font-weight: 400; }
.ss-rec li strong { font-family: var(--wp--preset--font-family--sarabun); color: var(--wp--preset--color--ink); }
.ss-faq .wp-block-details { border-top: 1px solid var(--ss-line); padding: 1rem 0; }
.ss-faq .wp-block-details summary { font-family: var(--wp--preset--font-family--sarabun); font-weight: 700; font-size: 1.125rem; color: var(--wp--preset--color--ink); cursor: pointer; }
.ss-anchor { scroll-margin-top: 1rem; }
.has-ink-background-color .ss-label { color: #b5b5ba; }
.ss-hero-text .wp-block-buttons { margin-top: 1.5rem; }

/* Sections sit flush against each other */
.wp-site-blocks > * + * { margin-block-start: 0; }
.ss-designed > * + * { margin-block-start: 0; }
.ss-designed { margin-block-start: 0; }

/* Light cards inside coloured sections keep dark text */
.has-white-background-color:not(.has-text-color),
.has-blush-light-background-color:not(.has-text-color),
.has-blush-background-color:not(.has-text-color),
.has-mist-background-color:not(.has-text-color),
.has-mist-light-background-color:not(.has-text-color) { color: var(--wp--preset--color--body); }
.ss-card-border { color: var(--wp--preset--color--body); }
.has-ink-background-color .ss-card-border { color: #e4e4e6; }
.wp-block-group.ss-card-lg.has-background:not([style*="padding"]) { padding: 0; }

/* ---------- Video testimonials ---------- */
.ss-vt .ss-vt-video { margin: 0 0 1rem; }
.ss-vt .ss-vt-video video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--ss-radius); background: var(--wp--preset--color--ink); }
.ss-vt figure.ss-vt-video:not(:has(video)) { display: none; }

/* ---------- Testimonial slider (switched on by assets/js/slider.js) ---------- */
.ss-slider { width: 100%; }
.ss-slider-nav { display: none; }
.ss-slider.is-on > .ss-slider-track {
	display: flex !important; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 2px 6px; outline-offset: 4px; align-items: stretch !important; flex-wrap: nowrap !important; justify-content: flex-start !important; width: 100%; max-width: 100%;
}
.ss-slider.is-on > .ss-slider-track::-webkit-scrollbar { display: none; }
.ss-slider.is-on > .ss-slider-track > * { flex: 0 0 calc((100% - 2.5rem) / 3) !important; scroll-snap-align: start; margin: 0 !important; height: auto; min-width: 0; max-width: none; align-self: stretch !important; box-sizing: border-box; }
@media (max-width: 1023px) { .ss-slider.is-on > .ss-slider-track > * { flex-basis: calc((100% - 1.25rem) / 2) !important; } }
@media (max-width: 640px) { .ss-slider.is-on > .ss-slider-track > * { flex-basis: 86% !important; } }
.ss-slider.is-on .ss-slider-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.ss-slider-btn { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--wp--preset--color--ink, #2f2f33); background: #fff; color: var(--wp--preset--color--ink, #2f2f33); font-size: 1.125rem; cursor: pointer; }
.ss-slider-btn:hover, .ss-slider-btn:focus-visible { background: var(--wp--preset--color--pink, #ea2d58); border-color: var(--wp--preset--color--pink, #ea2d58); color: #fff; }
.ss-slider-dots { display: flex; gap: 0.5rem; }
.ss-slider-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: #d9c3bd; cursor: pointer; }
.ss-slider-dot[aria-current="true"] { width: 26px; background: var(--wp--preset--color--pink, #ea2d58); }

/* Testimonial rows: never squeeze columns, even if a fixed column count was set
   in the editor (the slider then takes over when there are more cards). */
.is-layout-grid:has(> .wp-block-group > .ss-quote-lead) { grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)) !important; }
/* A video placed straight into a testimonial row looks like a video card. */
:is(.is-layout-grid, .is-layout-flex):has(> .wp-block-group > .ss-quote-lead) > figure.wp-block-video, .ss-slider-track > figure.wp-block-video { margin: 0; background: #fff; border-radius: var(--ss-radius-lg, 24px); padding: 1.25rem; box-sizing: border-box; }
:is(.is-layout-grid, .is-layout-flex):has(> .wp-block-group > .ss-quote-lead) > figure.wp-block-video video, .ss-slider-track > figure.wp-block-video video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--ss-radius, 16px); background: var(--wp--preset--color--ink, #2f2f33); }

/* Without the slider script: never squeeze testimonial cards side by side on a phone. */
@media (max-width: 640px) {
	.is-layout-flex:has(> .wp-block-group > .ss-quote-lead):not(.ss-slider-track) { flex-direction: column !important; align-items: stretch !important; }
}
/* Columns blocks used for testimonials: the column itself is the slide. */
.ss-slider.is-on > .ss-slider-track > .wp-block-column > .wp-block-group { height: 100%; }

/* Testimonial video: play button over the video (added by slider.js). */
.ss-video-box { position: relative; }
.ss-video-box video { background: var(--wp--preset--color--ink, #2f2f33); }
.ss-play {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 68px; height: 68px; border-radius: 999px; border: 0; cursor: pointer;
	display: flex; align-items: center; justify-content: center; padding: 0 0 0 4px;
	background: var(--wp--preset--color--pink, #ea2d58); color: #fff;
	box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .15s ease;
}
.ss-play:hover, .ss-play:focus-visible { transform: translate(-50%, -50%) scale(1.06); }
.ss-video-box.is-playing .ss-play { display: none; }