/**
 * WooCommerce page shells (Cart, Checkout, My Account) — styles for
 * theme-added presentation on top of WooCommerce's own native
 * templates/shortcodes. Only enqueued on those pages (see
 * inc/theme-setup.php).
 */

/* ---------- My Account: dashboard quick-links grid ----------
   Native theme content (inc/woocommerce.php), not Elementor — the
   whole card is one <a>, not just its text/icon. */
.account-dashboard-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0 0 32px;
}

@media (max-width: 900px) {
	.account-dashboard-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.account-dashboard-grid {
		grid-template-columns: 1fr;
	}
}

.account-dashboard-card {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 88px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 14px;
	padding: 16px 20px;
	box-sizing: border-box;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.account-dashboard-card:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--bf-color-accent);
}

.account-dashboard-card__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--bf-color-accent);
	color: var(--bf-color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.account-dashboard-card__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.account-dashboard-card__label {
	color: var(--bf-color-white);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}

.account-dashboard-card__desc {
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	line-height: 1.3;
}

/* ---------- My Account: dashboard "Hello X..." box ----------
   Recreated from the live site's own real values (measured via
   DevTools: background #5A6634, padding 16px 30px, gold links) — a
   real design we're keeping, not something invented. Scoped to the
   dashboard root only (bf_account_dashboard_body_class in
   inc/woocommerce.php) since .woocommerce-MyAccount-content is the
   same class on every other account tab (Orders, Addresses — tables/
   forms, not meant to get this treatment). */
body.bf-account-dashboard .woocommerce-MyAccount-content {
	background: #5A6634;
	color: var(--bf-color-white);
	padding: 16px 30px;
	/* WooCommerce's own woocommerce-layout.css floats this at a partial
	   width, sized to sit next to .woocommerce-MyAccount-navigation —
	   which is hidden here (display:none), so undo the float/width to
	   let the box span the full column instead of sitting off-center. */
	float: none;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
}

body.bf-account-dashboard .woocommerce-MyAccount-content a {
	color: var(--bf-color-accent);
}

/* ---------- My Account: default nav list ----------
   Plain WooCommerce markup — our cards above already cover the same
   links on the dashboard, so it's hidden there; still shown (default
   browser styling for now) on every other account tab so there's a
   way to move between them. */
body.bf-account-dashboard .woocommerce-MyAccount-navigation {
	display: none;
}

/* ---------- Shop (product archive) ---------- */
/* Real video banner: local mp4 (attachment 14972, same file production
   uses), flat overlay rgba(72,72,72,0.63) (0.7 alpha * 0.9 opacity,
   confirmed via DevTools), 675px height, heading 54px/700/white in
   Aeonik (the body font, not the display one — confirmed real, not
   assumed) — no dedicated Shop page exists in this DB
   (wc_get_page_id('shop') === -1), so the heading text is hardcoded
   in archive-product.php, matching the real (also hardcoded, in the
   old Elementor template) text. */
.shop-banner {
	position: relative;
	height: 675px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.shop-banner__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shop-banner__overlay {
	position: absolute;
	inset: 0;
	background: rgba(72, 72, 72, 0.63);
}

.shop-banner__content {
	position: relative;
	z-index: 1;
}

.shop-banner__heading {
	font-family: var(--bf-font-body);
	color: var(--bf-color-white);
	font-size: 54px;
	font-weight: 700;
	margin: 0;
}

@media (max-width: 767px) {
	.shop-banner {
		height: 400px;
	}

	.shop-banner__heading {
		font-size: 32px;
	}
}

.shop-content-wrap {
	background: var(--bf-color-primary);
	box-sizing: border-box;
}

.shop-content-wrap__inner {
	max-width: 1270px;
	margin: 0 auto;
	padding: 40px 24px 80px;
	box-sizing: border-box;
}

/* Result count + sort dropdown row. */
.shop-content-wrap .woocommerce-result-count {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
}

.shop-content-wrap .woocommerce-ordering {
	margin-bottom: 30px;
	text-align: right;
}

.shop-content-wrap .woocommerce-ordering select {
	background: rgba(255, 255, 255, 0.05);
	color: var(--bf-color-white);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 14px;
}

/* Product grid — real values confirmed via DevTools: 3 columns,
   22px column-gap / 30px row-gap, 1270px container (3 x 408.6px card
   + 2 x 22px gap). */
.shop-content-wrap ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 22px;
	row-gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* WooCommerce's own woocommerce-layout.css puts an old float-era
   clearfix on this exact element — `ul.products::before,::after {
   content:" "; display:table }`. In a grid container, a ::before/
   ::after WITH CONTENT still generates a real box and becomes an
   actual (invisible) grid item — occupying the first and second-to-
   last auto-placed cells and shoving every real product over by one
   slot (confirmed: that's exactly why row 1 showed 2 cards instead of
   3). Removing the generated content stops them from being grid items
   at all. */
.shop-content-wrap ul.products::before,
.shop-content-wrap ul.products::after {
	content: none !important;
	display: none !important;
}

@media (max-width: 900px) {
	.shop-content-wrap ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.shop-content-wrap ul.products {
		grid-template-columns: 1fr;
	}
}

.shop-content-wrap ul.products li.product {
	/* WooCommerce's own woocommerce-layout.css still ships the pre-grid
	   float layout, including a `.woocommerce.columns-3 ul.products
	   li.product{width:30.75%}` variant more specific than this
	   selector — it was winning the cascade and shrinking every card
	   into a fraction of its grid cell instead of filling it.
	   !important because nothing short of it reliably beats that
	   selector's specificity. */
	list-style: none;
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	/* Titles wrap to different line counts (1 vs 2 lines) across cards
	   in the same row, pushing their buttons to different heights —
	   stack the card as a column and pin the button to the bottom so
	   every button in a row lines up regardless. */
	display: flex;
	flex-direction: column;
}

.shop-content-wrap ul.products li.product .button {
	margin-top: auto;
}

.shop-content-wrap ul.products li.product a.woocommerce-loop-product__link {
	display: block;
	text-decoration: none;
}

.shop-content-wrap ul.products li.product img {
	display: block;
	width: 100%;
	border-radius: 30px;
	object-fit: fill;
}

.shop-content-wrap ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--bf-font-body);
	color: var(--bf-color-white);
	font-size: 33px;
	font-weight: 400;
	text-transform: uppercase;
	text-align: center;
	margin: 16px 0 4px;
}

