/*
 * Hydro Shield — global navbar + Products mega-menu.
 * Uses the design tokens from hydro-shield.css. Solid neutral surfaces only
 * — no glassmorphism/blur, no gradients, cyan stays a restrained accent
 * used in exactly one coordinated place (the mega-menu's active-item
 * highlight + index number), not scattered across every hover state.
 */

/* REWORKED (direct request — "navbar ka bg white kar doo"): the sticky bar
   itself is now off-white, every other colour below in this file flipped
   to match (dark text/icons instead of light-on-dark). Scoped to just the
   always-visible bar — the mega-menu dropdown (.hs-mega) and mobile panel
   (.hs-mobile) deliberately stay on the dark graphite theme, since they're
   separate panels rendered below the bar, not "the navbar" itself. */
.hs-nav {
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--hs-color-off-white);
	border-bottom: 1px solid rgba(26, 26, 29, 0.08);
	transition: transform var(--hs-duration-base) var(--hs-ease-standard);
}

/* Site-wide auto-hide (direct request, every page): hides on scroll DOWN
   past the navbar's own height, reappears the instant the user scrolls UP
   by even a small amount, regardless of scroll position — toggled by
   navbar.js. Skipped entirely under prefers-reduced-motion (see the JS
   guard) so a reduced-motion visitor always keeps a plain sticky navbar. */
.hs-nav--hidden {
	transform: translateY(-100%);
}

.hs-nav__bar {
	height: 64px;
	display: flex;
	align-items: center;
}

.hs-nav__inner {
	/* Positioned (2026-09-22, direct bug report — "mega menu... hover karny
	   par scroll x axis mein"): the mega-menu (.hs-mega below) used to
	   center itself on its own narrow trigger <li> (.hs-nav__item--mega),
	   which sits off-centre inside this 1360px-max bar (the logo's
	   margin-right:auto pushes the nav links toward the right) — centering
	   a ~1180px-wide panel on that off-centre anchor pushed its right edge
	   past the viewport on real widths, causing page-wide horizontal
	   scroll on hover. Making THIS full-width/max-1360px container the
	   positioning context instead means the panel centers on the same
	   container the whole nav's content already centers on, so it can
	   never extend past this container's own edges — which are themselves
	   always inside the viewport. height:100% keeps it flush against the
	   full 64px bar (see .hs-nav__bar) with no gap. */
	position: relative;
	height: 100%;
	width: 100%;
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 var(--hs-space-4);
	display: flex;
	align-items: center;
	gap: var(--hs-space-5);
}

/* Logo — text placeholder until the real logo asset is dropped in via
   add_theme_support('custom-logo'). the_custom_logo() takes over automatically. */
.hs-nav__logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
	margin-right: auto;
}

.hs-nav__logo img {
	display: block;
	/* Direct request — bigger logo, same 64px bar height (.hs-nav__bar
	   above): 52px leaves a small margin so it still fits comfortably
	   within the bar via flex centering, no bar-height change needed. */
	max-height: 52px;
	width: auto;
}

.hs-nav__logo-text {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--hs-color-graphite);
	white-space: nowrap;
}

/* Primary nav (desktop) */
.hs-nav__primary {
	display: none;
}

.hs-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--hs-space-5);
}

.hs-nav__item {
	position: static;
}

.hs-nav__item--mega {
	/* NOT position:relative — .hs-mega's containing block is now
	   .hs-nav__inner above (the fix for the x-axis overflow bug), not this
	   narrow trigger <li>. */
	position: static;
}

.hs-nav__link {
	position: relative;
	appearance: none;
	background: none;
	border: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--hs-color-grey-dark);
	text-decoration: none;
	padding: var(--hs-space-2) 1px;
	cursor: pointer;
	transition: color var(--hs-duration-fast) var(--hs-ease-standard);
}

/* A precise underline draws in on hover instead of an instant colour swap
   — one small, controlled movement rather than a glow or fill. */
