/*
Theme Name: Cutiere Child
Theme URI: https://cutierestuudio.ee
Description: Cutiere stuudio custom design changes. Sits on top of the Astra theme so Astra updates never erase them.
Author: Cutiere stuudio
Template: astra
Version: 1.0.0
Text Domain: cutiere-child
*/

/* Custom design changes for cutierestuudio.ee go below this line. */

/* ==========================================================================
   Cutiere pages built without Elementor
   Every rule is scoped to a .cut-* class, so nothing here affects pages
   that are still built with Elementor.
   ========================================================================== */

/* --- Page title -------------------------------------------------------- */
.entry-content .cut-page-title {
	margin: 0;
	padding: 90px 20px 0;
	text-align: center;
}

/* --- Price list --------------------------------------------------------- */
.entry-content .cut-price-row {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	width: 70%;
	max-width: none;
	margin: 0 auto;
	padding: 10px;
}

.entry-content .cut-price-row > .cut-price-main,
.entry-content .cut-price-row > .cut-price-side {
	box-sizing: border-box;
	margin: 0;
	padding: 10px 10px 10.6px;
}

.entry-content .cut-price-row > .cut-price-main {
	width: 70%;
}

.entry-content .cut-price-row > .cut-price-side {
	width: 30%;
	text-align: right;
}

.entry-content .cut-price-row h2,
.entry-content .cut-price-row .cut-price {
	margin: 0 0 5px;
}

/* The price uses the same handwritten look as the service name. */
.entry-content .cut-price-row .cut-price {
	font-family: "Vujahday Script", handwriting;
	font-size: 34px;
	line-height: 1.3;
	color: #3f3027;
}

.entry-content .cut-price-row p {
	margin: 0;
}

.entry-content .cut-price-row p + p {
	margin-top: 11px;
}

.entry-content .cut-price-row .cut-price + p {
	margin-top: 0;
}

/* Footnote under a price list. */
.entry-content .cut-price-row.cut-price-note {
	padding-top: 24px;
}

/* Breathing room between the last row and the footer. */
.entry-content > .cut-price-row:last-child {
	padding-bottom: 82px;
}

.entry-content .cut-price-row.cut-price-note > .cut-price-main {
	padding-left: 20px;
}

/* Font sizes follow Astra's own breakpoints (921px and 544px) so prices and
   section titles always match the headings next to them. */
/* A second title further down the page ("Lõikused ja soengud"). */
.entry-content h2.cut-page-title {
	padding-top: 56px;
	padding-bottom: 10px;
	font-size: 64px;
	line-height: 1.4;
}

@media (max-width: 921px) {
	.entry-content .cut-price-row .cut-price {
		font-size: 32px;
	}

	.entry-content h2.cut-page-title {
		font-size: 44px;
	}
}

@media (max-width: 544px) {
	.entry-content .cut-price-row .cut-price {
		font-size: 24px;
	}

	.entry-content h2.cut-page-title {
		font-size: 30px;
	}
}

@media (max-width: 1024px) {
	.entry-content .cut-price-row > .cut-price-main,
	.entry-content .cut-price-row > .cut-price-side {
		padding-bottom: 8.6px;
	}
}

@media (max-width: 767px) {
	.entry-content .cut-page-title {
		padding-top: 85px;
	}

	.entry-content h2.cut-page-title {
		padding-top: 56px;
	}

	.entry-content > .cut-price-row:last-child {
		padding-bottom: 41px;
	}

	.entry-content .cut-price-row {
		width: 100%;
	}

	.entry-content .cut-price-row > .cut-price-main,
	.entry-content .cut-price-row > .cut-price-side {
		width: 100%;
	}
}

/* --- Intro text under a page title (Pikendused) ------------------------- */
.entry-content .cut-intro {
	box-sizing: border-box;
	max-width: 1140px;
	margin: 0 auto;
	padding: 30px 12px 0;
}

.entry-content .cut-intro + .cut-intro {
	padding-top: 78px;
}

.entry-content .cut-intro p {
	margin: 0;
}

.entry-content .cut-intro p + p {
	margin-top: 1.6em;
}

.entry-content .cut-intro + .cut-price-row {
	padding-top: 56px;
}

/* --- Three columns of photos and text (Lainekoolitus) ------------------- */
.entry-content .cut-feature {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	max-width: 1140px;
	margin: 0 auto;
	padding: 20px 0 36px;
}

.entry-content .cut-feature > .cut-feature-col {
	box-sizing: border-box;
	width: 25%;
	margin: 0;
	padding: 10px;
}

.entry-content .cut-feature > .cut-feature-main {
	width: 50%;
	padding-top: 45px;
	text-align: center;
}

.entry-content .cut-feature .wp-block-image {
	margin: 0 0 20px;
}

.entry-content .cut-feature .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.entry-content .cut-feature-main .wp-block-image {
	margin: 31px 0 0;
}

.entry-content .cut-feature p {
	margin: 0;
}

.entry-content .cut-feature p + p {
	margin-top: 11px;
}

@media (max-width: 767px) {
	.entry-content .cut-intro {
		padding-left: 20px;
		padding-right: 20px;
	}

	.entry-content .cut-feature > .cut-feature-col,
	.entry-content .cut-feature > .cut-feature-main {
		width: 100%;
	}
}

/* Astra switches off max-width for blocks on full-width pages with a very
   specific rule; these selectors are specific enough to bring it back. */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .cut-intro,
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .cut-feature {
	max-width: 1140px;
}

/* Keep photos and text off the screen edge when the window is narrower than
   the 1140px content width. */
