/* Cryosthetics Toolkit — design foundation.
   Tokens match the old Woodmart theme options (primary navy, alt blue, Jost + Poppins). */
:root {
	--ct-primary: #233d7b;
	--ct-primary-dark: #1b2f61;
	--ct-alt: #2eade0;
	--ct-sky: #0ea9d0;
	--ct-sky-hover: #22b0d4;
	--ct-dark: #0b3d52;
	--ct-ink: #242424;
	--ct-text: #767676;
	--ct-link: #333;
	--ct-line: rgba(0, 0, 0, .1);
	--ct-line-soft: rgba(129, 129, 129, .2);
	--ct-soft: #f7f7f7;
	--ct-white: #fff;
	--ct-radius: 5px;
	--ct-pill: 40px;
	--ct-container: 1400px;
	--ct-gutter: 15px;
	--ct-font: "Poppins", Arial, Helvetica, sans-serif;
	--ct-font-title: "Jost", Arial, Helvetica, sans-serif;
	--ct-header-h: 96px;
}

html { -webkit-text-size-adjust: 100%; }
body.ct-site {
	margin: 0;
	background: #fff;
	color: var(--ct-text);
	font-family: var(--ct-font);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
body.ct-site *, body.ct-site *::before, body.ct-site *::after { box-sizing: border-box; }
:where(body.ct-site) img { max-width: 100%; height: auto; }
/* Zero-specificity defaults (:where) so any widget or plugin rule wins without a fight. */
:where(body.ct-site) a { color: var(--ct-link); text-decoration: none; transition: color .2s; }
:where(body.ct-site) a:hover { color: var(--ct-ink); }
:where(body.ct-site) :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--ct-font-title);
	font-weight: 600;
	color: var(--ct-ink);
	line-height: 1.25;
	margin: 0 0 .6em;
	overflow-wrap: break-word; /* a long word must wrap, never run off a phone screen */
}
:where(body.ct-site) p { margin: 0 0 1em; }
/* The old theme clipped sideways overflow (carousels that run past the edge). */
html, body.ct-site { overflow-x: clip; }

/* Hello Elementor ships a pink hover/focus for every button and field — neutralise it. */
/* A plain button (no class of its own): the soft grey pill-less button the old theme gave every form.
   :where() keeps it at zero specificity, so any plugin or widget rule restyles it freely. */