.hs-nav__link::after {
	content: '';
	position: absolute;
	left: 1px;
	right: 1px;
	bottom: 6px;
	height: 1px;
	background: var(--hs-color-grey-dark);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--hs-duration-base) var(--hs-ease-standard), background var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-nav__link:hover,
.hs-nav__link:focus-visible,
.hs-nav__trigger[aria-expanded='true'] {
	color: var(--hs-color-graphite);
}

.hs-nav__link:hover::after,
.hs-nav__link:focus-visible::after,
.hs-nav__trigger[aria-expanded='true']::after {
	transform: scaleX(1);
	background: var(--hs-color-graphite);
}

.hs-nav__link:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: 4px;
	border-radius: var(--hs-radius-sm);
}

.hs-nav__chevron {
	color: currentColor;
	transition: transform var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-nav__trigger[aria-expanded='true'] .hs-nav__chevron {
	transform: rotate(180deg);
}

/* Primary CTA — stays off-white-on-graphite by default (this exact class
   is ALSO reused inside the still-dark .hs-mobile panel — see the bug
   this caused before in hydro-shield-navbar-qa-bugs, same trap), then
   INVERTED specifically for the bar's own instance further down via
   `.hs-nav__bar .hs-nav__cta` (same scoping technique the mobile-hide rule
   below already uses), since an off-white button on the now-off-white bar
   would have no contrast left to read as a button at all. */
.hs-nav__cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--hs-color-off-white);
	color: var(--hs-color-graphite);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-decoration: none;
	padding: 12px 22px;
	border-radius: var(--hs-radius-sm);
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	transition: transform var(--hs-duration-fast) var(--hs-ease-standard), box-shadow var(--hs-duration-fast) var(--hs-ease-standard), background var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-nav__cta:hover,
.hs-nav__cta:focus-visible {
	background: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.55);
}

.hs-nav__cta:focus-visible {
	outline: 2px solid var(--hs-color-off-white);
	outline-offset: 3px;
}

.hs-nav__bar .hs-nav__cta {
	background: var(--hs-color-graphite);
	color: var(--hs-color-off-white);
}

.hs-nav__bar .hs-nav__cta:hover,
.hs-nav__bar .hs-nav__cta:focus-visible {
	background: var(--hs-color-grey-dark);
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.35);
}

.hs-nav__bar .hs-nav__cta:focus-visible {
	outline: 2px solid var(--hs-color-graphite);
}

.hs-nav__cta--block {
	display: flex;
	width: 100%;
	padding: 14px 22px;
}

/* Location + WhatsApp quick-action icons (direct request, 2026-09-25) —
   compact outline buttons sitting between the primary nav/CTA and the
   mobile toggle, visible at every width (not just desktop) since they're
   small enough to never crowd the bar next to the hamburger. Neutral
   graphite icon/border by default; WhatsApp gets its own brand-green tint
   on hover/focus only, same "accent stays quiet until interaction" rule
   the rest of this navbar already follows for cyan. */
.hs-nav__icons {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.hs-nav__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(26, 26, 29, 0.16);
	border-radius: 50%;
	color: var(--hs-color-graphite);
	transition: border-color var(--hs-duration-fast) var(--hs-ease-standard), color var(--hs-duration-fast) var(--hs-ease-standard), background var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-nav__icon-btn:hover,
.hs-nav__icon-btn:focus-visible {
	border-color: var(--hs-color-accent);
	color: var(--hs-color-accent);
}

.hs-nav__icon-btn--whatsapp:hover,
.hs-nav__icon-btn--whatsapp:focus-visible {
	border-color: #25d366;
	color: #25d366;
}

.hs-nav__icon-btn:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: 2px;
}

@media (max-width: 479.98px) {
	.hs-nav__icon-btn {
		width: 32px;
		height: 32px;
	}

	.hs-nav__icon-btn svg {
		width: 15px;
		height: 15px;
	}
}

/* Mobile toggle */
.hs-nav__toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	background: none;
	border: 1px solid rgba(26, 26, 29, 0.16);
	border-radius: var(--hs-radius-sm);
	cursor: pointer;
}

