/* Marcin: footer in the style of the site (05.11.2026) - loaded after header.css (header.tpl), markup in footer.tpl.
   Deep green band (the brand green, one step darker) with light text: a row of the facts that sell, a brand column
   (logo, one line about the shop, the social icons that used to be a grey strip above the footer), the link columns,
   a bottom bar with the copyright and "Back to top".
   The theme styles the footer in global.css / responsive.css and home.css restyles the social icons on the homepage -
   the "html body #page #footer" prefix keeps these rules on top. */

html body #page #footer {
	--sf-foot-bg: #2f3a25;
	--sf-foot-line: rgba(255, 255, 255, 0.14);
	--sf-foot-text: rgba(255, 255, 255, 0.72);
	--sf-foot-muted: rgba(255, 255, 255, 0.52);
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--sf-foot-bg);
	color: var(--sf-foot-text);
	font-family: "Open Sans", sans-serif;
}

html body #page #footer > .container {
	padding-top: 0;
	padding-bottom: 0;
}

/* ---------- facts row ---------- */
html body #page #footer .sf-foot-trust {
	/* global.css floats every ul in the footer */
	float: none;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 36px 0;
	border-bottom: 1px solid var(--sf-foot-line);
	list-style: none;
}

html body #page #footer .sf-foot-trust li {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
}

html body #page #footer .sf-foot-trust svg {
	/* global.css hides svg:not(:root) */
	display: block !important;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	padding: 11px;
	border: 1px solid var(--sf-foot-line);
	border-radius: 50%;
	fill: none;
	stroke: #fff;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

html body #page #footer .sf-foot-trust span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: var(--sf-foot-muted);
	font-size: 13px;
	line-height: 1.4;
}

html body #page #footer .sf-foot-trust strong {
	color: #fff;
	font-family: Marcellus, Georgia, serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.25;
}

html body #page #footer .sf-foot-trust a,
html body #page #footer .sf-foot-trust a:visited {
	color: var(--sf-foot-muted);
	text-decoration: none;
}

html body #page #footer .sf-foot-trust a:hover {
	color: #fff;
}

/* ---------- main: brand column + link columns ---------- */
html body #page #footer .sf-foot-main {
	display: grid;
	/* brand column 240px (6 social icons x 34px + gaps), the link columns get the rest */
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 56px;
	padding: 48px 0 40px;
}

html body #page #footer .sf-foot-brand__logo {
	display: inline-block;
	margin: 0 0 18px;
}

/* the dark logo drawn white */
html body #page #footer .sf-foot-brand__logo img {
	display: block;
	width: auto;
	height: 56px;
	filter: brightness(0) invert(1);
}

html body #page #footer .sf-foot-brand__text {
	margin: 0 0 24px;
	padding: 0;
	color: var(--sf-foot-text);
	font-size: 14px;
	line-height: 1.6;
}

/* social icons: thin white circles */
html body #page #footer .footer_socials_container {
	display: flex;
	height: auto;
	min-width: 0;
	flex-wrap: wrap;
	justify-content: flex-start;
	/* 6 icons x 34px + 5 x 6px: one row in the brand column */
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

html body #page #footer .footer_socials_container::before,
html body #page #footer .footer_socials_container::after {
	display: none;
}

html body #page #footer .footer_socials_container > div {
	margin: 0;
	padding: 0;
}

html body #page #footer .footer_socials_container .social_icons_element a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	border: 1px solid var(--sf-foot-line);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

html body #page #footer .footer_socials_container .social_icons_element i {
	color: inherit;
	font-size: 14px;
}

html body #page #footer .footer_socials_container .social_icons_element.element2_greenroom svg {
	width: 20px;
	height: 20px;
	color: inherit;
}

html body #page #footer .footer_socials_container .social_icons_element a:hover,
html body #page #footer .footer_socials_container .social_icons_element a:focus-visible {
	border-color: #fff;
	background: #fff;
	color: #2f3a25;
}

