/*
 * WPRise: the site's own CSS (Theme Options CSS, Simple Custom CSS and JS snippets) was written against Elementor's
 * markup. These rules give the same results on the converted Uncoder markup. Widgets keep their Elementor id as
 * .uncoder-e<id>; Elementor's .elementor-widget-container is the Uncoder widget itself.
 */

/* Links are not underlined anywhere (Framey's global rule); widgets and site CSS that underline keep doing so. */
:where(a) {
	text-decoration: none;
}

/* Home hero: the two scrolling columns of template screenshots (snippet 2718) fill 80% of the screen height. */
.box-51wer .uncoder-html {
	position: relative;
	height: 80vh;
}
@media (max-width: 768px) {
	.box-51wer .uncoder-html {
		height: 50vh;
	}
}

/* Product pages: WooCommerce's own layout, as Framey styled it — a 1270px box, the gallery 778px wide and the
   summary 457px beside it, 60px under the header. */
.single-product .site-main {
	padding-top: 56px;
}
.single-product .site-main > .ut-wide {
	max-width: 1270px;
}
@media (min-width: 768px) {
	.woocommerce.single-product #content div.product div.images.woocommerce-product-gallery {
		width: 61.27%;
	}
}
@media (min-width: 1025px) {
	.woocommerce.single-product #content div.product div.summary {
		width: 35.98%;
	}
}
/* Tablets: the summary goes under the gallery, across the whole box. */
@media (min-width: 768px) and (max-width: 1024px) {
	.woocommerce.single-product #content div.product div.summary {
		float: none;
		clear: both;
		width: 100%;
	}
}
@media (max-width: 767px) {
	.woocommerce.single-product #content div.product div.images.woocommerce-product-gallery,
	.woocommerce.single-product #content div.product div.summary {
		float: none;
		width: 100%;
	}
}
.woocommerce.single-product div.product .summary .price,
.woocommerce.single-product div.product .summary .price :is(ins, del) {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.44;
	color: #0f1d3a;
}
.woocommerce.single-product div.product .summary .price del {
	margin-inline-start: 6px;
}
/* Below desktop width the box is UiCore's: 95% of the width inside a 10px padding. */
@media (max-width: 1024px) {
	.single-product .site-main > .ut-wide {
		width: calc((100% - 20px) * .95);
		max-width: none;
		margin-inline: auto;
		padding-inline: 0;
	}
}
@media (max-width: 767px) {
	.woocommerce.single-product div.product .summary .price,
	.woocommerce.single-product div.product .summary .price :is(ins, del) {
		font-size: 20px;
	}
}
/* The summary's text and its Buy Now and Live Demo buttons side by side, as Framey set them. */
.woocommerce.single-product div.product .summary .woocommerce-product-details__short-description {
	line-height: 1.5;
}
.woocommerce.single-product div.product .summary .product_meta {
	line-height: 25.6px;
}
.woocommerce.single-product div.product .summary form.cart {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.woocommerce.single-product div.product .summary form.cart::before,
.woocommerce.single-product div.product .summary form.cart::after,
.woocommerce.single-product div.product .summary form.cart .quantity {
	display: none;
}
@media (max-width: 767px) {
	.woocommerce.single-product div.product .summary .product_meta {
		line-height: 24px;
	}
}

/* The sticky "Buy Now" bar (Framey's, see assets/js/sticky-cart.js): it slides up once the buy buttons are out of view. */
.uicore-sticky-add-to-cart {
	position: fixed !important;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 16px 0;
	background: #fff;
	box-shadow: 0 -2px 55px -29px rgb(0 0 0 / 10%), 0 -1px 3px rgb(0 0 0 / 1%);
	transform: translateY(100%);
	transition: transform .3s;
}
.uicore-sticky-add-to-cart.uicore-show {
	transform: translateY(0);
}
.uicore-sticky-add-to-cart .uicore-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 1270px;
	margin: 0 auto;
	padding: 0 10px;
}
.uicore-sticky-add-to-cart h3 {
	margin: 0;
	font-size: 1.5em;
}
.uicore-sticky-add-to-cart form.cart {
	display: flex;
	align-items: center;
	margin: 0;
}
.uicore-sticky-add-to-cart .cart button.single_add_to_cart_button {
	width: auto;
}
/* Its buttons as on wprise.co: 44px tall, Framey's blue (the site CSS takes their padding to 0 30px; UiCore's button
   style gave them their height). */
