/* Ferla custom Elementor widgets — shared styles.
   Selectors are scoped under .ferla-* so they never collide with Elementor/theme CSS. */

/* Brand font on every Ferla widget (matches the rest of the site / the designs). */
.ferla-main-section,
.ferla-gallery,
.ferla-delivers,
.ferla-financing,
.ferla-dimensions,
.ferla-accordion,
.ferla-article,
.ferla-designed,
.ferla-calc,
.ferla-addons,
.ferla-why,
.ferla-mobstyle,
.ferla-reviews,
.ferla-alts,
.ferla-colls {
	font-family: 'VisbyRoundCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   Shared content container — every Ferla section aligns its content edges to
   the SAME width so stacked sections line up perfectly. Full-bleed-background
   sections (hero, financing, calculator) keep an edge-to-edge background but
   cap their inner content to this same width.
   --------------------------------------------------------------------------- */
.ferla-main-section,
.ferla-gallery,
.ferla-delivers,
.ferla-financing,
.ferla-dimensions,
.ferla-accordion,
.ferla-article,
.ferla-designed,
.ferla-calc,
.ferla-addons,
.ferla-why,
.ferla-mobstyle,
.ferla-reviews,
.ferla-alts,
.ferla-colls {
	--ferla-cw: 1430px;
	--ferla-pad: clamp(16px, 5vw, 64px);
}

/* Border-box on every section container + inner wrapper so the visible content
   box is EXACTLY --ferla-cw (padding sits inside) and all section edges align. */
.ferla-main-section__inner,
.ferla-financing__inner,
.ferla-calc__grid,
.ferla-gallery,
.ferla-delivers,
.ferla-dimensions,
.ferla-accordion,
.ferla-article,
.ferla-designed,
.ferla-addons,
.ferla-why,
.ferla-mobstyle,
.ferla-reviews,
.ferla-alts,
.ferla-colls {
	box-sizing: border-box;
}

/* ============================================================ Main Section (hero) */
.ferla-main-section {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 640px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
	color: #fff;
}

.ferla-main-section__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* No dimming by default — the Overlay Color control fills this if needed. */
	background: transparent;
}

.ferla-main-section__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	width: 100%;
	max-width: var(--ferla-cw);
	margin: 0 auto;
	padding: 68px var(--ferla-pad);
	text-align: left;
}

.ferla-main-section__title {
	margin: 0;
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.ferla-main-section__price {
	font-size: clamp(16px, 1.6vw, 20px);
	font-weight: 600;
	opacity: 0.95;
}

.ferla-main-section__tagline {
	font-size: clamp(15px, 1.4vw, 18px);
	font-weight: 400;
	opacity: 0.92;
	max-width: 36ch;
}

.ferla-main-section__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 10px;
}

.ferla-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 30px;
	border: 0;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	will-change: transform;
	transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}

/* Shine sweep that crosses the button on hover */
.ferla-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
	transform: translateX(-130%);
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	pointer-events: none;
}

.ferla-btn:hover {
	transform: translateY(-2px);
}

.ferla-btn:hover::after {
	transform: translateX(130%);
}

.ferla-btn:active {
	transform: translateY(0) scale(0.97);
	transition-duration: 0.08s;
}

.ferla-btn--light {
	background: #fff;
	color: #1a1a1a;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.ferla-btn--light:hover {
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

.ferla-btn--brand {
	background: #F93922;
	color: #fff;
	box-shadow: 0 1px 2px rgba(249, 57, 34, 0.25);
}

.ferla-btn--brand:hover {
	background: #e22f1b;
	box-shadow: 0 12px 28px rgba(249, 57, 34, 0.42);
}

.ferla-btn--brand::after {
	background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
	.ferla-btn,
	.ferla-btn::after {
		transition: none;
	}
	.ferla-btn:hover {
		transform: none;
	}
	.ferla-btn:hover::after {
		transform: translateX(-130%);
	}
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 767px) {
	.ferla-main-section {
		min-height: 460px;
	}
	.ferla-main-section__inner {
		padding: 28px 20px;
	}
	.ferla-main-section__actions {
		width: 100%;
	}
	.ferla-btn {
		flex: 1 1 auto;
		text-align: center;
	}
}

/* ============================================================ Gallery */
.ferla-gallery {
	width: 100%;
	max-width: var(--ferla-cw);
	margin: 0 auto;
	padding: 68px clamp(16px, 5vw, 64px);
}

.ferla-gallery__header {
	margin-bottom: 28px;
}

.ferla-gallery__heading {
	margin: 0 0 8px;
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 600;
	line-height: 1.1;
}

.ferla-gallery__intro {
	margin: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
}

.ferla-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* !important beats the Elementor per-instance Gap control (higher specificity). */
	gap: 10px !important;
}

.ferla-gallery__item {
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
}

.ferla-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

@media (max-width: 1024px) {
	.ferla-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.ferla-gallery { padding: 48px 16px; }
	/* !important overrides the Elementor per-instance Columns/Gap controls
	   (higher specificity) so mobile stays 2-up with a tight gap. */
	.ferla-gallery__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 7px !important; }
	.ferla-gallery__item { border-radius: 8px; }
	.ferla-gallery__intro { font-size: 15px; }
}

/* ============================================================ Ferla Delivers (center carousel) */
.ferla-delivers {
	width: 100%;
	max-width: var(--ferla-cw);
	margin: 0 auto;
	padding: 76px clamp(16px, 5vw, 64px);
	text-align: center;
	overflow: hidden;
}

.ferla-delivers__heading {
	margin: 0 auto 14px;
	font-size: clamp(28px, 3.6vw, 46px);
	font-weight: 600;
	line-height: 1.12;
}

.ferla-delivers__intro {
	margin: 0 auto 36px;
	max-width: 760px;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.55;
}

.ferla-delivers__carousel {
	position: relative;
}

/* Wide white fade on each edge so the side images dissolve into the page */
.ferla-delivers__carousel::before,
.ferla-delivers__carousel::after {
	content: "";
	position: absolute;
	top: -10px;
	bottom: -10px;
	width: clamp(70px, 22%, 360px);
	z-index: 2;
	pointer-events: none;
}

.ferla-delivers__carousel::before {
	left: 0;
	background: linear-gradient(to right, #fff 22%, rgba(255, 255, 255, 0) 100%);
}

.ferla-delivers__carousel::after {
	right: 0;
	background: linear-gradient(to left, #fff 22%, rgba(255, 255, 255, 0) 100%);
}

.ferla-delivers__viewport {
	overflow: hidden;
}

.ferla-delivers__track {
	display: flex;
	gap: clamp(16px, 2.5vw, 32px);
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.ferla-delivers__slide {
	margin: 0;
	flex: 0 0 58%;
	opacity: 0.4;
	transform: scale(0.84);
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.6s ease;
	cursor: pointer;
}

.ferla-delivers__slide.is-active {
	opacity: 1;
	transform: scale(1);
	cursor: default;
}

.ferla-delivers__slide img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	border-radius: 18px;
	object-fit: cover;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
	-webkit-user-drag: none;
	user-select: none;
	pointer-events: none;
}

.ferla-delivers__viewport {
	overflow: hidden;
	touch-action: pan-y;
	cursor: grab;
}

.ferla-delivers__viewport:active { cursor: grabbing; }

@media (max-width: 768px) {
	.ferla-delivers__slide { flex: 0 0 78%; }
	.ferla-delivers__carousel::before,
	.ferla-delivers__carousel::after { width: clamp(40px, 14%, 120px); }
}

@media (max-width: 600px) {
	.ferla-delivers { padding: 44px 12px; }
	.ferla-delivers__intro { font-size: 15px; margin-bottom: 24px; }
	/* show the centre image plus clear peeks of the neighbours (more than one) */
	.ferla-delivers__slide { flex: 0 0 62%; }
	.ferla-delivers__carousel::before,
	.ferla-delivers__carousel::after { width: clamp(16px, 7%, 46px); }
}

@media (prefers-reduced-motion: reduce) {
	.ferla-delivers__track,
	.ferla-delivers__slide { transition: none; }
}

/* ============================================================ Financing */
.ferla-financing {
	position: relative;
	display: flex;
	min-height: 420px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
	color: #fff;
}

.ferla-financing__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.34);
	pointer-events: none;
}

.ferla-financing__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 14px;
	width: 100%;
	max-width: var(--ferla-cw);
	margin: 0 auto;
	padding: 68px var(--ferla-pad);
}

.ferla-financing__heading {
	margin: 0;
	max-width: 18ch;
	font-size: clamp(26px, 3.4vw, 44px);
	font-weight: 700;
	line-height: 1.12;
}

.ferla-financing__line {
	font-size: clamp(18px, 1.8vw, 25px);
	font-weight: 400;
}

.ferla-financing__btn {
	margin-top: 8px;
	background: #F93922;
	color: #fff;
	padding: 15px 25px;
}

@media (max-width: 600px) {
	.ferla-financing__inner { padding: 32px 20px; align-items: center; text-align: center; }
	.ferla-financing__heading { max-width: none; }
}

/* ============================================================ Dimensions */
.ferla-dimensions {
	width: 100%;
	max-width: var(--ferla-cw);
	margin: 0 auto;
	padding: 68px clamp(16px, 5vw, 64px);
}

.ferla-dimensions__heading {
	margin: 0 0 24px;
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 600;
	color: #000;
}

.ferla-dimensions__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
}

.ferla-dimensions__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.ferla-dimensions__table th,
.ferla-dimensions__table td {
	padding: 14px 8px;
	text-align: left;
	border-bottom: 1px solid #e6e6e6;
	vertical-align: top;
}

.ferla-dimensions__table th {
	font-weight: 600;
	width: 60%;
}

.ferla-dimensions__table td {
	font-weight: 400;
	text-align: right;
	white-space: nowrap;
}