@media (max-width: 1179px) {
	.entry-content .cut-feature {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* --- Top banner: photo, brown shade fading into the page colour, white title
   Each page keeps its own spacing through the cut-hero-<page> class. ------ */
.entry-content .wp-block-cover.cut-hero {
	--cut-hero-top: 235px;
	--cut-hero-bottom: 115px;
	--cut-hero-shade: 0.54;
	box-sizing: border-box;
	min-height: 0;
	max-width: none;
	margin: 0;
	padding: var(--cut-hero-top) 20px var(--cut-hero-bottom);
}

.entry-content .wp-block-cover.cut-hero > .wp-block-cover__background.has-background-dim {
	opacity: 1;
	background-color: transparent;
	background-image: linear-gradient(rgba(64, 49, 40, var(--cut-hero-shade)) 70%, #d8c8b4 99%);
}

.entry-content .wp-block-cover.cut-hero h1 {
	margin: 0;
	color: #fff;
}

.entry-content .wp-block-cover.cut-hero-teenused {
	--cut-hero-top: 195px;
	--cut-hero-bottom: 130px;
	--cut-hero-shade: 0.48;
}

.entry-content .wp-block-cover.cut-hero-teenused {
	margin-top: 45px;
}

@media (max-width: 1024px) {
	.entry-content .wp-block-cover.cut-hero {
		--cut-hero-top: 110px;
		--cut-hero-bottom: 110px;
	}

	.entry-content .wp-block-cover.cut-hero-teenused {
		--cut-hero-top: 65px;
		--cut-hero-bottom: 73px;
	}
}

@media (max-width: 767px) {
	.entry-content .wp-block-cover.cut-hero {
		--cut-hero-top: 130px;
		--cut-hero-bottom: 65px;
	}

	.entry-content .wp-block-cover.cut-hero-teenused {
		--cut-hero-top: 140px;
		--cut-hero-bottom: 43px;
		margin-top: 30px;
	}
}

/* --- Service tiles: icon with a label underneath (Teenused) ------------- */
.entry-content .cut-tiles {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	margin: 5px auto 40px;
	padding: 10px;
}

.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .wp-block-cover.cut-hero {
	width: 100%;
	max-width: none;
}

.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .cut-tiles {
	max-width: 1084px;
}

.entry-content .cut-tiles > .cut-tile {
	box-sizing: border-box;
	width: 25%;
	margin: 0;
	padding: 10px;
	text-align: center;
}

.entry-content .cut-tile .wp-block-image {
	margin: 0 0 20px;
}

.entry-content .cut-tile .wp-block-image a {
	display: block;
}

.entry-content .cut-tile .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
	transition: transform 0.3s ease;
}

.entry-content .cut-tile .wp-block-image a:hover img,
.entry-content .cut-tile .wp-block-image a:focus img {
	transform: scale(1.08);
}

.entry-content .cut-tile .cut-tile-label {
	margin: 0;
	font-family: "Montserrat Alternates", Montserrat, sans-serif;
	font-size: 15px;
	line-height: 1.25;
}

.entry-content .cut-tile .cut-tile-label a {
	color: #3f3027;
	text-decoration: none;
}

@media (max-width: 767px) {
	.entry-content .cut-tiles > .cut-tile {
		width: 50%;
	}

	.entry-content .cut-tile .wp-block-image img {
		width: 55%;
	}
}

.entry-content .wp-block-cover.cut-hero-meist {
	--cut-hero-top: 190px;
	--cut-hero-bottom: 110px;
	--cut-hero-shade: 0.61;
}

@media (max-width: 1024px) {
	.entry-content .wp-block-cover.cut-hero-meist {
		--cut-hero-top: 110px;
		--cut-hero-bottom: 110px;
	}
}

@media (max-width: 767px) {
	.entry-content .wp-block-cover.cut-hero-meist {
		--cut-hero-top: 140px;
		--cut-hero-bottom: 55px;
	}
}

/* --- Photo next to text, twice, mirrored (Meist) ------------------------ */
.entry-content .cut-split,
.entry-content .cut-founder {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	margin: 15px auto 40px;
	padding: 10px 0;
}

.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .cut-split,
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .cut-founder {
	max-width: 1140px;
}

.entry-content .cut-split > .cut-split-media,
.entry-content .cut-split > .cut-split-text {
	box-sizing: border-box;
	margin: 0;
	padding: 10px;
}

.entry-content .cut-split > .cut-split-media {
	width: 66.6666%;
}

.entry-content .cut-split > .cut-split-text {
	width: 33.3333%;
}

.entry-content .cut-split > .cut-split-text + .cut-split-text {
	padding-top: 30px;
}

.entry-content .cut-split .wp-block-image,
.entry-content .cut-founder .wp-block-image {
	margin: 0;
}

.entry-content .cut-split .wp-block-image img {
	display: block;
	width: 100%;
	height: 310px;
	object-fit: cover;
}

.entry-content .cut-split > .cut-split-media:last-child .wp-block-image img {
	height: 375px;
}

.entry-content .cut-split p {
	margin: 0 0 1.6em;
}

/* --- Founder: title + portrait on the left, story on the right (Meist) -- */
.entry-content .cut-founder {
	margin: 0 auto;
	padding-top: 30px;
	padding-bottom: 0;
}

.entry-content .cut-founder > .cut-founder-side {
	box-sizing: border-box;
	width: 33.3333%;
	margin: 0;
	padding: 10px;
}

.entry-content .cut-founder > .cut-founder-text {
	box-sizing: border-box;
	width: 66.6666%;
	margin: 0;
	padding: 45px 0 10px 10px;
}

.entry-content .cut-founder h2 {
	margin: 0 0 20px;
	padding-left: 10px;
}

.entry-content .cut-founder .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.entry-content .cut-founder p {
	margin: 0 0 13px;
}

@media (max-width: 1179px) {
	.entry-content .cut-split,
	.entry-content .cut-founder {
		padding-left: 10px;
		padding-right: 10px;
	}
}

@media (max-width: 767px) {
	.entry-content .cut-split > .cut-split-media,
	.entry-content .cut-split > .cut-split-text,
	.entry-content .cut-founder > .cut-founder-side,
	.entry-content .cut-founder > .cut-founder-text {
		width: 100%;
	}
}

/* --- Photo mosaic: tall photo, two small ones, tall photo (Galerii) ----- */
.entry-content .cut-mosaic {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px 20px;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 45px 10px 60px;
}

.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .cut-mosaic {
	max-width: 1120px;
}

.entry-content .cut-mosaic .wp-block-image {
	position: relative;
	margin: 0;
	aspect-ratio: 353 / 220;
	overflow: hidden;
}

.entry-content .cut-mosaic .wp-block-image.cut-tall {
	aspect-ratio: auto;
}

@media (min-width: 768px) {
	.entry-content .cut-mosaic > :nth-child(1) {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.entry-content .cut-mosaic > :nth-child(2) {
		grid-column: 2;
		grid-row: 1;
	}

	.entry-content .cut-mosaic > :nth-child(3) {
		grid-column: 2;
		grid-row: 2;
	}

	.entry-content .cut-mosaic > :nth-child(4) {
		grid-column: 3;
		grid-row: 1 / span 2;
	}
}

.entry-content .cut-mosaic .wp-block-image img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 767px) {
	.entry-content .cut-mosaic {
		grid-template-columns: 1fr;
		padding: 30px 30px 40px;
	}

	.entry-content .cut-mosaic .wp-block-image.cut-tall {
		aspect-ratio: 330 / 428;
	}
}

.entry-content .wp-block-cover.cut-hero-broneeri {
	--cut-hero-top: 240px;
	--cut-hero-bottom: 110px;
	--cut-hero-shade: 0.48;
}

@media (max-width: 1024px) {
	.entry-content .wp-block-cover.cut-hero-broneeri {
		--cut-hero-top: 110px;
		--cut-hero-bottom: 110px;
	}
}

@media (max-width: 767px) {
	.entry-content .wp-block-cover.cut-hero-broneeri {
		--cut-hero-top: 130px;
		--cut-hero-bottom: 65px;
	}
}

/* --- Box around the online booking calendar ----------------------------- */
.entry-content .cut-booking {
	box-sizing: border-box;
	margin: 0 auto;
	padding: 10px 0;
}

/* --- Contact details next to the enquiry form (Broneeri aeg) ------------ */
.entry-content .cut-contact {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 45px 0 66px;
}

.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .cut-booking,
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .cut-contact {
	max-width: 1140px;
}

.entry-content .cut-contact > .cut-contact-info {
	box-sizing: border-box;
	width: 45%;
	margin: 0;
	padding: 0 60px 0 0;
}

.entry-content .cut-contact > .cut-contact-form {
	box-sizing: border-box;
	width: 55%;
	margin: 0;
	padding: 0;
}

.entry-content .cut-contact-info h2 {
	margin: 0 0 10px;
}

.entry-content .cut-contact-info p {
	margin: 0 0 1.6em;
}

.entry-content .cut-contact-list {
	margin: 0 0 34px;
	padding: 25px 0 0;
	list-style: none;
}

.entry-content .cut-contact-list li {
	position: relative;
	margin: 0;
	padding: 0 0 5px 23px;
}

.entry-content .cut-contact-list li + li {
	margin-top: 5px;
}

.entry-content .cut-contact-list li:last-child {
	padding-bottom: 0;
}

.entry-content .cut-contact-list li::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 0;
	width: 14px;
	height: 14px;
	background-color: #171411;
	-webkit-mask: var(--cut-icon) center / contain no-repeat;
	mask: var(--cut-icon) center / contain no-repeat;
}

.entry-content .cut-contact-list a {
	color: inherit;
	text-decoration: none;
}

.entry-content .cut-contact-list a:hover,
.entry-content .cut-contact-list a:focus {
	text-decoration: underline;
}

.entry-content .cut-icon-pin {
	--cut-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a8 8 0 0 0-8 8c0 5.6 8 14 8 14s8-8.4 8-14a8 8 0 0 0-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E");
}

.entry-content .cut-icon-mail {
	--cut-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 4h20a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm1 3.2V18h18V7.2l-9 6.5-9-6.5zM19.4 6H4.6L12 11.300 19.4 6z'/%3E%3C/svg%3E");
}

.entry-content .cut-icon-phone {
	--cut-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 17.300l-4.600-2a1.500 1.500 0 0 0-1.700.400l-2 2.500a15 15 0 0 1-7.200-7.200l2.500-2a1.500 1.500 0 0 0 .400-1.700l-2-4.600A1.500 1.500 0 0 0 5.700 1.800l-3.500.800A1.500 1.500 0 0 0 1 4.100 19 19 0 0 0 20 23a1.500 1.500 0 0 0 1.500-1.200l.800-3.500a1.500 1.500 0 0 0-.300-1z'/%3E%3C/svg%3E");
}

/* Round brown Facebook / Instagram buttons. */
.entry-content .wp-block-social-links.cut-social {
	gap: 11px;
	margin: 0;
	padding: 0 0 0 15px;
}

.entry-content .wp-block-social-links.cut-social .wp-social-link {
	margin: 0;
	border-radius: 50%;
	background-color: #3f3027;
	color: #fff;
}

.entry-content .wp-block-social-links.cut-social .wp-social-link a {
	padding: 11px;
}

.entry-content .wp-block-social-links.cut-social .wp-social-link svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 1179px) {
	.entry-content .cut-booking {
		padding-left: 10px;
		padding-right: 10px;
	}

	.entry-content .cut-contact {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (max-width: 767px) {
	.entry-content .cut-contact {
		padding-top: 20px;
		padding-bottom: 76px;
	}

	.entry-content .cut-contact > .cut-contact-info,
	.entry-content .cut-contact > .cut-contact-form {
		width: 100%;
		padding-right: 0;
	}

	.entry-content .cut-contact > .cut-contact-form {
		margin-top: 32px;
	}
}

/* ==========================================================================
   Home page (Avaleht)
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------ */
.entry-content .wp-block-buttons {
	margin: 0;
}

.entry-content .wp-block-button.cut-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	padding: 17px 40px;
	border: 0;
	border-radius: 30px;
	background-color: #3f3027;
	color: #fff;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: normal;
	text-transform: uppercase;
	text-decoration: none;
}

.entry-content .wp-block-button.cut-button .wp-block-button__link:hover,
.entry-content .wp-block-button.cut-button .wp-block-button__link:focus {
	background-color: #5a463a;
	color: #fff;
}

/* Long arrow after the text. */
.entry-content .wp-block-button.cut-button-arrow .wp-block-button__link::after {
	content: "";
	width: 12px;
	height: 14px;
	margin-left: 12px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 5l-1.800 1.800 3.700 3.700H1v3h16.900l-3.700 3.700L16 19l7-7z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 5l-1.800 1.800 3.700 3.700H1v3h16.900l-3.700 3.700L16 19l7-7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.entry-content .cut-show-mobile {
	display: none;
}

@media (max-width: 767px) {
	.entry-content .cut-hide-mobile {
		display: none;
	}

	.entry-content .cut-show-mobile {
		display: block;
	}
}

/* --- Home banner -------------------------------------------------------- */
.entry-content .wp-block-cover.cut-hero-home {
	--cut-hero-top: 250px;
	--cut-hero-bottom: 190px;
	margin-top: -30px;
}

/* The photo stays clear. It melts into the page colour at its lower edge, and a soft
   round shadow sits behind the title so the white words stay readable. */
.entry-content .wp-block-cover.cut-hero-home > .wp-block-cover__background.has-background-dim {
	background-image:
		linear-gradient(to bottom, rgba(216, 200, 180, 0) 66%, rgba(216, 200, 180, 0.75) 88%, #d8c8b4 100%),
		radial-gradient(ellipse 52% 54% at 50% 46%, rgba(24, 17, 13, 0.8) 0%, rgba(24, 17, 13, 0.52) 55%, rgba(24, 17, 13, 0) 100%),
		linear-gradient(rgba(28, 20, 16, 0.12), rgba(28, 20, 16, 0.12));
}

.entry-content .cut-hero-home .wp-block-cover__inner-container {
	width: 100%;
}

.entry-content .cut-hero-box {
	position: relative;
	box-sizing: border-box;
	max-width: 800px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

.entry-content .cut-hero-box h1 {
	font-size: 90px;
	line-height: 1.4;
}

.entry-content .wp-block-cover.cut-hero .wp-block-cover__inner-container .cut-hero-tagline {
	position: absolute;
	top: -10px;
	right: 55px;
	margin: 0;
	color: #fff;
	font-family: "Vujahday Script", handwriting;
	font-size: 34px;
	line-height: 1.3;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	transform: rotate(5deg);
}

.entry-content .wp-block-cover.cut-hero .wp-block-cover__inner-container .cut-hero-lead {
	max-width: 60%;
	margin: 1px auto 18px; /* sits close under the title; the title's own line box already leaves air */
	color: #f5f5f5;
	line-height: 24px;
}

.entry-content .cut-hero-box .wp-block-buttons {
	justify-content: center;
}

@media (max-width: 1024px) {
	.entry-content .wp-block-cover.cut-hero-home {
		--cut-hero-top: 220px;
		--cut-hero-bottom: 160px;
	}
}

@media (max-width: 767px) {
	.entry-content .wp-block-cover.cut-hero-home {
		--cut-hero-top: 200px;
		--cut-hero-bottom: 130px;
		margin-top: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.entry-content .wp-block-cover.cut-hero-home > .wp-block-cover__background.has-background-dim {
		background-image:
			linear-gradient(to bottom, rgba(216, 200, 180, 0) 72%, rgba(216, 200, 180, 0.75) 90%, #d8c8b4 100%),
			radial-gradient(ellipse 95% 44% at 50% 50%, rgba(24, 17, 13, 0.8) 0%, rgba(24, 17, 13, 0.52) 60%, rgba(24, 17, 13, 0) 100%),
			linear-gradient(rgba(28, 20, 16, 0.12), rgba(28, 20, 16, 0.12));
	}

	.entry-content .cut-hero-box h1 {
		line-height: 0.7;
		letter-spacing: 1px;
	}

	.entry-content .wp-block-cover.cut-hero .wp-block-cover__inner-container .cut-hero-tagline {
		top: -28px;
		right: 26px;
		font-size: 24px;
	}

	.entry-content .wp-block-cover.cut-hero .wp-block-cover__inner-container .cut-hero-lead {
		max-width: 269px;
		margin-top: 30px;
	}
}

/* --- Centered section title --------------------------------------------- */
.entry-content h2.cut-section-title {
	margin: 0;
	padding: 25px 10px 0;
	text-align: center;
}

/* --- Service tiles on the home page (wider than on Teenused) ------------ */
.entry-content .cut-tiles.cut-tiles-wide {
	margin: 0 auto;
	padding: 10px 0;
}

.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .cut-tiles.cut-tiles-wide {
	max-width: 1140px;
}

/* --- "Tehtud tööd": text and two columns of photos ---------------------- */
.entry-content .cut-works {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 10px 0;
}

.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .cut-works {
	max-width: 1140px;
}

.entry-content .cut-works > .cut-works-text,
.entry-content .cut-works > .cut-works-photos {
	box-sizing: border-box;
	width: 33%;
	margin: 0;
	padding: 10px;
}

.entry-content .cut-works > .cut-works-text {
	padding-top: 100px;
}

.entry-content .cut-works h2 {
	margin: 0 0 37px;
}

.entry-content .cut-works p {
	margin: 0 0 1.6em;
}

.entry-content .cut-works .wp-block-buttons {
	margin-top: 0;
	padding-top: 20px;
}

.entry-content .cut-works .wp-block-image {
	margin: 0;
}

.entry-content .cut-works .wp-block-image + .wp-block-image {
	margin-top: 20px;
}

.entry-content .cut-works .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	filter: brightness(1.03) contrast(0.96) saturate(1.34);
}

/* The same gentle colour corrections each photo had on the old page. */
.entry-content .cut-works .wp-block-image img.wp-image-1549 {
	filter: brightness(1.03) contrast(0.95) saturate(1.1) hue-rotate(346deg);
}

.entry-content .cut-works .wp-block-image img.wp-image-1545 {
	filter: brightness(1.03) contrast(0.96) saturate(1.08);
}

/* Row under the photos; holds the "Vaata rohkem" button on phones. */
.entry-content .cut-band {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .cut-band {
	max-width: none;
}

.entry-content .cut-band .wp-block-buttons {
	justify-content: center;
}

/* --- Booking calendar on the home page ---------------------------------- */
.entry-content .cut-booking.cut-booking-home {
	padding-top: 30px;
	padding-bottom: 40px;
}

.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .cut-booking.cut-booking-home {
	max-width: none;
}

.entry-content .cut-booking-home > * {
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
}

.entry-content .cut-booking-home h2.cut-section-title {
	margin: 0 auto;
	padding: 10px 10px 0;
}

/* --- Photo panels with white text (Meist, Cutiere stuudio asutaja) ------ */
.entry-content .wp-block-cover.cut-panel {
	box-sizing: border-box;
	min-height: 0;
	margin: 0;
	padding: 150px 0;
	color: #171411;
}

.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .wp-block-cover.cut-panel {
	width: 100%;
	max-width: none;
}

/* The page colour drifts in from the side where the words are and thins out to nothing,
   so the photo appears out of the page; top and bottom edges melt into the page too. */
.entry-content .wp-block-cover.cut-panel > .wp-block-cover__background.has-background-dim {
	opacity: 1;
	background-color: transparent;
	background-image:
		linear-gradient(to bottom, #d8c8b4 0%, rgba(216, 200, 180, 0.7) 7%, rgba(216, 200, 180, 0) 20%, rgba(216, 200, 180, 0) 80%, rgba(216, 200, 180, 0.7) 93%, #d8c8b4 100%),
		linear-gradient(to right, #d8c8b4 0%, rgba(216, 200, 180, 0.96) 30%, rgba(216, 200, 180, 0.6) 46%, rgba(216, 200, 180, 0) 66%);
}

.entry-content .wp-block-cover.cut-panel-right > .wp-block-cover__background.has-background-dim {
	background-image:
		linear-gradient(to bottom, #d8c8b4 0%, rgba(216, 200, 180, 0.7) 7%, rgba(216, 200, 180, 0) 20%, rgba(216, 200, 180, 0) 80%, rgba(216, 200, 180, 0.7) 93%, #d8c8b4 100%),
		linear-gradient(to left, #d8c8b4 0%, rgba(216, 200, 180, 0.96) 44%, rgba(216, 200, 180, 0.6) 58%, rgba(216, 200, 180, 0) 76%);
}

.entry-content .wp-block-cover.cut-panel > .wp-block-cover__inner-container {
	box-sizing: border-box;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
}

.entry-content .cut-panel .cut-panel-box {
	box-sizing: border-box;
	width: 40%;
	margin: 0;
	padding: 0;
}

.entry-content .wp-block-cover.cut-panel-right {
	padding-bottom: 110px;
}

.entry-content .cut-panel-right .cut-panel-box {
	width: 60%;
	margin-left: auto;
}

.entry-content .cut-panel h2 {
	margin: 0 0 20px;
	color: #3f3027;
}

.entry-content .wp-block-cover.cut-panel .wp-block-cover__inner-container p {
	margin: 0 0 1.6em;
	color: #171411;
}

.entry-content .cut-panel .wp-block-buttons {
	margin-top: 0;
	padding-top: 35px;
}

/* --- Brand logos --------------------------------------------------------- */
.entry-content .cut-brands {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 10px 0;
}

.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .cut-brands {
	max-width: 1140px;
}

.entry-content .cut-brands .wp-block-image {
	margin: 0;
}

.entry-content .cut-brands .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 1179px) {
	.entry-content .cut-works,
	.entry-content .cut-brands,
	.entry-content .cut-tiles.cut-tiles-wide {
		padding-left: 10px;
		padding-right: 10px;
	}

	.entry-content .wp-block-cover.cut-panel {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (max-width: 767px) {
	.entry-content .cut-works > .cut-works-text {
		width: 100%;
		padding-top: 10px;
	}

	.entry-content .cut-works h2 {
		margin-bottom: 20px;
		text-align: center;
	}

	.entry-content .cut-works > .cut-works-photos {
		width: 50%;
	}

	.entry-content .cut-band {
		padding: 5px 0 25px;
	}

	.entry-content .cut-panel .cut-panel-box,
	.entry-content .cut-panel-right .cut-panel-box {
		width: 100%;
	}

	/* Phones: the photo is clear at the top and melts downwards; the words stand
	   on the page colour underneath. */
	.entry-content .wp-block-cover.cut-panel,
	.entry-content .wp-block-cover.cut-panel-right {
		padding-top: 300px;
		padding-bottom: 30px;
	}

	.entry-content .wp-block-cover.cut-panel > .wp-block-cover__background.has-background-dim,
	.entry-content .wp-block-cover.cut-panel-right > .wp-block-cover__background.has-background-dim {
		background-image: linear-gradient(to bottom, rgba(216, 200, 180, 0) 0%, rgba(216, 200, 180, 0) 24%, rgba(216, 200, 180, 0.9) 44%, #d8c8b4 56%);
	}

}

/* Brand logos on phones: one logo at a time, swipe sideways. carousel.js adds
   the dots and the automatic sliding; without it the strip still swipes. */
.entry-content .cut-brands-dots,
.entry-content .cut-brands .cut-brands-copy {
	display: none;
}

@media (max-width: 767px) {
	.entry-content .cut-brands {
		display: flex;
		gap: 0;
		padding: 10px 0 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.entry-content .cut-brands::-webkit-scrollbar {
		display: none;
	}

	.entry-content .cut-brands .cut-brands-copy {
		display: block;
	}

	.entry-content .cut-brands .wp-block-image {
		box-sizing: border-box;
		flex: 0 0 100%;
		padding: 0 20px;
		scroll-snap-align: center;
	}

	.entry-content .cut-brands-dots {
		display: flex;
		justify-content: center;
		gap: 12px;
		margin: 0;
		padding: 12px 0 22px;
	}

	.entry-content .cut-brands-dots .cut-brands-dot {
		flex: 0 0 5px;
		width: 5px;
		min-width: 0;
		height: 5px;
		min-height: 0;
		margin: 0 !important; /* a theme rule centres every button with !important */
		padding: 0;
		border: 0;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.2);
		box-shadow: none;
		cursor: pointer;
	}

	.entry-content .cut-brands-dots .cut-brands-dot.is-active {
		background-color: #000;
	}
}

/* Home page, phones: tighter spacing and photos anchored to their left edge,
   as on the old page. */
@media (max-width: 767px) {
	.entry-content .cut-works > .cut-works-text {
		padding-bottom: 0;
	}

	.entry-content .cut-works-text .wp-block-buttons {
		display: none;
	}

	.entry-content .cut-works-text p:last-of-type {
		margin-bottom: 12px;
	}

	.entry-content .cut-panel .wp-block-buttons {
		padding-top: 0;
	}

	.entry-content .wp-block-cover.cut-panel > img.wp-block-cover__image-background,
	.entry-content .wp-block-cover.cut-hero-home > img.wp-block-cover__image-background {
		object-position: 0 0 !important;
	}
}

/* ==========================================================================
   Sticky header: the menu bar stays at the top of the screen while scrolling.
   Pages whose banner starts under the menu bar (Avaleht, Teenused, Meist,
   Galerii, Broneeri aeg) use Astra's "transparent header"; there the bar is
   pinned with position: fixed, everywhere else with position: sticky.
   ========================================================================== */
#masthead.site-header {
	position: sticky;
	top: 0;
	z-index: 99;
}

.ast-theme-transparent-header #masthead.site-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
}

/* A soft line under the bar so it stands out from the page while scrolling. */
#masthead.site-header .main-header-bar {
	box-shadow: 0 1px 12px rgba(63, 48, 39, 0.12);
}

/* Links that jump to a spot on the page should not land under the bar. */
html {
	scroll-padding-top: 100px;
}

/* An opened phone menu can be taller than the screen: let it scroll. */
#masthead.site-header .ast-mobile-header-content {
	max-height: calc(100vh - 90px);
	overflow-y: auto;
}

/* Logged-in view: sit below WordPress's own black admin bar. */
.admin-bar #masthead.site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar #masthead.site-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar #masthead.site-header {
		top: 0;
	}

	.admin-bar.ast-theme-transparent-header #masthead.site-header {
		position: absolute;
	}
}

/* ==========================================================================
   One look for the header and menu on every page, computer and phone:
   beige bar, dark-brown words, beige phone menu. (Astra styled the pages
   with a banner photo and the other pages differently.)
   ========================================================================== */
#masthead .main-header-bar,
#masthead .ast-primary-header-bar {
	background-color: #d8c8b4;
	border-bottom-color: transparent;
}

#masthead .main-header-menu .menu-link,
#masthead .main-header-menu .ast-menu-toggle,
#masthead .main-header-menu .menu-item > .ast-menu-toggle,
#masthead .main-header-menu .ast-header-navigation-arrow {
	color: #3f3027;
}

#masthead .main-header-menu .menu-item:hover > .menu-link,
#masthead .main-header-menu .menu-item.focus > .menu-link,
#masthead .main-header-menu .current-menu-item > .menu-link,
#masthead .main-header-menu .current-menu-ancestor > .menu-link {
	color: #171411;
}

/* Drop-down under "Teenused & hinnakiri" on a computer. */
#ast-desktop-header .main-header-menu .sub-menu {
	background-color: #d8c8b4;
	border-top-color: #d8c8b4;
}

#ast-desktop-header .main-header-menu .sub-menu .menu-item:hover > .menu-link,
#ast-desktop-header .main-header-menu .sub-menu .current-menu-item > .menu-link {
	background-color: rgba(63, 48, 39, 0.08);
}

