/**
 * KSquare Gems - 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 {
	display: flex;
	justify-content: center;
	max-width: 100%;
	line-height: 0;
	background: transparent !important;
}

/* Fit the logo inside a 258x110 box at its natural aspect ratio, so both
   stacked and horizontal logos render undistorted. */
.ksq-footer-brand__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(258px, 100%);
	max-height: 110px;
	object-fit: contain;
	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;
}

@media (max-width: 1024px) {
	.ksq-footer-brand__logo img {
		max-height: 96px;
	}
}

@media (max-width: 600px) {
	.ksq-footer-brand__logo img {
		max-width: min(200px, 100%);
		max-height: 80px;
	}
}

.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;
}

/* Sits in normal flow below the input so it never covers the email field or
   the Subscribe button. Full width of the form (the old absolute positioning
   with 80px side insets left too little room and forced a second line). */
.ksq-footer-newsletter__message {
	margin-top: 12px;
	width: 100%;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
	/* Always show the message in full - wrapping to a second line is fine.
	   Never truncate: a clipped confirmation or error is worse than a tall one. */
	white-space: normal;
	overflow-wrap: break-word;
	box-sizing: border-box;
}

.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 {
	flex-shrink: 0;
	line-height: 0;
	background: transparent !important;
}

.ksq-footer-bottom__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 200px;
	max-height: 64px;
	object-fit: contain;
	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;
	white-space: nowrap;
	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;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.6);
}

.ksq-footer-bottom__payment-icons img {
	width: 344px;
	max-width: 100%;
	height: 24px;
	object-fit: contain;
}

@media (max-width: 1480px) {
	.ksq-footer-bottom__inner {
		max-width: 100%;
		padding: 0 20px;
	}
}

/* Stack before the row runs out of room (logo + contact + 344px payment icons) */
@media (max-width: 1100px) {
	.ksq-footer-bottom__inner {
		flex-direction: column;
		text-align: center;
		gap: 24px;
	}
	
	.ksq-footer-bottom__contact-row {
		flex-wrap: wrap;
		justify-content: center;
	}

	.ksq-footer-bottom__contact {
		align-items: center;
	}
}

@media (max-width: 600px) {
	.ksq-footer-bottom {
		padding: 32px 0;
		margin-top: 32px;
	}
	
	/* 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 - fits a 165px x 56px box, aspect ratio preserved */
	.ksq-footer-bottom__logo img {
		max-width: 165px;
		max-height: 56px;
	}
	
	/* 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;
	}
	
	/* Full-width bottom bar background: break out of the .site-footer padding above */
	.ksq-footer-bottom {
		margin-left: -20px;
		margin-right: -20px;
		width: calc(100% + 40px);
	}

	.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;
	}
}