/* Home page refresh (Shlomi, 2026-11-08). Loaded only on the front page (functions.php),
   after landing-consult.css, so the home page shares the landing pages' look:
   solid black buttons that turn rose, Didot headings, the row of Reels.
   The page itself is still built in Elementor (page 10); this file only restyles it.
   Element IDs (.elementor-element-xxxxxxx) are the Elementor sections of page 10. */

body.home {
	--cc-ink: #111;
	--cc-rose: #c46470;
	--cc-blush: #f8eeee;
}

/* Buttons: BOOK NOW (opens the in-salon / virtual panel), VIEW WIGS, ORDER ONLINE. */
body.home .elementor-10 .btn.btnno,
body.home .elementor-10 .elementor-button {
	display: inline-block;
	padding: 15px 30px;
	border: 1px solid var(--cc-ink);
	border-radius: 0;
	background: var(--cc-ink);
	color: #fff !important;
	font-family: 'DINNextW01', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: background .2s, border-color .2s, color .2s;
}
body.home .elementor-10 .btn.btnno:hover,
body.home .elementor-10 .btn.btnno:focus-visible,
body.home .elementor-10 .elementor-button:hover,
body.home .elementor-10 .elementor-button:focus-visible {
	background: var(--cc-rose);
	border-color: var(--cc-rose);
	color: #fff !important;
}

/* Hero: a line about the free consultation and a booking button under the headline. */
body.home .elementor-element-576996e {
	text-align: center;
}
/* Elementor centres the hero text on a fixed point, so these hang just below the
   original text (absolute, inside its transformed box) instead of pushing it up. */
body.home .elementor-element-576996e .cc-home-hero-actions {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	text-align: center;
}
body.home .elementor-element-576996e .cc-home-hero-note {
	margin: 16px auto 14px;
	color: #fff;
	font-family: 'DINNextW01', sans-serif;
	font-size: clamp(17px, 1.6vw, 21px);
	font-weight: 500;
	letter-spacing: .04em;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 2px 18px rgba(0, 0, 0, .55);
}
@media (min-width: 922px) {
	/* One line on computers: the note, then the button. */
	body.home .elementor-element-576996e .cc-home-hero-actions {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 22px;
		padding-top: 22px;
	}
	body.home .elementor-element-576996e .cc-home-hero-note {
		margin: 0;
	}
}
body.home .elementor-10 .elementor-element-576996e .cc-home-hero-cta {
	background: #fff;
	border-color: #fff;
	color: var(--cc-ink) !important;
}
body.home .elementor-10 .elementor-element-576996e .cc-home-hero-cta:hover,
body.home .elementor-10 .elementor-element-576996e .cc-home-hero-cta:focus-visible {
	background: var(--cc-rose);
	border-color: var(--cc-rose);
	color: #fff !important;
}

/* The films (in place of the Instagram feed): a dark, cinematic band. White Didot
   headline with a light rose accent; four Reels staggered like a film strip on
   computers, a sideways swipe on phones; Instagram as an outlined button. */
body.home .elementor-element-77a33a5 {
	background: #0f0d0c;
}
body.home .cc-home-reels.cc-lp {
	width: 100%;
	max-width: 1180px;
	padding: 0 20px;
}
body.home .cc-home-films {
	padding: 84px 0 76px;
	text-align: center;
}
body.home .cc-home-films .cc-lp-kicker {
	justify-content: center;
	margin-bottom: 18px;
	font-size: 14px;
	letter-spacing: .2em;
	color: #e3a1aa;
}
body.home .cc-home-films .cc-lp-kicker::before {
	background: #e3a1aa;
}
body.home .cc-home-reels .cc-home-films h2 {
	margin: 0 0 14px;
	color: #fff;
	font-size: clamp(40px, 6.4vw, 68px);
	line-height: 1.04;
}
body.home .cc-home-films h2 .cc-accent {
	color: #e3a1aa;
}
body.home .cc-home-films-dek {
	margin: 0 0 40px;
	font-size: 18px;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .72);
}
body.home .cc-home-films-row {
	scrollbar-width: none;
}
body.home .cc-home-films-row::-webkit-scrollbar {
	display: none;
}
body.home .cc-home-films .cc-lpa-reel {
	border-radius: 16px;
	box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
}
body.home .cc-home-films-insta {
	display: inline-block;
	margin-top: 44px;
	padding: 14px 28px;
	border: 1px solid rgba(255, 255, 255, .55);
	color: #fff !important;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background .2s, border-color .2s;
}
body.home .cc-home-films-insta:hover,
body.home .cc-home-films-insta:focus-visible {
	background: var(--cc-rose);
	border-color: var(--cc-rose);
}
@media (max-width: 921px) {
	/* Phones: the row runs to the screen edges so the next film peeks in. */
	body.home .cc-home-films-row {
		margin: 0 -20px;
		padding: 0 20px 6px;
		scroll-padding-left: 20px;
	}
}
@media (min-width: 922px) {
	body.home .cc-home-films {
		padding: 110px 0 96px;
	}
	body.home .cc-home-films .cc-home-films-row {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 22px;
		padding-bottom: 44px;
	}
	body.home .cc-home-films .cc-lpa-reel:nth-child(even) {
		transform: translateY(44px);
	}
	body.home .cc-home-films-insta {
		margin-top: 40px;
	}
}