/* link columns */
html body #page #footer .footer_sections_container {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 32px;
	margin: 0;
	padding: 0;
}

html body #page #footer .footer_section_column {
	width: auto;
	margin: 0;
	padding: 0;
}

html body #page #footer .footer_section_main_title {
	margin: 0 0 16px;
	padding: 0;
	color: #fff;
	font-family: Marcellus, Georgia, serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
}

html body #page #footer .footer_section_main_title_next {
	margin-top: 28px;
}

html body #page #footer .footer_section_links {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

html body #page #footer .footer_section_links a,
html body #page #footer .footer_section_links a:visited,
html body #page #footer .footer_section_links .new_a,
html body #page #footer .footer_section_links .footer_link_active {
	display: block;
	margin: 0;
	padding: 0;
	color: var(--sf-foot-text);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.15s ease;
}

html body #page #footer .footer_section_links a:hover,
html body #page #footer .footer_section_links .new_a:hover {
	color: #fff;
}

/* the page you are on */
html body #page #footer .footer_section_links .footer_link_active {
	color: #fff;
	font-weight: 600;
}

/* The Green Room logo (dark png) white, its line muted */
html body #page #footer .the_magazine_footer_container {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--sf-foot-line);
}

html body #page #footer .the_magazine_footer_logo {
	width: auto;
	max-width: 160px;
	height: auto;
	filter: brightness(0) invert(1);
}

html body #page #footer .the_magazine_footer_container,
html body #page #footer .the_magazine_footer_container * {
	color: var(--sf-foot-muted);
	font-size: 13px;
	line-height: 1.5;
}

/* contact column: the theme hides its heading and centres the text below desktop - heading shown, text left */
html body #page #footer .footer_section_contact .footer_section_main_title {
	display: block;
}

html body #page #footer .footer_section_contact .footer_section_container {
	padding: 0;
	text-align: left;
	color: var(--sf-foot-text);
	font-size: 14px;
	line-height: 1.7;
}

html body #page #footer .footer_section_contact #social_block {
	margin-top: 16px;
}

html body #page #footer .footer_section_contact .footer_social_icons_container {
	display: inline-flex;
	gap: 8px;
	padding: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
}

html body #page #footer .footer_section_contact .footer_social_icons_container i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	border: 1px solid var(--sf-foot-line);
	border-radius: 50%;
	color: #fff;
	font-size: 14px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

html body #page #footer .footer_section_contact .footer_social_icons_container:hover i {
	border-color: #fff;
	background: #fff;
	color: #2f3a25;
}

/* the phone-only logo in the contact column: not needed (the brand column has the logo) */
html body #page #footer .contact_footer_logo_mobile {
	display: none;
}

/* ---------- bottom bar ---------- */
html body #page #footer .sf-foot-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding: 20px 0 28px;
	border-top: 1px solid var(--sf-foot-line);
}

html body #page #footer .sf-foot-bottom p {
	margin: 0;
	padding: 0;
	color: var(--sf-foot-muted);
	font-size: 12px;
	line-height: 1.5;
}

html body #page #footer #back-top.sf-foot-bottom__top {
	position: static;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
}

html body #page #footer #back-top.sf-foot-bottom__top a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--sf-foot-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: none;
}

html body #page #footer #back-top.sf-foot-bottom__top span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	border: 1px solid var(--sf-foot-line);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: 20px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* the theme draws the arrow black at 55px - white like the other footer circles, sized to their 14px icons
   (the pe-7s glyph is thin, 26px reads like them) */
html body #page #footer #back-top.sf-foot-bottom__top i {
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	color: inherit;
	font-size: 26px;
	line-height: 1;
}

html body #page #footer #back-top.sf-foot-bottom__top i::before {
	color: inherit;
}

html body #page #footer #back-top.sf-foot-bottom__top a:hover {
	color: #fff;
}

html body #page #footer #back-top.sf-foot-bottom__top a:hover span {
	background: #fff;
	color: #2f3a25;
}