.ferla-dimensions__images {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ferla-dimensions__images img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.ferla-dimensions__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.ferla-dimensions__btn--solid {
	background: #141414;
	color: #fff;
}

.ferla-dimensions__btn--outline {
	background: transparent;
	color: #000;
	border: 1px solid #f90000;
}

.ferla-dimensions__btn--outline:hover {
	background: #ffecec;
}

@media (max-width: 768px) {
	.ferla-dimensions { padding: 32px 16px; }
	.ferla-dimensions__layout { grid-template-columns: 1fr; }
	.ferla-dimensions__table td { white-space: normal; }
}

/* ============================================================ Accordion (Specs / FAQ) */
.ferla-accordion {
	width: 100%;
	max-width: var(--ferla-cw);
	margin: 0 auto;
	padding: 68px clamp(16px, 5vw, 64px);
}

.ferla-accordion__heading {
	margin: 0 0 20px;
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 600;
	color: #000;
}

.ferla-accordion__item {
	border-top: 1px solid #e6e6e6;
}

.ferla-accordion__item:last-child {
	border-bottom: 1px solid #e6e6e6;
}

.ferla-accordion__summary {
	position: relative;
	display: block;
	padding: 20px 44px 20px 0;
	font-size: 18px;
	font-weight: 600;
	color: #141414;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.ferla-accordion__summary::-webkit-details-marker { display: none; }

.ferla-accordion__summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 34px;
	height: 34px;
	margin-top: -17px;
	border-radius: 50%;
	/* whiteish circle with a black "+" drawn on top (two gradients) that rotates to "×" */
	background-color: #f1f1f1;
	background-image:
		linear-gradient(#111, #111),
		linear-gradient(#111, #111);
	background-size: 13px 2px, 2px 13px;
	background-position: center, center;
	background-repeat: no-repeat;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
}

.ferla-accordion__summary:hover::after {
	background-color: #e7e7e7;
}

.ferla-accordion__item[open] > .ferla-accordion__summary::after {
	transform: rotate(135deg);
}

.ferla-accordion__body {
	height: 0;
	overflow: hidden;
	transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Closed (no JS / details default) keeps it collapsed; JS drives height when open. */
.ferla-accordion__item[open] > .ferla-accordion__body {
	height: auto;
}

.ferla-accordion__body-inner {
	padding: 2px 0 24px;
	font-size: 16px;
	line-height: 1.6;
	color: #555;
}

.ferla-accordion__body-inner > *:first-child { margin-top: 0; }
.ferla-accordion__body-inner table { width: 100%; border-collapse: collapse; }
.ferla-accordion__body-inner table td,
.ferla-accordion__body-inner table th { padding: 8px; border: 1px solid #e6e6e6; }

/* Dimensions table injected inside a Specifications "Dimensions" toggle */
.ferla-dim-in-acc { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; }
.ferla-dim-in-acc .ferla-dimensions__actions { grid-column: 1 / -1; margin-top: 8px; }
@media (max-width: 768px) {
	.ferla-dim-in-acc { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 600px) {
	.ferla-accordion { padding: 32px 16px; }
}

/* ============================================================ Article */
.ferla-article {
	width: 100%;
	max-width: var(--ferla-cw);
	margin: 0 auto;
	padding: 40px clamp(16px, 5vw, 64px);
}

.ferla-article__breadcrumbs {
	margin-bottom: 18px;
	font-size: 14px;
	color: #9a9a9a;
}

.ferla-article__breadcrumbs a { color: #6a6a6a; text-decoration: none; }
.ferla-article__breadcrumbs a:hover { text-decoration: underline; }

.ferla-article__body {
	font-size: 16px;
	line-height: 1.7;
	color: #333;
}

/* Pure-CSS read more — hidden checkbox toggles the clamp (no JavaScript). */
.ferla-article__cb {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.ferla-article__body.is-collapsible {
	max-height: 15em;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(#000 60%, transparent 100%);
	mask-image: linear-gradient(#000 60%, transparent 100%);
	transition: max-height 0.45s ease;
}

.ferla-article__cb:checked ~ .ferla-article__body.is-collapsible {
	max-height: 240em;
	-webkit-mask-image: none;
	mask-image: none;
}

.ferla-article__toggle {
	display: inline-block;
	margin-top: 14px;
	font-weight: 600;
	color: #F93922;
	cursor: pointer;
	text-decoration: none;
	user-select: none;
}

.ferla-article__toggle::after { content: var(--more, "Read More \2192"); }
.ferla-article__cb:checked ~ .ferla-article__toggle::after { content: var(--less, "Show Less \2191"); }
.ferla-article__cb:focus-visible ~ .ferla-article__toggle { outline: 2px solid #F93922; outline-offset: 3px; }

.ferla-article__disclaimer {
	margin-top: 32px;
	font-size: 13px;
	line-height: 1.5;
	color: #9a9a9a;
}

@media (max-width: 768px) {
	.ferla-article__body.is-collapsible { max-height: 32em; }
}

@media (max-width: 600px) {
	.ferla-article { padding: 28px 16px; }
}

/* ============================================================ Designed By You (bento) */
.ferla-designed {
	width: 100%;
	max-width: var(--ferla-cw);
	margin: 0 auto;
	padding: 76px clamp(16px, 5vw, 64px);
	--fd-radius: 20px;
	--fd-gap: 16px;
}

.ferla-designed__top {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--fd-gap);
	align-items: stretch;
	margin-bottom: var(--fd-gap);
}

/* No BrandingGIF/media on this product -> intro card fills the whole row. */
.ferla-designed__top > .ferla-designed__intro:only-child {
	grid-column: 1 / -1;
}

.ferla-designed__intro {
	background: #f4f4f5;
	border-radius: var(--fd-radius);
	padding: clamp(24px, 3vw, 44px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ferla-designed__heading {
	margin: 0 0 16px;
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #111;
}

.ferla-designed__lead {
	margin: 0 0 22px;
	font-size: 17px;
	line-height: 1.6;
	color: #555;
	max-width: 52ch;
}

.ferla-designed__benefits {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ferla-designed__benefits li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	line-height: 1.45;
	color: #333;
}

.ferla-designed__benefits li strong { color: #111; font-weight: 700; }

.ferla-designed__bullet {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-top: 0;
	color: #111;
}

.ferla-designed__bullet svg { width: 24px; height: 24px; fill: currentColor; }
.ferla-designed__bullet i { font-size: 22px; color: currentColor; }

.ferla-designed__media-wrap {
	overflow: hidden;
	border-radius: var(--fd-radius);
	min-height: 280px;
	background: #ddd;
}

.ferla-designed__media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ferla-designed__cards {
	display: grid;
	/* adapts to the per-product card count (3 cards + CTA = 4 cols; fewer cards = wider cells) */
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--fd-gap);
}

.ferla-designed__card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 300px;
	padding: 22px;
	border-radius: var(--fd-radius);
	background: #ddd center / cover no-repeat;
	overflow: hidden;
	transition: transform 0.3s ease;
}

.ferla-designed__card:hover { transform: translateY(-4px); }

.ferla-designed__card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 60%);
}

.ferla-designed__card-title {
	position: relative;
	z-index: 1;
	font-size: 19px;
	font-weight: 700;
	color: #fff;
}

.ferla-designed__cta-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 300px;
	padding: 32px 28px;
	border-radius: var(--fd-radius);
	background: #f4f4f5;
	color: #111;
}

.ferla-designed__cta-heading {
	margin: 0 0 8px;
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 600;
	color: #111;
}

.ferla-designed__cta-text {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.5;
	color: #666;
	max-width: 30ch;
}

.ferla-designed__cta-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 240px;
}

.ferla-designed__cta-actions .ferla-btn {
	width: 100%;
}

.ferla-designed__btn--solid {
	background: #F93922;
	color: #fff;
}

.ferla-designed__btn--ghost {
	background: #fff;
	color: #111;
	border: 1px solid #dcdcdc;
}

.ferla-designed__btn--ghost:hover {
	border-color: #111;
	background: #fff;
}

@media (max-width: 1024px) {
	.ferla-designed__cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
	.ferla-designed__top { grid-template-columns: 1fr; }
	.ferla-designed__media-wrap { min-height: 220px; }
}

@media (max-width: 560px) {
	.ferla-designed { padding: 44px 16px; }
	.ferla-designed__cards { grid-template-columns: 1fr; }
	/* keep only the GIF + the "Build Your Ferla" card: hide the benefit bullets
	   and the 3 feature image cards; compact the heading/lead. */
	.ferla-designed__benefits { display: none; }
	.ferla-designed__card { display: none; }
	.ferla-designed__cta-card { min-height: 0; padding: 26px 22px; }
	.ferla-designed__heading { font-size: 23px; margin-bottom: 10px; }
	.ferla-designed__lead { font-size: 14px; line-height: 1.5; margin-bottom: 0; }
	.ferla-designed__intro { padding: 22px; }
}

/* ============================================================ Mobile hardening (all widgets) */
.ferla-btn { min-height: 44px; }

/* never let a widget cause horizontal scroll (overflow guard only — must NOT
   set max-width here or it clobbers the shared --ferla-cw container cap above) */
.ferla-gallery,
.ferla-delivers,
.ferla-dimensions,
.ferla-accordion,
.ferla-article,
.ferla-designed,
.ferla-financing { overflow-x: clip; }

@media (max-width: 600px) {
	/* Hero: keep the two CTAs side-by-side (Order Now left, Customize 3D right). */
	.ferla-main-section__actions { width: 100%; flex-wrap: nowrap; gap: 10px; }
	.ferla-main-section__actions .ferla-btn { flex: 1 1 0; width: auto; padding-left: 12px; padding-right: 12px; }
	.ferla-dimensions__actions .ferla-btn { width: 100%; }

	/* Financing CTA: natural-width, centred, and NOT stretched tall — reset the
	   flex:1 from the 767px rule (which grew it vertically inside the column). */
	.ferla-financing .ferla-btn {
		width: auto;
		flex: 0 0 auto;
		align-self: center;
		white-space: nowrap;
		padding: 13px 26px;
	}

	.ferla-main-section__inner,
	.ferla-financing__inner { padding-left: 18px; padding-right: 18px; }

	.ferla-accordion__summary { font-size: 16px; padding-right: 38px; }
	.ferla-dimensions__actions { flex-direction: column; }
	.ferla-dimensions__actions .ferla-btn { text-align: center; }

	.ferla-designed__cta-actions { max-width: none; }
	.ferla-gallery__heading,
	.ferla-accordion__heading,
	.ferla-dimensions__heading { font-size: clamp(24px, 7vw, 32px); }
}

@media (max-width: 400px) {
	.ferla-delivers__slide { flex: 0 0 92%; }
	.ferla-designed__card { min-height: 240px; }
}

/* ============================================================ ROI Calculator */
/* Full-bleed sections use width:100vw, which is ~scrollbar-width wider than the
   visible viewport and would otherwise scroll the page horizontally by a few px.
   Clip horizontal overflow at the root (x-axis only, so vertical scroll +
   position:sticky keep working). This stylesheet only loads on Ferla-widget pages. */
html,
body {
	overflow-x: clip;
}

/* Full-bleed: the RED section spans the whole viewport regardless of the boxed
   Elementor container it's dropped into; the inner .ferla-calc__grid stays capped. */
.ferla-calc {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: clamp(32px, 6vw, 72px) 0;
	/* bright red core radiating out to a deeper red at the edges */
	background: radial-gradient(circle at center, var(--calc-c1, #E13939) 0%, var(--calc-c2, #8E201F) 100%);
	color: #fff;
}

.ferla-calc__grid {
	width: 100%;
	max-width: 1220px;
	margin: 0 auto;
	padding: 0 var(--ferla-pad);
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
}

.ferla-calc__heading {
	margin: 0 0 26px;
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
}

.ferla-calc__field { margin-bottom: 18px; }

.ferla-calc__label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.92);
}

.ferla-calc__label strong { font-weight: 700; color: #fff; }

.ferla-calc__stepper {
	display: flex;
	align-items: stretch;
	gap: 10px;
	background: #fff;
	border-radius: 10px;
	padding: 6px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* .ferla-calc prefix raises specificity above the Elementor kit's bare-<button> styling */
.ferla-calc button.ferla-calc__step {
	flex: 0 0 auto;
	width: 42px;
	min-height: 0;
	border: 0;
	border-radius: 7px;
	background: #fdecea;
	color: #F93922;
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.15s ease, transform 0.08s ease;
}

.ferla-calc button.ferla-calc__step:hover { background: #fbd9d4; }
.ferla-calc button.ferla-calc__step:active { transform: scale(0.92); }

.ferla-calc__inputwrap {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1px;
	color: #111;
}

.ferla-calc__prefix { font-weight: 600; color: #111; font-size: 18px; }

/* Input sizes to its content so the "$" prefix hugs the number while the pair
   stays centred by the flex wrap. field-sizing:content (modern browsers) shrinks
   the field to its digits; a modest min/max keeps a 1-digit value fully visible
   and a huge value from overflowing. Browsers without field-sizing fall back to
   a fixed 5ch box (number still visible, just a little more space after "$"). */
.ferla-calc__inputwrap input {
	width: 5ch;
	max-width: 9ch;
	min-width: 2ch;
	field-sizing: content;
	border: 0;
	background: transparent;
	text-align: left;
	font-size: 18px;
	font-weight: 600;
	font-family: inherit;
	color: #111;
	-moz-appearance: textfield;
	appearance: textfield;
}

.ferla-calc__inputwrap input::-webkit-outer-spin-button,
.ferla-calc__inputwrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ferla-calc__slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.35);
	accent-color: #F93922;
	cursor: pointer;
	margin-top: 8px;
}

.ferla-calc__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 4px solid #F93922;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.ferla-calc__slider::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border: 4px solid #F93922;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}

.ferla-calc__results {
	border: 2px solid rgba(255, 255, 255, 0.6);
	border-radius: 18px;
	padding: clamp(32px, 3.6vw, 56px);
	text-align: center;
}

.ferla-calc__results-title {
	margin: 0 0 22px;
	font-size: clamp(20px, 1.9vw, 26px);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
}

.ferla-calc__result { padding: 18px 0; }
.ferla-calc__result + .ferla-calc__result { border-top: 1px solid rgba(255, 255, 255, 0.18); }

.ferla-calc__result-label {
	display: block;
	margin-bottom: 8px;
	font-size: clamp(17px, 1.5vw, 21px);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
}

.ferla-calc__result-value {
	display: block;
	font-size: clamp(36px, 4vw, 54px);
	font-weight: 700;
	line-height: 1.05;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
	.ferla-calc__grid { grid-template-columns: 1fr; }
}

/* ============================================================ Essential Add-ons */
.ferla-addons {
	width: 100%;
	max-width: var(--ferla-cw);
	margin: 0 auto;
	padding: 76px clamp(16px, 5vw, 64px);
}

.ferla-addons__header { margin-bottom: 28px; }

.ferla-addons__heading {
	margin: 0 0 8px;
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 600;
	color: #111;
}

.ferla-addons__intro {
	margin: 0;
	font-size: 18px;
	color: #666;
}

.ferla-addons__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

/* Card: bg video/image. Idle = white title label over the image so each card is
   identifiable. Hover = an inset, padded, rounded WHITE card slides up from below
   and fades in, carrying BOTH the black title AND the black subtext inside it. */
.ferla-addons__card {
	position: relative;
	display: block;
	min-height: 350px;
	border-radius: 18px;
	background: #ddd center / cover no-repeat;
	overflow: hidden;
	text-decoration: none;
}

/* background video fills the card */
.ferla-addons__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* subtle darken on hover for contrast */
.ferla-addons__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.06);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}
.ferla-addons__card:hover::before { opacity: 1; }

/* idle label: white title over the video, bottom-centre. Fades out on hover. */
.ferla-addons__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 30px;
	z-index: 3;
	padding: 0 22px;
	text-align: center;
	font-size: 1.3rem;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
	transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}
.ferla-addons__card:hover .ferla-addons__label {
	opacity: 0;
	transform: translateY(-10px);
}

/* the white card: smaller, inset from the card edges, padding + rounded corners.
   Hidden below + faded by default, slides up + fades in on hover. */
.ferla-addons__panel {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 22px 24px 24px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
	transform: translateY(calc(100% + 20px));
	opacity: 0;
	transition:
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.45s ease;
}
.ferla-addons__card:hover .ferla-addons__panel {
	transform: translateY(0);
	opacity: 1;
}

/* title + subtext both live INSIDE the white card, both black */
.ferla-addons__ptitle {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: #111;
	text-align: center;
}
.ferla-addons__pdesc {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: #333;
	text-align: center;
}

@media (max-width: 1024px) {
	.ferla-addons__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
	.ferla-addons__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Phone: FULL-WIDTH section (no side banners) + a horizontally-scrollable row of
   SQUARE video cards that reach the screen edges, title + subtext static BELOW. */
@media (max-width: 600px) {
	.ferla-addons {
		max-width: none;
		padding-left: 0;
		padding-right: 0;
	}
	.ferla-addons__header { padding: 0 16px; }

	.ferla-addons__grid {
		display: flex;
		grid-template-columns: none;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding: 0 16px 8px;   /* cards scroll to the edges; small start/end inset */
		scrollbar-width: none;
	}
	.ferla-addons__grid::-webkit-scrollbar { display: none; }

	.ferla-addons__card {
		flex: 0 0 auto;
		width: min(72vw, 260px);
		min-height: 0;
		display: flex;
		flex-direction: column;
		background: none;
		overflow: visible;
		scroll-snap-align: start;
	}

	/* video becomes a square block at the top of the card (not an absolute fill) */
	.ferla-addons__media {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		border-radius: 16px;
	}
	.ferla-addons__card::before { display: none; }
	.ferla-addons__label { display: none; }

	/* panel flows in normally under the square video, always visible */
	.ferla-addons__panel {
		position: static;
		transform: none;
		opacity: 1;
		background: none;
		box-shadow: none;
		border-radius: 0;
		padding: 12px 4px 0;
		align-items: center;
		gap: 5px;
	}
	.ferla-addons__ptitle { font-size: 1.05rem; }
	.ferla-addons__pdesc { font-size: 0.9rem; line-height: 1.45; }
}

@media (prefers-reduced-motion: reduce) {
	.ferla-addons__label,
	.ferla-addons__panel { transition: opacity 0.3s ease; }
}

/* =====================================================================
   Ferla Why — "Why <Product>?" feature grid
   ===================================================================== */
.ferla-why {
	width: 100%;
	box-sizing: border-box;
	/* Full-width gray band; content stays aligned to the shared --ferla-cw box:
	   side padding = the centered-1430 offset + the shared pad on wide screens
	   (matching the capped sections' content edges), just the pad on small ones. */
	padding: clamp(40px, 5vw, 72px) max(var(--ferla-pad), calc((100% - var(--ferla-cw)) / 2 + var(--ferla-pad)));
	background: var(--why-bg, #f2f2f3);
	border-radius: var(--why-radius, 0px);
}

.ferla-why__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp(24px, 6vw, 96px);
	margin-bottom: clamp(32px, 4vw, 56px);
}

.ferla-why__heading {
	margin: 0;
	flex: 1 1 auto;
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.ferla-why__intro {
	flex: 0 1 420px;
	margin: 6px 0 0;
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.5;
	color: #6b6b6b;
}

.ferla-why__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(14px, 1.5vw, 20px) clamp(10px, 1.1vw, 14px);
}

.ferla-why[data-cols="3"] .ferla-why__grid {
	grid-template-columns: repeat(3, 1fr);
}

.ferla-why__card {
	display: flex;
	flex-direction: column;
}

.ferla-why__card-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 18px;
	background: #ececec center/cover no-repeat;
	margin-bottom: 14px;
}

.ferla-why__card-title {
	margin: 0 0 8px;
	font-size: clamp(19px, 1.5vw, 23px);
	font-weight: 600;
	line-height: 1.2;
}

.ferla-why__card-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: #6b6b6b;
}

@media (max-width: 1024px) {
	.ferla-why__grid,
	.ferla-why[data-cols="3"] .ferla-why__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
	.ferla-why { padding: 40px 16px 40px 10px; }
	.ferla-why__header { flex-direction: column; gap: 14px; padding-left: 6px; }
	.ferla-why__intro { flex-basis: auto; }
	.ferla-why__grid,
	.ferla-why[data-cols="3"] .ferla-why__grid { grid-template-columns: 1fr; gap: 16px; }

	/* Horizontal card: square image on the LEFT, title + subtext stacked on the RIGHT. */
	.ferla-why__card {
		display: grid;
		grid-template-columns: 120px 1fr;
		grid-template-rows: auto auto;
		column-gap: 13px;
		align-items: center;
	}
	.ferla-why__card-img {
		grid-row: 1 / 3;
		width: 120px;
		aspect-ratio: 1 / 1;
		margin-bottom: 0;
		align-self: center;
	}
	.ferla-why__card-title { grid-column: 2; align-self: end; margin: 0 0 4px; }
	.ferla-why__card-text  { grid-column: 2; align-self: start; font-size: 13px; line-height: 1.5; }
}

/* =====================================================================
   Ferla Mobile Style — "Serve Mobile in Style" promo
   ===================================================================== */
.ferla-mobstyle {
	width: 100%;
	max-width: var(--ferla-cw);
	margin: 0 auto;
	padding: 84px clamp(16px, 5vw, 64px);
	text-align: center;
	box-sizing: border-box;
}

.ferla-mobstyle__heading {
	margin: 0 auto 14px;
	font-size: clamp(30px, 3.6vw, 46px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.ferla-mobstyle__sub {
	max-width: 720px;
	margin: 0 auto 18px;
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.5;
	color: #6b6b6b;
}

.ferla-mobstyle__price {
	margin: 0 auto 8px;
	font-size: clamp(16px, 1.4vw, 19px);
	font-weight: 600;
	color: #111;
}

.ferla-mobstyle__stage {
	position: relative;
	display: block;
	max-width: 540px;
	margin: 18px auto 0;
}

.ferla-mobstyle__img {
	display: block;
	width: 100%;
	height: auto;
}

/* interactive "+" hotspots: positioned wrapper + button + hover tooltip */
.ferla-mobstyle__hotspot {
	position: absolute;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.ferla-mobstyle__hotspot:hover,
.ferla-mobstyle__hotspot:focus-within {
	z-index: 6;
}

.ferla-mobstyle__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	color: #111;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	animation: ferla-mobstyle-pulse 2.8s ease-in-out infinite;
	transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.ferla-mobstyle__hotspot:hover .ferla-mobstyle__dot,
.ferla-mobstyle__hotspot:focus-within .ferla-mobstyle__dot {
	transform: scale(1.12);
	background: #111;
	color: #fff;
	animation: none;
}

@keyframes ferla-mobstyle-pulse {
	0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(17, 17, 17, 0.18); }
	50%      { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), 0 0 0 10px rgba(17, 17, 17, 0); }
}

/* tooltip popup — above the dot by default, flips to the side near image edges */
.ferla-mobstyle__tip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 14px);
	transform: translate(-50%, 8px);
	width: 200px;
	padding: 10px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
	z-index: 5;
}

/* little arrow */
.ferla-mobstyle__tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 8px solid transparent;
	border-top-color: #fff;
}

.ferla-mobstyle__hotspot.is-left .ferla-mobstyle__tip {
	left: auto;
	right: calc(100% + 14px);
	bottom: 50%;
	transform: translate(8px, 50%);
}
.ferla-mobstyle__hotspot.is-left .ferla-mobstyle__tip::after {
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	border-top-color: transparent;
	border-left-color: #fff;
}

.ferla-mobstyle__hotspot.is-right .ferla-mobstyle__tip {
	left: calc(100% + 14px);
	right: auto;
	bottom: 50%;
	transform: translate(-8px, 50%);
}
.ferla-mobstyle__hotspot.is-right .ferla-mobstyle__tip::after {
	top: 50%;
	left: auto;
	right: 100%;
	transform: translateY(-50%);
	border-top-color: transparent;
	border-right-color: #fff;
}

.ferla-mobstyle__hotspot:hover .ferla-mobstyle__tip,
.ferla-mobstyle__hotspot:focus-within .ferla-mobstyle__tip {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}
.ferla-mobstyle__hotspot.is-left:hover .ferla-mobstyle__tip,
.ferla-mobstyle__hotspot.is-left:focus-within .ferla-mobstyle__tip {
	transform: translate(0, 50%);
}
.ferla-mobstyle__hotspot.is-right:hover .ferla-mobstyle__tip,
.ferla-mobstyle__hotspot.is-right:focus-within .ferla-mobstyle__tip {
	transform: translate(0, 50%);
}

.ferla-mobstyle__tip-img {
	display: block;
	width: 100%;
	height: 120px;
	object-fit: cover;
	border-radius: 8px;
}

.ferla-mobstyle__tip-label {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	color: #111;
}

.ferla-mobstyle__caption {
	margin: 16px auto 0;
	font-size: 14px;
	color: #9a9a9a;
}

.ferla-mobstyle__features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 4vw, 48px);
	max-width: 1100px;
	margin: clamp(36px, 4vw, 56px) auto 0;
}

.ferla-mobstyle__feat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ferla-mobstyle__feat-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	line-height: 1;
	color: #111;
	margin-bottom: 14px;
}