.hs-nav__toggle:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: 2px;
}

.hs-nav__toggle-bar {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--hs-color-graphite);
	transition: transform var(--hs-duration-fast) var(--hs-ease-standard), opacity var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-nav__toggle[aria-expanded='true'] .hs-nav__toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.hs-nav__toggle[aria-expanded='true'] .hs-nav__toggle-bar:nth-child(2) {
	opacity: 0;
}

.hs-nav__toggle[aria-expanded='true'] .hs-nav__toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.hs-u-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ================= Products mega-menu ================= */

.hs-mega {
	position: absolute;
	/* Flush against the bar (no gap) so there's no dead pixel-strip between
	   trigger and panel where the mouse would exit the hoverable zone during
	   the crossing — visual breathing room comes from .hs-mega__inner's own
	   padding instead. */
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: min(92vw, 1180px);
	background: var(--hs-color-graphite);
	border: 1px solid rgba(240, 240, 232, 0.07);
	border-radius: 10px;
	box-shadow: 0 28px 56px -18px rgba(0, 0, 0, 0.6);
	opacity: 0;
	overflow: hidden;
}

.hs-mega[hidden] {
	display: none;
}

/* A hairline edge-light along the top — a premium "lit surface" cue, not a
   glow. Kept to a single soft pass, no colour. */
.hs-mega::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(240, 240, 232, 0.16), transparent);
}

/* BUG FIX (direct report — mega preview taller than the viewport, showing
   an internal scrollbar): 85vh + overflow:auto let the panel silently grow
   past short viewports and become its own nested scroll container. Fixed
   height budget instead — 100px accounts for the navbar's own height
   (64px) plus breathing room — and overflow:hidden (no scrollbar at all);
   see .hs-mega__media below for how the preview image is kept from ever
   being the thing that forces this taller than that budget. */
.hs-mega__inner {
	display: grid;
	grid-template-columns: minmax(250px, 320px) 1fr;
	max-height: calc(100vh - 100px);
	overflow: hidden;
}

.hs-mega__nav {
	position: relative;
	padding: var(--hs-space-4) var(--hs-space-3) var(--hs-space-4) var(--hs-space-5);
	border-right: 1px solid rgba(240, 240, 232, 0.07);
}

.hs-mega__list {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

/* The ONE coordinated active-state treatment: a soft tonal panel that
   slides/morphs to whichever row is active (hover or keyboard focus),
   driven entirely by navbar.js measuring the row and moving this single
   element — not per-row borders or independent per-row animations. */
.hs-mega__highlight {
	position: absolute;
	left: -12px;
	width: calc(100% + 12px);
	border-radius: var(--hs-radius-sm);
	background: rgba(240, 240, 232, 0.05);
	pointer-events: none;
	opacity: 0;
}

.hs-mega__item {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 13px var(--hs-space-3);
	text-decoration: none;
	color: var(--hs-color-text-muted);
	transition: color var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-mega__item:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: -2px;
	border-radius: var(--hs-radius-sm);
}

.hs-mega__index {
	font-size: 0.68rem;
	font-weight: 500;
	color: var(--hs-color-grey-mid);
	font-variant-numeric: tabular-nums;
	transition: color var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-mega__label {
	font-size: 1.02rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	transition: color var(--hs-duration-fast) var(--hs-ease-standard), transform var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-mega__item:hover .hs-mega__label,
.hs-mega__item:focus-visible .hs-mega__label,
.hs-mega__item.is-active .hs-mega__label {
	color: var(--hs-color-text);
	font-weight: 600;
	transform: translateX(3px);
}

.hs-mega__item:hover .hs-mega__index,
.hs-mega__item:focus-visible .hs-mega__index,
.hs-mega__item.is-active .hs-mega__index {
	color: var(--hs-color-accent);
}

/* REWORKED (direct request — "right image right/left/up full hoo, gap
   nahi chahiye, down tak hoo"): no padding at all now — .hs-mega__media
   fills this entire column edge-to-edge (top/right/left flush against the
   panel's own edges, bottom flush against .hs-mega__inner's bottom). The
   panel's own border-radius + overflow:hidden (.hs-mega above) clips the
   image's square corners into shape at the two outer corners it now
   touches — no radius needed on .hs-mega__media itself for that. */
.hs-mega__preview {
	display: flex;
	flex-direction: column;
}

.hs-mega__media {
	position: relative;
	width: 100%;
	/* Fills the row's full height (set by .hs-mega__nav's content — see
	   .hs-mega__inner's grid) rather than being derived from its own
	   aspect-ratio/max-height — that's what makes it reach edge-to-edge on
	   every side now instead of sitting in its own smaller, padded box. */
	height: 100%;
	overflow: hidden;
	background: var(--hs-color-bg);
}

.hs-mega__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Full-bleed image again (direct request) — the caption is now an
	   opaque card floating on top (see below), not text sitting under a
	   letterboxed photo, so there's no more reason to avoid cropping. */
	object-fit: cover;
}

/* Layer B is the only one ever animated — see the markup comment in
   navbar.php. It sits on top and starts invisible. */
.hs-mega__image--b {
	opacity: 0;
}

/* Very light grounding overlay so caption-adjacent edges read cleanly
   against varied source photography — not a decorative graphic. */
.hs-mega__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(26, 26, 29, 0.32), transparent 45%);
	pointer-events: none;
}