/* Phone: same logo size and bar height on every page. */
#ast-mobile-header .custom-logo-link img,
#ast-mobile-header .site-logo-img img {
	width: 70px;
	max-width: 70px;
	height: auto;
}

/* Phone: the three-lines button. */
#masthead .menu-toggle,
#masthead .menu-toggle:hover,
#masthead .menu-toggle:focus {
	border: 0;
	border-radius: 2px;
	background-color: transparent;
	box-shadow: none;
	color: #3f3027;
}

#masthead .menu-toggle .mobile-menu-toggle-icon svg {
	fill: #3f3027;
}

/* Phone: the opened menu. */
#masthead .ast-mobile-header-content,
#masthead .ast-mobile-header-content .main-header-menu,
#masthead .ast-mobile-header-content .ast-builder-menu,
#masthead .ast-mobile-header-content .ast-builder-layout-element {
	background-color: #d8c8b4;
}

#masthead .ast-mobile-header-content .main-header-menu .menu-link {
	border-bottom: 1px solid rgba(63, 48, 39, 0.15);
	background-color: transparent;
	color: #3f3027;
}

#masthead .ast-mobile-header-content .main-header-menu .current-menu-item > .menu-link,
#masthead .ast-mobile-header-content .main-header-menu .current-menu-ancestor > .menu-link {
	background-color: rgba(63, 48, 39, 0.08);
	color: #171411;
}