.ferla-mobstyle__feat-icon svg { width: 34px; height: 34px; fill: currentColor; }

.ferla-mobstyle__feat-title {
	margin: 0 0 6px;
	font-size: clamp(17px, 1.4vw, 20px);
	font-weight: 600;
	line-height: 1.2;
}

.ferla-mobstyle__feat-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #9a9a9a;
}

@media (max-width: 680px) {
	/* overflow-x:clip stops the hidden 200px side-tooltips from pushing the page
	   into horizontal scroll (clips the x-axis only — tips above dots still show). */
	.ferla-mobstyle { padding: 40px 18px; overflow-x: clip; }
	.ferla-mobstyle__features { grid-template-columns: 1fr; gap: 22px; }
	.ferla-mobstyle__dot { width: 24px; height: 24px; font-size: 15px; }
	.ferla-mobstyle__tip { width: min(200px, 64vw); }

	/* bottom features go horizontal: icon on the LEFT, title + subtext on the RIGHT */
	.ferla-mobstyle__feat {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		column-gap: 14px;
		align-items: center;
		text-align: left;
	}
	.ferla-mobstyle__feat-icon { grid-row: 1 / 3; margin-bottom: 0; align-self: center; }
	.ferla-mobstyle__feat-title { grid-column: 2; align-self: end; margin: 0 0 2px; }
	.ferla-mobstyle__feat-text { grid-column: 2; align-self: start; }
}

@media (prefers-reduced-motion: reduce) {
	.ferla-mobstyle__dot { animation: none; }
}

/* ---------------------------------------------------------------------------
   Constant side padding on phones too, so every section's content edge lines
   up at the same x on mobile (overrides legacy per-widget mobile paddings).
   --------------------------------------------------------------------------- */
@media (max-width: 680px) {
	.ferla-gallery,
	.ferla-delivers,
	.ferla-dimensions,
	.ferla-accordion,
	.ferla-article,
	.ferla-designed,
	.ferla-why,
	.ferla-mobstyle,
	.ferla-reviews,
	.ferla-alts,
	.ferla-main-section__inner,
	.ferla-financing__inner,
	.ferla-calc__grid {
		padding-left: 18px;
		padding-right: 18px;
	}
}

/* =====================================================================
   Ferla Reviews — product "Reviews" section (wraps Site Reviews plugin)
   ===================================================================== */
.ferla-reviews {
	width: 100%;
	max-width: var(--ferla-cw);
	margin: 0 auto;
	padding: 84px clamp(16px, 5vw, 64px);
}

.ferla-reviews__heading {
	margin: 0 0 12px;
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 600;
	line-height: 1.1;
}

.ferla-reviews__summary {
	margin: 0 0 10px;
}

.ferla-reviews__intro {
	margin: 0 0 28px;
	font-size: clamp(16px, 1.4vw, 20px);
	color: #6b6b6b;
}

.ferla-reviews__list {
	margin: 0 0 28px;
}

.ferla-reviews__actions {
	display: flex;
	justify-content: inherit;
}

/* center alignment hands justify-content through the inline-flex anchor */
.ferla-reviews[style*="center"] .ferla-reviews__actions { justify-content: center; }

.ferla-reviews__form {
	margin-top: 32px;
	text-align: left;
}

/* =====================================================================
   Ferla Alternatives — "Explore Other Configurations" config cards
   ===================================================================== */
.ferla-alts {
	width: 100%;
	max-width: var(--ferla-cw);
	margin: 0 auto;
	padding: 84px clamp(16px, 5vw, 64px);
	text-align: center;
}

.ferla-alts__heading {
	margin: 0 0 10px;
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 600;
	line-height: 1.1;
}

.ferla-alts__intro {
	margin: 0 auto 36px;
	max-width: 720px;
	font-size: clamp(16px, 1.4vw, 20px);
	color: #6b6b6b;
}

.ferla-alts__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(18px, 2vw, 28px);
	text-align: left;
}

.ferla-alts[data-count="1"] .ferla-alts__grid { grid-template-columns: minmax(0, 520px); justify-content: center; }
.ferla-alts[data-count="2"] .ferla-alts__grid { grid-template-columns: repeat(2, 1fr); }
.ferla-alts[data-count="3"] .ferla-alts__grid { grid-template-columns: repeat(3, 1fr); }

.ferla-alts__card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.ferla-alts__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12);
}

.ferla-alts__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #ececec center/cover no-repeat;
}

.ferla-alts__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 20px 24px;
}

.ferla-alts__title {
	margin: 0;
	font-size: clamp(18px, 1.5vw, 22px);
	font-weight: 600;
	line-height: 1.2;
}

.ferla-alts__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: #6b6b6b;
}

