/**
 * Kloira - Global Footer Styles
 * Matches Figma design specifications
 *
 * @package Onviqa
 * @since 1.0.0
 */

/* ===============================
   ABOVE FOOTER SECTIONS
   Brand Collection, Recently Viewed, Trust Block
   =============================== */

.only-above-footer {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 50px;
}

/* Brand Collection Section - Uses component's own dark background */
.only-above-footer__brand-collection {
	/* Component has its own padding, no additional padding needed */
}

/* Override component's margin to prevent layout shifts */
.only-above-footer__brand-collection .ksq-brand-collection {
	margin-left: 0;
	width: 100%;
}

/* Recently Viewed Section - Light background for contrast */
.only-above-footer__recently-viewed {
	background: #ffffff;
	padding: 80px 0;
}

/* Empty state: hide section when no recently viewed products */
.only-above-footer__recently-viewed:empty,
.only-above-footer__recently-viewed:has(.ksq-recently-viewed-section:empty),
.only-above-footer__recently-viewed:not(:has(.ksq-recently-viewed-section)) {
	display: none !important;
	padding: 0 !important;
}

.only-above-footer__recently-viewed .ksq-recently-viewed-section {
	margin: 0;
}

.only-above-footer__recently-viewed .ksq-recently-viewed-section--shortcode {
	margin: 0;
}

.only-above-footer__recently-viewed .ksq-product-slider__title {
	color: #1A1A1A;
	font-family: 'DM Serif Display', serif;
	font-weight: 400;
	font-size: 44px;
	line-height: 60px;
	text-align: center;
	margin-bottom: 40px;
}

.only-above-footer__recently-viewed .ksq-product-slider__container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Trust Block Section - Light background */
.only-above-footer__trust-block {
	background: #ffffff;
	padding: 0 0 80px;
}

/* When recently viewed is empty, add top padding to trust block */
.only-above-footer__recently-viewed:empty + .only-above-footer__trust-block {
	padding: 80px 0 80px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
	.only-above-footer__recently-viewed {
		padding: 60px 0;
	}
	
	.only-above-footer__recently-viewed .ksq-product-slider__title {
		font-size: 36px;
		line-height: 48px;
		margin-bottom: 32px;
	}
	
	.only-above-footer__trust-block {
		padding: 0 0 60px;
	}
	
	/* When recently viewed is empty, add top padding */
	.only-above-footer__recently-viewed:empty + .only-above-footer__trust-block {
		padding: 60px 0 60px;
	}
}

@media (max-width: 768px) {
	.only-above-footer__recently-viewed {
		padding: 48px 0;
	}
	
	.only-above-footer__recently-viewed .ksq-product-slider__title {
		font-size: 28px;
		line-height: 38px;
		margin-bottom: 24px;
	}
	
	/* Trust block component handles its own 20px padding on mobile */
	.only-above-footer__trust-block {
		padding: 0;
	}
	
	/* When recently viewed is empty, no extra wrapper padding needed */
	.only-above-footer__recently-viewed:empty + .only-above-footer__trust-block,
	.only-above-footer__recently-viewed:not(:has(.ksq-recently-viewed-section)) + .only-above-footer__trust-block {
		padding: 0;
	}
}

@media (max-width: 480px) {
	.only-above-footer__recently-viewed {
		padding: 40px 0;
	}
	
	.only-above-footer__recently-viewed .ksq-product-slider__title {
		font-size: 24px;
		line-height: 32px;
		margin-bottom: 20px;
	}
	
	/* Trust block component handles its own 20px padding on mobile */
	.only-above-footer__trust-block {
		padding: 0;
		background: #ffffff;
	}
	
	/* When recently viewed is empty, no extra padding needed */
	.only-above-footer__recently-viewed:empty + .only-above-footer__trust-block,
	.only-above-footer__recently-viewed:not(:has(.ksq-recently-viewed-section)) + .only-above-footer__trust-block {
		padding: 0;
	}
}

/* ===============================
   FOOTER BASE - 1440px Container
   =============================== */