/* Wig styles: two per row on phones instead of one (nine cards were about four
   phone screens long). The three row containers step aside so the nine cards
   share one grid. */
@media (max-width: 767px) {
	body.home .elementor-element-277de92 {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 14px;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	body.home .elementor-element-277de92 > .e-con,
	body.home .elementor-element-277de92 > .e-con > .e-con-inner {
		display: contents;
	}
	body.home .elementor-element-277de92 .e-con .e-con {
		width: auto !important;
		min-width: 0;
		padding: 0 !important;
		margin: 0 !important;
	}
	body.home .elementor-element-277de92 .elementor-widget-image img {
		width: 100% !important;
	}
	body.home .elementor-element-277de92 .e-con .e-con > .e-con-inner,
	body.home .elementor-element-277de92 .e-con .e-con {
		justify-content: flex-start !important;
		gap: 10px !important;
	}
	body.home .elementor-element-277de92 .elementor-widget-heading,
	body.home .elementor-element-277de92 .elementor-widget-image {
		margin: 0 !important;
	}
	body.home .elementor-element-277de92 .elementor-widget-heading .elementor-heading-title {
		font-size: 13px !important;
		letter-spacing: .06em;
	}
}

/* Testimonials: six video cards, three across on computers and video beside
   quote on phones, instead of a full screen each. Each card is an Elementor
   container whose .e-con-inner holds the video column and the quote column. */
body.home .cc-t {
	--min-height: 0px;
	min-height: 0 !important;
}
body.home .cc-t .elementor-widget-video {
	width: 100% !important;
	max-width: 100% !important;
}
body.home .cc-t .e-hosted-video {
	aspect-ratio: 9 / 16 !important;
	overflow: hidden;
	border-radius: 14px;
	background: #000;
}
body.home .cc-t video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
body.home .cc-t > .e-con-inner > .e-con,
body.home .cc-t .e-con .e-con {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	margin-top: 0 !important;
	--width: 100%;
}
body.home .cc-t > .e-con-inner > .e-con:last-child > .e-con-inner {
	justify-content: flex-start !important;
	gap: 14px !important;
	min-height: 0 !important;
}
body.home .cc-t > .e-con-inner > .e-con:last-child {
	--min-height: 0px;
	min-height: 0 !important;
}
body.home .cc-t .s2 .elementor-heading-title {
	font-size: 26px !important;
	line-height: 1.15 !important;
}
body.home .cc-t :is(.a1, .d11) .elementor-heading-title {
	font-size: 17px !important;
	line-height: 1.35 !important;
}

@media (min-width: 922px) {
	body.home .elementor-10 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		gap: 0 32px; /* only the testimonial cards share a row */
	}
	body.home .elementor-10 > .elementor-element {
		flex: 0 0 100%;
	}
	body.home .elementor-10 > .cc-t {
		flex: 0 0 calc((min(100%, 1140px) - 64px) / 3);
		margin: 0 0 48px;
		padding: 0 !important;
	}
	body.home .cc-t > .e-con-inner {
		flex-direction: column !important;
		gap: 16px !important;
		padding: 0 !important;
	}
	body.home .cc-t .e-hosted-video {
		aspect-ratio: 4 / 5 !important; /* faces stay in frame; the cards stay about one screen tall */
	}
}