.ferla-alts__link {
	margin-top: 6px;
	font-size: 15px;
	font-weight: 600;
	color: #F93922;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ferla-alts__link span { transition: transform 0.2s ease; }
.ferla-alts__link:hover span { transform: translateX(4px); }

@media (max-width: 1024px) {
	.ferla-alts__grid,
	.ferla-alts[data-count="3"] .ferla-alts__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.ferla-reviews { padding: 40px 18px; }
	.ferla-alts { padding: 40px 18px; }
	.ferla-alts__grid,
	.ferla-alts[data-count="2"] .ferla-alts__grid,
	.ferla-alts[data-count="3"] .ferla-alts__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Global mobile typography — headings + body copy were too large on phones.
   Appended last so it overrides the per-widget mobile sizes above.
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.ferla-main-section__title { font-size: clamp(24px, 7vw, 30px); line-height: 1.1; }

	.ferla-delivers__heading,
	.ferla-designed__heading,
	.ferla-mobstyle__heading,
	.ferla-why__heading,
	.ferla-gallery__heading,
	.ferla-financing__heading,
	.ferla-addons__heading,
	.ferla-accordion__heading,
	.ferla-dimensions__heading,
	.ferla-calc__heading {
		font-size: clamp(21px, 5.6vw, 26px);
		line-height: 1.18;
	}

	.ferla-delivers__intro,
	.ferla-mobstyle__sub,
	.ferla-why__intro,
	.ferla-gallery__intro,
	.ferla-addons__intro,
	.ferla-designed__lead,
	.ferla-financing__line,
	.ferla-mobstyle__price,
	.ferla-reviews__intro,
	.ferla-alts__intro {
		font-size: 14px;
		line-height: 1.5;
	}

	.ferla-addons__ptitle,
	.ferla-designed__cta-heading { font-size: 1.05rem; }
	.ferla-addons__pdesc,
	.ferla-designed__cta-text,
	.ferla-mobstyle__feat-text { font-size: 0.85rem; }
}

/* Financing on mobile: smaller title + centred sub-copy. !important beats the
   Elementor per-instance Alignment/Typography controls (higher specificity). */
@media (max-width: 600px) {
	.ferla-financing__inner { align-items: center !important; text-align: center !important; }
	.ferla-financing__heading { font-size: clamp(18px, 4.8vw, 22px) !important; }
	.ferla-financing__line { text-align: center !important; }
}

/* ---- Lazy media placeholders (data-ferla-bg swaps to background-image on
   viewport approach; see Ferla_Widget_Base::print_lazy_media_script) ---- */
[data-ferla-bg] { background-color: #ececee; }
.ferla-financing[data-ferla-bg] { background-color: #16181c; }

/* =====================================================================
   Ferla Collections — horizontal taxonomy-card slider (/products page).
   Server-rendered replacement for the old REST-fetching HTML widget.
   ===================================================================== */
.ferla-colls {
	--colls-accent: #F93922;
	--colls-radius: 18px;
	--colls-gap: 18px;
	--colls-card-w: 300px;
	--colls-card-h: 380px;
	--colls-fade: rgba(255, 255, 255, 0.95);
	--colls-pad: 40px;
	width: 100%;
	max-width: var(--ferla-cw);
	margin: 0 auto;
	padding: 0 0 32px;
	overflow: hidden;
}

.ferla-colls__heading {
	margin: 0 0 30px;
	padding: 0 var(--colls-pad);
	font-size: clamp(34px, 4.5vw, 64px);
	font-weight: 600;
	line-height: 1.1;
}

.ferla-colls__viewport {
	position: relative;
	padding: 0 var(--colls-pad);
}

/* Right-edge fade so cards dissolve into the section background. */
.ferla-colls__viewport::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 80px;
	background: linear-gradient(to right, transparent, var(--colls-fade));
	pointer-events: none;
	z-index: 2;
}

.ferla-colls__track {
	display: flex;
	gap: var(--colls-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 4px;
}

.ferla-colls__track::-webkit-scrollbar { display: none; }

/* Snap fights mouse dragging — suspend it while a drag is in flight. */
.ferla-colls__track.is-dragging {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

.ferla-colls__card {
	-webkit-user-drag: none;
	user-select: none;
	flex: 0 0 var(--colls-card-w);
	height: var(--colls-card-h);
	border-radius: var(--colls-radius);
	overflow: hidden;
	position: relative;
	scroll-snap-align: start;
	cursor: pointer;
	text-decoration: none;
	display: block;
	background: #e0e0e0;
	border: 1px solid rgba(0, 0, 0, 0.06);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.ferla-colls__card:hover {
	transform: translateY(-5px) scale(1.01);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.ferla-colls__card:focus-visible {
	outline: 2px solid var(--colls-accent);
	outline-offset: 3px;
}

/* !important: Elementor/theme `img { height:auto; max-width:100% }` rules
   otherwise win and the image collapses to its aspect-ratio height. */
.ferla-colls__card .ferla-colls__img {
	-webkit-user-drag: none;
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.ferla-colls__card:hover .ferla-colls__img { transform: scale(1.06); }

.ferla-colls__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		transparent 35%,
		rgba(0, 0, 0, 0.2) 60%,
		rgba(0, 0, 0, 0.78) 100%
	);
}

.ferla-colls__label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 18px 18px 20px;
	z-index: 1;
}

.ferla-colls__sub {
	display: block;
	font-size: 10px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.ferla-colls__name {
	display: block;
	font-size: 17px;
	font-weight: 500;
	color: #fff;
	line-height: 1.3;
}

.ferla-colls__line {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--colls-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ferla-colls__card:hover .ferla-colls__line { transform: scaleX(1); }

.ferla-colls__bar {
	padding: 16px var(--colls-pad) 0;
	display: flex;
	align-items: center;
	gap: 12px;
}

.ferla-colls__bar-track {
	flex: 1;
	height: 2px;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 2px;
	position: relative;
	overflow: hidden;
}

.ferla-colls__bar-thumb {
	height: 100%;
	background: var(--colls-accent);
	border-radius: 2px;
	position: absolute;
	left: 0;
	top: 0;
	min-width: 40px;
	transition: width 0.1s ease, left 0.1s ease;
}

.ferla-colls__count {
	font-size: 11px;
	color: #999;
	white-space: nowrap;
	flex-shrink: 0;
}

.ferla-colls__empty {
	padding: 40px;
	color: #999;
	font-size: 14px;
}

@media (max-width: 767px) {
	.ferla-colls {
		--colls-pad: 20px;
		--colls-card-w: 220px;
		--colls-card-h: 290px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ferla-colls__card,
	.ferla-colls__img,
	.ferla-colls__line,
	.ferla-colls__bar-thumb {
		transition: none;
	}
}

/* ============================================================ Ferla Header */
.ferla-hdr {
	--hdr-accent: #F73821;
	--hdr-accent-hover: #DB2C16;
	--hdr-ink: #111111;
	--hdr-bg: #ffffff;
	--hdr-cw: 1520px;
	--hdr-logo-w: 118px;
	--hdr-h: 70px;
	--hdr-h-scrolled: 58px;
	font-family: 'VisbyRoundCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	position: relative;
	/* NO z-index here: a root stacking context would trap the fixed drawer/
	   backdrop at this level and floating site widgets (quiz bubble, z 9999)
	   would paint over them. The bar carries its own z-index. */
}
.ferla-hdr *,
.ferla-hdr *::before,
.ferla-hdr *::after {
	box-sizing: border-box;
}
.ferla-hdr__bar {
	position: relative;
	z-index: 620;
	background: var(--hdr-bg);
	border-bottom: 1px solid #ececec;
	transition: background .3s ease, border-color .3s ease, box-shadow .25s ease;
}
.ferla-hdr.is-scrolled .ferla-hdr__bar {
	box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .35);
}
/* Sticky = fixed + spacer (position:sticky dies inside a short Elementor
   container; fixed + explicit background is also the iOS-proven mechanism). */
.ferla-hdr.is-fixed .ferla-hdr__bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 620;
	background-color: var(--hdr-bg);
}
.ferla-hdr__spacer {
	display: none;
}
.ferla-hdr.is-fixed .ferla-hdr__spacer {
	display: block;
}

/* ---- Transparent-over-hero mode (homepage) ----
   Bar overlays the page (absolute, zero flow height), transparent with white
   ink; any of hover / scroll / open panel returns the solid white bar. */
.ferla-hdr--transparent .ferla-hdr__bar {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	background: transparent;
	border-bottom-color: transparent;
}
.ferla-hdr--transparent:not(.is-scrolled):not(.is-fixed):not(.is-mega-open):not(.is-mobile-open):not(.is-drawer-open) .ferla-hdr__bar:not(:hover) {
	--hdr-ink: #ffffff;
}
.ferla-hdr--transparent .ferla-hdr__bar:hover,
.ferla-hdr--transparent.is-scrolled .ferla-hdr__bar,
.ferla-hdr--transparent.is-fixed .ferla-hdr__bar,
.ferla-hdr--transparent.is-mega-open .ferla-hdr__bar,
.ferla-hdr--transparent.is-mobile-open .ferla-hdr__bar,
.ferla-hdr--transparent.is-drawer-open .ferla-hdr__bar {
	background: var(--hdr-bg);
	border-bottom-color: #ececec;
}
/* Overlay mode takes no flow space — never show the spacer. */
.ferla-hdr--transparent .ferla-hdr__spacer {
	display: none !important;
}

.ferla-hdr__in {
	max-width: var(--hdr-cw);
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 44px);
	height: var(--hdr-h);
	min-height: 54px;
	display: flex;
	align-items: center;
	gap: clamp(12px, 2.2vw, 36px);
	flex-wrap: nowrap;
	transition: height .25s ease;
}
.ferla-hdr--shrink.is-scrolled .ferla-hdr__in {
	height: var(--hdr-h-scrolled);
}
.ferla-hdr__logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--hdr-ink);
}
.ferla-hdr__logo-svg,
.ferla-hdr__logo-img {
	display: block;
	width: var(--hdr-logo-w);
	height: auto;
	fill: var(--hdr-ink);
	transition: fill .25s ease;
}
.ferla-hdr__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	min-width: 0;
}
.ferla-hdr__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	white-space: nowrap;
	gap: clamp(12px, 2vw, 32px);
	font-size: clamp(14px, 1.1vw, 16px);
	font-weight: 500;
	letter-spacing: .1px;
}
.ferla-hdr .ferla-hdr__link,
.ferla-hdr .ferla-hdr__mega-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 8px 2px;
	margin: 0;
	font: inherit;
	color: var(--hdr-ink);
	text-decoration: none;
	cursor: pointer;
	transition: color .18s ease;
}
.ferla-hdr .ferla-hdr__link:hover,
.ferla-hdr .ferla-hdr__mega-btn:hover {
	background: none;
	color: var(--hdr-accent);
}
.ferla-hdr.is-mega-open .ferla-hdr__mega-btn {
	border-bottom-color: var(--hdr-ink);
}
.ferla-hdr__chev {
	display: block;
	width: 12px;
	height: 12px;
	transition: transform .25s ease;
}
.ferla-hdr.is-mega-open .ferla-hdr__chev {
	transform: rotate(180deg);
}
.ferla-hdr__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
}
.ferla-hdr__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	background: var(--hdr-accent);
	color: #fff;
	font-size: clamp(13px, 1vw, 15px);
	font-weight: 600;
	padding: 10px clamp(14px, 1.6vw, 22px);
	border-radius: 7px;
	letter-spacing: .2px;
	text-decoration: none;
	transition: background .18s ease, transform .18s ease;
}
.ferla-hdr__cta:hover {
	background: var(--hdr-accent-hover);
	color: #fff;
	transform: translateY(-1px);
}

/* ---- Cart button (hidden until the cart has items) ---- */
.ferla-hdr .ferla-hdr__cart {
	display: none;
	position: relative;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--hdr-ink);
	border-radius: 8px;
	transition: background .18s ease, color .18s ease;
}
.ferla-hdr.has-cart-items .ferla-hdr__cart {
	display: flex;
}
.ferla-hdr .ferla-hdr__cart:hover {
	background: rgba(0, 0, 0, .05);
}
.ferla-hdr__cart svg {
	display: block;
	width: 23px;
	height: 23px;
}
.ferla-hdr__cart-count {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hdr-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	border-radius: 999px;
}
.ferla-hdr .ferla-hdr__burger {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--hdr-ink);
	border-radius: 8px;
	transition: background .18s ease, color .18s ease;
}
.ferla-hdr .ferla-hdr__burger:hover {
	background: rgba(0, 0, 0, .05);
}
.ferla-hdr__burger-bars {
	position: relative;
	display: block;
	width: 24px;
	height: 18px;
}
.ferla-hdr__burger-bars i {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2.5px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .28s cubic-bezier(.22, .61, .36, 1), top .28s cubic-bezier(.22, .61, .36, 1), opacity .18s ease;
}
.ferla-hdr__burger-bars i:nth-child(1) { top: 0; }
.ferla-hdr__burger-bars i:nth-child(2) { top: 7.75px; }
.ferla-hdr__burger-bars i:nth-child(3) { top: 15.5px; }
.ferla-hdr.is-mobile-open .ferla-hdr__burger-bars i:nth-child(1) {
	top: 7.75px;
	transform: rotate(45deg);
}
.ferla-hdr.is-mobile-open .ferla-hdr__burger-bars i:nth-child(2) {
	opacity: 0;
}
.ferla-hdr.is-mobile-open .ferla-hdr__burger-bars i:nth-child(3) {
	top: 7.75px;
	transform: rotate(-45deg);
}
.ferla-hdr__burger svg {
	display: block;
	width: 26px;
	height: 26px;
}