#masthead .ast-mobile-header-content .main-header-menu .sub-menu {
	background-color: rgba(63, 48, 39, 0.05);
}

#masthead .ast-mobile-header-content {
	box-shadow: 0 8px 12px rgba(63, 48, 39, 0.12);
}

/* Home banner on computers: fill the whole first screen, so the next heading
   ("Teenused ja hinnakiri") only appears once the visitor scrolls. The banner starts
   30px above the top of the page, hence the + 30px. Capped for very tall monitors. */
@media (min-width: 1025px) {
	.entry-content .wp-block-cover.cut-hero-home {
		/* 113px = the 30px above the page top + the 83px menu bar; with the same 40px of air
		   above and below, the words sit in the middle of the photo that is actually visible. */
		--cut-hero-top: 153px;
		--cut-hero-bottom: 40px;
		min-height: calc(min(100vh, 1200px) + 30px);
	}

	/* The soft shadow follows the words to the middle. */
	.entry-content .wp-block-cover.cut-hero-home > .wp-block-cover__background.has-background-dim {
		background-image:
			linear-gradient(to bottom, rgba(216, 200, 180, 0) 66%, rgba(216, 200, 180, 0.75) 88%, #d8c8b4 100%),
			radial-gradient(ellipse 52% 50% at 50% calc(50% + 56px), rgba(24, 17, 13, 0.8) 0%, rgba(24, 17, 13, 0.52) 55%, rgba(24, 17, 13, 0) 100%),
			linear-gradient(rgba(28, 20, 16, 0.12), rgba(28, 20, 16, 0.12));
	}
}

/* --- "Cutiere stuudio asutaja" on phones: portrait in an arch frame (like the salon's
   arched mirrors) above the words, instead of the wide background photo. --------------- */
.entry-content .wp-block-image.cut-arch {
	margin: 0 0 30px;
}

.entry-content .wp-block-image.cut-arch img {
	display: block;
	width: 78%;
	height: 430px; /* tall enough for a standing, full-length portrait */
	margin: 0 auto;
	border-radius: 999px 999px 0 0;
	object-fit: cover;
	object-position: 50% 30%;
}

@media (max-width: 767px) {
	.entry-content .wp-block-cover.cut-panel-right {
		padding-top: 50px;
		padding-bottom: 30px;
	}

	.entry-content .wp-block-cover.cut-panel-right > img.wp-block-cover__image-background,
	.entry-content .wp-block-cover.cut-panel-right > .wp-block-cover__background.has-background-dim {
		display: none;
	}
}

/* --- Brown fade between "Tehtud tööd" and "Broneeri aeg" (home page) ------
   Darkest band sits at the join and reaches up behind the bottom of the photos,
   with a long fade upwards (layer behind .cut-works, full page width) and a long
   fade downwards (background of the booking section). */
.home .entry-content {
	overflow-x: clip;
}

.entry-content .cut-works {
	position: relative;
}

.entry-content .cut-works > * {
	position: relative;
	z-index: 1;
}

.entry-content .cut-works::before {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	bottom: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	height: 700px;
	max-height: 100%;
	background-image: linear-gradient(to bottom, rgba(64, 49, 40, 0) 0%, rgba(64, 49, 40, .03) 25%, rgba(64, 49, 40, .10) 48%, rgba(64, 49, 40, .22) 66%, rgba(64, 49, 40, .33) 82%, rgba(64, 49, 40, .33) 100%);
}

.entry-content .cut-booking.cut-booking-home {
	padding-top: 40px;
	background-image: linear-gradient(to bottom, rgba(64, 49, 40, .33) 0, rgba(64, 49, 40, .33) 60px, rgba(64, 49, 40, .20) 200px, rgba(64, 49, 40, .08) 380px, rgba(64, 49, 40, 0) 560px);
}

@media (max-width: 1024px) {
	.entry-content .cut-band {
		background: rgba(64, 49, 40, .33);
		padding-bottom: 12px;
	}

	/* smaller gap between the "Vaata rohkem" button and the "Broneeri aeg" heading */
	.entry-content .cut-booking.cut-booking-home {
		padding-top: 12px;
		padding-bottom: 8px; /* smaller beige gap before the Meist photo */
	}
}

/* --- "Meist" panel on the home page, phones only ---------------------------
   Phones show a different photo (image00016, media ID 1788: mirror with the
   "Hello Gorgeous" sign, armchairs, plant) in a 390px tall strip above the text,
   cropped so the door on the left is hidden. Computers keep the page's own photo. */
@media (max-width: 767px) {
	.entry-content .wp-block-cover.cut-panel-left > img.wp-block-cover__image-background {
		content: url(/wp-content/uploads/2026/05/image00016-1024x768.jpeg);
		top: 0 !important;
		bottom: auto !important;
		height: 390px !important;
		object-position: 50% 0 !important;
	}

	.entry-content .wp-block-cover.cut-panel-left > .wp-block-cover__background.has-background-dim {
		/* soft top edge (60px), clear photo, then melts into the page colour under the text */
		background-image: linear-gradient(to bottom, #d8c8b4 0, rgba(216, 200, 180, .55) 22px, rgba(216, 200, 180, 0) 60px, rgba(216, 200, 180, 0) 215px, rgba(216, 200, 180, .9) 300px, #d8c8b4 350px);
	}
}

/* --- Phones: brand-logo carousel without dots, smaller gap to the founder photo --- */
.entry-content .cut-brands-dots {
	display: none !important;
}

@media (max-width: 767px) {
	.entry-content .wp-block-cover.cut-panel-right {
		padding-top: 20px;
	}
}

/* --- Price-list pages (Värviteenused, Soengud…, Pikendused, Lainekoolitus):
   smaller gap between the menu bar and the page heading (was 90px / 85px). */
.entry-content h1.cut-page-title {
	padding-top: 44px;
}

@media (max-width: 1024px) {
	.entry-content h1.cut-page-title {
		padding-top: 34px;
	}
}

/* --- Top photo on Teenused, Meist, Galerii and Broneeri aeg: lighter brown veil that melts gradually
   into the page colour from the middle down (no visible band); soft shadow
   behind the title keeps it readable. */
.entry-content .wp-block-cover.cut-hero:not(.cut-hero-home) > .wp-block-cover__background.has-background-dim {
	background-image: linear-gradient(to bottom, rgba(64, 49, 40, .28) 0%, rgba(64, 49, 40, .25) 40%, rgba(140, 120, 100, .35) 70%, rgba(216, 200, 180, .8) 90%, #d8c8b4 100%);
}

.entry-content .wp-block-cover.cut-hero:not(.cut-hero-home) h1 {
	text-shadow: 0 2px 18px rgba(24, 17, 13, .55);
}

/* --- Top photo on Teenused, Meist, Galerii and Broneeri aeg: one size for all
   four and the title exactly in the middle of the visible photo.
   --cut-hdr = height of the menu bar that lies over the top of the photo.
   Visible photo: 357px on computers, 260px on tablets, 167px on phones. */
.entry-content .wp-block-cover.cut-hero:not(.cut-hero-home) {
	--cut-hdr: 83px;
	margin-top: 0;
	padding: var(--cut-hdr) 20px 0;
	min-height: calc(var(--cut-hdr) + 357px);
}

@media (max-width: 1024px) {
	.entry-content .wp-block-cover.cut-hero:not(.cut-hero-home) {
		min-height: calc(var(--cut-hdr) + 260px);
	}
}

@media (max-width: 921px) {
	.entry-content .wp-block-cover.cut-hero:not(.cut-hero-home) {
		--cut-hdr: 97px; /* tablets: larger logo, taller menu bar */
	}
}

@media (max-width: 544px) {
	.entry-content .wp-block-cover.cut-hero:not(.cut-hero-home) {
		--cut-hdr: 70px;
	}
}

@media (max-width: 767px) {
	.entry-content .wp-block-cover.cut-hero:not(.cut-hero-home) {
		min-height: calc(var(--cut-hdr) + 167px);
	}
}

/* Teenused: the photo behind the title is bright (white bottles), so the brown
   veil is darker here and the title shadow stronger. Same gradual fade. */
.entry-content .wp-block-cover.cut-hero.cut-hero-teenused:not(.cut-hero-home) > .wp-block-cover__background.has-background-dim {
	background-image: linear-gradient(to bottom, rgba(64, 49, 40, .5) 0%, rgba(64, 49, 40, .46) 40%, rgba(120, 100, 84, .5) 68%, rgba(216, 200, 180, .82) 90%, #d8c8b4 100%);
}

.entry-content .wp-block-cover.cut-hero.cut-hero-teenused:not(.cut-hero-home) h1 {
	text-shadow: 0 2px 6px rgba(24, 17, 13, .55), 0 2px 22px rgba(24, 17, 13, .7);
}

/* ==========================================================================
   Galerii page: title, thin text tabs, photos in a brick-wall layout
   (every photo keeps its own shape). gallery.js adds the tabs.
   ========================================================================== */
.entry-content .cut-gallery-sub {
	margin: 0;
	padding: 2px 20px 0;
	text-align: center;
	color: #3f3027;
}

.entry-content .cut-gallery-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 34px;
	margin: 0;
	padding: 22px 20px 0;
}

.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .cut-gallery-tabs,
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .cut-gallery-sub {
	max-width: none;
}

.entry-content .cut-gallery-tabs button {
	margin: 0 !important;
	padding: 6px 2px;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #6b584c;
	font-family: Montserrat, sans-serif;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

.entry-content .cut-gallery-tabs button:hover,
.entry-content .cut-gallery-tabs button:focus {
	background: none;
	color: #2b1d16;
}

.entry-content .cut-gallery-tabs button:focus-visible {
	outline: 2px solid #3f3027;
	outline-offset: 4px;
}

.entry-content .cut-gallery-tabs button.is-active {
	border-bottom-color: #2b1d16;
	color: #2b1d16;
}

.entry-content .cut-gallery {
	box-sizing: border-box;
	margin: 0 auto;
	padding: 30px 20px 70px;
	columns: 4;
	column-gap: 14px;
}

.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .cut-gallery {
	max-width: 1180px;
}

.entry-content .cut-gallery .wp-block-image {
	display: block;
	overflow: hidden;
	margin: 0 0 14px;
	border-radius: 10px;
	background: #cdbba6;
	break-inside: avoid;
}

.entry-content .cut-gallery .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.entry-content .cut-gallery .wp-block-image.cut-hidden {
	display: none;
}

@media (max-width: 1024px) {
	.entry-content .cut-gallery {
		columns: 3;
	}
}

@media (max-width: 767px) {
	.entry-content .cut-gallery-tabs {
		gap: 6px 22px;
		padding-top: 16px;
	}

	.entry-content .cut-gallery-tabs button {
		font-size: 15px;
	}

	.entry-content .cut-gallery {
		padding: 22px 14px 50px;
		columns: 2;
		column-gap: 10px;
	}

	.entry-content .cut-gallery .wp-block-image {
		margin-bottom: 10px;
	}
}

/* Galerii: the page title is in the page for search engines and screen readers,
   but not shown; the page opens with the tabs. */
.entry-content .cut-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.entry-content .cut-gallery-tabs {
	padding-top: 44px;
}

.entry-content .cut-gallery {
	padding-top: 26px;
}

@media (max-width: 767px) {
	.entry-content .cut-gallery-tabs {
		padding-top: 30px;
	}

	.entry-content .cut-gallery {
		padding-top: 20px;
	}
}

/* ==========================================================================
   Shop (Pood)
   ========================================================================== */

/* Title photo: long, smooth fade into the page colour at the bottom. */
.ast-archive-entry-banner {
	position: relative;
}

.ast-archive-entry-banner::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 130px;
	max-height: 60%;
	background-image: linear-gradient(to top, #d8c8b4 0%, rgba(216, 200, 180, .86) 12%, rgba(216, 200, 180, .64) 28%, rgba(216, 200, 180, .4) 46%, rgba(216, 200, 180, .2) 64%, rgba(216, 200, 180, .07) 82%, rgba(216, 200, 180, 0) 100%);
	pointer-events: none;
}

/* Phones: a narrow title photo, so the products are seen right away. */
@media (max-width: 767px) {
	.ast-archive-entry-banner[data-post-type] {
		min-height: 120px;
	}
}

/* Cart link in the menu bar on shop pages: icon | number of items.
   Printed inside #masthead by functions.php and placed here. */
.cut-cart-link {
	position: absolute;
	top: 50%;
	right: max(20px, calc((100% - 1200px) / 2));
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0 8px 8px;
	transform: translateY(-50%);
	color: #3f3027;
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

.cut-cart-link:hover,
.cut-cart-link:focus {
	color: #2b1d16;
}

.cut-cart-link .cut-cart-icon {
	display: block;
	width: 24px;
	height: 24px;
}

.cut-cart-link .cut-cart-sep {
	width: 1px;
	height: 18px;
	background: currentColor;
	opacity: .45;
}

/* Computers: the cart link takes the place of the E-POOD button (the button keeps a
   little room so the menu does not slide under the link). */
@media (min-width: 922px) {
	.cut-shop-page #masthead .ast-header-button-1 {
		visibility: hidden;
		width: 70px;
		height: 20px; /* must not make the menu bar taller than on other pages */
		overflow: hidden;
	}
}

/* Phones and tablets: the link sits in the top bar, left of the menu icon. */
@media (max-width: 921px) {
	.cut-cart-link {
		top: 35px; /* middle of the 70px top bar, also while the menu is open */
		right: 74px;
	}

	/* Menu open: the link moves down beside the E-POOD button, at the right edge. */
	body.ast-main-header-nav-open .cut-cart-link {
		top: auto;
		right: 20px;
		bottom: 18px;
		transform: none;
	}
}

/* Cart page: link back to the shop. */
.cut-back-to-shop {
	margin: 0 0 18px;
}

.cut-back-to-shop a {
	color: #3f3027;
	font-weight: 500;
	text-decoration: none;
}

.cut-back-to-shop a:hover,
.cut-back-to-shop a:focus {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Shop lists: the "Kuvatakse 1–12 tulemust" line is not shown (owner's choice);
   the sorting box and the filters stay. */
.woocommerce .woocommerce-result-count {
	display: none;
}

/* Phones: products start close under the title photo. */
@media (max-width: 767px) {
	body.cut-shop-page.archive #primary {
		margin-top: 16px;
	}

	body.cut-shop-page.archive .woocommerce-ordering {
		margin-bottom: 18px;
	}
}

/* Shop lists on phones and tablets: "Filtreeri" button beside the sorting box; the
   filters open in a panel above the products (shop.js moves them there). */
.cut-shop-tools {
	display: flex;
	align-items: stretch;
	gap: 10px;
	margin: 0 0 18px;
}

.cut-shop-tools .woocommerce-ordering {
	flex: 1 1 auto;
	float: none;
	min-width: 0;
	margin: 0 !important;
}

.cut-shop-tools .woocommerce-ordering select {
	width: 100%;
	height: 100%;
}

.cut-shop-tools .cut-filter-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	padding: 10px 16px;
	border: 1.5px solid #3f3027;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: #3f3027;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
}

.cut-shop-tools .cut-filter-toggle::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.cut-shop-tools .cut-filter-toggle.is-open::after {
	margin-top: 4px;
	transform: rotate(-135deg);
}

.cut-shop-tools .cut-filter-toggle:hover,
.cut-shop-tools .cut-filter-toggle:focus,
.cut-shop-tools .cut-filter-toggle.is-open {
	background: #3f3027;
	color: #fff;
}

.cut-filter-panel {
	margin: 0 0 22px;
	padding: 18px 18px 6px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .38);
}

.cut-filter-panel[hidden] {
	display: none;
}

.cut-filter-panel #secondary {
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
}

.cut-filter-panel #secondary .sidebar-main {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Sorting box: the words sit at the right, next to the arrow (so the empty space is
   between the "Filtreeri" button and the words, not between the words and the arrow). */
.woocommerce .woocommerce-ordering select {
	padding-right: 30px; /* room for the arrow */
	text-align: right;
	text-align-last: right;
}

.woocommerce .woocommerce-ordering select option {
	text-align: left;
}

/* Product cards: "Lisa ostukorvi" button - text centred and on one line. */
.woocommerce ul.products li.product a.button {
	padding-right: 24px;
	padding-left: 24px;
	text-align: center;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.woocommerce ul.products li.product a.button {
		display: block;
		padding-right: 10px;
		padding-left: 10px;
	}
}

/* Product cards in one row are the same height: the name takes the spare room, so
   the price and the button of neighbouring products always sit on the same level. */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap .ast-loop-product__link {
	flex: 1 0 auto;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap a.button {
	align-self: flex-start;
}

@media (max-width: 767px) {
	.woocommerce ul.products li.product .astra-shop-summary-wrap a.button {
		align-self: stretch;
	}
}

/* Computers: with the filters behind the "Filtreeri" button the product list uses
   the full width (four products in a row); button at the left, sorting at the right. */
body.cut-filters-moved.archive #primary {
	width: 100%;
	padding-right: 0;
	padding-left: 0;
	border: 0;
}

@media (min-width: 922px) {
	body.cut-filters-moved .cut-shop-tools {
		justify-content: space-between;
		margin-bottom: 26px;
	}

	body.cut-filters-moved .cut-shop-tools .woocommerce-ordering {
		flex: 0 0 auto;
	}

	body.cut-filters-moved .cut-filter-panel {
		margin-bottom: 30px;
		padding: 24px 28px 10px;
	}

	/* the filter groups (brands, categories) stand side by side */
	body.cut-filters-moved .cut-filter-panel #secondary .ast-filter-wrap {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 10px 80px;
	}

	body.cut-filters-moved .cut-filter-panel #secondary .ast-filter-wrap > * {
		flex: 0 1 320px;
		margin-top: 0;
	}
}