.site-footer {
	background: radial-gradient(50.29% 37.95% at 50% 0%, #222222 0%, #111111 100%), #111111;
	color: #ffffff;
	font-family: 'Roboto Flex', system-ui, sans-serif;
	position: relative;
	z-index: 100;
	overflow-x: hidden;
	max-width: 100vw;
}

.ksq-footer-container {
	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.ksq-footer-container--narrow {
	max-width: 1240px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

@media (max-width: 1480px) {
	.ksq-footer-container {
		max-width: 100%;
		padding: 0 20px;
	}
}

@media (max-width: 1280px) {
	.ksq-footer-container--narrow {
		max-width: 100%;
		padding: 0 20px;
	}
}

/* ===============================
   SECTION 1: BRAND + DESCRIPTION + SOCIAL
   =============================== */

.ksq-footer-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 80px 0 40px;
	gap: 32px;
	width: 600px;
	max-width: 100%;
	margin: 0 auto;
}

.ksq-footer-brand__top {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
	gap: 24px;
	width: 600px;
	max-width: 100%;
}

.ksq-footer-brand__logo {
	background: transparent !important;
}

.ksq-footer-brand__logo img {
	width: 258px;
	height: 50px;
	background: transparent !important;
	/* Make SVG logo white */
	filter: brightness(0) invert(1);
}

/* If logo is already white/light, don't invert */
.ksq-footer-brand__logo img[src*="-white"],
.ksq-footer-brand__logo img[src*="_white"],
.ksq-footer-brand__logo img.logo-white {
	filter: none;
}

.ksq-footer-brand__description {
	width: 600px;
	max-width: 100%;
	font-family: 'Roboto Flex', system-ui, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	text-align: center;
	color: #CCCCCC;
	margin: 0;
}

.ksq-footer-brand__social {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0;
	gap: 16px;
	height: 40px;
}

.ksq-footer-brand__social-label {
	font-size: 16px;
	font-weight: 400;
	line-height: 19px;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.6);
}

.ksq-footer-brand__social-icons {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.ksq-footer-social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #ffffff;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.ksq-footer-social-icon:hover {
	transform: scale(1.1);
}

.ksq-footer-social-icon__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.12);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ksq-footer-social-icon:hover .ksq-footer-social-icon__circle {
	border-color: rgba(255, 255, 255, 0.3);
	background-color: rgba(255, 255, 255, 0.05);
}

.ksq-footer-social-icon svg {
	width: 16px;
	height: 16px;
}

/* ===============================
   SECTION 2: NEWSLETTER - 1240px
   =============================== */

.ksq-footer-newsletter-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0;
}

.ksq-footer-newsletter {
	position: relative;
	width: 1240px;
	max-width: 100%;
	height: 245px;
	background: radial-gradient(70.97% 137.11% at 0% 50.2%, #AE2121 0%, #7B0000 100%);
	border-radius: 24px;
	margin: 40px auto;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.ksq-footer-newsletter__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 0 80px;
}

.ksq-footer-newsletter__content {
	max-width: 400px;
	flex-shrink: 0;
}

.ksq-footer-newsletter__heading {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-size: 32px !important;
	font-style: normal !important;
	font-weight: 700 !important;
	line-height: normal !important;
	color: #FFFFFF !important;
	margin: 0 0 12px;
}

.ksq-footer-newsletter__description {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-size: 16px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 20px !important; /* 125% */
	color: rgba(255, 255, 255, 0.80) !important;
	margin: 0;
}

.ksq-footer-newsletter__form-wrap {
	flex-shrink: 0;
}

.ksq-footer-newsletter__form {
	width: 100%;
}

.ksq-footer-newsletter__input-wrap {
	display: flex;
	align-items: center;
	background: #ffffff;
	border-radius: 12px;
	padding: 5px;
	width: 500px;
	height: 64px;
	max-width: 100%;
	box-sizing: border-box;
	border: none;
	box-shadow: none;
}

.ksq-footer-newsletter__input {
	flex: 1;
	border: none !important;
	background: transparent;
	padding: 16px 20px;
	font-family: 'Helvetica Neue', system-ui, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 21px;
	color: #222222;
	outline: none !important;
	box-shadow: none !important;
	height: 100%;
}

.ksq-footer-newsletter__input:focus {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.ksq-footer-newsletter__input::placeholder {
	color: #666666;
}

.ksq-footer-newsletter__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 28px;
	background: #F1C557;
	border: none;
	border-radius: 8px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-size: 18px !important;
	font-style: normal !important;
	font-weight: 600 !important;
	line-height: normal !important;
	text-align: center !important;
	color: #222 !important;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
	min-width: 160px;
	height: 54px;
}

.ksq-footer-newsletter__button:hover {
	background: #e0b44a;
	transform: translateY(-1px);
}

.ksq-footer-newsletter__button:active {
	transform: translateY(0);
}

.ksq-footer-newsletter__button:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
}

.ksq-footer-newsletter__message {
	position: absolute;
	bottom: -40px;
	left: 80px;
	right: 80px;
	padding: 10px 16px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}

