/* ==========================================================================
   Footer styling — Design option A (Plum #5B1E57 + 80px damask frieze)
   Spec: docs/research/2026-09-26-design/background-study.md round 3 (H2)
   Contrast requirement: EVERY text/link >= 4.5:1 (WCAG AA).
   ========================================================================== */

footer#colophon.footer-container {
	position: relative;
	background-color: var(--bj-purple-2, #5B1E57) !important;
	color: var(--bj-ivory, #FBF8F3) !important;
	border-top: 1px solid var(--bj-line-gold, rgba(202, 146, 52, .6)) !important;
	overflow: hidden;
}

/* 80px damask frieze at top of footer */
footer#colophon.footer-container::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 80px;
	background: var(--bj-damask);
	opacity: .85;
	-webkit-mask-image: linear-gradient(to bottom, black 0, black 36px, transparent 80px);
	mask-image: linear-gradient(to bottom, black 0, black 36px, transparent 80px);
	pointer-events: none;
	z-index: 1;
}

/* Footer content stacks above frieze */
footer#colophon.footer-container > .footer-area,
footer#colophon.footer-container .elementor {
	position: relative;
	z-index: 2;
}

/* All footer text / descriptions: Ivory #FBF8F3 (11.2:1 AAA), 16–17px */
footer#colophon.footer-container p,
footer#colophon.footer-container .elementor-widget-text-editor {
	color: var(--bj-ivory, #FBF8F3) !important;
	font-family: var(--bj-font-body, "Jost", sans-serif);
	font-size: 16.5px !important;
	line-height: 1.65;
}

/* Column titles: Gold-light #E0B55A (6.18:1 AA >= 4.5:1), Marcellus 22px */
footer#colophon.footer-container h5,
footer#colophon.footer-container .widget-title {
	color: var(--bj-gold-light, #E0B55A) !important;
	font-family: var(--bj-font-display, "Marcellus", serif) !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	letter-spacing: .06em !important;
	margin-bottom: 20px !important;
}

/* Links in columns: Ivory #FBF8F3 (11.2:1 AAA), 16px, hover Gold-light (6.18:1 AA) */
footer#colophon.footer-container a {
	color: var(--bj-ivory, #FBF8F3) !important;
	font-family: var(--bj-font-body, "Jost", sans-serif);
	font-size: 16px !important;
	line-height: 1.8;
	transition: color .2s ease;
}
footer#colophon.footer-container a:hover {
	color: var(--bj-gold-light, #E0B55A) !important;
}

/* Social icons: Ivory #FBF8F3 (11.2:1 AAA), hover Gold-light (6.18:1 AA) */
footer#colophon.footer-container .social-icons .list-icons li a {
	color: var(--bj-ivory, #FBF8F3) !important;
}
footer#colophon.footer-container .social-icons .list-icons li a:hover {
	color: var(--bj-gold-light, #E0B55A) !important;
}

/* Dividers */
footer#colophon.footer-container .elementor-widget-divider {
	--divider-color: rgba(202, 146, 52, .3) !important;
}
footer#colophon.footer-container .elementor-divider-separator {
	border-color: rgba(202, 146, 52, .3) !important;
}

/* Bottom row: icons/label first, then the centred legal+heart line last, on every width. The section's own
   two Elementor columns stack (Elementor's own responsive CSS); this only sets order + alignment, no
   markup is moved. */