@media (min-width: 1025px) {
	body.cut-filters-moved.archive.woocommerce ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Pikendused: two price cards side by side (Paigaldus / Hooldus), each with
   "1 pakk ..... 60€" rows and a small note. Stacked on phones.
   ========================================================================== */
.entry-content .cut-packs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 34px;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 56px 12px 82px;
}

.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .cut-packs {
	max-width: 980px;
}

.entry-content .cut-packs .cut-pack {
	box-sizing: border-box;
	margin: 0;
	padding: 30px 36px 30px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .38);
}

.entry-content .cut-packs .cut-pack h2 {
	margin: 0 0 14px;
	text-align: center;
}

.entry-content .cut-packs .cut-pack-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px solid rgba(63, 48, 39, .18);
}

.entry-content .cut-packs .cut-pack-row p {
	margin: 0;
}

.entry-content .cut-packs .cut-pack-row .cut-pack-name {
	font-size: 17px;
	color: #2b1d16;
}

.entry-content .cut-packs .cut-pack-row .cut-price {
	font-family: "Vujahday Script", handwriting;
	font-size: 34px;
	line-height: 1.3;
	color: #3f3027;
	white-space: nowrap;
}

.entry-content .cut-packs .cut-pack-note {
	margin: 18px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: #5a473b;
}