.uicore-sticky-add-to-cart .single_add_to_cart_button.button.alt,
body .uicore-sticky-add-to-cart button.mobile-add-to-cart.button.alt {
	min-height: 44px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	color: #fff;
	background: #0061ff;
}
body .uicore-sticky-add-to-cart .mobile-add-to-cart {
	display: none;
}
/* On phones: only the Buy Now button, across the bar. */
@media (max-width: 767px) {
	.uicore-sticky-add-to-cart {
		padding: 10px 0;
	}
	.uicore-sticky-add-to-cart h3,
	.uicore-sticky-add-to-cart form.cart {
		display: none;
	}
	body .uicore-sticky-add-to-cart .mobile-add-to-cart {
		display: block;
		width: 100%;
	}
}

/* The email sign-in form's buttons (Login/Signup Popup plugin): 30px tall as on wprise.co. */
body .xoo-el-form-container button.button.xoo-el-action-btn {
	min-height: 30px;
}

/* Product tabs as Framey showed them: a full-width centred tab bar, the panel text in 14px across the whole box (no
   "Description" heading), a smaller "Related Templates" heading. */
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin: 0 calc(50% - 50vw) 16px;
	padding: 50px 0 0;
}
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs::before,
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li a {
	padding: 7.2px 0;
	font-size: 14.4px;
	font-weight: 600;
	line-height: 25.6px;
	color: #0f1d3a;
}
/* Framey's gallery and summary sat in a block with 48px under it; the tabs keep that distance. */
.woocommerce.single-product div.product .woocommerce-tabs {
	padding-top: 48px;
}
.woocommerce.single-product div.product .woocommerce-tabs .panel {
	margin: 0 0 28px;
	padding: 25px 0;
	font-size: 14px;
	line-height: 25.6px;
}
@media (max-width: 767px) {
	.woocommerce.single-product div.product .woocommerce-tabs .panel {
		line-height: 24px;
	}
	.woocommerce.single-product .related > h2 {
		font-size: 20px;
		line-height: 23.5px;
	}
}
.woocommerce.single-product div.product .woocommerce-tabs .panel > h2:first-child {
	display: none;
}
.woocommerce.single-product div.product .woocommerce-tabs .panel > * {
	max-width: none;
	margin-inline: 0;
}
.woocommerce.single-product div.product .woocommerce-tabs .panel p {
	margin: 0 0 14px;
	font-size: 14px;
}
.woocommerce.single-product .related > h2,
.woocommerce.single-product .upsells > h2 {
	margin: 20px 0;
	font-size: 24px;
	line-height: 1.175;
}
.woocommerce.single-product .product_title {
	letter-spacing: normal;
}

/* Buttons inside posts (the template boxes of [wprise-blog-product-list]): white text, as WordPress sets it — the
   site's link colour would hide it on the blue button. */
.uncoder-post-content .wp-block-button__link {
	padding: 15px 32px;
	font-size: 15px;
	font-weight: 500;
	display: inline-block;
	line-height: 1;
	vertical-align: top;
	color: #fff;
}
/* Their rows: WordPress loads its button block styles only for real blocks, not for HTML a shortcode prints, so the
   alignment classes are repeated here. */
.wp-block-buttons.is-content-justification-center {
	justify-content: center;
}
.wp-block-buttons.is-content-justification-right {
	justify-content: flex-end;
}
@media (max-width: 767px) {
	.uncoder-post-content .wp-block-button__link {
		padding: 13px 35px;
		font-size: 14px;
	}
}

/* Search results (the child theme's search.php, written for Framey's layout classes): a 1290px box 100px under the
   page title, the heading in 29px, four product cards a row. */