@media (max-width: 921px) {
	body.home .cc-t {
		margin: 0 !important;
		padding: 0 16px 36px !important;
	}
	body.home .cc-t > .e-con-inner {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center;
		gap: 14px !important;
		padding: 0 !important;
	}
	body.home .cc-t > .e-con-inner > .e-con:first-child {
		flex: 0 0 42% !important;
		width: 42% !important;
		padding: 0 !important;
	}
	body.home .cc-t > .e-con-inner > .e-con:last-child {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0;
		padding: 0 !important;
	}
	body.home .cc-t .s2 .elementor-heading-title {
		font-size: 21px !important;
	}
	body.home .cc-t :is(.a1, .d11) .elementor-heading-title {
		font-size: 15px !important;
	}
}

/* Opener of the testimonials: heading and the fitting clip. Phones: heading, then
   the clip. Computers: clip on the left, heading on the right. The old
   "Testimonials" heading section is hidden (the opener carries the word). */
body.home .cc-home-opener.cc-lp {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
	align-items: center;
	width: 100%;
	max-width: 980px;
	padding: 72px 20px 48px;
	text-align: center;
}
body.home .cc-home-opener .cc-lp-kicker {
	justify-content: center;
}
body.home .cc-home-opener h2 {
	margin: 0 0 14px;
	font-size: clamp(32px, 5vw, 48px);
	line-height: 1.1;
}
body.home .cc-home-opener-text p:not(.cc-lp-kicker) {
	margin: 0 auto;
	max-width: 30em;
	font-size: 18px;
	line-height: 1.55;
	color: #555;
}
body.home .cc-home-opener-media {
	justify-self: center;
	margin: 0 !important;
	width: min(280px, 70vw);
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: 18px;
	background: #000;
	box-shadow: 0 18px 50px rgba(60, 40, 30, .14);
}
body.home .cc-home-opener-media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (min-width: 922px) {
	body.home .cc-home-opener.cc-lp {
		grid-template-columns: 340px minmax(0, 1fr);
		gap: 64px;
		padding: 96px 20px 64px;
		text-align: left;
	}
	body.home .cc-home-opener-media {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		width: 340px;
	}
	body.home .cc-home-opener .cc-lp-kicker {
		justify-content: flex-start;
	}
	body.home .cc-home-opener-text p:not(.cc-lp-kicker) {
		margin: 0;
	}
}

/* Toppers: Shlomi's headline beside the topper clip, after the wig styles. Built like
   the opener below it but mirrored: clip on the right on computers. */
body.home .cc-home-toppers.cc-lp {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
	align-items: center;
	width: 100%;
	max-width: 980px;
	padding: 72px 20px 24px;
	text-align: center;
}
body.home .cc-home-toppers .cc-lp-kicker {
	justify-content: center;
}
body.home .cc-home-toppers h2 {
	margin: 0 0 16px;
	font-size: clamp(30px, 4.6vw, 44px);
	line-height: 1.12;
}
body.home .cc-home-toppers-text p:not(.cc-lp-kicker) {
	margin: 0 auto 24px;
	max-width: 30em;
	font-size: 18px;
	line-height: 1.55;
	color: #555;
}
body.home .cc-home-toppers-media {
	justify-self: center;
	margin: 0 !important;
	width: min(280px, 70vw);
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: 18px;
	background: #000;
	box-shadow: 0 18px 50px rgba(60, 40, 30, .14);
}
body.home .cc-home-toppers-media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (min-width: 922px) {
	body.home .cc-home-toppers.cc-lp {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 64px;
		padding: 96px 20px 32px;
		text-align: left;
	}
	body.home .cc-home-toppers-media {
		justify-self: end;
		width: 340px;
	}
	body.home .cc-home-toppers .cc-lp-kicker {
		justify-content: flex-start;
	}
	body.home .cc-home-toppers-text p:not(.cc-lp-kicker) {
		margin: 0 0 24px;
	}
}

/* Founder photo ("I'm Shlomi"): the landing pages' photo, with rounded corners. */
body.home .elementor-element-e227694 img {
	left: 0 !important; /* style.css nudged the old cutout photo 48px left */
	border-radius: 18px;
}
@media (max-width: 767px) {
	body.home .elementor-element-e227694 {
		padding: 0 16px;
		box-sizing: border-box;
	}
	body.home .elementor-element-e227694 img {
		width: 100% !important;
		height: auto !important;
	}
}

/* Hero: "custom made Human Hair Wigs" links to the Custom Wigs page (2026-11-09).
   White like the rest of the line, with a thin underline. */
body.home .elementor-element-576996e h2 a.cc-hero-link {
	color: inherit !important;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}
body.home .elementor-element-576996e h2 a.cc-hero-link:hover,
body.home .elementor-element-576996e h2 a.cc-hero-link:focus-visible {
	opacity: .8;
}