:where(body.ct-site) :is(button, [type="button"], [type="submit"], [type="reset"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 5px 20px;
	border: 0;
	border-radius: var(--ct-radius);
	background-color: #f3f3f3;
	color: #333;
	font-family: var(--ct-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
:where(body.ct-site) :is(button, [type="button"], [type="submit"], [type="reset"]):hover { background-color: #e6e6e6; }
:where(body.ct-site) :is(button, [type="button"], [type="submit"]):disabled { opacity: .6; cursor: default; }
/* Hello's page wrappers are gone with its stylesheet; keep a sane main area. */
.site-main { display: block; }
:where(body.ct-site) :is(ul, ol) { padding-inline-start: 1.4em; }
:where(body.ct-site) table { border-collapse: collapse; }
:where(body.ct-site) img { border-style: none; }
body.ct-site input[type="text"], body.ct-site input[type="email"], body.ct-site input[type="tel"],
body.ct-site input[type="password"], body.ct-site input[type="number"], body.ct-site input[type="search"],
body.ct-site input[type="url"], body.ct-site select, body.ct-site textarea {
	font-family: var(--ct-font);
	font-size: 14px;
	color: var(--ct-text);
	background: transparent;
	border: 2px solid var(--ct-line);
	border-radius: 0;
	padding: 0 15px;
	min-height: 42px;
	width: 100%;
	transition: border-color .2s;
}
body.ct-site textarea { padding: 12px 15px; min-height: 120px; }
body.ct-site input:focus, body.ct-site select:focus, body.ct-site textarea:focus { outline: 0; border-color: rgba(0, 0, 0, .25); }
body.ct-site ::placeholder { color: #a3a3a3; opacity: 1; }

/* Hello's page chrome */
body.ct-site .page-header { display: none; }
body.ct-site .site-main { max-width: none; padding: 0; margin: 0; }
body.ct-site .site-main > .page-content { margin: 0; }

/* A container given a fixed pixel width on desktop (e.g. 1140px) keeps it on tablets and phones and used to
   push the page sideways. It may never be wider than the space it sits in. */
.elementor .e-con { max-width: 100%; }

.ct-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ct-container { width: 100%; max-width: calc(var(--ct-container) + 2 * var(--ct-gutter)); margin: 0 auto; padding: 0 var(--ct-gutter); }

/* Shared button — used by the Button widget, mega menu, header, forms */
.ct-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 20px;
	min-height: 42px;
	border: 2px solid transparent;
	border-radius: var(--ct-radius);
	font-family: var(--ct-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.ct-btn:hover { transform: translateY(-1px); }
.ct-btn--primary { background: var(--ct-primary); color: #fff; }
.ct-btn--primary:hover { background: var(--ct-primary-dark); color: #fff; }
.ct-btn--alt { background: var(--ct-alt); color: #fff; }
.ct-btn--alt:hover { background: var(--ct-sky-hover); color: #fff; }
.ct-btn--white { background: #fff; color: var(--ct-ink); }
.ct-btn--white:hover { background: #f1f1f1; color: var(--ct-ink); }
.ct-btn--black { background: #222; color: #fff; }
.ct-btn--black:hover { background: #000; color: #fff; }
.ct-btn--default { background: var(--ct-soft); color: #333; }
.ct-btn--default:hover { background: #ebebeb; color: #333; }
.ct-btn--bordered { background: transparent; border-color: currentColor; color: var(--ct-primary); }
.ct-btn--link { background: none; border: 0; min-height: 0; padding: 0; color: var(--ct-ink); text-decoration: underline; text-underline-offset: 3px; }
.ct-btn--link:hover { transform: none; }
.ct-btn--small { min-height: 34px; padding: 0 14px; font-size: 12px; }
.ct-btn--large { min-height: 52px; padding: 0 28px; font-size: 14px; }
.ct-btn--round { border-radius: 40px; }
.ct-btn--square { border-radius: 0; }
.ct-btn--full { display: flex; width: 100%; }
.ct-btn img { width: 13px; height: 13px; object-fit: contain; }

@media (max-width: 1024px) { :root { --ct-header-h: 60px; } }

/* ---------- reviews section above the footer (Sky360 reviews slider), in the brand's look ---------- */
.cryo-site-prefooter { padding-bottom: clamp(56px, 7vw, 100px); }
.sky360-reviews-slider .swiper-slide { height: auto; }
.sky-review-item { height: 100%; border: 1px solid var(--ct-line); border-top: 3px solid var(--ct-primary); background: #fff; transition: box-shadow .3s, transform .3s; }
.sky-review-item:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -26px rgba(35, 61, 123, .45); }
.sky-review-author-name { font-family: var(--ct-font-title); font-weight: 600; color: var(--ct-ink); }
.sky-review-time { color: #7a8794; }
.sky-review-text { color: #3b4a58; }
.sky-read-more-toggle { color: var(--ct-primary); font-weight: 600; letter-spacing: .08em; text-decoration: underline; text-underline-offset: 4px; }
.sky-review-like-button { border-color: var(--ct-line); border-radius: 0; background: #fff; }
.sky-review-us-button { background: var(--ct-primary); border-radius: 0; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; transition: background-color .2s; }
.sky-review-us-button:hover { background: var(--ct-dark); }
.sky-navigation-arrows > * { border-radius: 0; border-color: var(--ct-line); color: var(--ct-primary); transition: background-color .2s, color .2s, border-color .2s; }
.sky-navigation-arrows > *:hover { border-color: var(--ct-primary); background: var(--ct-primary); color: #fff; }
body .sky-review-item { border: 1px solid var(--ct-line) !important; border-top: 3px solid var(--ct-primary) !important; border-radius: 0 !important; }
body .sky-review-like-button, body .sky-review-us-button, body .sky-navigation-arrows * { border-radius: 0 !important; }
body .sky-navigation-arrows > * { border: 1px solid var(--ct-line) !important; background: #fff; color: var(--ct-primary); }
body .sky-navigation-arrows > *:hover { border-color: var(--ct-primary) !important; background: var(--ct-primary); color: #fff; }

/* "View all" and the carousel arrows sit under the cards, not beside the heading / on the card edges
   (a Sky Training Bookings title with a button, followed by its service-cards carousel) */
.e-con-inner:has(> .elementor-widget-stb_sky_title .stb-st-wrap--has-btn):has(> .elementor-widget-stb_service_cards) { position: relative; }
.e-con-inner:has(> .elementor-widget-stb_sky_title .stb-st-wrap--has-btn):has(> .elementor-widget-stb_service_cards) .stb-st-btn-wrap { position: absolute; right: 0; bottom: 15px; z-index: 5; margin: 0; }
.elementor-widget-stb_service_cards .stb-sc-carousel-wrap { position: relative; padding-bottom: 84px; }
.e-con-inner:has(> .elementor-widget-stb_sky_title .stb-st-wrap--has-btn) .elementor-widget-stb_service_cards .stb-sc-swiper-nav { top: auto; bottom: 8px; width: 48px; height: 48px; margin: 0; border: 1px solid var(--ct-line); border-radius: 0; background: #fff; }
.e-con-inner:has(> .elementor-widget-stb_sky_title .stb-st-wrap--has-btn) .elementor-widget-stb_service_cards .swiper-button-prev { left: 0; right: auto; }
.e-con-inner:has(> .elementor-widget-stb_sky_title .stb-st-wrap--has-btn) .elementor-widget-stb_service_cards .swiper-button-next { left: 48px; right: auto; }
.e-con-inner:has(> .elementor-widget-stb_sky_title .stb-st-wrap--has-btn) .elementor-widget-stb_service_cards .stb-sc-swiper-nav:hover { border-color: var(--ct-primary); }
.e-con-inner:has(> .elementor-widget-stb_sky_title .stb-st-wrap--has-btn) .elementor-widget-stb_service_cards .stb-sc-swiper-pagination { bottom: 6px !important; }
@media (max-width: 767px) {
	.e-con-inner:has(> .elementor-widget-stb_sky_title .stb-st-wrap--has-btn):has(> .elementor-widget-stb_service_cards) .stb-st-btn-wrap { right: 0; bottom: 19px; }
	.e-con-inner:has(> .elementor-widget-stb_sky_title .stb-st-wrap--has-btn) .elementor-widget-stb_service_cards .stb-sc-swiper-nav { width: 40px; height: 40px; }
	.e-con-inner:has(> .elementor-widget-stb_sky_title .stb-st-wrap--has-btn) .elementor-widget-stb_service_cards .swiper-button-next { left: 48px; }
}
.elementor-widget-stb_sky_title:has(.stb-st-wrap--has-btn):has(+ .elementor-widget-stb_service_cards) { position: static; }
.elementor-widget-stb_service_cards .stb-sc-swiper { position: static; }
.elementor-widget-stb_service_cards .stb-sc-swiper > .stb-sc-swiper-nav { top: auto !important; bottom: 8px !important; }
.elementor-widget-stb_service_cards .stb-sc-swiper-nav::after { font-size: 18px; }
.elementor-widget-stb_service_cards .stb-sc-swiper > .stb-sc-swiper-nav { transform: none !important; margin: 0 !important; }

/* ---------- news cards (Sky360 blog carousel): same size, brand look ---------- */
.sky-blog-carousel .swiper-wrapper { align-items: stretch; }
.sky-blog-carousel .swiper-slide { height: auto; }
.sky-blog-carousel .swiper-slide > div { height: 100%; }
.sky-blog-carousel .sky-blog-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--ct-line) !important; border-top: 3px solid var(--ct-primary) !important; border-radius: 0 !important; background: #fff; overflow: hidden; transition: box-shadow .3s, transform .3s; }
.sky-blog-carousel .sky-blog-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -26px rgba(35, 61, 123, .45); }
.sky-blog-carousel .sky-blog-image { flex: none; aspect-ratio: 16 / 10; height: auto; overflow: hidden; background: var(--ct-soft); }
.sky-blog-carousel .sky-blog-image a { display: block; height: 100%; }
.sky-blog-carousel .sky-blog-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.sky-blog-carousel .sky-blog-card:hover .sky-blog-image img { transform: scale(1.04); }
.sky-blog-carousel .sky-blog-content { display: flex; flex: 1 1 auto; flex-direction: column; padding: 22px 24px 26px; }
.sky-blog-carousel .sky-blog-meta { margin-bottom: 12px; font-size: 12.5px; color: #7a8794; }
.sky-blog-carousel .sky-blog-title { margin: 0 0 18px; font-family: var(--ct-font-title); font-size: 18px; font-weight: 600; line-height: 1.4; min-height: 2.8em; }
.sky-blog-carousel .sky-blog-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ct-ink); }
.sky-blog-carousel .sky-blog-btn { align-self: flex-start; margin-top: auto; border-radius: 0 !important; }

/* ---------- carousel arrows: our own chevron icon in the brand navy, square buttons ---------- */
:is(.stb-sc-swiper-nav, .sky-navigation-arrows .swiper-button-prev, .sky-navigation-arrows .swiper-button-next) { display: grid !important; place-items: center; width: 40px !important; height: 40px !important; border: 1px solid var(--ct-line) !important; border-radius: 0 !important; background: #fff !important; color: var(--ct-primary) !important; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
:is(.stb-sc-swiper-nav, .sky-navigation-arrows .swiper-button-prev, .sky-navigation-arrows .swiper-button-next)::after { content: "" !important; display: block !important; width: 20px; height: 20px; background: currentColor; font-family: inherit !important; -webkit-mask: var(--ct-chev) center / contain no-repeat; mask: var(--ct-chev) center / contain no-repeat; }
:is(.stb-sc-swiper-nav, .sky-navigation-arrows .swiper-button-prev, .sky-navigation-arrows .swiper-button-next):is(.swiper-button-prev, .sky-prev) { --ct-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5 7.5 12l7 7'/%3E%3C/svg%3E"); }
:is(.stb-sc-swiper-nav, .sky-navigation-arrows .swiper-button-prev, .sky-navigation-arrows .swiper-button-next):is(.swiper-button-next, .sky-next) { --ct-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 5 7 7-7 7'/%3E%3C/svg%3E"); }
:is(.stb-sc-swiper-nav, .sky-navigation-arrows .swiper-button-prev, .sky-navigation-arrows .swiper-button-next):hover { border-color: var(--ct-primary) !important; background: var(--ct-primary) !important; color: #fff !important; }
:is(.stb-sc-swiper-nav, .sky-navigation-arrows .swiper-button-prev, .sky-navigation-arrows .swiper-button-next).swiper-button-disabled { opacity: .4; }
:is(.stb-sc-swiper-nav, .sky-navigation-arrows .swiper-button-prev, .sky-navigation-arrows .swiper-button-next) svg { display: none; }

/* carousel dots in the theme colours; hidden on phones (swipe + the arrows are enough) */
.elementor-widget-stb_service_cards .swiper-pagination-bullet { background: #c9d3e6; opacity: 1; }
.elementor-widget-stb_service_cards .swiper-pagination-bullet-active { background: var(--ct-primary); }
@media (max-width: 767px) {
	.elementor-widget-stb_service_cards .stb-sc-swiper-pagination, .sky-blog-carousel .swiper-pagination, .sky360-reviews-slider .swiper-pagination { display: none !important; }
}

/* About us hero: the video column runs to the right edge of the screen, not stopping inside the 1400px container */
@media (min-width: 1025px) {
	.elementor-element-c422b17.e-con { width: calc(910px + max(0px, (100vw - 1400px) / 2) + 12px) !important; max-width: none !important; margin-right: calc(-1 * (max(0px, (100vw - 1400px) / 2) + 12px)); }
}

/* PURAXEL: the dark section sits straight under the video hero (a 50px margin left a white strip between them) */
body.page-id-44217 .elementor-element-af838a2.e-con { margin-top: 0 !important; }

/* the dots bar spans the full width and sat on top of the arrows: let clicks pass through it */
.elementor-widget-stb_service_cards .stb-sc-swiper-pagination { pointer-events: none; }
.elementor-widget-stb_service_cards .stb-sc-swiper-pagination .swiper-pagination-bullet { pointer-events: auto; }
.elementor-widget-stb_service_cards .stb-sc-swiper-nav { z-index: 20 !important; }

/* reviews arrows: the plugin draws its own rotated border chevron on ::after, reset it so only the mask icon shows */
.sky-navigation-arrows :is(.swiper-button-prev, .swiper-button-next)::after { position: static !important; inset: auto !important; transform: none !important; border: 0 !important; margin: 0 !important; width: 20px !important; height: 20px !important; }
.sky-navigation-arrows :is(.swiper-button-prev, .swiper-button-next)::before { content: none !important; display: none !important; }

html body .sky-navigation-arrows :is(.swiper-button-prev, .swiper-button-next)::after { position: static !important; inset: auto !important; transform: none !important; border: 0 !important; margin: 0 !important; width: 20px !important; height: 20px !important; }
html body .sky-navigation-arrows :is(.swiper-button-prev, .swiper-button-next) { width: 40px !important; height: 40px !important; margin: 0 !important; position: relative !important; inset: auto !important; }
html body .sky-navigation-arrows :is(.swiper-button-prev, .swiper-button-next) { box-sizing: border-box !important; }

/* private product enquiry page (page meta _cryo_private_form): one centred form card */
body.ct-private-form .site-main .page-content > .gform_wrapper { width: min(760px, calc(100% - 2 * var(--ct-gutter, 15px))); margin: 48px auto 80px; padding: clamp(22px, 4vw, 44px); background: #fff; border: 1px solid var(--ct-line, #e3e8ee); border-top: 3px solid var(--ct-primary); }
body.ct-private-form .gform_wrapper .gform_fields { row-gap: 22px; }
body.ct-private-form .gform_wrapper .gfield > :is(.gfield_label, legend.gfield_label) { font-weight: 600; color: var(--ct-dark); }
body.ct-private-form .gform_wrapper .gform_footer { margin-top: 26px; }
html body.ct-private-form .gform_wrapper .gform_footer :is(.gform_button, button, input[type="submit"]) { width: 100%; min-height: 50px; border: 0; border-radius: 0 !important; background: var(--ct-primary) !important; color: #fff !important; font: 600 13px/1 var(--ct-font); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
html body.ct-private-form .gform_wrapper .gform_footer :is(.gform_button, button, input[type="submit"]):hover { background: var(--ct-dark) !important; }
/* private form: title banner runs edge to edge, text stays on the container line */
body.ct-private-form .ct-pagehero { width: 100%; margin: 0 0 30px; }
body.ct-private-form .ct-pagehero .ct-shophero { border-radius: 0; }
body.ct-private-form .ct-pagehero .ct-shophero__in { max-width: none; padding-left: max(var(--ct-gutter, 15px), calc((100% - var(--ct-container, 1400px)) / 2 + var(--ct-gutter, 15px))); padding-right: max(var(--ct-gutter, 15px), calc((100% - var(--ct-container, 1400px)) / 2 + var(--ct-gutter, 15px))); }
body.ct-private-form .ct-pagehero .ct-shophero__p { max-width: 560px; }

/* every title banner (shop, news, page heroes, my account) runs edge to edge */
body.ct-site { overflow-x: clip; }
body.ct-site :is(.ct-shophero, .ct-acchero) { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; border-radius: 0; }
body.ct-site .ct-pagehero { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
body.ct-site .ct-pagehero .ct-shophero { width: 100%; max-width: 100%; margin-left: 0; }
body.ct-site :is(.ct-shophero__in, .ct-acchero__in) { max-width: none; padding-left: max(var(--ct-gutter, 15px), calc((100vw - var(--ct-container, 1400px)) / 2 + var(--ct-gutter, 15px))); padding-right: max(var(--ct-gutter, 15px), calc((100vw - var(--ct-container, 1400px)) / 2 + var(--ct-gutter, 15px))); }
body.ct-site .ct-pagehero .ct-shophero__in { padding-left: max(var(--ct-gutter, 15px), calc((100% - var(--ct-container, 1400px)) / 2 + var(--ct-gutter, 15px))); padding-right: max(var(--ct-gutter, 15px), calc((100% - var(--ct-container, 1400px)) / 2 + var(--ct-gutter, 15px))); }
body.ct-site :is(.ct-shophero__p, .ct-shophero__t) { max-width: 760px; }
/* no white gap between the header and the title banner */
html body.ct-site.woocommerce-account:not(.cy-login-page) .site-main { padding-top: 0; }
html body.ct-site .ct-pagehero { margin-top: 0; }
html body.ct-site .ct-blog__wrap { padding-top: 0; }
html body.ct-site .site-main > .ct-shophero:first-child, html body.ct-site .ct-shopwrap > .ct-shophero:first-child { margin-top: 0; }
body.ct-site .ct-acchero__avatar { margin-right: max(var(--ct-gutter, 15px), calc((100vw - var(--ct-container, 1400px)) / 2 + var(--ct-gutter, 15px))); }

/* Gravity Forms: the select caret tiled into a zigzag on focus; one caret, no repeat. Required marker = red star. */
html body .gform_wrapper select { background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23233d7b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 12px 8px !important; padding-right: 44px !important; }
html body .gform_wrapper .gfield_required { font-size: 0 !important; margin-left: 3px; }
html body .gform_wrapper .gfield_required .gfield_required_text { font-size: 0 !important; }
html body .gform_wrapper .gfield_required_text::after { content: "*"; font-size: 17px; font-weight: 600; line-height: 1; color: #c0392b; vertical-align: -2px; }