@media (max-width: 767px) {
	.entry-content .cut-packs {
		grid-template-columns: 1fr;
		gap: 22px;
		padding: 40px 20px 60px;
	}

	.entry-content .cut-packs .cut-pack {
		padding: 24px 22px 24px;
	}

	.entry-content .cut-packs .cut-pack-row .cut-price {
		font-size: 28px;
	}
}

/* Phones: the booking calendar's rounded box sits 10px from the screen edges; with the
   box's own inner space its content starts about 22px in, like the other sections. */
@media (max-width: 767px) {
	.entry-content .cut-booking {
		padding-right: 10px;
		padding-left: 10px;
	}
}

/* --- "Tehtud tööd" photos on the home page: the tall photo in the first column always
   has the same shape as the tall dark-haired photo beside it (688:1024), whatever
   picture is put there, so both columns end at the same height. */
.entry-content .cut-works > .cut-works-photos:nth-child(2) .wp-block-image:last-child {
	overflow: hidden;
	border-radius: 4px;
}

.entry-content .cut-works > .cut-works-photos:nth-child(2) .wp-block-image:last-child img {
	aspect-ratio: 688 / 1024;
	object-fit: cover;
	object-position: 50% 50%;
}

/* The photo the owner put there on 2026-10-07: shown a little closer, centred on the hair. */
.entry-content .cut-works .wp-block-image img.wp-image-2821 {
	transform: scale(1.22);
	transform-origin: 52% 46%;
}