.ksq-footer-newsletter__message--success {
	background: rgba(76, 175, 80, 0.9);
	color: #ffffff;
}

.ksq-footer-newsletter__message--error {
	background: rgba(244, 67, 54, 0.9);
	color: #ffffff;
}

/* Newsletter Decoration - Right Side Image (Desktop) */
.ksq-footer-newsletter__decor--desktop {
	position: absolute;
	top: 0;
	right: 0;
	width: 350px;
	height: 100%;
	z-index: 1;
	overflow: hidden;
	border-radius: 0 24px 24px 0;
	background-image: url('/wp-content/uploads/2025/12/Mask-group.webp');
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
}

/* Mobile decoration - hidden on desktop */
.ksq-footer-newsletter__decor--mobile {
	display: none;
}

/* Legacy SVG Pattern - hidden when image is used */
.ksq-footer-newsletter__decor-svg {
	display: none;
}

@media (max-width: 1280px) {
	.ksq-footer-newsletter {
		width: 100%;
		margin: 40px 20px;
		max-width: calc(100% - 40px);
	}
	
	.ksq-footer-newsletter__inner {
		padding: 0 60px;
	}
}

@media (max-width: 1024px) {
	.ksq-footer-newsletter {
		height: auto;
		min-height: 245px;
		margin: 40px 20px;
	}
	
	.ksq-footer-newsletter__inner {
		flex-direction: column;
		text-align: center;
		padding: 40px;
		gap: 24px;
	}
	
	.ksq-footer-newsletter__content {
		max-width: 100%;
	}
	
	.ksq-footer-newsletter__input-wrap {
		width: 100%;
		max-width: 500px;
	}
	
	.ksq-footer-newsletter__decor--desktop {
		display: none;
	}
}

@media (max-width: 600px) {
	.ksq-footer-newsletter {
		margin: 24px 16px;
		max-width: calc(100% - 32px);
	}
	
	.ksq-footer-newsletter__inner {
		padding: 32px 24px;
	}
	
	.ksq-footer-newsletter__heading {
		font-size: 24px;
		line-height: 30px;
	}
	
	.ksq-footer-newsletter__input-wrap {
		flex-direction: column;
		gap: 12px;
		padding: 12px;
		height: auto;
	}
	
	.ksq-footer-newsletter__input {
		padding: 12px 16px;
		height: auto;
	}
	
	.ksq-footer-newsletter__button {
		width: 100%;
	}
}

/* ===============================
   SECTION 3: NAVIGATION COLUMNS
   =============================== */

.ksq-footer-nav {
	padding: 60px 0;
}

.ksq-footer-nav__columns {
	display: flex;
	justify-content: space-between;
	gap: 0;
}

.ksq-footer-nav__column {
	flex: 1;
	min-width: 0;
}

.ksq-footer-nav__divider {
	width: 1px;
	background: #333333;
	flex-shrink: 0;
	margin: 0 32px;
	align-self: stretch;
}

.ksq-footer-nav__title {
	font-family: 'Roboto Flex', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 19px;
	text-transform: uppercase;
	color: #888888;
	margin: 0 0 24px;
}

.ksq-footer-nav__links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ksq-footer-nav__links li {
	margin: 0;
}

.ksq-footer-nav__links a {
	font-family: 'Roboto Flex', system-ui, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 21px;
	color: #ffffff;
	text-decoration: none;
	transition: color 0.2s ease;
}

.ksq-footer-nav__links a:hover {
	color: #F1C557;
}

@media (max-width: 1200px) {
	.ksq-footer-nav__divider {
		margin: 0 20px;
	}
}

@media (max-width: 1024px) {
	.ksq-footer-nav__columns {
		flex-wrap: wrap;
		gap: 40px 0;
	}
	
	.ksq-footer-nav__column {
		flex: 0 0 calc(50% - 20px);
	}
	
	.ksq-footer-nav__divider {
		display: none;
	}
}

/* ===============================
   FOOTER NAV - Toggle button (hidden on desktop)
   =============================== */

.ksq-footer-nav__toggle {
	display: contents; /* On desktop, button is invisible/structural only */
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: default;
	width: 100%;
	text-align: left;
	color: inherit;
	font: inherit;
}

.ksq-footer-nav__chevron {
	display: none; /* Hidden on desktop */
}