/* ---------- tablet ---------- */
@media (max-width: 1199px) {
	html body #page #footer .sf-foot-trust {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 32px;
	}

	html body #page #footer .sf-foot-main {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	html body #page #footer .sf-foot-brand__text {
		max-width: 520px;
	}
}

@media (max-width: 991px) {
	html body #page #footer .footer_sections_container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px;
	}
}

/* ---------- phone: facts one per line, the link columns as the theme's accordions ---------- */
@media (max-width: 767px) {
	html body #page #footer .sf-foot-trust {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		padding: 28px 0;
	}

	html body #page #footer .sf-foot-main {
		gap: 28px;
		padding: 32px 0 24px;
	}

	html body #page #footer .footer_sections_container {
		display: block;
	}

	html body #page #footer .footer_section_column {
		border-bottom: 1px solid var(--sf-foot-line);
	}

	html body #page #footer .footer_section_main_title {
		position: relative;
		margin: 0;
		padding: 16px 0;
		/* the theme's faint top line doubled the column lines */
		border-top: 0;
		font-size: 18px;
		cursor: pointer;
	}

	html body #page #footer .footer_section_main_title_next {
		margin-top: 0;
		border-top: 1px solid var(--sf-foot-line);
	}

	/* the theme's +/- drawn from two lines */
	html body #page #footer .footer_section_main_title .icon-wrapper span {
		background: #fff;
	}

	/* the theme indents the open list by 25px - links under their heading */
	html body #page #footer .footer_section_container,
	html body #page #footer .footer_section_links {
		padding-left: 0;
	}

	html body #page #footer .footer_section_container {
		padding-bottom: 16px;
	}

	html body #page #footer .footer_section_contact {
		border-top: 0;
		border-bottom: 0;
	}

	html body #page #footer .footer_section_contact .footer_section_main_title {
		cursor: default;
	}

	html body #page #footer .footer_section_contact .footer_section_container {
		padding-bottom: 0;
	}

	html body #page #footer .sf-foot-bottom {
		flex-direction: column;
		align-items: flex-start;
		/* room for the phone bottom bar */
		padding-bottom: 76px;
	}
}

/* ==========================================================================
   Marcin: footer 2.0 - light (05.11.2026). The same layout, the colours of the pages: grey #f4f4f4 band with
   dark text, white circles with green icons, and only the bottom bar in the deep green as the brand accent
   (1.0, the dark band above, felt heavy under short pages). Switched by the class sf-foot-v2 on #footer in
   footer.tpl - without the class the footer is 1.0 again.
   ========================================================================== */
html body #page #footer.sf-foot-v2 {
	--sf-foot-bg: #f4f4f4;
	--sf-foot-line: #e3e3e3;
	--sf-foot-text: #3c3c3b;
	--sf-foot-muted: #6d6c67;
	border-top: 1px solid #e3e3e3;
}

/* facts row: green icons in white circles, dark titles */
html body #page #footer.sf-foot-v2 .sf-foot-trust svg {
	border-color: #e3e3e3;
	background: #fff;
	stroke: #414f34;
}

html body #page #footer.sf-foot-v2 .sf-foot-trust strong,
html body #page #footer.sf-foot-v2 .footer_section_main_title,
html body #page #footer.sf-foot-v2 .footer_section_links .footer_link_active {
	color: #2b2b29;
}

html body #page #footer.sf-foot-v2 .sf-foot-trust a:hover,
html body #page #footer.sf-foot-v2 .footer_section_links a:hover,
html body #page #footer.sf-foot-v2 .footer_section_links .new_a:hover {
	color: #414f34;
}

/* the logos in their own colours (1.0 drew them white) */
html body #page #footer.sf-foot-v2 .sf-foot-brand__logo img,
html body #page #footer.sf-foot-v2 .the_magazine_footer_logo {
	filter: none;
}