/* ---- Products mega panel (springy fade-down + staggered cards) ---- */
@keyframes ferlaHdrMegaIn {
	from { opacity: 0; transform: translateY(-16px); }
	to { opacity: 1; transform: none; }
}
@keyframes ferlaHdrRiseIn {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}
.ferla-hdr__mega {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--hdr-bg);
	border-top: 1px solid #ececec;
	box-shadow: 0 26px 44px -22px rgba(0, 0, 0, .22);
	max-height: calc(100vh - 110px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.ferla-hdr.is-mega-open .ferla-hdr__mega {
	display: block;
	animation: ferlaHdrMegaIn .34s cubic-bezier(.22, .61, .36, 1) both;
}
.ferla-hdr.is-mega-open .ferla-hdr__card {
	animation: ferlaHdrRiseIn .4s cubic-bezier(.22, .61, .36, 1) both;
}
.ferla-hdr.is-mega-open .ferla-hdr__card:nth-child(1) { animation-delay: .04s; }
.ferla-hdr.is-mega-open .ferla-hdr__card:nth-child(2) { animation-delay: .07s; }
.ferla-hdr.is-mega-open .ferla-hdr__card:nth-child(3) { animation-delay: .10s; }
.ferla-hdr.is-mega-open .ferla-hdr__card:nth-child(4) { animation-delay: .13s; }
.ferla-hdr.is-mega-open .ferla-hdr__card:nth-child(5) { animation-delay: .16s; }
.ferla-hdr.is-mega-open .ferla-hdr__card:nth-child(6) { animation-delay: .19s; }
.ferla-hdr.is-mega-open .ferla-hdr__card:nth-child(7) { animation-delay: .22s; }
.ferla-hdr.is-mega-open .ferla-hdr__card:nth-child(n+8) { animation-delay: .25s; }
.ferla-hdr.is-mega-open .ferla-hdr__side {
	animation: ferlaHdrRiseIn .45s cubic-bezier(.22, .61, .36, 1) .12s both;
}
.ferla-hdr__mega-in {
	max-width: var(--hdr-cw);
	margin: 0 auto;
	padding: 38px clamp(16px, 3vw, 44px) 36px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(190px, 20vw, 300px);
	gap: clamp(20px, 3vw, 48px);
}
.ferla-hdr__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 28px;
	row-gap: 26px;
}
.ferla-hdr__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 10px;
	color: var(--hdr-ink);
	text-decoration: none;
	transition: background .18s ease, transform .18s ease;
}
.ferla-hdr__card:hover {
	background: #fafafa;
	transform: translateY(-3px);
	color: var(--hdr-ink);
}
.ferla-hdr__card-img {
	width: 100%;
	height: 140px !important; /* theme/Elementor img{height:auto} would beat a single class */
	object-fit: contain;
}
.ferla-hdr__card-label {
	font-size: 19px;
	font-weight: 500;
	text-align: center;
}
.ferla-hdr__side {
	/* The absolute inner keeps this column out of the grid's height math, so
	   the products grid alone sets the panel height and a long (dynamic
	   collections) list scrolls inside instead of stretching the dropdown. */
	position: relative;
	border-left: 1px solid #e6e6e6;
	min-height: 340px;
	text-align: center;
	font-size: 17px;
	font-weight: 500;
}
.ferla-hdr__side-in {
	position: absolute;
	inset: 0;
	padding-left: clamp(18px, 2.5vw, 40px);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-height: 0;
}
.ferla-hdr__side-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-right: 6px;
	scrollbar-width: thin;
	scrollbar-color: #d9d9d9 transparent;
	/* soft fade hinting there's more to scroll */
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}
.ferla-hdr__side-scroll::-webkit-scrollbar {
	width: 5px;
}
.ferla-hdr__side-scroll::-webkit-scrollbar-thumb {
	background: #d9d9d9;
	border-radius: 999px;
}
.ferla-hdr__side-scroll::-webkit-scrollbar-track {
	background: transparent;
}
.ferla-hdr__side-link {
	flex: 0 0 auto;
}
.ferla-hdr__side-link {
	padding: 9px 4px;
	border-radius: 6px;
	color: var(--hdr-ink);
	text-decoration: none;
	transition: color .18s ease, background .18s ease;
}
.ferla-hdr__side-link:hover {
	color: var(--hdr-accent);
	background: #fafafa;
}
.ferla-hdr__side-link.is-accent {
	color: var(--hdr-accent);
}
.ferla-hdr__side-link.is-accent:hover {
	background: #fff4f1;
}
.ferla-hdr__side-pinned {
	flex: 0 0 auto;
	margin-top: 8px;
	border-top: 1px solid #f0f0f0;
	padding-top: 12px;
}
.ferla-hdr__side-cta {
	flex: 0 0 auto;
	margin-top: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hdr-accent);
	color: #fff;
	font-weight: 600;
	padding: 13px 18px;
	border-radius: 7px;
	text-decoration: none;
	transition: background .18s ease;
}
.ferla-hdr__side-cta:hover {
	background: var(--hdr-accent-hover);
	color: #fff;
}

/* ---- Mobile panel ---- */
.ferla-hdr__mobile {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--hdr-bg);
	border-top: 1px solid #ececec;
	box-shadow: 0 26px 44px -22px rgba(0, 0, 0, .22);
	max-height: calc(100dvh - 64px);
	overflow-y: auto;
	overscroll-behavior: contain;
	z-index: 615;
}
.ferla-hdr.is-mobile-open .ferla-hdr__mobile {
	display: block;
	animation: ferlaHdrMegaIn .32s cubic-bezier(.22, .61, .36, 1) both;
}
/* items cascade in, 30ms apart */
@keyframes ferlaHdrMobileItem {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: none; }
}
.ferla-hdr.is-mobile-open .ferla-hdr__mobile nav > * {
	animation: ferlaHdrMobileItem .34s cubic-bezier(.22, .61, .36, 1) both;
	animation-delay: .34s;
}
.ferla-hdr.is-mobile-open .ferla-hdr__mobile nav > *:nth-child(1) { animation-delay: .04s; }
.ferla-hdr.is-mobile-open .ferla-hdr__mobile nav > *:nth-child(2) { animation-delay: .07s; }
.ferla-hdr.is-mobile-open .ferla-hdr__mobile nav > *:nth-child(3) { animation-delay: .10s; }
.ferla-hdr.is-mobile-open .ferla-hdr__mobile nav > *:nth-child(4) { animation-delay: .13s; }
.ferla-hdr.is-mobile-open .ferla-hdr__mobile nav > *:nth-child(5) { animation-delay: .16s; }
.ferla-hdr.is-mobile-open .ferla-hdr__mobile nav > *:nth-child(6) { animation-delay: .19s; }
.ferla-hdr.is-mobile-open .ferla-hdr__mobile nav > *:nth-child(7) { animation-delay: .22s; }
.ferla-hdr.is-mobile-open .ferla-hdr__mobile nav > *:nth-child(8) { animation-delay: .25s; }
.ferla-hdr.is-mobile-open .ferla-hdr__mobile nav > *:nth-child(9) { animation-delay: .28s; }
.ferla-hdr.is-mobile-open .ferla-hdr__mobile nav > *:nth-child(10) { animation-delay: .31s; }
.ferla-hdr.is-mobile-open .ferla-hdr__mobile nav > *:nth-child(11) { animation-delay: .33s; }
.ferla-hdr.is-mobile-open .ferla-hdr__mobile nav > *:nth-child(12) { animation-delay: .34s; }
.ferla-hdr__mobile nav {
	display: flex;
	flex-direction: column;
	padding: 10px clamp(16px, 3vw, 44px) calc(22px + env(safe-area-inset-bottom, 0px));
	font-size: 17px;
	font-weight: 500;
}
.ferla-hdr__m-link {
	padding: 13px 4px;
	border-bottom: 1px solid #f1f1f1;
	color: var(--hdr-ink);
	text-decoration: none;
}
.ferla-hdr__m-link:hover {
	color: var(--hdr-accent);
}
.ferla-hdr .ferla-hdr__m-link--accent {
	color: var(--hdr-accent, #F73821);
	font-weight: 600;
}
.ferla-hdr .ferla-hdr__m-3d {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 16px 0 4px;
	padding: 13px 20px;
	background: var(--hdr-accent, #F73821);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none;
	transition: background .18s ease;
}
.ferla-hdr .ferla-hdr__m-3d:hover {
	background: var(--hdr-accent-hover, #DB2C16);
	color: #fff;
}
.ferla-hdr__m-cta {
	margin-top: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hdr-accent);
	color: #fff;
	font-weight: 600;
	padding: 14px 22px;
	border-radius: 7px;
	text-decoration: none;
}
.ferla-hdr__m-cta:hover {
	background: var(--hdr-accent-hover);
	color: #fff;
}

/* ---- Mobile drop-down: Main Products scroller ---- */
.ferla-hdr__m-products {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 12px 4px;
	border-bottom: 1px solid #f1f1f1;
}
.ferla-hdr__m-products::-webkit-scrollbar {
	display: none;
}
.ferla-hdr .ferla-hdr__mp {
	flex: 0 0 auto;
	width: 118px;
	text-align: center;
	text-decoration: none;
}
/* .ferla-hdr prefix + !important: Elementor's `.elementor img { height:auto }`
   out-ranks a single class and would let each thumb keep its own aspect. */
.ferla-hdr .ferla-hdr__mp-img {
	display: block;
	width: 118px;
	height: 100px !important;
	object-fit: contain;
	background: #fff;
	border: 1px solid #f1f1f1;
	border-radius: 10px;
}
.ferla-hdr__mp-name {
	display: block;
	margin-top: 7px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--hdr-ink);
}
.ferla-hdr .ferla-hdr__mp:hover .ferla-hdr__mp-name {
	color: var(--hdr-accent);
}

/* ---- Cart drawer ---- */
html.ferla-hdr-lock,
html.ferla-hdr-lock body {
	overflow: hidden;
}
.ferla-hdr__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(17, 17, 17, .45);
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
	z-index: 99998; /* above floating site widgets (quiz bubble etc.) */
}
.ferla-hdr.is-drawer-open .ferla-hdr__backdrop {
	opacity: 1;
	pointer-events: auto;
}
.ferla-hdr.is-mobile-open .ferla-hdr__backdrop {
	opacity: 1;
	pointer-events: auto;
	z-index: 610; /* under the bar (620) and the mobile panel (615) */
}
.ferla-hdr__drawer {
	position: fixed;
	top: 0;
	right: 0;
	height: 100dvh;
	width: min(400px, 100vw);
	background: #fff;
	z-index: 99999; /* above floating site widgets (quiz bubble etc.) */
	transform: translateX(102%);
	transition: transform .38s cubic-bezier(.22, .61, .36, 1);
	display: flex;
	flex-direction: column;
	box-shadow: -24px 0 48px -24px rgba(0, 0, 0, .3);
	font-family: 'VisbyRoundCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.ferla-hdr.is-drawer-open .ferla-hdr__drawer {
	transform: none;
}
.ferla-hdr__drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 14px 14px 22px;
	border-bottom: 1px solid #ececec;
	flex: 0 0 auto;
}
.ferla-hdr__drawer-title {
	font-size: 18px;
	font-weight: 600;
	color: #111;
}
.ferla-hdr .ferla-hdr__drawer-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: #111;
	border-radius: 8px;
	transition: background .18s ease;
}
.ferla-hdr .ferla-hdr__drawer-close:hover {
	background: #f6f6f6;
}
.ferla-hdr__drawer-close svg {
	width: 20px;
	height: 20px;
}
.ferla-hdr__drawer .widget_shopping_cart_content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px 22px calc(18px + env(safe-area-inset-bottom, 0px));
}
/* Woo mini-cart markup, restyled */
.ferla-hdr__drawer .woocommerce-mini-cart {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
}
/* Row = flex column (title + price hug together, centered next to the thumb;
   thumb + remove are absolutely positioned — no grid-row games with the
   anonymous text node inside the product link). */
.ferla-hdr__drawer .woocommerce-mini-cart-item {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	min-height: 92px;
	padding: 14px 44px 14px 80px;
	border-bottom: 1px solid #f1f1f1;
	font-size: 15px;
}
.ferla-hdr__drawer .woocommerce-mini-cart-item a:not(.remove) {
	display: block;
	color: #111;
	text-decoration: none;
	font-weight: 600;
	line-height: 1.35;
}
.ferla-hdr__drawer .woocommerce-mini-cart-item a:not(.remove):hover {
	color: #F73821;
}
.ferla-hdr__drawer .woocommerce-mini-cart-item img {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 64px;
	height: 64px !important;
	object-fit: contain;
	border-radius: 8px;
	background: #fafafa;
}
.ferla-hdr__drawer .woocommerce-mini-cart-item .quantity {
	display: block;
	color: #666;
	font-size: 14px;
	font-weight: 500;
}
.ferla-hdr__drawer .woocommerce-mini-cart-item a.remove {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999 !important;
	background: #f6f6f6;
	border-radius: 999px;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}
