:root {
	--color-independence-primary: #FFF793;
	--color-independence-border: #FFF35C;
}

.header-main {
	background-color: var(--color-independence-primary);
    border-bottom: 2px solid var(--color-independence-border);
	position: relative;
}

/* Decorative side icons (hidden below 1540px) */
.header-container:nth-child(1)::before,
.header-container:nth-child(1)::after {
	content: "";
	position: absolute;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	width: 42px;
	height: 80.5px;
	top: 12px;
	transition: all 0.3s ease-in-out;
}

.header-container:nth-child(1)::before {
	background-image: url("/assets/theme/independence/header-left.svg");
	right: calc(100% + 10px);
}

.header-container:nth-child(1)::after {
	background-image: url("/assets/theme/independence/header-right.svg");
	left: calc(100% + 10px);
}

/* Center logo decoration */
.header-container .logo-center::before {
	content: "";
	position: absolute;
	background: url("/assets/theme/independence/header-center.svg") no-repeat center;
	background-size: 100%;
	width: 351px;
	height: 99px;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	transition: all 0.3s ease-in-out;
}

/* =========================================
Content — Best Seller Title
========================================= */
#best-seller-title h3 {
    display: flex;
    align-items: center;
    gap: 16px;
}

#best-seller-title .title-icon {
    display: inline-block;
    background: url("/assets/theme/independence/content-title.svg") no-repeat center;
    background-size: 100%;
    width: 291px;
    height: 60px;
}

/* =========================================
Footer
========================================= */
.consumer-service {
	border-bottom: none;
}

.footer {
	background: linear-gradient(
		180deg,
		#FFF57D 0%,
		#FFFBD7 100%
	);
    border-top: 2px solid var(--color-independence-border);
}

.footer .container-fluid {
	position: relative;
}

.footer .container-fluid::before,
.footer .container-fluid::after,
.footer .container-fluid #footer-logo::before,
.footer .container-fluid #footer-logo::after,
.footer .container-fluid #footer-logo div.text-center::after {
	content: "";
	position: absolute;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.footer .container-fluid::before {
	background-image: url("/assets/theme/independence/footer-left.svg");
	width: 211.9px;
	height: 60.1px;
	left: 6px;
	bottom: -20px;
}

.footer .container-fluid #footer-logo::before {
	background-image: url("/assets/theme/independence/footer-center-left.svg");
	width: 187.2px;
	height: 156px;
	left: -20px;
	top: -22px;
	transition: all 0.3s ease-in-out;
}

.footer .container-fluid #footer-logo::after {
	background-image: url("/assets/theme/independence/footer-center-right.svg");
	width: 325px;
	height: 163px;
	right: -35%;
	top: -28px;
	transition: all 0.3s ease-in-out;
}

/* =========================================
Responsive
========================================= */

/* Hide header side icons on smaller desktops */
@media (max-width: 1539.98px) {
	.header-container:nth-child(1)::before,
	.header-container:nth-child(1)::after {
		opacity: 0;
	}
}

/* Scale down footer decorations on tablets */
@media (max-width: 1199.98px) {
	.header-container .logo-center::before,
	.footer .container-fluid #footer-logo::before,
	.footer .container-fluid #footer-logo::after,
	.footer .container-fluid #footer-logo div.text-center::after {
		scale: 0.78;
	}

    .footer .container-fluid::before {
        left: -40px;
    }

	.footer .container-fluid #footer-logo::before {
        top: -10px;
		left: -12%;
	}
	.footer .container-fluid #footer-logo::after {
        top: -12px;
		right: -40%;
	}

    .desktop-container {
        padding-top: 20px;
    }

}

/* Mobile landscape */
@media (max-width: 991.98px) {
	/* Swap left header icon for mobile version */
	.header-container:nth-child(1)::before {
		opacity: 1;
		background-image: url("/assets/theme/independence/header-mobile.svg");
		width: 95px;
		height: 55px;
		top: 0;
		left: 7%;
	}

    #best-seller-title h3 {
		gap: 10px;
	}

	.footer .container-fluid::before {
		opacity: 0;
	}
}

/* Mobile portrait */
@media (max-width: 767.98px) {
	.footer {
		padding-top: 16px;
        padding-bottom: 0px;
	}
	.footer .container-fluid .row div {
		padding-top: 0;
		padding-bottom: 0;
	}
	.footer .copyright {
		margin-bottom: 16px;
	}

    .footer .container-fluid::before {
        opacity: 1;
        background-image: url("/assets/theme/independence/footer-left-mobile.svg");
		width: 100px;
		height: 47px;
		bottom: 0;
		left: 0;
		transition: all 0.3s ease-in-out;
	}

	.footer .container-fluid::after {
		background-image: url("/assets/theme/independence/footer-center-right-mobile.svg");
		width: 114px;
		height: 52px;
		bottom: 0;
		right: 0;
		transition: all 0.3s ease-in-out;
	}
}