@media (max-width: 600px) {
	.ksq-footer-nav {
		padding: 0;
		margin-top: 32px;
	}
	
	.ksq-footer-nav__columns {
		flex-direction: column;
		gap: 0;
	}
	
	.ksq-footer-nav__column {
		flex: none;
		border-bottom: 1px solid #333333;
	}
	
	.ksq-footer-nav__column:first-child {
		border-top: 1px solid #333333;
	}
	
	/* Toggle button - full width, flex row */
	.ksq-footer-nav__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 16px 0;
		background: none;
		border: none;
		cursor: pointer;
		color: inherit;
		text-align: left;
		-webkit-tap-highlight-color: transparent;
	}
	
	.ksq-footer-nav__title {
		font-size: 14px;
		font-weight: 700;
		line-height: 17px;
		text-transform: uppercase;
		color: #FFFFFF;
		margin: 0;
		pointer-events: none;
	}
	
	/* Chevron icon */
	.ksq-footer-nav__chevron {
		display: block;
		width: 16px;
		height: 16px;
		color: #888888;
		flex-shrink: 0;
		transition: transform 0.3s ease;
	}
	
	/* Rotate chevron when expanded */
	.ksq-footer-nav__toggle[aria-expanded="true"] .ksq-footer-nav__chevron {
		transform: rotate(180deg);
	}
	
	/* Links - hidden by default on mobile (accordion collapsed) */
	.ksq-footer-nav__links {
		gap: 14px;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.35s ease, padding 0.35s ease;
		padding: 0;
	}
	
	/* Links - shown when accordion is expanded */
	.ksq-footer-nav__column.is-open .ksq-footer-nav__links {
		max-height: 500px; /* Large enough to fit all links */
		padding-bottom: 20px;
	}
	
	.ksq-footer-nav__links a {
		font-size: 16px;
		font-weight: 400;
		line-height: 19px;
		color: #CCCCCC;
	}
	
	.ksq-footer-nav__links a:hover {
		color: #F1C557;
	}
}

/* ===============================
   SECTION 4: BOTTOM BAR - Full Width
   =============================== */

.ksq-footer-bottom {
	background: #222222;
	padding: 32px 0;
}