.ferla-hdr__drawer .woocommerce-mini-cart-item a.remove:hover {
	background: #fff0ee;
	color: var(--hdr-accent, #F73821) !important;
}
.ferla-hdr__drawer .woocommerce-mini-cart__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 16px 0 6px;
	font-size: 16px;
	color: #111;
	border-top: 1px solid #ececec;
}
.ferla-hdr__drawer .woocommerce-mini-cart__total .woocommerce-Price-amount {
	letter-spacing: .05em;
	font-variant-numeric: tabular-nums;
}
.ferla-hdr__drawer .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 14px 0 0;
}
.ferla-hdr__drawer .woocommerce-mini-cart__buttons .button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 18px;
	border-radius: 7px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	border: 1.5px solid #111;
	color: #111;
	background: #fff;
	transition: background .18s ease, color .18s ease;
}
.ferla-hdr__drawer .woocommerce-mini-cart__buttons .button:hover {
	background: #111;
	color: #fff;
}
.ferla-hdr__drawer .woocommerce-mini-cart__buttons .button.checkout {
	background: #F73821;
	background: var(--hdr-accent, #F73821);
	border-color: transparent;
	color: #fff;
}
.ferla-hdr__drawer .woocommerce-mini-cart__buttons .button.checkout:hover {
	background: var(--hdr-accent-hover, #DB2C16);
}
/* Woo blocks the mini-cart with jQuery blockUI during remove/update AJAX —
   its inline styles (solid white, wait cursor) look broken here. Soften it
   and put a brand spinner in the middle. !important beats the inline styles. */
.ferla-hdr__drawer .blockUI.blockOverlay {
	background: rgba(255, 255, 255, .55) !important;
	opacity: 1 !important;
	cursor: default !important;
}
.ferla-hdr__drawer .blockUI.blockOverlay::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	border: 2.5px solid #eee;
	border-top-color: var(--hdr-accent, #F73821);
	border-radius: 50%;
	animation: ferlaHdrSpin .6s linear infinite;
}
@keyframes ferlaHdrSpin {
	to { transform: rotate(360deg); }
}
/* Instant feedback: the row being removed fades out right on click. */
.ferla-hdr__drawer .woocommerce-mini-cart-item.is-removing {
	opacity: .35;
	pointer-events: none;
	transition: opacity .2s ease;
}
.ferla-hdr__drawer .woocommerce-mini-cart__empty-message {
	margin: auto;
	text-align: center;
	color: #888;
	font-size: 15px;
}
/* On Woo pages (body.woocommerce: shop/product/cart) woocommerce.css's
   `.woocommerce ul.cart_list li` rules out-rank the drawer selectors above —
   li padding collapses and the thumb drops to 32px, overlapping the title.
   Restate the layout with the .ferla-hdr prefix so the drawer wins everywhere. */
.ferla-hdr .ferla-hdr__drawer ul.cart_list li.woocommerce-mini-cart-item {
	margin: 0;
	padding: 14px 44px 14px 80px;
	list-style: none;
}
.ferla-hdr .ferla-hdr__drawer ul.cart_list li.woocommerce-mini-cart-item img {
	float: none;
	width: 64px;
	margin: 0;
}
.ferla-hdr .ferla-hdr__drawer ul.cart_list li.woocommerce-mini-cart-item a:not(.remove) {
	font-weight: 600;
}

/* ---- WooCommerce notices ("added to your cart" bar): brand toast card.
   Elementor Pro relocates them to body level and the hook fires twice on
   product pages -> hide the duplicate wrapper. ---- */
body > .woocommerce-notices-wrapper ~ .woocommerce-notices-wrapper {
	display: none;
}
.woocommerce-notices-wrapper:empty {
	display: none;
}
body > .woocommerce-notices-wrapper {
	max-width: 1430px;
	margin: 0 auto;
	padding: 10px clamp(16px, 3vw, 44px) 0;
	box-sizing: border-box;
}
body .woocommerce-message,
body .woocommerce-info,
body ul.woocommerce-error {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 14px;
	background: #fff !important;
	color: #111 !important;
	border: 1px solid #ececec !important;
	border-radius: 12px;
	box-shadow: 0 16px 36px -26px rgba(0, 0, 0, .4);
	padding: 13px 16px !important;
	margin: 0 0 14px !important;
	font-family: 'VisbyRoundCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	list-style: none;
	outline: none; /* Woo focuses the notice on load — no ugly ring */
	width: auto;
}
body .woocommerce-message::before {
	content: "";
	position: static;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin: 0;
	border-radius: 50%;
	background-color: #1f9d61;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px;
}
body .woocommerce-info::before,
body ul.woocommerce-error::before {
	display: none;
}
body ul.woocommerce-error {
	border-left: 4px solid #F73821 !important;
}
body ul.woocommerce-error li {
	margin: 0;
	padding: 0;
}
body .woocommerce-message .button,
body .woocommerce-info .button,
body ul.woocommerce-error .button {
	order: 5;
	float: none;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	background: #F73821 !important;
	color: #fff !important;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 18px !important;
	border-radius: 7px;
	text-decoration: none;
	transition: background .18s ease;
}
body .woocommerce-message .button:hover,
body .woocommerce-info .button:hover,
body ul.woocommerce-error .button:hover {
	background: #DB2C16 !important;
}
@media (max-width: 640px) {
	body .woocommerce-message .button,
	body .woocommerce-info .button,
	body ul.woocommerce-error .button {
		flex: 1 1 100%;
		margin-left: 0;
	}
}

/* ---- Compact (<1100px): nav + CTA collapse to burger ---- */
@media (max-width: 1100px) {
	/* !important: Elementor prints the instance control CSS inline after this
	   sheet at equal specificity — the breakpoint override must beat it. */
	.ferla-hdr {
		--hdr-h: 62px !important;
		--hdr-h-scrolled: 56px !important;
		--hdr-logo-w: 104px !important;
	}
	.ferla-hdr__nav {
		display: none;
	}
	.ferla-hdr .ferla-hdr__burger {
		display: flex;
	}
	.ferla-hdr__cart {
		margin-left: auto;
	}
	.ferla-hdr:not(.has-cart-items) .ferla-hdr__burger {
		margin-left: auto;
	}
	/* The Get-A-Quote CTA stays in the bar on mobile, right-aligned next to
	   the cart/burger icons (its drop-down copy is hidden). The ~ overrides
	   cancel the icons' auto-margin push. */
	.ferla-hdr__actions {
		display: flex;
		margin: 0 0 0 auto;
	}
	.ferla-hdr .ferla-hdr__actions ~ .ferla-hdr__cart,
	.ferla-hdr .ferla-hdr__actions ~ .ferla-hdr__burger {
		margin-left: 0;
	}
	.ferla-hdr__cta {
		font-size: 13px;
		padding: 9px 14px;
	}
	.ferla-hdr__m-cta {
		display: none;
	}
	.ferla-hdr__mega {
		display: none !important; /* mega is desktop-only; mobile panel covers it */
	}
	.ferla-hdr__in {
		gap: 6px;
	}
}
@media (max-width: 380px) {
	.ferla-hdr {
		--hdr-h: 58px !important;
		--hdr-logo-w: 96px !important;
	}
	.ferla-hdr__mobile nav {
		font-size: 16px;
	}
	.ferla-hdr__cta {
		font-size: 12px;
		padding: 8px 11px;
	}
	.ferla-hdr__drawer-head {
		padding-left: 18px;
	}
	.ferla-hdr__drawer .widget_shopping_cart_content {
		padding-left: 18px;
		padding-right: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ferla-hdr__bar,
	.ferla-hdr__in,
	.ferla-hdr__cta,
	.ferla-hdr__card,
	.ferla-hdr__chev,
	.ferla-hdr__mega,
	.ferla-hdr__mobile,
	.ferla-hdr__side,
	.ferla-hdr__drawer,
	.ferla-hdr__backdrop,
	.ferla-hdr__logo-svg,
	.ferla-hdr__burger-bars i,
	.ferla-hdr__mobile nav > * {
		transition: none;
		animation: none;
	}
}

/* ============================================================ Ferla WC pages
   Cart + Checkout — classic Woo shortcodes wrapped in .ferla-wc, fully
   restyled: card rows, sticky summary, brand buttons, clean forms. */
.ferla-wc {
	max-width: 1200px;
	margin: 0 auto;
	padding: 34px clamp(16px, 3vw, 44px) 72px;
	font-family: 'VisbyRoundCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: #111;
}
.ferla-wc,
.ferla-wc *,
.ferla-wc *::before,
.ferla-wc *::after {
	box-sizing: border-box;
}
/* Our shell brings its own title — hide the theme's page header */
body:has(.ferla-wc) .page-header {
	display: none;
}
.ferla-wc__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 6px 0 26px;
}
.ferla-wc__title {
	margin: 0;
	font-size: clamp(30px, 4vw, 42px);
	font-weight: 600;
	letter-spacing: -.5px;
}
.ferla-wc__continue {
	color: #777;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: color .15s ease;
}
.ferla-wc__continue:hover {
	color: #F73821;
}
.ferla-wc__trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 30px;
	color: #9a9a9a;
	font-size: 13.5px;
	font-weight: 500;
}
.ferla-wc__trust svg {
	width: 14px;
	height: 14px;
	display: block;
}
.ferla-wc__trust a {
	color: #666;
	text-decoration: underline;
}
.ferla-wc__trust a:hover {
	color: #F73821;
}

/* ---- shared: buttons + inputs ---- */
.ferla-wc .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 20px;
	border: 1.5px solid #111;
	border-radius: 8px;
	background: #fff;
	color: #111;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.ferla-wc .button:hover {
	background: #111;
	color: #fff;
}
.ferla-wc .button:disabled {
	opacity: .35;
	cursor: default;
}
.ferla-wc .button:disabled:hover {
	background: #fff;
	color: #111;
}
.ferla-wc .input-text,
.ferla-wc select,
.ferla-wc textarea {
	width: 100%;
	height: 48px;
	border: 1.5px solid #e2e2e2;
	border-radius: 9px;
	padding: 0 14px;
	background: #fff;
	color: #111;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 500;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ferla-wc textarea {
	height: auto;
	min-height: 96px;
	padding: 12px 14px;
	line-height: 1.5;
}
.ferla-wc .input-text:focus,
.ferla-wc select:focus,
.ferla-wc textarea:focus {
	outline: none;
	border-color: #111;
	box-shadow: 0 0 0 3px rgba(17, 17, 17, .08);
}
.ferla-wc .select2-container--default .select2-selection--single {
	height: 48px !important;
	border: 1.5px solid #e2e2e2 !important;
	border-radius: 9px !important;
}
.ferla-wc .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 45px !important;
	padding-left: 14px;
	color: #111;
	font-weight: 500;
}
.ferla-wc .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 45px !important;
}

/* ---- CART ---- */
.ferla-wc--cart .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: clamp(24px, 3vw, 44px);
	align-items: start;
}
.ferla-wc--cart .woocommerce > .woocommerce-notices-wrapper,
.ferla-wc--cart .woocommerce > p {
	grid-column: 1 / -1;
}
.ferla-wc--cart .woocommerce-cart-form {
	grid-column: 1;
	min-width: 0;
}
.ferla-wc--cart .cart-collaterals {
	grid-column: 2;
	position: sticky;
	top: 90px;
	width: 100%;
}
.ferla-wc table.cart {
	width: 100%;
	border: 0 !important;
	border-collapse: collapse;
	margin: 0;
}
.ferla-wc table.cart thead {
	display: none;
}
.ferla-wc table.cart td {
	border: 0;
	border-bottom: 1px solid #f0f0f0;
	padding: 18px 10px;
	vertical-align: middle;
	background: none !important;
}
.ferla-wc table.cart td.product-thumbnail {
	width: 112px;
}
.ferla-wc table.cart td.product-thumbnail img {
	width: 96px !important;
	height: 96px !important;
	object-fit: contain;
	border-radius: 12px;
	background: #f7f7f7;
	padding: 6px;
	display: block;
}
.ferla-wc table.cart td.product-name a {
	color: #111;
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
	transition: color .15s ease;
}
.ferla-wc table.cart td.product-name a:hover {
	color: #F73821;
}
.ferla-wc table.cart td.product-price,
.ferla-wc table.cart td.product-subtotal {
	font-weight: 600;
	white-space: nowrap;
}
.ferla-wc table.cart td.product-remove {
	width: 44px;
}
.ferla-wc table.cart a.remove {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f6f6f6;
	border-radius: 999px;
	color: #999 !important;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.ferla-wc table.cart a.remove:hover {
	background: #fff0ee;
	color: #F73821 !important;
}
.ferla-wc .quantity .qty {
	width: 66px;
	height: 44px;
	text-align: center;
	padding: 0 4px 0 10px;
}
.ferla-wc td.actions {
	border-bottom: 0 !important;
	padding: 18px 0 0 !important;
}
.ferla-wc td.actions .coupon {
	float: left;
	display: flex;
	gap: 10px;
}
.ferla-wc td.actions .coupon label {
	display: none;
}
.ferla-wc td.actions .coupon .input-text {
	width: 180px;
	height: 46px;
}
.ferla-wc td.actions > .button {
	float: right;
}
.ferla-wc .cross-sells {
	display: none; /* keep the cart focused */
}
/* summary card */
.ferla-wc .cart_totals {
	float: none !important;
	width: 100% !important;
	background: #fafafa;
	border: 1px solid #ececec;
	border-radius: 16px;
	padding: 24px;
}
.ferla-wc .cart_totals h2 {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 600;
}
.ferla-wc .cart_totals table {
	width: 100%;
	border: 0 !important;
	margin: 0;
}
.ferla-wc .cart_totals th,
.ferla-wc .cart_totals td {
	border: 0;
	border-bottom: 1px solid #ececec;
	padding: 11px 0;
	background: none !important;
	font-size: 15px;
	text-align: left;
}
.ferla-wc .cart_totals th {
	color: #555;
	font-weight: 500;
	width: 40%;
}
.ferla-wc .cart_totals td {
	text-align: right;
	font-weight: 600;
}
.ferla-wc .cart_totals .order-total th,
.ferla-wc .cart_totals .order-total td {
	border-bottom: 0;
	padding-top: 15px;
	font-size: 18px;
	font-weight: 700;
	color: #111;
}
.ferla-wc .wc-proceed-to-checkout {
	padding: 0;
	margin-top: 16px;
}
.ferla-wc .checkout-button {
	display: flex !important;
	width: 100%;
	height: 54px;
	align-items: center;
	justify-content: center;
	background: #F73821 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 9px;
	font-size: 16px !important;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s ease, transform .15s ease;
}
.ferla-wc .checkout-button:hover {
	background: #DB2C16 !important;
	transform: translateY(-1px);
}
/* empty cart */
.ferla-wc--cart .cart-empty {
	justify-content: center;
	text-align: center;
}
.ferla-wc .return-to-shop {
	margin: 22px 0 6px;
	text-align: center;
}
.ferla-wc .return-to-shop .button {
	background: #F73821;
	border-color: transparent;
	color: #fff;
	height: 52px;
	padding: 0 28px;
	border-radius: 9px;
	font-size: 15.5px;
}
.ferla-wc .return-to-shop .button:hover {
	background: #DB2C16;
	color: #fff;
}