.shop-content-wrap ul.products li.product .price {
	display: block;
	text-align: center;
	color: var(--bf-color-accent);
	font-size: 18px;
	margin-bottom: 14px;
}

.shop-content-wrap ul.products li.product .button {
	display: block;
	text-align: center;
	background: transparent;
	color: var(--bf-color-white);
	border: 2px solid var(--bf-color-white);
	border-radius: 10px;
	padding: 13px 10px;
	text-decoration: none;
	font-size: 14px;
}

.shop-content-wrap ul.products li.product .button:hover {
	background: var(--bf-color-white);
	color: var(--bf-color-primary);
}

/* Pagination — same treatment as the Blog grid's. */
.shop-content-wrap .woocommerce-pagination {
	margin-top: 50px;
}

.shop-content-wrap .woocommerce-pagination ul {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.shop-content-wrap .woocommerce-pagination a,
.shop-content-wrap .woocommerce-pagination span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	color: var(--bf-color-white);
	text-decoration: none;
	border-radius: 6px;
	font-size: 14px;
}

.shop-content-wrap .woocommerce-pagination a:hover {
	background: var(--bf-color-accent);
	color: var(--bf-color-primary);
}

.shop-content-wrap .woocommerce-pagination span.current {
	background: var(--bf-color-accent);
	color: var(--bf-color-primary);
	font-weight: 700;
}

/* ---------- Single Product ---------- */
.product-page-wrap {
	background: var(--bf-color-primary);
	box-sizing: border-box;
}

/* The site header is a transparent overlay (~115px tall with the logo),
   so the top padding has to clear it; with 60px the breadcrumb ran
   underneath the logo and the header controls. */
.product-page-wrap__inner {
	max-width: 1270px;
	margin: 0 auto;
	padding: 150px 24px 80px;
	box-sizing: border-box;
}

@media (max-width: 1024px) {
	.product-page-wrap__inner {
		padding-top: 130px;
	}
}

.product-page-wrap .woocommerce-breadcrumb {
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
	margin: 0 0 30px;
}