/* REWORKED (direct request — "full image, text us image kay opar hoo,
   text ka bg white hoo, products button jaisa"): was a plain text block
   BELOW the image; now a card floating ON the image — the same "light
   card on a full-bleed dark photo" device already used for the PPF
   product page's own hero spec card (.hs-ppf-hero__card in page-ppf.css).
   Positioned inside .hs-mega__media (now its parent — see navbar.php).
   FOLLOW-UP (same day, direct request — "white section choota sa banao,
   opacity buhat kam"): shrunk from a near-full-width bar to a compact
   card sized to its own content (width: fit-content instead of a fixed
   left+right inset), and the background dropped from fully opaque to a
   genuinely low 0.18 — backdrop-filter: blur is what keeps the dark text
   legible despite that (same technique as .hs-ppf-hero__card, just a
   stronger blur to compensate for the much lower opacity here). */
/* FOLLOW-UP (direct request — "length zada kar dein, height half kar
   dein"): switched from a stacked column (name / desc / button, each on
   its own line) to a single ROW — text block on the left, button on the
   right — spanning the full left/right inset instead of shrinking to
   fit-content. That one layout change is what makes it wider AND roughly
   half the height at once, not two separate size tweaks. */
.hs-mega__caption {
	position: absolute;
	left: var(--hs-space-3);
	right: var(--hs-space-3);
	bottom: var(--hs-space-3);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 10px 10px 16px;
	background: rgba(240, 240, 232, 0.18);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	backdrop-filter: blur(20px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 8px;
	box-shadow: 0 20px 36px -16px rgba(0, 0, 0, 0.5);
}

.hs-mega__caption-text {
	/* Lets the name/desc actually truncate with ellipsis below instead of
	   overflowing the row — a flex item's min-width defaults to auto
	   (= its content's width), which silently defeats text-overflow. */
	min-width: 0;
	flex: 1 1 auto;
}

/* Light text again, not graphite — now that the card is a translucent
   0.18-opacity tint (see .hs-mega__caption above) rather than an opaque
   white fill, the blurred backdrop behind it trends dark/mid-tone against
   this site's own demo photography, so dark text would risk poor contrast.
   A text-shadow gives it a little extra separation regardless of exactly
   how light/dark the blurred image underneath ends up being. Both lines
   are now single-line + ellipsis (row layout leaves no room to wrap). */
/* Name + price on one row (2026-09-22, direct request — real prices on
   every product card site-wide, "from RM 500" style, same device already
   used on the homepage rail/products catalogue/About page cards). */
.hs-mega__caption-top {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 2px;
}

.hs-mega__name {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--hs-color-off-white);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hs-mega__price {
	flex: 0 0 auto;
	margin: 0;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--hs-color-accent);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
	white-space: nowrap;
}