.ksq-footer-bottom__inner {
	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.ksq-footer-bottom__logo {
	background: transparent !important;
}

.ksq-footer-bottom__logo img {
	height: 52px;
	width: auto;
	background: transparent !important;
	/* Make SVG logo white */
	filter: brightness(0) invert(1);
}

/* If logo is already white/light, don't invert */
.ksq-footer-bottom__logo img[src*="-white"],
.ksq-footer-bottom__logo img[src*="_white"],
.ksq-footer-bottom__logo img.logo-white {
	filter: none;
}

.ksq-footer-bottom__contact {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ksq-footer-bottom__contact-row {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ksq-footer-bottom__contact-item {
	font-family: 'Roboto Flex', system-ui, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 21px;
	color: #ffffff;
	text-decoration: none;
	transition: color 0.2s ease;
}

.ksq-footer-bottom__contact-item:hover {
	color: #F1C557;
}

.ksq-footer-bottom__dot {
	width: 4px;
	height: 4px;
	background: #666666;
	border-radius: 50%;
	flex-shrink: 0;
}

.ksq-footer-bottom__copyright {
	font-family: 'Roboto Flex', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 19px;
	color: #888888;
	margin: 0;
}

.ksq-footer-bottom__payments {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ksq-footer-bottom__payments-label {
	font-family: 'Roboto Flex', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 19px;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.6);
}

.ksq-footer-bottom__payment-icons img {
	width: 344px;
	height: 24px;
}

@media (max-width: 1480px) {
	.ksq-footer-bottom__inner {
		max-width: 100%;
		padding: 0 20px;
	}
}

@media (max-width: 900px) {
	.ksq-footer-bottom__inner {
		flex-direction: column;
		text-align: center;
		gap: 24px;
	}
	
	.ksq-footer-bottom__contact-row {
		flex-wrap: wrap;
		justify-content: center;
	}
}

@media (max-width: 600px) {
	/* Full-width background, break out of .site-footer padding */
	.ksq-footer-bottom {
		padding: 32px 0;
		margin-top: 32px;
		margin-left: -20px;
		margin-right: -20px;
		width: calc(100% + 40px);
	}
	
	/* Figma: 282px content, centered, 24px gap */
	.ksq-footer-bottom__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 0;
		gap: 24px;
		max-width: 282px;
		margin: 0 auto;
	}
	
	/* Logo - 165px x 32px per Figma */
	.ksq-footer-bottom__logo img {
		width: 165px;
		height: 32px;
	}
	
	/* Contact section - column, 16px gap between contact rows and copyright */
	.ksq-footer-bottom__contact {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		width: 100%;
		max-width: 262px;
	}
	
	/* Contact rows - wrap into lines, centered */
	.ksq-footer-bottom__contact-row {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		width: 100%;
	}
	
	/* Hide all dot separators on mobile - items stack vertically */
	.ksq-footer-bottom__contact-row .ksq-footer-bottom__dot {
		display: none;
	}
	
	/* Contact items - 14px font, 16px line-height per Figma */
	.ksq-footer-bottom__contact-item {
		font-family: 'Roboto Flex', sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: 16px;
		color: #FFFFFF;
		text-align: center;
	}
	
	/* Copyright - 12px font, 14px line-height per Figma */
	.ksq-footer-bottom__copyright {
		font-family: 'Roboto Flex', sans-serif;
		font-size: 12px;
		font-weight: 400;
		line-height: 14px;
		color: #888888;
		margin: 0;
		text-align: center;
	}
	
	/* Payments section - column layout, 10px gap per Figma */
	.ksq-footer-bottom__payments {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		width: 100%;
		max-width: 282px;
	}
	
	/* "We Accept:" label - 12px font per Figma */
	.ksq-footer-bottom__payments-label {
		font-family: 'Roboto Flex', sans-serif;
		font-size: 12px;
		font-weight: 400;
		line-height: 14px;
		letter-spacing: 0.01em;
		color: rgba(255, 255, 255, 0.6);
		text-align: center;
	}
	
	/* Payment icons - 20px height, fit within 282px per Figma */
	.ksq-footer-bottom__payment-icons img {
		width: auto;
		max-width: 282px;
		height: 20px;
	}
}

/* ===============================
   SECTION 5: SEO LINKS - 1080px
   =============================== */

.ksq-footer-seo {
	padding: 60px 0 0;
	position: relative;
	z-index: 50;
}

.ksq-footer-seo__container {
	display: flex;
	width: 1080px;
	max-width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.ksq-footer-seo__placeholder {
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ksq-footer-seo__loading {
	display: flex;
	gap: 8px;
}

.ksq-footer-seo__loading span {
	width: 8px;
	height: 8px;
	background: #444;
	border-radius: 50%;
	animation: ksqFooterPulse 1.2s ease-in-out infinite;
}

.ksq-footer-seo__loading span:nth-child(2) {
	animation-delay: 0.2s;
}

.ksq-footer-seo__loading span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes ksqFooterPulse {
	0%, 100% { opacity: 0.3; transform: scale(0.8); }
	50% { opacity: 1; transform: scale(1); }
}

.ksq-footer-seo__content {
	display: contents;
}

.ksq-footer-seo__intro {
	margin-bottom: 0;
}

.ksq-footer-seo__intro-title {
	color: #888;
	font-family: "Roboto Flex", sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	margin: 0 0 12px;
}

.ksq-footer-seo__intro-desc {
	color: #DDD;
	font-family: "Roboto Flex", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px;
	margin: 0;
}

.ksq-footer-seo__group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ksq-footer-seo__group-title {
	align-self: stretch;
	color: #888;
	font-family: "Roboto Flex", sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	margin: 0;
}

.ksq-footer-seo__group-links {
	align-self: stretch;
	color: #DDD;
	font-family: "Roboto Flex", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px;
	margin: 0;
}

.ksq-footer-seo__group-links a {
	color: #DDD;
	text-decoration: none;
	transition: color 0.2s ease;
}

.ksq-footer-seo__group-links a:hover {
	color: #F1C557;
}

.ksq-footer-seo__group-links .ksq-sep {
	margin: 0 4px;
	color: #666666;
}

/* Make SEO group links wrap properly on mobile */
.ksq-footer-seo__group-links {
	word-wrap: break-word;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ===============================
   WATERMARK LOGO - Full Width
   =============================== */

.ksq-footer-seo__watermark {
	display: block;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	overflow: hidden;
	/* 80px gap from SEO links section */
	margin-top: 80px;
	/* Show ~90% of logo height */
	height: 180px;
	pointer-events: none;
}

/* The inline SVG from Figma with displacement filter */
.ksq-footer-watermark-svg {
	width: 100%;
	height: auto;
	display: block;
	/* Position SVG so top portion is visible */
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

/* Legacy support: If using img instead of inline SVG */
.ksq-footer-seo__watermark img {
	width: 100%;
	max-width: 1440px;
	height: auto;
	display: block;
	/* Gray color #333333 */
	filter: brightness(0) invert(0.22);
	/* Linear gradient mask: Figma gradient 21.49% to 96.07% */
	mask-image: linear-gradient(180deg, 
		rgba(255, 255, 255, 1) 21.49%, 
		rgba(255, 255, 255, 0) 96.07%);
	-webkit-mask-image: linear-gradient(180deg, 
		rgba(255, 255, 255, 1) 21.49%, 
		rgba(255, 255, 255, 0) 96.07%);
}

/* Note: Texture effect now handled by inline SVG filter (feTurbulence + feDisplacementMap) */
/* This pseudo-element is for legacy img fallback only */
.ksq-footer-seo__watermark::before {
	content: none; /* Disabled - SVG handles the effect */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAMaklEQVR4nO2d6ZLbNhCE5/3fNHFSsS1xQRzEXvl+kLJFir3T09N7kFT1P/z8888/f/zxx3/88cc//PDDD99///03X3/99Rdffvnl5+uvv/7ss88+/fTTTz7++OOPPvrow4cP3//gg/ffe++9d9999513/v73d99++513/va3d95+6+2333rrrbfefPPNNxppvPHGG6+//vprr732+2uvvfbqa6+9+sorr7z08ssvv/TSSy+9+OKLL7zwwgsvvPDC888//9xzzz333HPPPfvss88888wzTz/99FNPP/30U0899dSTTz75xBNPPPH4448//vjjjz/22GOPPvbYY48++uijjzz66KOPP/LII4889PDDDz/00EMPPfjggw8+8OCDDz5w//3333f//fffd/99991333333vvve+699977/vu+97573Hvvu+6++6677r7r7rvvuuuuO+888847b7/9tttuv/32226/7fbbbrv11ltvvfXWW2655ZZbbr7l5ptvvvnmm2+68aYbb7zxxhtvvPHGG66//vrrr7/++muuuebqa666+pprr776qquuuuqqq6686qorrrrqqiuvuOKKK6644orrr7/+isuuvPzyyy+//PLLLr3s0ssuveyyy4488sgjjzjy8CMOOeSwQw899LBDDznk0EMOOeTggw8+5OCDDz744IMPOuiggw466OAD9t9/vwP232+/Aw7Yf/8D9t9vv/322+///fe/77777rv/vvvu/+9/3/1/+MMf//jHP/7hD3/4wx/+8Id//P0f//D7P/z+D7//wz/+4fd/+P0f/vD7P/z+D7//wx/+8Ps//OEPf/jDH/7wu9//7ne/++1vf/vb3/7mN7/5zW9+85vf/OY3v/nNb37zm9/85je/+c1vfv3rX//617/61a9+9atf/epXv/rVr371q1/96le/+tWv/uuXv/rlL3/5y1/+8pe//OUvf/nLX/7yl7/85S9/+Ytf/OIXv/jFL37xy1/88uc///nPf/7zn//85z/7+c9+9rOf/exnP/vZz3768/99+tOf/vSnP/3pT3/6k5/85Cc/+clPfvKTn/zkJz/5yU/+9+Of/OQnP/nJT3/605/+9Kc//elPf/rTn/70pz/96U9/+pOf/OQnP/npT3/605/+9Kc//elPf/rTn/70pz/96U9/+tOf/uQnP/nJT37605/+9Kc//elPf/rTn/70p/8bSX/0ox/96Ec/+tGPfvSjH/3oRz/60Y9+9KMf/ehHP/rRj370ox/96Mc//vGPf/zjH//4xz/+8Y9//OMf//jHP/7xj3/84x//+Mc//vGPf/zjH//4xz/+8Y9//OMf//hHP/rRj3/0ox/96Ec/+tGPfvSjH/3oRz/60Y9+9OP/N+L/2Y9+9KMf/ehHP/rRj370ox/96Ec/+tGPfvSjH/3oRz/60f/+938//fTTTz/99NNPPv30009++Mmnnnrq6aefevqpp556+umnn3766aeeevrpp59++umnn/rUpz71qU996lOf+tSnPvWpT33qU5/61Kc+9alPferTn/rUp//n0586dOjQoUOHDh06dOjQoUOHDh06dOjQoUOHDh06dOjQoUOHDh06dOjQoUOHDh06dOjQoUOHDh06dOjQwYMHDx48ePDggw8+ePDgwQcffPDBBx988MEHH3rwwYcefOihBx966MGHHnzwoQcfeujBhx586KGHHnro4YcffvjhRx5+5OGHH37k4Uce+cQnP/HJT37yE5/4xCc++YlPfPKTn/jkJz/5yU988pOf/OQnP/nJT37iE5/45Cc+8YlPfuKTn/jkJz7xiU984pOf+MQnPvHJT3zyE5/45Cc/+cn/0ye+/vWvf/3rX//617/+9a9//etf//rXv/71r3/961//+te//vWvf/3rX//q17/+1a9/9atf/+pXv/rVr371q1/96le/+tWv/8+vf/2rX/3qV7/61a9+9atf/epXv/rVr371q1/96le/+tWvfvWrX/3qV7/61a9+9atf/epXv/rVr371q1/96le/+tWvfv3rX//617/+9a9//etf//rXv/71r3/961//+te//vWvf/3rX//617/+9a9//etf//rXv/7Vr3/961//+te//vWvf/3rX//617/+9a9//etf//rXv/71r3/961//+te//vWvf/3rX/3qV7/61a9+9atf/epXv/rVr371q1/96le/+tWvfvWrX/3qV7/61a9+9atf/epXv/rVr371q1/96le/+tWvfvXLX/7ylzc6/stf/vKXv/zl//zyl7/85S9/+ctf/vKXv/zlL3/5y1/+8pe//OUvf/nLX/7yF7/4xS9+8Ytf/OIXP//5z3/+85///Oc///nPf/7zn/385z//+c9//vOf//znP/vZz3728x//+L9+/OMf//jHP/7xj3/04x//+Mc//vGPf/yjH/3oRz/60Y9+9KMf/ehHP/7xj370ox/96Ec/+tGPfvSjH/3oRz/60Y9+9KMf/ehHP/rRj370ox/96Ec/+tGPfvSjH/3oRz/60Y9+9KMf/ehHP/rRj370ox/96Ec/+tGPfvSjH/3oRz/60Y9+9KMf/ehHP/rRj370ox/96Ec/+tGPfvSjH/3oRz/60Y9+9KMf/ehHP/rRj370ox/96Ec/+tGPfvSjH/3oRz/60Y9+9KMf/ehHP/rRj370ox/96Ec/+tGPfvSjH/3oRz/60Y9+9KMf/ehHP/rRj370ox/96Ec/+tGPfvSjH/3oRz/60Y9+9KMf/ehHP/rRj370ox/96Ec/+tH/AUuTJXmJM0xLAAAAAElFTkSuQmCC");
	background-repeat: repeat;
	opacity: 0.25;
	mix-blend-mode: soft-light;
}

/* Hide noscript content when JS is enabled */
.ksq-footer-seo__noscript {
	display: block;
}

[data-loaded="true"] + noscript .ksq-footer-seo__noscript {
	display: none;
}

@media (max-width: 1100px) {
	.ksq-footer-seo__container {
		width: 100%;
		padding: 0 20px;
	}
}

@media (max-width: 768px) {
	.ksq-footer-seo {
		padding: 40px 0 0;
	}
	
	.ksq-footer-seo__container {
		padding: 0 16px;
		gap: 24px;
	}
	
	.ksq-footer-seo__intro-title,
	.ksq-footer-seo__group-title {
		font-size: 16px;
	}
	
	.ksq-footer-seo__intro-desc,
	.ksq-footer-seo__group-links {
		font-size: 14px;
		line-height: 22px;
		font-family: "Roboto Flex", sans-serif;
	}
	
	.ksq-footer-seo__watermark {
		padding: 0;
		height: 80px;
		margin-top: 40px;
	}
}

@media (max-width: 480px) {
	.ksq-footer-seo__container {
		padding: 0 12px;
		gap: 20px;
	}
	
	.ksq-footer-seo__intro-title,
	.ksq-footer-seo__group-title {
		font-size: 14px;
	}
	
	.ksq-footer-seo__intro-desc,
	.ksq-footer-seo__group-links {
		font-size: 13px;
		line-height: 20px;
	}
	
	.ksq-footer-seo__group-links .ksq-sep {
		margin: 0 2px;
	}
}

/* ===============================
   STICKY ADD TO CART - HIDE ON FOOTER
   =============================== */

/* When footer is in view, hide sticky cart */
/* Hide sticky add-to-cart when footer is visible */
body.ksq-footer-visible .ksq-sticky-add-to-cart,
body.ksq-footer-visible .sticky-add-to-cart,
body.ksq-footer-visible #ksqStickyBar,
body.ksq-footer-visible .ksq-sticky-bar,
body.ksq-footer-visible [class*="sticky-cart"],
body.ksq-footer-visible [class*="sticky-atc"],
body.ksq-footer-visible [id*="sticky"] {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transform: translateY(100%) !important;
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
}

/* Ensure smooth transition when showing again */
#ksqStickyBar,
.ksq-sticky-bar,
.ksq-sticky-add-to-cart,
.sticky-add-to-cart {
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* ===============================
   UTILITY & ANIMATIONS
   =============================== */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.ksq-spinner {
	animation: ksqSpin 1s linear infinite;
}

@keyframes ksqSpin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Fade in animation for loaded content */
.ksq-footer-seo__content {
	animation: ksqFadeIn 0.3s ease-out;
}

@keyframes ksqFadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ===============================
   MOBILE RESPONSIVE - 360px viewport
   20px left/right margins = 320px content
   =============================== */

@media (max-width: 480px) {
	/* Global footer mobile container */
	.site-footer {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.ksq-footer-container,
	.ksq-footer-container--narrow {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin: 0;
		max-width: 100%;
		width: 100%;
	}
	
	/* Brand section - full width on mobile */
	.ksq-footer-brand {
		width: 100%;
		max-width: 100%;
		padding: 40px 0 0;
		gap: 20px;
	}
	
	.ksq-footer-brand__top {
		width: 100%;
		max-width: 100%;
		gap: 20px;
	}
	
	.ksq-footer-brand__description {
		width: 100%;
		max-width: 100%;
	}
	
	/* ===============================
	   NEWSLETTER SECTION - Mobile
	   =============================== */
	
	.ksq-footer-newsletter-wrap {
		padding: 0 !important;
		max-width: 100%;
		margin-top: 32px;
	}
	
	.ksq-footer-newsletter {
		width: 100%;
		max-width: 100%;
		height: 252px;
		min-height: 252px;
		background: radial-gradient(135.64% 37.14% at 70.97% 13.07%, #AE2121 0%, #7B0000 100%);
		border-radius: 12px;
		margin: 0;
		padding: 32px 20px 140px 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
	}
	
	.ksq-footer-newsletter__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0;
		gap: 12px;
		width: 100%;
		max-width: 100%;
		text-align: center;
		z-index: 2;
	}
	
	.ksq-footer-newsletter__content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		width: 100%;
		max-width: 100%;
	}
	
	/* Title */
	.ksq-footer-newsletter__heading {
		color: #FFF !important;
		text-align: center !important;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
		font-size: 20px !important;
		font-style: normal !important;
		font-weight: 700 !important;
		line-height: normal !important;
		margin: 0 !important;
	}
	
	/* Text below title */
	.ksq-footer-newsletter__description {
		color: rgba(255, 255, 255, 0.80) !important;
		text-align: center !important;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
		font-size: 12px !important;
		font-style: normal !important;
		font-weight: 400 !important;
		line-height: 16px !important;
		margin: 0 !important;
	}
	
	.ksq-footer-newsletter__form-wrap {
		width: 100%;
		max-width: 100%;
		margin-top: 8px;
	}
	
	.ksq-footer-newsletter__input-wrap {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		max-width: 100%;
		height: 46px;
		background: #FFFFFF;
		border-radius: 4px;
		padding: 4px;
		box-sizing: border-box;
	}
	
	.ksq-footer-newsletter__input {
		flex: 1;
		border: none !important;
		background: transparent;
		padding: 12px;
		color: #222222;
		outline: none !important;
		box-shadow: none !important;
		height: 100%;
	}
	
	/* Textbox placeholder */
	.ksq-footer-newsletter__input::placeholder {
		color: #666;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}
	
	/* Button */
	.ksq-footer-newsletter__button {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 12px 28px;
		gap: 4px;
		width: 88px;
		min-width: 88px;
		height: 38px;
		background: #F1C557;
		border-radius: 4px;
		border: none;
		cursor: pointer;
		transition: background-color 0.2s ease;
		/* Button text */
		color: #222 !important;
		text-align: center !important;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
		font-size: 12px !important;
		font-style: normal !important;
		font-weight: 500 !important;
		line-height: normal !important;
	}
	
	.ksq-footer-newsletter__button:hover {
		background: #e0b44a;
	}
	
	/* Hide desktop decoration on mobile */
	.ksq-footer-newsletter__decor--desktop {
		display: none !important;
	}
	
	/* Mobile background image decoration */
	.ksq-footer-newsletter__decor--mobile {
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 127px;
		overflow: hidden;
		border-radius: 0 0 12px 12px;
		z-index: 1;
	}
	
	.ksq-footer-newsletter__mobile-bg {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
}