.product-page-wrap .woocommerce-breadcrumb a {
	color: rgba(255, 255, 255, 0.6);
}

/* Gallery (54%) + summary (46%) — real values confirmed via DevTools
   (686px / 1270px container). */
.product-page {
	display: grid;
	grid-template-columns: 54% 44%;
	gap: 2%;
	align-items: start;
}

.product-page__gallery {
	display: flex;
	gap: 16px;
}

.product-page__thumbs {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex-shrink: 0;
	width: 97px;
}

.product-page__thumb {
	display: block;
	width: 97px;
	height: 97px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	opacity: 0.5;
}

.product-page__thumb.is-active {
	opacity: 1;
}

.product-page__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 15px;
}

.woocommerce-product-gallery {
	flex: 1;
	position: relative;
}

/* WooCommerce's own plugin CSS ships
   `.woocommerce-product-gallery__image:nth-child(n+2){width:25%}` (its
   default below-image thumbnail grid). We're not using that layout, but
   the rule still applies here, so every image after the first collapses
   to a quarter width — and to 25%-wide once it becomes .is-active — the
   "hueco" gap on the sides whenever a thumbnail other than the first is
   selected. !important to beat that rule regardless of stylesheet
   load order. */
.woocommerce-product-gallery__image {
	display: none !important;
	position: absolute;
	inset: 0;
	width: 100% !important;
	opacity: 0;
	pointer-events: none;
}

.woocommerce-product-gallery__image.is-active {
	display: block !important;
	position: relative;
	opacity: 1;
	pointer-events: auto;
}

.woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 15px;
}

/* WooCommerce's bundled gallery script (wc-single-product.js) adds its
   own Flexslider thumbnail strip below the main image — a second,
   duplicate set of thumbnails alongside the left-hand rail our own
   product-gallery.js builds. We're not using Flexslider's own nav. */
.woocommerce-product-gallery .flex-control-nav,
.woocommerce-product-gallery ol.flex-control-nav {
	display: none !important;
}

@media (max-width: 900px) {
	.product-page {
		grid-template-columns: 1fr;
	}

	.product-page__gallery {
		flex-direction: column;
	}

	.product-page__thumbs {
		order: 2;
		flex-direction: row;
		flex-wrap: wrap;
		width: auto;
	}
}

/* Summary column. */
.product-page__summary .product_title {
	font-family: 'Anton', sans-serif;
	color: var(--bf-color-white);
	font-size: 32px;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.3;
	margin: 0 0 10px;
}

.product-page__summary p.price {
	color: var(--bf-color-accent);
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 30px;
}

.product-page__summary p.price del {
	color: rgba(255, 255, 255, 0.5);
	opacity: 1;
}


/* Variation attribute label ("Size") + the woo-variation-swatches
   plugin's button markup. Its own "wvs-theme-base-fitness" preset
   (configured in wp-admin) renders dark pills on the live site, but
   locally it was coming through white/square — styled explicitly here
   with !important instead of trusting the plugin's own CSS to load
   with the right preset/specificity. */
.product-page__summary .variations .label label {
	color: var(--bf-color-white);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	display: block;
	margin-bottom: 18px;
}

.product-page__summary table.variations {
	border: none;
	margin: 0 0 20px;
}

.product-page__summary table.variations td {
	border: none;
	padding: 0;
}

.product-page__summary .variable-item {
	background: #1E1C1E !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	border-radius: 50px !important;
	color: var(--bf-color-white) !important;
	width: auto !important;
	height: 50px !important;
	padding: 14px 29px !important;
	box-sizing: border-box !important;
}