.hs-mega__desc {
	margin: 0;
	font-size: 0.8rem;
	color: rgba(240, 240, 232, 0.82);
	line-height: 1.4;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* A real filled button now (direct request — "products button jaisa"),
   not an underlined text link — graphite-filled with off-white text/arrow
   so it reads clearly against the now-translucent caption card. */
.hs-mega__cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--hs-color-off-white);
	text-decoration: none;
	background: var(--hs-color-graphite);
	padding: 9px 14px;
	border-radius: var(--hs-radius-sm);
	transition: background var(--hs-duration-fast) var(--hs-ease-standard), transform var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-mega__cta-arrow {
	display: inline-block;
	color: var(--hs-color-accent);
	transition: transform var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-mega__cta:hover,
.hs-mega__cta:focus-visible {
	background: #000000;
	transform: translateY(-1px);
}

.hs-mega__cta:hover .hs-mega__cta-arrow,
.hs-mega__cta:focus-visible .hs-mega__cta-arrow {
	transform: translateX(3px);
}

.hs-mega__cta:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: 3px;
}

/* ================= Mobile panel ================= */

.hs-mobile {
	display: none;
	background: var(--hs-color-bg);
	border-top: 1px solid rgba(240, 240, 232, 0.08);
}

.hs-mobile[hidden] {
	display: none;
}

.hs-mobile.is-open {
	display: block;
}

.hs-mobile__list {
	list-style: none;
	margin: 0;
	padding: var(--hs-space-3) var(--hs-space-4) var(--hs-space-5);
}

.hs-mobile__item {
	border-bottom: 1px solid rgba(240, 240, 232, 0.08);
}

.hs-mobile__item--cta {
	border-bottom: 0;
	padding-top: var(--hs-space-4);
}

.hs-mobile__link {
	appearance: none;
	background: none;
	border: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	color: var(--hs-color-text);
	text-decoration: none;
	padding: 16px 2px;
	min-height: 44px;
	cursor: pointer;
}

.hs-mobile__trigger[aria-expanded='true'] .hs-nav__chevron {
	transform: rotate(180deg);
}

.hs-mobile__link:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: 2px;
}

.hs-mobile__sublist {
	list-style: none;
	margin: 0 0 var(--hs-space-2);
	padding: 0 0 0 var(--hs-space-3);
}

.hs-mobile__sublist[hidden] {
	display: none;
}

.hs-mobile__sublink {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 44px;
	font-size: 0.92rem;
	color: var(--hs-color-text-muted);
	text-decoration: none;
	padding: 10px 2px;
}

/* Real price (2026-09-22, direct request — prices on every product card/
   menu site-wide), same "from RM 500" wording as the desktop mega-menu. */
.hs-mobile__sublink-price {
	flex: 0 0 auto;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--hs-color-accent);
}

.hs-mobile__sublink:hover,
.hs-mobile__sublink:focus-visible {
	color: var(--hs-color-accent);
}

.hs-mobile__sublink:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: 2px;
}

/* ================= Breakpoint: desktop nav takes over ================= */

@media (min-width: 900px) {
	.hs-nav__primary {
		display: block;
	}

	.hs-nav__toggle,
	.hs-mobile {
		display: none !important;
	}
}

@media (max-width: 899.98px) {
	/* Scoped to the sticky bar's own CTA only — .hs-nav__cta is reused
	   inside .hs-mobile for the "Get a Quote" row, which must stay visible. */
	.hs-nav__bar .hs-nav__cta {
		display: none;
	}
}

/* Narrower mega-menu breakpoint: the two-column grid gets tight before the
   nav itself switches to mobile — stack it instead of squeezing. */
@media (max-width: 1040px) and (min-width: 900px) {
	.hs-mega__inner {
		grid-template-columns: 1fr;
	}

	.hs-mega__nav {
		border-right: 0;
		border-bottom: 1px solid rgba(240, 240, 232, 0.07);
	}
}