.search-results .site-main {
	padding: 0;
}
.search-results .uicore-content-wrapper {
	display: flex;
	flex-direction: column;
	max-width: min(95%, 1290px);
	margin: 0 auto;
	padding: 100px 0;
}
.search-results .woocommerce-products-header__title {
	margin: 12px 0 18px;
	font-size: 29px;
	line-height: 1;
	letter-spacing: -0.027em;
}
.search-results .uicore-content-wrapper ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0 0 16px;
}
.search-results .uicore-content-wrapper ul.products::before,
.search-results .uicore-content-wrapper ul.products::after {
	display: none;
}
.search-results .uicore-content-wrapper ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
}
.search-results .uicore-pagination {
	margin-top: 60px;
	text-align: center;
}
@media (max-width: 1024px) {
	.search-results .uicore-content-wrapper ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.search-results .uicore-content-wrapper ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Product cards everywhere: no WooCommerce gap under the image (Framey removed it; the title box follows directly). */
.woocommerce ul.products li.product a img {
	margin: 0;
}

/* Template category and tag pages: 60px under the header, a 1270px box, the title in 29px, the result count and
   sorting in 13px (the sorting as plain text with an arrow), four product cards a row. */
.tax-product_cat .site-main,
.tax-product_tag .site-main {
	padding: 60px 0;
}
.tax-product_cat .site-main > .ut-wide,
.tax-product_tag .site-main > .ut-wide {
	max-width: 1270px;
}
:is(.tax-product_cat, .tax-product_tag) .woocommerce-breadcrumb {
	margin: 0 0 35px;
	font-size: 13px;
	font-weight: 500;
	color: #767676;
}
:is(.tax-product_cat, .tax-product_tag) .woocommerce-products-header__title {
	margin: 12px 0 18px;
	font-size: 29px;
	line-height: 1;
	letter-spacing: -0.027em;
}
:is(.tax-product_cat, .tax-product_tag) .woocommerce-result-count,
:is(.tax-product_cat, .tax-product_tag) .woocommerce-ordering {
	margin: 0 0 39px;
	font-size: 13px;
}
:is(.tax-product_cat, .tax-product_tag) .woocommerce-ordering select {
	padding: 0 25px 0 0;
	border: 0;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f1d3a' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat right center;
	font-size: 13px;
	font-weight: 500;
	color: #0f1d3a;
	appearance: none;
	box-shadow: none;
}
.woocommerce:is(.tax-product_cat, .tax-product_tag) ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	clear: both;
}
.woocommerce:is(.tax-product_cat, .tax-product_tag) ul.products::before,
.woocommerce:is(.tax-product_cat, .tax-product_tag) ul.products::after {
	display: none;
}
.woocommerce:is(.tax-product_cat, .tax-product_tag) ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
}
@media (max-width: 1024px) {
	.woocommerce:is(.tax-product_cat, .tax-product_tag) ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.woocommerce:is(.tax-product_cat, .tax-product_tag) ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Cart page (Uncoder's Cart widget, as Framey styled WooCommerce's cart): the totals in a white box with a light
   border and 8px corners, the table text in 16px, product names in blue, the update button black. */
body .uncoder-cart.uncoder-woo .cart-collaterals .cart_totals {
	padding: 18px 30px 0;
	border: 1px solid #d2d2d2;
	border-radius: 8px;
	background: #fff;
}
body .uncoder-cart.uncoder-woo .cart-collaterals .cart_totals h2 {
	margin: 16.6px 0;
}
body .uncoder-cart.uncoder-woo .cart-collaterals .cart_totals table th {
	padding: 15px 0;
	font-weight: 700;
	color: #161616;
}
body .uncoder-cart.uncoder-woo .cart-collaterals .cart_totals table td {
	padding: 15px;
	font-weight: 500;
	color: #0f1d3a;
}
body .uncoder-cart.uncoder-woo table.shop_table thead th {
	font-size: 16px;
	font-weight: 500;
	background: #f0f1f7;
}
body .uncoder-cart.uncoder-woo table.shop_table td {
	font-size: 16px;
	font-weight: 500;
	color: #0f1d3a;
}
body .uncoder-cart.uncoder-woo.woocommerce table.cart td.product-name a {
	color: #1e87f0;
}
body .uncoder-cart.uncoder-woo button[name="update_cart"] {
	color: #fff;
	background: #000;
}

/* The Documentation tab's video (child theme): YouTube's picture with its play button until someone plays it, then
   the player, at the size of the embedded player it stands in for (800 × 450; the panel's width and 280px on phones). */
.wr-yt,
.wr-yt__frame {
	display: block;
	width: 800px;
	max-width: 100%;
	height: 450px;
	border: 0;
}
.wr-yt {
	position: relative;
	overflow: hidden;
	background: #000;
}
.wr-yt img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wr-yt__play {
	position: absolute;
	inset: 0;
	width: 68px;
	height: 48px;
	margin: auto;
	border-radius: 14px;
	background: rgb(33 33 33 / 80%);
	transition: background-color .2s;
}
.wr-yt__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent #fff;
	transform: translate(-40%, -50%);
}
.wr-yt:is(:hover, :focus-visible) .wr-yt__play {
	background: #f00;
}
@media (max-width: 767px) {
	.wr-yt,
	.wr-yt__frame {
		height: 280px;
	}
	.wr-yt img {
		object-fit: contain;
	}
}