.product-page__summary .variable-item .variable-item-contents {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.product-page__summary .variable-item.selected,
.product-page__summary .variable-item.wvs-active,
.product-page__summary .variable-item:hover {
	background: var(--bf-color-accent) !important;
	color: var(--bf-color-primary) !important;
}

.product-page__summary .variable-item .variable-item-contents,
.product-page__summary .variable-item span {
	color: inherit !important;
	font-weight: 700 !important;
	font-size: 18px !important;
}

.product-page__summary .quantity input.qty {
	/* Matches the Add to cart button's own rendered height (14px
	   padding + 16px text, border-box) instead of a fixed value taller
	   than it. */
	width: 90px;
	height: 48px;
	background: transparent;
	border: 1px solid var(--bf-color-white);
	color: var(--bf-color-white);
	border-radius: 10px;
	text-align: center;
	font-size: 16px;
	box-sizing: border-box;
}

.product-page__summary .single_add_to_cart_button {
	/* WooCommerce's own woocommerce.css ships default sizing/color on
	   this exact class at equal specificity — same cascade-tie issue
	   as the Shop grid earlier, so every property here is !important. */
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: var(--bf-color-white) !important;
	color: var(--bf-color-primary) !important;
	border: none !important;
	border-radius: 10px !important;
	height: 48px !important;
	padding: 0 24px !important;
	box-sizing: border-box !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	flex: 1;
}

.product-page__summary .single_add_to_cart_button:hover {
	background: var(--bf-color-accent) !important;
}

/* Before a variation is picked, WooCommerce adds .disabled — grayed
   out to signal it's not clickable yet; turns white (the rule above)
   once a real variation is selected. */
.product-page__summary .single_add_to_cart_button.disabled {
	background: #A0A0A0 !important;
	color: rgba(0, 0, 0, 0.6) !important;
	cursor: not-allowed;
}

.product-page__summary form.cart {
	margin: 0 0 30px;
}

/* For VARIABLE products, the quantity input + Add to cart button live
   inside this wrapper (only shown once a variation is picked) — not
   as direct children of form.cart, which is why flexing form.cart
   alone didn't put them side by side. */
.product-page__summary .woocommerce-variation-add-to-cart {
	display: flex !important;
	align-items: center;
	gap: 16px;
}

.product-page__summary .quantity {
	flex-shrink: 0;
}

/* "Details" accordion. */
.product-page__details {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 20px;
}

.product-page__details-toggle {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	color: var(--bf-color-white);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	padding: 0 0 14px;
}

.product-page__details-content {
	color: var(--bf-color-white);
	font-size: 18px;
	line-height: 1.6;
}

.product-page__details-content p {
	margin: 0 0 16px;
}

.product-page__details-content p:last-child {
	margin-bottom: 0;
}

.product-page__details.is-collapsed .product-page__details-content {
	display: none;
}


/* ---------- My Account: logged-out login screen ----------
   Standalone screen (no header/footer) — every number below was
   measured with DevTools on basefitness.us/my-account/ (not guessed):
   151px dark gradient strip, 600px olive card (50px padding) with the
   icon watermark at 20% opacity, white 500px login box, gold pill
   "Log In" button. Markup: template-parts/account-login-screen.php. */
body.bf-login-screen {
	background: #000;
	color: #fff;
	margin: 0;
	min-height: 100vh;
	font-family: 'Roboto', sans-serif;
}

.bf-login-top {
	height: 151px;
	/* Horizontal #222 to #111 base, with the live section's own
	   transparent-to-black overlay fading it out toward the bottom. */
	background:
		linear-gradient(rgba(0, 0, 0, 0) 0%, #000 100%),
		linear-gradient(90deg, #222 0%, #111 100%);
}

.bf-login-back {
	position: fixed;
	left: -20px;
	top: 40px;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	height: 50px;
	padding: 17px 30px;
	background: rgba(0, 0, 0, 0.19);
	border-radius: 5px;
	color: var(--bf-color-accent);
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 16px;
	text-decoration: none;
}

.bf-login-main {
	padding: 40px 0;
}

.bf-login-card {
	position: relative;
	box-sizing: border-box;
	width: 600px;
	max-width: calc(100% - 32px);
	margin: 0 auto;
	padding: 50px;
	background: linear-gradient(90deg, #4F5B31 0%, #80954C 100%);
}

.bf-login-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../images/icon-white-1.svg') -35vw 50% / 70vw auto no-repeat;
	opacity: 0.2;
	/* The source SVG is white; the live overlay darkens it to a black
	   silhouette with brightness(0) (confirmed in its computed styles). */
	filter: brightness(0);
	pointer-events: none;
}

.bf-login-card > * {
	position: relative;
}

.bf-login-card__heading {
	margin: 0 0 65px;
	font-family: 'Matter', sans-serif;
	font-size: 50px;
	font-weight: 400;
	line-height: 50px;
	text-transform: uppercase;
	color: #fff;
}

.bf-login-card .woocommerce-error,
.bf-login-card .woocommerce-message,
.bf-login-card .woocommerce-info {
	margin: -25px 0 20px;
	padding: 12px 16px;
	list-style: none;
	background: rgba(0, 0, 0, 0.35);
	border: 0;
	border-left: 4px solid var(--bf-color-accent);
	color: #fff;
	font-size: 14px;
	line-height: 20px;
}

.bf-login-card .woocommerce-error::before,
.bf-login-card .woocommerce-message::before,
.bf-login-card .woocommerce-info::before {
	display: none;
}

.bf-login-card .woocommerce-error a,
.bf-login-card .woocommerce-message a {
	color: var(--bf-color-accent);
}

.bf-login-card__box {
	background: #fff;
	padding: 26px 24px 24px;
}

.bf-login-form__field {
	margin: 0 0 10px;
}

.bf-login-form__field label {
	display: block;
	padding: 0 0 10px;
	font-size: 16px;
	line-height: 16px;
	color: #000;
}

.bf-login-form__field input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 8px 16px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.17);
	border-radius: 0;
	color: #000;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	line-height: 21px;
}

.bf-login-form__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 40px;
}