/* --- Galerii: click a photo to see it large (gallery.js) ------------------- */
.entry-content .cut-gallery .wp-block-image img {
	cursor: zoom-in;
}

.entry-content .cut-gallery .wp-block-image img:focus-visible {
	outline: 2px solid #3f3027;
	outline-offset: -2px;
}

html.cut-zoom-open {
	overflow: hidden;
}

.cut-zoom {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 56px 70px;
	background: rgba(38, 28, 22, .93);
}

.cut-zoom.is-open {
	display: flex;
}

.cut-zoom .cut-zoom-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}

.cut-zoom button {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0 !important;
	padding: 0 0 4px;
	border: 0;
	border-radius: 50%;
	background: rgba(216, 200, 180, .16);
	box-shadow: none;
	color: #f3ebe1;
	font-family: Arial, sans-serif;
	font-size: 32px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
}

.cut-zoom button:hover,
.cut-zoom button:focus {
	background: rgba(216, 200, 180, .32);
	color: #fff;
}

.cut-zoom .cut-zoom-close {
	top: 14px;
	right: 14px;
}

.cut-zoom .cut-zoom-prev {
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
}

.cut-zoom .cut-zoom-next {
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
}

.cut-zoom.cut-zoom-single .cut-zoom-prev,
.cut-zoom.cut-zoom-single .cut-zoom-next,
.cut-zoom.cut-zoom-single .cut-zoom-count {
	display: none;
}