/* WPForms fields as UiCore drew every field in the page: a grey border, 8px corners and 12px above and below the
   text, a darker border while typing. */
div.wpforms-container-full :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]), select, textarea) {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	border: 1px solid #b9b3b3 !important;
	border-radius: 8px !important;
}
div.wpforms-container-full :is(input, select, textarea):focus {
	border-color: #616367 !important;
}

/* WooCommerce's fields as Framey drew them (cart coupon, checkout, account): a grey border, 8px corners, 15px text;
   the cart's buttons 44px tall (the site CSS takes their padding to 0 30px; UiCore's button style gave the height). */
body .woocommerce :is(input.input-text, textarea.input-text) {
	padding: 12px 15px 12px 20px !important;
	border: 1px solid #b9b3b3 !important;
	border-radius: 8px !important;
	font-size: 15px !important;
	line-height: 19px;
}
body .woocommerce :is(input.input-text, textarea.input-text):focus {
	border-color: #616367 !important;
}
body .woocommerce form.woocommerce-cart-form button.button {
	min-height: 44px;
}

/* The footer's link columns as Framey showed them: the lists keep the browser's list spacing (40px in, 16px under
   their heading) and 25.6px lines; the column headings have a 1.2 line height. */
.uncoder :is(.uncoder-e477a8a6, .uncoder-ec9b9582, .uncoder-e7de19a6) {
	margin-top: 16px;
	padding-left: 40px;
	line-height: 25.6px;
}
.uncoder :is(.uncoder-e3be7530, .uncoder-ef09c7e2, .uncoder-e6823834) {
	line-height: 1.2;
}

/* More templates loading under a store listing (assets/js/more-products.js): a small spinner, as the load-more
   plugin showed. */
.wprise-more {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 64px;
}
.wprise-more.is-loading::after {
	content: "";
	width: 26px;
	height: 26px;
	border: 3px solid #e3e6ec;
	border-top-color: #0061ff;
	border-radius: 50%;
	animation: wprise-spin .8s linear infinite;
}
@keyframes wprise-spin {
	to {
		transform: rotate(360deg);
	}
}

/* The contact and hiring forms (their WPForms forms became Uncoder forms) as WPForms drew them: bold 16px labels,
   46px fields with a grey border and 8px corners, a 100px message box, a 350 × 50 blue button in the middle (the
   whole width on phones). */
body .uncoder .uncoder-form__label {
	margin-bottom: 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 19px;
	color: rgb(0 0 0 / 85%);
}
body .uncoder .uncoder-form__req {
	font-weight: 400;
	color: #d63637;
}
body .uncoder .uncoder-form :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) {
	min-height: 46px;
	padding: 12px 14px !important;
	border: 1px solid #b9b3b3 !important;
	border-radius: 8px !important;
	background: #fff;
	font-size: 16px;
	color: rgb(0 0 0 / 70%);
}
body .uncoder .uncoder-form textarea {
	height: 100px;
	min-height: 100px;
}
body .uncoder .uncoder-form :is(input, select, textarea):focus {
	border-color: #616367 !important;
}
body .uncoder .uncoder-form__group--submit {
	justify-content: center;
	text-align: center;
}
body .uncoder .uncoder-form__submit {
	width: 350px;
	max-width: 100%;
	height: 50px;
	padding: 0 15px;
	border-radius: 8px;
	background: #0061ff;
	font-size: 17px;
	font-weight: 500;
	color: #fff;
}
@media (max-width: 767px) {
	body .uncoder .uncoder-form__submit {
		width: 100%;
	}
}

/* The search page's count heading is its H1 now; it keeps the H2 look it had. */
body .uncoder-e6759601 h1 {
	font-family: var(--uncoder-t-h2-ff);
	font-size: var(--uncoder-t-h2-fs);
	font-weight: var(--uncoder-t-h2-fw);
	line-height: var(--uncoder-t-h2-lh);
	letter-spacing: var(--uncoder-t-h2-ls);
}

/* Text for screen readers only (WooCommerce's "Sorted by latest" after the result count): the Uncoder theme does not
   hide WordPress's class itself. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
	word-wrap: normal !important;
}