.bf-login-form__remember {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13.6px;
	line-height: 13.6px;
	color: #000;
	cursor: pointer;
}

.bf-login-form__remember input {
	margin: 0;
}

.bf-login-form__submit {
	height: 40px;
	padding: 0 24px;
	background: var(--bf-color-accent);
	border: 0;
	border-radius: 100px;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	line-height: 15px;
	cursor: pointer;
}

.bf-login-card__lost {
	display: block;
	box-sizing: border-box;
	height: 24px;
	margin-top: 20px;
	padding-top: 4px;
	color: var(--bf-color-accent);
	font-size: 16px;
	line-height: 16px;
	text-decoration: none;
}

/* Lost password: the plain WooCommerce form inside a narrower olive
   box, left aligned in the same 600px column — as it appears on the
   live site (300px wide, #5A6634, pill input and button). */
.bf-login-lost {
	box-sizing: border-box;
	width: 600px;
	max-width: calc(100% - 32px);
	margin: 0 auto;
}

.bf-login-lost form.lost_reset_password {
	box-sizing: border-box;
	width: 300px;
	max-width: 100%;
	padding: 16px 30px;
	background: #5A6634;
	color: #fff;
	font-size: 14px;
	line-height: 24px;
}

.bf-login-lost form.lost_reset_password p {
	margin: 0 0 14.4px;
	font-family: 'Matter', sans-serif;
}

.bf-login-lost form.lost_reset_password .form-row {
	float: none;
	width: 100%;
	margin: 0;
	padding: 3px 0;
}

.bf-login-lost form.lost_reset_password .form-row-first {
	margin-bottom: 6px;
}

.bf-login-lost form.lost_reset_password label {
	display: block;
	margin: 0 0 7px;
	font-family: 'Matter', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 28px;
	color: #fff;
}

.bf-login-lost form.lost_reset_password .required {
	color: #e2401c;
	text-decoration: none;
}

.bf-login-lost form.lost_reset_password input.input-text {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 15px;
	background: transparent;
	border: 1px solid #fff;
	border-radius: 100px;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
}

.bf-login-lost form.lost_reset_password button.button {
	height: 50px;
	padding: 15px 25px;
	background: var(--bf-color-accent);
	border: 0;
	border-radius: 100px;
	color: #fff;
	font-family: 'Matter', sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 20px;
	cursor: pointer;
}

.bf-login-lost .woocommerce-message,
.bf-login-lost .woocommerce-error {
	box-sizing: border-box;
	width: 300px;
	max-width: 100%;
	margin: 0 0 16px;
	padding: 12px 16px;
	list-style: none;
	background: #5A6634;
	border: 0;
	color: #fff;
	font-family: 'Matter', sans-serif;
	font-size: 14px;
	line-height: 20px;
}

.bf-login-lost .woocommerce-message::before,
.bf-login-lost .woocommerce-error::before {
	display: none;
}

@media (max-width: 767px) {
	.bf-login-card {
		padding: 30px 20px;
	}

	.bf-login-card__heading {
		font-size: 36px;
		line-height: 36px;
		margin-bottom: 40px;
	}
}