footer#colophon.footer-container .elementor-section.bj-footer-bottom > .elementor-container {
	flex-wrap: wrap;
	justify-content: center;
}
footer#colophon.footer-container .elementor-section.bj-footer-bottom .bj-footer-pay-col {
	order: 1;
}
footer#colophon.footer-container .elementor-section.bj-footer-bottom .bj-footer-legal-col {
	order: 2;
}
footer#colophon.footer-container .elementor-section.bj-footer-bottom .bj-footer-legal-col,
footer#colophon.footer-container .elementor-section.bj-footer-bottom .bj-footer-pay-col {
	display: flex;
	justify-content: center;
	width: 100%;
	flex: 1 1 100%;
}
footer#colophon.footer-container .bj-footer-accept {
	width: 100%;
	text-align: center;
	font-family: var(--bj-font-body, "Jost", sans-serif) !important;
	font-size: 13px !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bj-ivory, #FBF8F3) !important;
	opacity: .8;
	margin: 0 0 8px !important;
}
/* Override this widget's own Elementor alignment setting ("right"), which sets text-align:end on its
   container and would otherwise push the inline-flex icon row to the right while the flex-box accept
   label (immune to text-align) centres correctly — both need to line up. */
footer#colophon.footer-container .bj-footer-pay-col .elementor-widget-container {
	text-align: center !important;
}
footer#colophon.footer-container .bj-footer-pay-col .biyani-payment-icons {
	justify-content: center;
}
/* Bottom copyright row: Ivory-2 #F5EFE5 (9.6:1 AAA), 13px Jost, ~80% opacity, centred. */
footer#colophon.footer-container .elementor-section:last-child p:not(.bj-footer-accept),
footer#colophon.footer-container .bj-footer-legal {
	color: var(--bj-ivory-2, #F5EFE5) !important;
	font-family: var(--bj-font-body, "Jost", sans-serif) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	opacity: .8;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin: 0 !important;
}
.bj-footer-heart {
	flex: none;
	position: relative;
	top: 1px;
}
/* Visually hidden, still readable by assistive tech (WCAG technique) — "Made with [♥] love by …" reads as
   "Made with love by …" for screen readers while the heart glyph is aria-hidden decoration. */
.bj-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/* Phone: extra bottom padding so the stacked We-accept/icons/legal block clears the fixed currency disc
   (bottom-left) and back-to-top (bottom-right), both 40px + 14px offset (72px on single-product, see
   #to-top rules below) plus the safe-area inset. */
@media (max-width: 767px) {
	footer#colophon.footer-container .elementor-section.bj-footer-bottom {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/* ==========================================================================
   Jaroti back-to-top button (#to-top) — Frosted-glass disc matching currency disc
   ========================================================================== */

#to-top {
	position: fixed !important;
	right: calc(14px + env(safe-area-inset-right, 0px)) !important;
	bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
	left: auto !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 999px !important;
	z-index: 300 !important;
	transition: transform .35s ease, opacity .35s ease !important;
	overflow: visible !important;
}

#to-top:not(.on) {
	transform: translateX(calc(100% + 24px)) !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

#to-top.on {
	transform: translateX(0) !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

#to-top a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border-radius: 999px !important;
	background: rgba(255, 253, 248, 0.92) !important;
	border: 1px solid rgba(140, 90, 43, 0.20) !important;
	box-shadow: 0 1px 2px rgba(18, 14, 10, 0.06) !important;
	color: var(--bj-ink, #1C1A17) !important;
	text-decoration: none !important;
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease !important;
}

#to-top a:before {
	content: "\e90b";
	font-family: "tabler-icons" !important;
	font-size: 16px !important;
	line-height: 1 !important;
	color: var(--bj-ink, #1C1A17) !important;
	display: inline-block !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	#to-top a {
		background: rgba(252, 249, 243, 0.58) !important;
		-webkit-backdrop-filter: blur(14px) saturate(160%) !important;
		backdrop-filter: blur(14px) saturate(160%) !important;
		border-color: rgba(255, 255, 255, 0.55) !important;
		box-shadow:
			0 4px 16px rgba(18, 14, 10, 0.12),
			inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
	}
}

#to-top a:hover {
	background: rgba(252, 249, 243, 0.85) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 20px rgba(18, 14, 10, 0.16) !important;
}

/* On product pages on phones: clear the sticky add-to-cart bar */
@media (max-width: 767px) {
	body.single-product #to-top {
		bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
	}
}