/* ======================================================================
   The logged-out visitor's frame (inc/features/guest-chrome.php): the sticky "Members only" bar, the research menu in the
   header, the login button, the three footer columns. Loaded only for a visitor who sees it (gate on, logged out).
   ====================================================================== */

.has-guest-bar { --guest-bar-h: 40px; }

/* ---- Sticky bar above the header ---------------------------------------------------------------------------- */
.aps-guest-bar {
	position: sticky;
	top: 0;
	z-index: 10000;
	width: 100%;
	height: var(--guest-bar-h);
	background:
		radial-gradient(60% 160% at 10% 0%, rgba(0, 136, 255, 0.26), transparent 62%),
		radial-gradient(50% 160% at 92% 100%, rgba(55, 185, 255, 0.16), transparent 62%),
		linear-gradient(90deg, #020b18 0%, #001533 50%, #020b18 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	color: #fff;
	font-family: Cairo, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.aps-guest-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 20px;
}
.aps-guest-bar__text {
	min-width: 0;
	margin: 0;
	overflow: hidden;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.aps-guest-bar__short { display: none; }
.aps-guest-bar__actions { display: flex; flex: none; align-items: center; gap: 8px; }
.aps-guest-bar .aps-guest-bar__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 26px;
	padding: 3px 15px;
	border-radius: 999px;
	background: linear-gradient(110deg, #0088ff, #2fb6f5);
	box-shadow: 0 3px 10px rgba(0, 136, 255, 0.32);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), filter 0.18s var(--ease);
}
.aps-guest-bar .aps-guest-bar__btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 136, 255, 0.42); filter: brightness(1.05); }
.aps-guest-bar .aps-guest-bar__btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42); }
.aps-guest-bar .aps-guest-bar__btn--ghost:hover { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); }

/* The header pill sticks under the bar. */
.has-guest-bar .site-header { top: var(--guest-bar-h); }
.has-guest-bar .site-header.mobile-open { z-index: 2147483000; }

@media (max-width: 640px) {
	.aps-guest-bar__inner { gap: 10px; padding-inline: 12px; }
	.aps-guest-bar__long { display: none; }
	.aps-guest-bar__short { display: inline; }
	.aps-guest-bar__text { font-size: 12px; }
	.aps-guest-bar .aps-guest-bar__btn { padding: 3px 11px; font-size: 11.5px; }
}
@media (max-width: 400px) {
	.aps-guest-bar__text { font-size: 11px; }
	.aps-guest-bar .aps-guest-bar__btn { padding: 3px 9px; font-size: 11px; }
}

/* ---- Header: seven research links and the login button need more room than Home, Shop, Blogs and Order Now --------- */
.has-guest-bar .site-header .top-item > a { padding: 10px 9px; font-size: 14px; }
.has-guest-bar .site-header .cta--login { min-width: 0; padding: 10px 20px; }
.has-guest-bar .site-header .cta--login .cta-icon { display: none; }
/* Wide screens: a wider pill, and the account icon goes because the login button does its job. */
@media (min-width: 1280px) {
	.has-guest-bar .header-inner { max-width: 1280px; }
	.has-guest-bar .site-header .utility { display: none; }
}

/* The row would run past the pill below 1280px, so the drawer layout starts earlier than it does for members. */
@media (max-width: 1279px) {
	.has-guest-bar .header-inner { height: 76px; padding-inline: 10px; }
	.has-guest-bar .header-bar { grid-template-columns: auto minmax(0, 1fr); column-gap: 13px; width: calc(100% - 18px); min-height: 76px; }
	.has-guest-bar .site-header.is-scrolled .header-bar { min-height: 60px; }
	.has-guest-bar .header-actions { grid-column: 2; }
	.has-guest-bar .site-header .brand-logo { width: 140px; height: 58px; }
	.has-guest-bar .site-header .desktop-nav,
	.has-guest-bar .site-header .cta { display: none; }
	.has-guest-bar .utility { min-height: 40px; padding: 0 6px 0 4px; }
	.has-guest-bar .site-header .nav-toggle { display: block; }
	.has-guest-bar .mobile-drawer { display: block; }
	.has-guest-bar { --header-block: 96px; }
}
@media (max-width: 767px) {
	.has-guest-bar .header-inner { height: 68px; }
	.has-guest-bar .header-bar { width: calc(100% - 12px); min-height: 68px; padding-inline: 25px; }
	.has-guest-bar .site-header.is-scrolled .header-bar { min-height: 56px; }
	.has-guest-bar .site-header .brand-logo { width: 105px; height: 47px; }
	.has-guest-bar { --header-block: 88px; }
}
@media (max-width: 360px) {
	.has-guest-bar .header-bar { column-gap: 8px; padding-inline: 14px; }
	.has-guest-bar .site-header .brand-logo { width: 90px; height: 40px; }
	.has-guest-bar .header-actions { gap: 6px; }
	.has-guest-bar .utility { gap: 4px; padding: 0 6px 0 3px; }
	.has-guest-bar .site-header .account { flex-basis: 34px; width: 34px; height: 34px; }
	.has-guest-bar .site-header .nav-toggle { width: 38px; height: 38px; }
}

/* ---- Footer ------------------------------------------------------------------------------------------------------------ */
.site-footer--guest .footer-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-footer--guest .footer-name { display: none; }
.site-footer--guest .footer-copy { max-width: 640px; text-align: right; line-height: 1.5; }
.footer-about .social-links { display: flex; flex-wrap: wrap; gap: 10px; }
.site-footer .social-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 20px;
	border: 1px solid rgba(255, 255, 255, 0.42);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.site-footer .social-chip:hover { background: #fff; color: #126cac; transform: translateY(-2px); }

@media (max-width: 1024px) {
	.site-footer--guest .footer-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.site-footer--guest .footer-columns { grid-template-columns: 1fr; }
	.site-footer--guest .footer-copy { max-width: none; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	.aps-guest-bar .aps-guest-bar__btn,
	.site-footer .social-chip { transition: none; }
}