.cut-zoom .cut-zoom-count {
	pointer-events: none; /* never covers the arrow buttons */
	position: absolute;
	bottom: 16px;
	left: 0;
	right: 0;
	color: #e6dbcc;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	text-align: center;
}

@media (max-width: 767px) {
	.cut-zoom {
		padding: 64px 8px 52px;
	}

	.cut-zoom .cut-zoom-prev,
	.cut-zoom .cut-zoom-next {
		top: auto;
		bottom: 6px;
		transform: none;
		width: 42px;
		height: 42px;
	}

	.cut-zoom .cut-zoom-prev {
		left: 16px;
	}

	.cut-zoom .cut-zoom-next {
		right: 16px;
	}
}

/* --- Galerii: two photos shown closer in the grid (owner's wish 2026-10-07).
   Only the small picture in the grid changes; the large view after a click shows the whole photo. */
.entry-content .cut-gallery .wp-block-image img.wp-image-2821 {
	transform: scale(1.2);
	transform-origin: 50% 46%;
}

/* image00009 (silver hair): the empty ceiling at the top is cropped off, then a little closer */
.entry-content .cut-gallery .wp-block-image img.wp-image-2814 {
	aspect-ratio: 736 / 880;
	object-fit: cover;
	object-position: 50% 75%;
	transform: scale(1.14);
	transform-origin: 48% 56%;
}

/* --- Müügitingimused and Privaatsuspoliitika: a calm, narrow column of plain text. */
.entry-content .cut-legal {
	box-sizing: border-box;
	max-width: 820px;
	margin: 0 auto;
	padding: 34px 24px 80px;
	text-align: left;
}

.entry-content .cut-legal h2 {
	margin: 34px 0 10px;
	font-family: inherit;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.35;
	text-transform: none;
}

.entry-content .cut-legal p,
.entry-content .cut-legal li {
	font-size: 16px;
	line-height: 1.65;
}

.entry-content .cut-legal p {
	margin: 0 0 12px;
}

.entry-content .cut-legal ul {
	margin: 0 0 14px 20px;
	padding: 0;
}

.entry-content .cut-legal li {
	margin: 0 0 6px;
}

.entry-content .cut-legal a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.entry-content .cut-legal .cut-legal-date {
	margin-top: 34px;
	font-size: 14px;
	opacity: .7;
}

@media (max-width: 767px) {
	.entry-content .cut-legal {
		padding: 22px 20px 56px;
	}
}

/* Footer bottom line: links to the terms pages. */
.site-footer .ast-footer-copyright a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .cut-legal {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

/* Computer view: the two links in the footer stay side by side on one line. */
@media (min-width: 922px) {
	.site-footer .ast-footer-copyright a {
		font-size: 14px;
		white-space: nowrap;
	}
	.site-footer .ast-footer-copyright p {
		white-space: nowrap;
	}
}

/* --- Logo: a vector drawing (img/logo.svg, made by tools/logo_svg.py) instead of the small
   picture, so it stays sharp at every size and on every screen. Header (computer + phone) and footer. */
.site-header .custom-logo-link img,
.site-footer img.wp-image-1246 {
	content: url(img/logo.svg);
}

/* Computer view: header logo a bit bigger (120px instead of 90px) so the thin lines read sharper.
   The negative margin keeps the menu bar exactly the same height as before. */
@media (min-width: 922px) {
	.site-header .custom-logo-link img {
		width: 120px !important;
		max-width: 120px !important;
		margin: -8px 0 !important;
	}
}

/* Footer: the company line is its own paragraph under the contact details. */
.site-footer .cut-footer-company {
	margin: 14px 0 0;
}

/* Computer view: the footer menu (with the social icons) sits in the middle of the footer's height. */
@media (min-width: 922px) {
	.site-footer .site-footer-above-section-4 {
		align-self: center;
	}
}

/* Computer view: the "Avatud kokkuleppel" column also sits in the middle of the footer's height. */
@media (min-width: 922px) {
	.site-footer .site-footer-above-section-3 {
		align-self: center;
	}
}

/* Meist page on phones: the second salon photo sits between the two blocks of text
   (photo, text, photo, text) instead of after all the text. Computer view is unchanged. */
@media (max-width: 767px) {
	.entry-content .cut-split > .cut-split-media:first-child { order: 1; }
	.entry-content .cut-split > .cut-split-text { order: 2; }
	.entry-content .cut-split > .cut-split-media:last-child { order: 3; }
	.entry-content .cut-split > .cut-split-text + .cut-split-text { order: 4; }
}

/* Meist page on phones: even gaps. 24px between every photo and the text next to it
   (and under the top photo and the "asutaja" heading), ~54px before the "asutaja" section. */
@media (max-width: 767px) {
	.entry-content .cut-split {
		margin-top: 4px;
		margin-bottom: 0;
		padding-bottom: 0;
	}
	.entry-content .cut-split > .cut-split-text,
	.entry-content .cut-split > .cut-split-text + .cut-split-text {
		padding-top: 14px;
		padding-bottom: 14px;
	}
	.entry-content .cut-split > .cut-split-text p:last-child {
		margin-bottom: 0;
	}
	.entry-content .cut-founder h2 {
		margin-bottom: 24px;
	}
	.entry-content .cut-founder > .cut-founder-text {
		padding: 14px 10px 10px;
	}
}

/* Meist page on phones: the second salon photo is shown whole (it is a wide photo;
   before it was cut to a tall box, which hid its sides). */
@media (max-width: 767px) {
	.entry-content .cut-split > .cut-split-media:last-child .wp-block-image img {
		height: auto;
	}
}

/* --- Pikendused: before / after / styled photos in a row, with handwritten captions ---- */
.entry-content .cut-ba {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 56px 12px 0;
}

.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .cut-ba {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

.entry-content .cut-ba .cut-ba-item {
	margin: 0;
}

.entry-content .cut-ba .wp-block-image {
	margin: 0;
	overflow: hidden;
	border-radius: 10px;
}

/* Photos are shown slightly zoomed in, so the hair fills more of the frame. */
.entry-content .cut-ba .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transform: scale(1.12);
	transform-origin: 50% 45%;
}

.entry-content .cut-ba .cut-ba-caption {
	margin: 10px 0 0;
	text-align: center;
	font-family: "Vujahday Script", handwriting;
	font-size: 26px;
	line-height: 1.2;
}

.entry-content .cut-ba + .cut-packs {
	padding-top: 48px;
}

@media (max-width: 767px) {
	.entry-content .cut-ba {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		padding: 36px 20px 0;
	}
	.entry-content .cut-ba .cut-ba-item:last-child {
		grid-column: 1 / -1;
	}
	.entry-content .cut-ba .cut-ba-item:last-child .wp-block-image img {
		aspect-ratio: 4 / 5;
	}
	.entry-content .cut-ba .cut-ba-caption {
		margin-top: 6px;
		font-size: 22px;
	}
	.entry-content .cut-ba .cut-ba-item:first-child,
	.entry-content .cut-ba .cut-ba-item:nth-child(2) {
		margin-bottom: 6px;
	}
}

/* Phone: the large "Stiliseeritud" photo is not zoomed, so the top of the head is not cut off. */
@media (max-width: 767px) {
	.entry-content .cut-ba .cut-ba-item:last-child .wp-block-image img {
		aspect-ratio: 3 / 4;
		transform: none;
	}
}

/* Galerii on computers: three photos side by side (was four), so each photo is bigger. */
@media (min-width: 1025px) {
	.entry-content .cut-gallery {
		columns: 3;
	}
}

/* Pikendused: the "Stiliseeritud" photo is never zoomed in. */
.entry-content .cut-ba .cut-ba-item:last-child .wp-block-image img {
	transform: none;
}

/* Galerii on computers: wider photo area, so less empty space at the sides (was 1180px). */
@media (min-width: 1025px) {
	.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .cut-gallery {
		max-width: 1360px;
	}
}

/* --- "Lehte ei leitud" (page not found) ---------------------------------- */
.cut-404 {
	box-sizing: border-box;
	max-width: 720px;
	margin: 0 auto;
	padding: 40px 20px 90px;
	text-align: center;
}

.cut-404 .cut-page-title {
	padding: 30px 0 0;
}

.cut-404 p {
	margin: 18px 0 30px;
}

.cut-404 .cut-404-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}