/* social and contact icons: white circles, green when hovered */
html body #page #footer.sf-foot-v2 .footer_socials_container .social_icons_element a,
html body #page #footer.sf-foot-v2 .footer_section_contact .footer_social_icons_container i {
	border-color: #e3e3e3;
	background: #fff;
	color: #3c3c3b;
}

html body #page #footer.sf-foot-v2 .footer_socials_container .social_icons_element a:hover,
html body #page #footer.sf-foot-v2 .footer_socials_container .social_icons_element a:focus-visible,
html body #page #footer.sf-foot-v2 .footer_section_contact .footer_social_icons_container:hover i {
	border-color: #414f34;
	background: #414f34;
	color: #fff;
}

/* bottom bar: a deep green strip across the whole window (the bar sits in .container - the background reaches the
   window edges with a spread shadow, clip-path keeps it to the bar's height) */
html body #page #footer.sf-foot-v2 .sf-foot-bottom {
	padding-top: 16px;
	padding-bottom: 16px;
	border-top: 0;
	background: #2f3a25;
	box-shadow: 0 0 0 100vmax #2f3a25;
	clip-path: inset(0 -100vmax);
}

html body #page #footer.sf-foot-v2 .sf-foot-bottom p {
	color: rgba(255, 255, 255, 0.6);
}

html body #page #footer.sf-foot-v2 #back-top.sf-foot-bottom__top a {
	color: rgba(255, 255, 255, 0.8);
}

html body #page #footer.sf-foot-v2 #back-top.sf-foot-bottom__top a:hover {
	color: #fff;
}

html body #page #footer.sf-foot-v2 #back-top.sf-foot-bottom__top span {
	border-color: rgba(255, 255, 255, 0.2);
	color: #fff;
}

/* phone: dark +/- on the light band, the strip keeps room for the bottom navigation bar */
@media (max-width: 767px) {
	html body #page #footer.sf-foot-v2 .footer_section_main_title .icon-wrapper span {
		background: #2b2b29;
	}

	html body #page #footer.sf-foot-v2 .sf-foot-bottom {
		padding-bottom: 76px;
	}
}

/* ==========================================================================
   Marcin: social icons as their own band right above the footer (footer.tpl .sf-foot-social-band, 05.11.2026).
   The client: they are vital and had lost their weight. Out of the grey footer, on white: dark outlined circles
   (44px, like the facts row), each turning to its brand colour on hover as in the old
   strip (Instagram's gradient comes from global.css .element2_instagram a::before). Outside #footer, so the old
   strip rules (global.css, and the two-id ones in sfcatalog category.css / sfhomebase home.css) are reset here -
   hence the band's id in the selectors.
   ========================================================================== */
html body #page #sf-social-band {
	/* on pages where #page is a flex row with ordered blocks (homepage: header 1, columns 3, footer 6) - right before
	   the footer, full width */
	flex: 0 0 100%;
	order: 5;
	/* no z-index (Marcin, 10.11.2026): with z-index 2 the band covered the sticky Add to order bar, which sits in
	   #columns (z-index 1). The product page carousel's empty bottom padding over the band lets clicks through
	   instead (sfproduct product.css) */
	position: relative;
	width: 100%;
	/* white (Marcin): a line on top separates it from white content above, the grey footer below has its own */
	border-top: 1px solid #e3e3e3;
	background: #fff;
}

html body #page #sf-social-band .sf-foot-social {
	display: flex;
	justify-content: center;
	padding: 18px 0;
}

html body #page #sf-social-band .footer_socials_container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
	width: auto;
	height: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

html body #page #sf-social-band .footer_socials_container::before,
html body #page #sf-social-band .footer_socials_container::after {
	display: none;
}

html body #page #sf-social-band .social_icons_element {
	margin: 0;
	padding: 0;
}

html body #page #sf-social-band .footer_socials_container .social_icons_element a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 44px;
	height: 44px;
	margin: 0;
	border: 1px solid #2b2b29;
	border-radius: 50%;
	background: transparent;
	color: #2b2b29;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