/* ---- CHECKOUT ---- */
.ferla-wc--checkout form.woocommerce-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
	column-gap: clamp(24px, 3.5vw, 48px);
	row-gap: 0; /* spacing via margins so empty rows (no express pay) cost nothing */
	align-items: start;
}
/* Stripe express checkout (Link / wallets): top of the LEFT column, with the
   "— OR —" separator between it and the manual form. */
.ferla-wc--checkout #wc-stripe-express-checkout-element {
	grid-column: 1;
	grid-row: 1;
}
.ferla-wc--checkout #wc-stripe-express-checkout__order-attribution-inputs {
	display: none; /* hidden tracking inputs — keep them out of the grid */
}
.ferla-wc--checkout #wc-stripe-express-checkout-button-separator {
	grid-column: 1;
	grid-row: 2;
	margin: 16px 0 4px;
	text-align: center;
	color: #a5a5a5;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 1px;
}
.ferla-wc--checkout #customer_details {
	grid-column: 1;
	grid-row: 3;
	min-width: 0;
	margin-top: 14px;
}
.ferla-wc--checkout form.woocommerce-checkout > #payment {
	grid-column: 1;
	grid-row: 4;
	margin-top: 22px;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 16px;
	padding: 20px 20px 18px;
}
.ferla-wc--checkout form.woocommerce-checkout > #payment::before {
	content: "Payment";
	display: block;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 6px;
}
.ferla-wc--checkout form.woocommerce-checkout > #payment ul.payment_methods {
	border-top: 0 !important;
	padding-top: 4px !important;
	margin-top: 0;
}
.ferla-wc--checkout #order_review_heading {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	align-self: center;
}
.ferla-wc--checkout #order_review {
	grid-column: 2;
	grid-row: 2 / span 3;
	position: sticky;
	top: 90px;
	background: #fafafa;
	border: 1px solid #ececec;
	border-radius: 16px;
	padding: 22px;
	margin-top: 12px;
}
.ferla-wc .col2-set {
	width: auto;
	display: block;
}
.ferla-wc .col2-set .col-1,
.ferla-wc .col2-set .col-2 {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
}
.ferla-wc .col2-set .col-2 {
	margin-top: 10px;
}
.ferla-wc--checkout h3 {
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 16px;
}
.ferla-wc--checkout .woocommerce-billing-fields__field-wrapper,
.ferla-wc--checkout .woocommerce-shipping-fields__field-wrapper,
.ferla-wc--checkout .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 14px;
}
.ferla-wc .form-row {
	margin: 0 0 14px;
	padding: 0;
	float: none !important;
	width: auto !important;
}
.ferla-wc .form-row-wide,
.ferla-wc .notes {
	grid-column: 1 / -1;
}
.ferla-wc .form-row label {
	display: block;
	margin-bottom: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: #444;
}
.ferla-wc .form-row .required {
	color: #F73821;
	text-decoration: none;
}
.ferla-wc .woocommerce-input-wrapper {
	display: block;
}
#ship-to-different-address {
	font-size: 16px;
}
#ship-to-different-address label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	margin: 0;
	cursor: pointer;
}
/* coupon strip */
.ferla-wc form.checkout_coupon {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	border: 1.5px dashed #ddd;
	border-radius: 12px;
	padding: 14px;
	margin: 0 0 20px;
}
.ferla-wc form.checkout_coupon p {
	margin: 0;
}
.ferla-wc form.checkout_coupon .form-row-first {
	flex: 1 1 200px;
}
/* order review table */
.ferla-wc .woocommerce-checkout-review-order-table {
	width: 100%;
	border: 0 !important;
	margin: 0;
}
.ferla-wc .woocommerce-checkout-review-order-table th,
.ferla-wc .woocommerce-checkout-review-order-table td {
	border: 0 !important;
	padding: 9px 0;
	background: none !important;
	font-size: 14.5px;
	text-align: left;
}
.ferla-wc .woocommerce-checkout-review-order-table tbody th,
.ferla-wc .woocommerce-checkout-review-order-table tbody td {
	border-bottom: 1px solid #f0f0f0 !important;
}
.ferla-wc .woocommerce-checkout-review-order-table thead th {
	color: #999;
	font-size: 12.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .4px;
}
.ferla-wc .woocommerce-checkout-review-order-table td.product-total,
.ferla-wc .woocommerce-checkout-review-order-table thead th:last-child,
.ferla-wc .woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
	font-weight: 600;
}
.ferla-wc .woocommerce-checkout-review-order-table .order-total th,
.ferla-wc .woocommerce-checkout-review-order-table .order-total td {
	border-top: 1px solid #ddd !important;
	padding-top: 14px;
	font-size: 17px;
	font-weight: 700;
}
/* payment */
.ferla-wc #payment {
	background: transparent !important;
	border-radius: 0;
}
.ferla-wc #payment ul.payment_methods {
	list-style: none;
	margin: 12px 0 0;
	padding: 14px 0 0 !important;
	border: 0 !important;
	border-top: 1px solid #e6e6e6 !important;
}
.ferla-wc #payment ul.payment_methods li {
	margin: 0 0 8px;
}
.ferla-wc #payment ul.payment_methods label {
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
}
.ferla-wc #payment div.payment_box {
	background: #fff !important;
	border: 1px solid #eaeaea;
	border-radius: 10px;
	padding: 14px !important;
	margin: 10px 0 4px;
	color: #555;
	font-size: 14px;
}
.ferla-wc #payment div.payment_box::before {
	display: none; /* the speech-bubble caret */
}
.ferla-wc #payment div.form-row.place-order {
	padding: 14px 0 0;
	margin: 0;
}
.ferla-wc #place_order {
	width: 100%;
	height: 54px;
	background: #F73821 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 9px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.ferla-wc #place_order:hover {
	background: #DB2C16 !important;
	transform: translateY(-1px);
}
.ferla-wc .woocommerce-privacy-policy-text p {
	font-size: 12.5px;
	color: #8b8b8b;
	line-height: 1.55;
	margin: 10px 0 0;
}
.ferla-wc .woocommerce-privacy-policy-text a {
	color: #666;
}

/* ---- responsive ---- */
@media (max-width: 1024px) {
	.ferla-wc--cart .woocommerce {
		display: block;
	}
	.ferla-wc--cart .cart-collaterals {
		position: static;
		margin-top: 26px;
	}
	/* single column: Link -> OR -> billing -> Your order -> payment */
	.ferla-wc--checkout form.woocommerce-checkout {
		display: flex;
		flex-direction: column;
	}
	.ferla-wc--checkout #wc-stripe-express-checkout-element { order: 1; }
	.ferla-wc--checkout #wc-stripe-express-checkout-button-separator { order: 2; }
	.ferla-wc--checkout #customer_details { order: 3; }
	.ferla-wc--checkout #order_review_heading { order: 4; margin: 26px 0 0; }
	.ferla-wc--checkout #order_review { order: 5; position: static; }
	.ferla-wc--checkout form.woocommerce-checkout > #payment { order: 6; }
}
@media (max-width: 768px) {
	/* cart rows -> cards (override woocommerce-smallscreen.css) */
	.ferla-wc .woocommerce table.cart td::before,
	.ferla-wc table.cart td::before {
		display: none !important;
	}
	.ferla-wc table.cart,
	.ferla-wc table.cart tbody {
		display: block;
	}
	.ferla-wc table.cart tr.cart_item {
		position: relative;
		display: grid !important;
		grid-template-columns: 92px minmax(0, 1fr);
		column-gap: 14px;
		row-gap: 4px;
		padding: 16px 0;
		border-bottom: 1px solid #f0f0f0;
	}
	.ferla-wc table.cart tr.cart_item td {
		display: block !important;
		border: 0 !important;
		padding: 0 !important;
		text-align: left !important;
	}
	.ferla-wc table.cart td.product-thumbnail {
		display: block !important;
		grid-column: 1;
		grid-row: 1 / span 4;
		width: auto;
	}
	.ferla-wc table.cart td.product-thumbnail img {
		width: 92px !important;
		height: 92px !important;
	}
	.ferla-wc table.cart td.product-remove {
		position: absolute;
		top: 16px;
		right: 0;
		width: auto;
	}
	.ferla-wc table.cart td.product-name {
		grid-column: 2;
		padding-right: 40px !important;
	}
	.ferla-wc table.cart td.product-price {
		display: none !important; /* subtotal covers it */
	}
	.ferla-wc table.cart td.product-quantity,
	.ferla-wc table.cart td.product-subtotal {
		grid-column: 2;
	}
	.ferla-wc table.cart td.product-subtotal {
		font-size: 16px;
	}
	.ferla-wc table.cart tr:has(td.actions) {
		display: block;
	}
	.ferla-wc td.actions {
		display: flex !important;
		flex-wrap: wrap;
		gap: 10px;
	}
	.ferla-wc td.actions .coupon {
		float: none;
		width: 100%;
	}
	.ferla-wc td.actions .coupon .input-text {
		flex: 1 1 auto;
		width: auto;
	}
	.ferla-wc td.actions > .button {
		float: none;
		width: 100%;
	}
}
@media (max-width: 640px) {
	.ferla-wc--checkout .woocommerce-billing-fields__field-wrapper,
	.ferla-wc--checkout .woocommerce-shipping-fields__field-wrapper,
	.ferla-wc--checkout .woocommerce-additional-fields__field-wrapper {
		grid-template-columns: 1fr;
	}
}

/* ---- WC pages: specificity re-asserts (Woo core selectors like
   `.woocommerce form .form-row input.input-text` (0,2,2) and
   `.woocommerce table.cart td.actions .coupon .input-text` (0,5,2)
   out-rank the base .ferla-wc rules above) ---- */
.ferla-wc form .form-row input.input-text,
.ferla-wc .woocommerce form .form-row input.input-text {
	height: 48px;
	border: 1.5px solid #e2e2e2;
	border-radius: 9px;
	/* real vertical padding, not just height: Stripe's Payment Element derives
	   its field sizing from a clone of #billing_first_name — padding 0 = squished
	   card fields */
	padding: 12px 14px;
	background: #fff;
	color: #111;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 500;
	box-sizing: border-box;
}
.ferla-wc form .form-row select {
	height: 48px;
	border: 1.5px solid #e2e2e2;
	border-radius: 9px;
	padding: 0 14px;
	background: #fff;
	color: #111;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 500;
	box-sizing: border-box;
}
.ferla-wc form .form-row textarea,
.ferla-wc .woocommerce form .form-row textarea.input-text {
	height: auto;
	min-height: 96px;
	border: 1.5px solid #e2e2e2;
	border-radius: 9px;
	padding: 12px 14px;
	line-height: 1.5;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 500;
}
.ferla-wc form .form-row input.input-text:focus,
.ferla-wc form .form-row select:focus,
.ferla-wc form .form-row textarea:focus {
	outline: none;
	border-color: #111;
	box-shadow: 0 0 0 3px rgba(17, 17, 17, .08);
}
.ferla-wc .woocommerce table.cart td.actions .coupon .input-text {
	width: 180px !important; /* something else pins width:80px on the coupon */
	height: 42px;
	padding: 0 13px;
	font-size: 14px;
}
.ferla-wc .woocommerce table.cart td.actions .coupon .button {
	height: 42px;
	border-color: #e0e0e0;
	color: #777;
	font-size: 14px;
}
.ferla-wc .woocommerce table.cart td.actions .coupon .button:hover {
	background: #111;
	border-color: #111;
	color: #fff;
}
/* secondary buttons (Apply coupon / Update cart / misc) — Woo's gray fill loses */
.ferla-wc button.button,
.ferla-wc input.button,
.ferla-wc a.button,
.ferla-wc .woocommerce table.cart td.actions .button,
.ferla-wc .woocommerce table.cart td.actions .coupon .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 20px;
	border: 1.5px solid #111;
	border-radius: 8px;
	background: #fff;
	color: #111;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.ferla-wc button.button:hover,
