/* =========================================================================
   The Coffee Store: design styles for Elementor (free) widgets.
   Pages built in Elementor add these classes under Advanced > CSS Classes.
   Anything set in a widget's Style tab overrides these defaults.
   ========================================================================= */

/* Headings -------------------------------------------------------------- */

.elementor-widget.tcs-el-display .elementor-heading-title {
	font-family: var(--tcs-font-display);
	font-weight: 800;
	font-size: clamp(3.25rem, 7vw, 6.5rem);
	line-height: .95;
	letter-spacing: -0.04em;
	color: var(--tcs-ink);
}
.elementor-widget.tcs-el-h2 .elementor-heading-title {
	font-family: var(--tcs-font-display);
	font-weight: 800;
	font-size: 44px;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--tcs-ink);
}
.elementor-widget.tcs-el-h2--xl .elementor-heading-title { font-size: 52px; line-height: 1; }
.elementor-widget.tcs-el-chip .elementor-heading-title {
	display: inline-block;
	border: 1px solid var(--tcs-line-strong);
	border-radius: var(--tcs-r-pill);
	padding: 6px 14px;
	font-family: var(--tcs-font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tcs-muted);
}
.elementor-widget.tcs-el-eyebrow .elementor-heading-title {
	font-family: var(--tcs-font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tcs-muted);
}
.elementor-widget.tcs-el-eyebrow--accent .elementor-heading-title { color: var(--acc); }
.elementor-widget.tcs-el-stepnum .elementor-heading-title {
	font-family: var(--tcs-font-display);
	font-weight: 800;
	font-size: 40px;
	line-height: 1.1;
	color: var(--acc);
}
.elementor-widget.tcs-el-strong .elementor-heading-title {
	font-family: var(--tcs-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--tcs-ink);
}
.elementor-widget.tcs-el-strong--lg .elementor-heading-title { font-size: 20px; line-height: 1.3; }
.elementor-widget.tcs-el-small .elementor-heading-title {
	font-family: var(--tcs-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--tcs-muted);
}

/* Text ------------------------------------------------------------------ */

.elementor-widget.tcs-el-lead { font-family: var(--tcs-font-body); font-size: 19px; line-height: 1.5; color: var(--tcs-muted); }
.elementor-widget.tcs-el-lead--sm { font-size: 18px; }
.elementor-widget.tcs-el-muted { font-family: var(--tcs-font-body); font-size: 16px; line-height: 1.5; color: var(--tcs-muted); }
.elementor-widget:is(.tcs-el-lead, .tcs-el-muted, .tcs-el-trust) p { margin: 0; }
.elementor-widget.tcs-el-trust { font-family: var(--tcs-font-body); font-size: 14px; color: var(--tcs-muted); }
.elementor-widget.tcs-el-trust :is(.elementor-widget-container, p) { display: flex; flex-wrap: wrap; gap: 24px; }

/* Buttons --------------------------------------------------------------- */

.elementor-widget.tcs-el-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--tcs-r-pill);
	font-family: var(--tcs-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}
.elementor-widget.tcs-el-btn .elementor-button:hover { transform: translateY(-2px); }
.elementor-widget.tcs-el-btn .elementor-button:active { transform: translateY(0) scale(.97); }
.elementor-widget.tcs-el-btn--solid .elementor-button { position: relative; overflow: hidden; background: var(--acc); color: var(--tcs-bg); }
.elementor-widget.tcs-el-btn--solid .elementor-button:hover { filter: brightness(1.08); box-shadow: 0 14px 30px -12px var(--acc); color: var(--tcs-bg); }
.elementor-widget.tcs-el-btn--solid .elementor-button::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform .7s ease;
}
.elementor-widget.tcs-el-btn--solid .elementor-button:hover::after { transform: translateX(120%); }
.elementor-widget.tcs-el-btn--ghost .elementor-button { background: transparent; border: 1px solid var(--tcs-border); color: var(--tcs-ink); }
.elementor-widget.tcs-el-btn--ghost .elementor-button:hover { background: var(--tcs-raised); border-color: var(--tcs-ink); color: var(--tcs-ink); }
.elementor-widget.tcs-el-link .elementor-button {
	padding: 0;
	min-height: 0;
	background: none;
	border-radius: 0;
	font-family: var(--tcs-font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--tcs-ink);
}
.elementor-widget.tcs-el-link .elementor-button:hover { color: var(--acc); text-decoration: underline; text-underline-offset: 4px; }

/* Containers ------------------------------------------------------------ */

.e-con.tcs-hero__media { aspect-ratio: 4 / 4.4; overflow: hidden; }
.e-con.tcs-hero__media > .elementor-widget-image { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.e-con.tcs-hero__media > .elementor-widget-image :is(.elementor-widget-container, img) { width: 100%; height: 100%; }
.e-con.tcs-hero__media > .elementor-widget-image img { object-fit: cover; border-radius: 0; }
.e-con.tcs-hero__media > .elementor-widget-shortcode { position: static; }
.e-con.tcs-step, .e-con.tcs-plan { transition: transform .4s var(--tcs-ease); }

/* Data blocks from shortcodes */
.tcs-guides { gap: 24px; }
.elementor-widget-shortcode .tcs-steps { margin-bottom: 0; }

/* Responsive (design breakpoints) --------------------------------------- */

@media (max-width: 720px) {
	.elementor-widget:is(.tcs-el-h2, .tcs-el-h2--xl) .elementor-heading-title { font-size: 2rem; }
}
@media (hover: none) {
	.elementor-widget.tcs-el-btn .elementor-button:hover { transform: none; }
}