html body #page #sf-social-band .footer_socials_container .social_icons_element a i {
	position: relative;
	z-index: 2;
	color: inherit;
	font-size: 18px;
}

/* brand colours on hover (the old strip's look) */
html body #page #sf-social-band .footer_socials_container .social_icons_element.element2_facebook a:hover { border-color: #0866ff; background: #0866ff; color: #fff; }
html body #page #sf-social-band .footer_socials_container .social_icons_element.element2_linkedin a:hover { border-color: #0a66c2; background: #0a66c2; color: #fff; }
html body #page #sf-social-band .footer_socials_container .social_icons_element.element2_youtube a:hover { border-color: #ff0033; background: #ff0033; color: #fff; }
html body #page #sf-social-band .footer_socials_container .social_icons_element.element2_spotify a:hover { border-color: #1dd05d; background: #1dd05d; color: #fff; }
html body #page #sf-social-band .footer_socials_container .social_icons_element.element2_pinterest a:hover { border-color: #e60023; background: #e60023; color: #fff; }
html body #page #sf-social-band .footer_socials_container .social_icons_element.element2_instagram a:hover { border-color: #dc2743; background: transparent; color: #fff; }

/* The Green Room monogram (svg - global.css hides svg:not(:root)): dark mark with its green leaf, GR green on hover */
html body #page #sf-social-band .social_icons_element.element2_greenroom svg {
	position: relative;
	z-index: 2;
	display: block !important;
	width: 22px;
	height: 22px;
	overflow: visible;
	color: inherit;
}

html body #page #sf-social-band .footer_socials_container .social_icons_element.element2_greenroom a:hover { border-color: #667650; background: #667650; color: #fff; }

html body #page #sf-social-band .social_icons_element a:focus-visible {
	outline: 2px solid #414f34;
	outline-offset: 2px;
}

/* phone: all 7 in one row */
@media (max-width: 767px) {
	html body #page #sf-social-band .sf-foot-social {
		padding: 16px 0;
	}

	/* 7 icons x 40px + 6 x 8px: one row on a 375px screen */
	html body #page #sf-social-band .footer_socials_container {
		gap: 8px;
	}

	html body #page #sf-social-band .footer_socials_container .social_icons_element a {
		width: 40px;
		height: 40px;
	}
}

/* ==========================================================================
   Marcin: footer Contact - phone, WhatsApp, e-mail as rows with an icon (05.11.2026, the client)
   ========================================================================== */
html body #page #footer .sf-foot-contact {
	float: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: auto;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

html body #page #footer .sf-foot-contact li {
	margin: 0;
	padding: 0;
	list-style: none;
}

html body #page #footer .sf-foot-contact a,
html body #page #footer .sf-foot-contact a:visited {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--sf-foot-text);
	font-size: 14px;
	line-height: 1.3;
	text-decoration: none;
	transition: color 0.15s ease;
}

html body #page #footer .sf-foot-contact__icon {
	display: flex;
	flex: 0 0 36px;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--sf-foot-line);
	border-radius: 50%;
	background: #fff;
	color: #414f34;
	font-size: 14px;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

html body #page #footer .sf-foot-contact__icon i {
	color: inherit;
	font-size: inherit;
}

html body #page #footer .sf-foot-contact a:hover {
	color: #414f34;
}

html body #page #footer .sf-foot-contact a:hover .sf-foot-contact__icon {
	border-color: #414f34;
	background: #414f34;
	color: #fff;
}

/* 1.0 (dark footer) */
html body #page #footer:not(.sf-foot-v2) .sf-foot-contact a:hover {
	color: #fff;
}

html body #page #footer:not(.sf-foot-v2) .sf-foot-contact__icon {
	background: transparent;
	color: #fff;
}

/* the address block's 30px bottom margin (theme) off - the rows 14px under the address */
html body #page #footer .footer_section_contact .footer_section_container:has(+ .footer_section_container .sf-foot-contact) {
	margin-bottom: 0;
}