.ferla-wc input.button:hover,
.ferla-wc a.button:hover,
.ferla-wc .woocommerce table.cart td.actions .button:hover {
	background: #111;
	color: #fff;
}
.ferla-wc button.button:disabled,
.ferla-wc .woocommerce table.cart td.actions .button:disabled {
	opacity: .35;
	cursor: default;
}
.ferla-wc button.button:disabled:hover {
	background: #fff;
	color: #111;
}
/* the "Have a coupon?" link inherits the magenta theme link color */
.ferla-wc .woocommerce-form-coupon-toggle .woocommerce-info {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 0 4px !important;
	justify-content: flex-start;
	color: #9a9a9a;
	font-size: 13.5px;
	font-weight: 500;
}
.ferla-wc .woocommerce-form-coupon-toggle .showcoupon {
	color: #777;
	font-weight: 600;
	text-decoration: underline;
}
.ferla-wc .woocommerce-form-coupon-toggle .showcoupon:hover {
	color: #F73821;
}

/* ---- select2 dropdown on WC pages (attached to <body>, so scoped via :has) ---- */
body:has(.ferla-wc) .select2-container--open .select2-dropdown {
	border: 1.5px solid #e2e2e2;
	border-radius: 12px;
	box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .28);
	overflow: hidden;
	font-family: 'VisbyRoundCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
body:has(.ferla-wc) .select2-dropdown--below {
	margin-top: 6px;
}
body:has(.ferla-wc) .select2-dropdown--above {
	margin-bottom: 6px;
}
body:has(.ferla-wc) .select2-search--dropdown {
	padding: 10px 10px 6px;
}
body:has(.ferla-wc) .select2-search--dropdown .select2-search__field {
	height: 42px;
	border: 1.5px solid #e2e2e2 !important;
	border-radius: 8px;
	padding: 0 12px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	color: #111;
	outline: none;
	box-sizing: border-box;
}
body:has(.ferla-wc) .select2-search--dropdown .select2-search__field:focus {
	border-color: #111 !important;
	box-shadow: 0 0 0 3px rgba(17, 17, 17, .08);
}
body:has(.ferla-wc) .select2-results__options {
	max-height: 264px;
	padding: 6px;
}
body:has(.ferla-wc) .select2-results__option {
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 15px;
	color: #111;
}
body:has(.ferla-wc) .select2-container--default .select2-results__option--highlighted[aria-selected],
body:has(.ferla-wc) .select2-container--default .select2-results__option--highlighted[data-selected] {
	background: #f5f5f5 !important;
	color: #111 !important;
}
body:has(.ferla-wc) .select2-container--default .select2-results__option[aria-selected="true"],
body:has(.ferla-wc) .select2-container--default .select2-results__option[data-selected="true"] {
	background: #fff4f1;
	color: #F73821;
	font-weight: 600;
}

/* ============================================================ Ferla WC archive
   Shop / category / related-product loops — premium-minimal cards: no card
   chrome, the image IS a soft-gray rounded tile, left-aligned type, quiet
   buttons. `body.woocommerce` (class sits on <body>) out-ranks Woo defaults. */
body.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	column-gap: 26px;
	row-gap: 40px;
	margin: 14px 0 46px;
	padding: 0;
	list-style: none;
}
body.woocommerce ul.products::before,
body.woocommerce ul.products::after {
	display: none; /* Woo's clearfix breaks grid */
}
body.woocommerce ul.products li.product,
body.woocommerce ul.products[class*="columns-"] li.product {
	position: relative;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	text-align: left;
	background: none;
	border: 0;
}
body.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	text-decoration: none;
}
/* The image is the tile: contained inside a padded soft-gray rounded box.
   !important height beats Elementor's `.elementor img { height: auto }`. */
body.woocommerce ul.products li.product a img,
body.woocommerce ul.products li.product img {
	width: 100%;
	height: 230px !important;
	box-sizing: border-box;
	object-fit: contain;
	padding: 22px;
	background: #f6f6f6;
	border-radius: 14px;
	margin: 0 0 16px;
	box-shadow: none;
	transition: background .18s ease;
}
body.woocommerce ul.products li.product:hover img {
	background: #eeeeee;
}
body.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: #111;
	padding: 0;
	margin: 0 0 4px;
	transition: color .15s ease;
}
body.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
	color: #F73821;
}
body.woocommerce ul.products li.product .price {
	color: #555;
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	margin: 0 0 14px;
}
body.woocommerce ul.products li.product .price del {
	color: #9a9a9a;
	font-weight: 500;
	opacity: 1;
	margin-right: 6px;
}
body.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	font-weight: 600;
	color: #F73821;
}
body.woocommerce ul.products li.product .button {
	margin: auto 0 0;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border: 1.5px solid #ddd;
	border-radius: 8px;
	background: #fff;
	color: #111;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease, transform .1s ease;
}
body.woocommerce ul.products li.product .button:hover {
	border-color: #111;
	background: #111;
	color: #fff;
}
body.woocommerce ul.products li.product .button:active {
	transform: scale(.97);
}
body.woocommerce ul.products li.product .button.loading {
	opacity: .55;
	pointer-events: none;
}
body.woocommerce ul.products li.product .added_to_cart {
	margin-top: 4px;
	align-self: flex-start;
	padding: 12px 2px;
	color: #F73821;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}
body.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	margin: 0;
	min-height: 0;
	min-width: 0;
	background: #F73821;
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	padding: 7px 11px;
	border-radius: 999px;
	z-index: 1;
}

/* archive chrome: breadcrumb, count, sorting, pagination */
body.woocommerce .woocommerce-breadcrumb {
	color: #767676;
	font-size: 13.5px;
	font-weight: 500;
	margin: 0 0 12px;
}
body.woocommerce .woocommerce-breadcrumb a {
	color: #666;
	text-decoration: none;
	transition: color .15s ease;
}
body.woocommerce .woocommerce-breadcrumb a:hover {
	color: #F73821;
}
body.woocommerce .woocommerce-result-count {
	color: #6f6f6f;
	font-size: 14.5px;
	font-weight: 500;
	margin: 8px 0 24px;
}
body.woocommerce .woocommerce-ordering {
	margin: 0 0 24px;
}
body.woocommerce .woocommerce-ordering select {
	height: 44px;
	border: 1.5px solid #e2e2e2;
	border-radius: 9px;
	padding: 0 34px 0 14px;
	background: #fff;
	color: #111;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 500;
	cursor: pointer;
}
body.woocommerce nav.woocommerce-pagination {
	margin: 6px 0 34px;
}
body.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	justify-content: center;
	gap: 8px;
	border: 0;
	margin: 0;
}
body.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	overflow: visible;
}
body.woocommerce nav.woocommerce-pagination ul li a,
body.woocommerce nav.woocommerce-pagination ul li span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 9px;
	border: 1.5px solid #e2e2e2;
	border-radius: 9px;
	background: #fff;
	color: #111;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1;
	text-decoration: none;
	transition: border-color .15s ease;
}
body.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: #fff;
	border-color: #111;
	color: #111;
}
body.woocommerce nav.woocommerce-pagination ul li span.current {
	background: #F73821;
	border-color: #F73821;
	color: #fff;
}

/* a11y: focus rings + reduced motion */
body.woocommerce ul.products li.product .button:focus-visible,
body.woocommerce ul.products li.product .woocommerce-LoopProduct-link:focus-visible,
body.woocommerce ul.products li.product .added_to_cart:focus-visible,
body.woocommerce .woocommerce-ordering select:focus-visible,
body.woocommerce nav.woocommerce-pagination ul li a:focus-visible {
	outline: 2px solid #F73821;
	outline-offset: 2px;
	border-radius: 10px;
}
@media (max-width: 640px) {
	body.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 14px;
		row-gap: 28px;
	}
	body.woocommerce ul.products li.product a img,
	body.woocommerce ul.products li.product img {
		height: 160px !important;
		padding: 14px;
		border-radius: 12px;
		margin: 0 0 12px;
	}
	body.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 14.5px;
	}
	body.woocommerce ul.products li.product .price {
		font-size: 14px;
		margin-bottom: 12px;
	}
	body.woocommerce ul.products li.product .button {
		align-self: stretch;
		width: 100%;
		min-height: 44px;
		padding: 0 10px;
	}
}
@media (prefers-reduced-motion: reduce) {
	body.woocommerce ul.products li.product img,
	body.woocommerce ul.products li.product .button,
	body.woocommerce ul.products li.product .woocommerce-loop-product__title {
		transition: none;
	}
	body.woocommerce ul.products li.product .button:active {
		transform: none;
	}
}

/* ============================================================ Cart: review-only
   The quantity stepper is gone (Ferla_Elements::simplify_cart) — the cart is a
   review step, editing happens on the product page. With qty fixed, the unit
   price column just repeated the line total, so only the line total stays. */
.ferla-wc table.cart th.product-price,
.ferla-wc table.cart td.product-price,
.ferla-wc table.cart th.product-quantity,
.ferla-wc table.cart td.product-quantity {
	display: none !important;
}
/* nothing left for it to update */
.ferla-wc table.cart td.actions button[name="update_cart"] {
	display: none !important;
}
/* qty > 1 is still reachable by adding the same product twice — a quiet note
   so the line total never disagrees with the price without explanation */
.ferla-wc table.cart td.product-name .ferla-wc__qty {
	display: block;
	margin-top: 4px;
	color: #8d8d8d;
	font-size: 13px;
	font-weight: 500;
}

/* ---- coupon: collapsed behind a quiet text link ---- */
.ferla-wc table.cart td.actions {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}
.ferla-wc table.cart td.actions .coupon {
	order: 2;
	float: none;
	display: none;
	gap: 8px;
	width: 100%;
	max-width: 400px;
}
.ferla-wc table.cart td.actions.is-coupon-open .coupon {
	display: flex;
}
.ferla-wc__coupon-toggle {
	order: 1;
	padding: 0;
	border: 0;
	background: none;
	color: #9a9a9a;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color .15s ease;
}
.ferla-wc__coupon-toggle:hover {
	color: #F73821;
}
.ferla-wc__coupon-toggle:focus-visible {
	outline: 2px solid #F73821;
	outline-offset: 3px;
	border-radius: 4px;
}
/* the revealed field + Apply, dialled right down (out-ranks the re-assert
   block above, which pins width/height on the coupon input) */
.ferla-wc .woocommerce table.cart td.actions .coupon .input-text,
.ferla-wc table.cart td.actions .coupon .input-text {
	flex: 1 1 auto;
	width: auto !important;
	height: 40px !important;
	padding: 0 12px;
	border: 1px solid #ececec !important;
	border-radius: 8px;
	background: #fafafa;
	font-size: 13.5px !important;
	font-weight: 500;
}
.ferla-wc .woocommerce table.cart td.actions .coupon .button,
.ferla-wc table.cart td.actions .coupon .button {
	flex: 0 0 auto;
	height: 40px;
	padding: 0 14px;
	border: 1px solid #ececec;
	border-radius: 8px;
	background: #fff;
	color: #888;
	font-size: 13.5px;
	font-weight: 600;
}
.ferla-wc .woocommerce table.cart td.actions .coupon .button:hover,
.ferla-wc table.cart td.actions .coupon .button:hover {
	border-color: #111;
	background: #111;
	color: #fff;
}

/* ---- CHECKOUT on mobile: children must span the column ----
   Below 1024px the checkout form flips from grid to a column flexbox, but
   `align-items: start` (set for the desktop grid) carries over, so children
   shrink-wrap instead of stretching. `.ferla-wc .col2-set { width: auto }`
   also drops Woo's own width:100%, which left #customer_details sized to its
   widest label — ~224px inside a 329px form. Stretch everything instead. */
@media (max-width: 1024px) {
	.ferla-wc--checkout form.woocommerce-checkout {
		align-items: stretch;
	}
	.ferla-wc--checkout form.woocommerce-checkout > *,
	.ferla-wc--checkout .col2-set,
	.ferla-wc--checkout .col2-set .col-1,
	.ferla-wc--checkout .col2-set .col-2 {
		width: 100% !important;
		max-width: none !important;
	}
	/* hidden tracking inputs — keep them collapsed, not stretched */
	.ferla-wc--checkout #wc-stripe-express-checkout__order-attribution-inputs {
		width: auto !important;
	}
}
/* narrower gutters on phones so the form actually uses the screen */
@media (max-width: 640px) {
	.ferla-wc--checkout {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* Mobile cart cards: `.ferla-wc table.cart tr.cart_item td { display:block !important }`
   above scores (0,3,3), so the (0,3,2) `td.product-price` hides lose to it —
   including the pre-existing "subtotal covers it" rule. Re-assert through
   tr.cart_item so the selector out-ranks it. */
@media (max-width: 768px) {
	.ferla-wc table.cart tr.cart_item td.product-price,
	.ferla-wc table.cart tr.cart_item td.product-quantity {
		display: none !important;
	}
}