/* ==========================================================================
   AFFANECOM - header currency selector

   Sits first in .affan-tools, immediately left of the Account icon. Built on a
   native <select> so it gets the OS picker on mobile, works without
   JavaScript, and cannot be clipped by a parent's overflow. The visible chrome
   is the wrapper; the select itself is transparent and stretched over it.
   ========================================================================== */

.affan-fx{
	position:relative;
	display:inline-flex;
	align-items:center;
	flex:none;
	order:-1;                 /* leftmost, whatever the DOM order */
	height:34px;
	padding:0 26px 0 11px;
	border:1px solid rgba(255,255,255,.34);
	border-radius:999px;
	background:rgba(255,255,255,.08);
	color:inherit;
	line-height:1;
	transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.affan-fx:hover,
.affan-fx:focus-within{
	border-color:#F47C20;
	background:rgba(244,124,32,.14);
	color:#F47C20;
}

/* The label is for screen readers; the code in the select is the visible cue. */
.affan-fx__label{
	position:absolute !important;
	width:1px;
	height:1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	clip-path:inset(50%);
	white-space:nowrap;
}

.affan-fx__select{
	-webkit-appearance:none !important;
	-moz-appearance:none !important;
	appearance:none !important;
	box-sizing:border-box !important;
	width:auto !important;
	min-width:0 !important;
	height:100% !important;
	min-height:0 !important;
	margin:0 !important;
	padding:0 !important;
	border:0 !important;
	border-radius:0 !important;
	background:transparent !important;
	box-shadow:none !important;
	color:inherit !important;
	font-family:"Inter",sans-serif !important;
	font-size:11.5px !important;
	font-weight:800 !important;
	letter-spacing:.08em;
	line-height:1 !important;
	cursor:pointer;
	outline:none;
}
/* Focus lives on the wrapper, not the select.
   An outline on the select follows the select's own square corners, so it drew
   a box clipped around the text rather than tracing the pill. A box-shadow on
   the wrapper follows whatever border-radius that variant has, so the same
   rule works for the round header pill, the squared mobile button and the
   drawer row. */
.affan-fx__select:focus,
.affan-fx__select:focus-visible{
	outline:none !important;
	box-shadow:none !important;
}
.affan-fx:focus-within{
	border-color:#F47C20;
	box-shadow:0 0 0 3px rgba(244,124,32,.22);
}
/* The dropdown list itself is drawn by the OS, so it needs readable colours
   rather than the header's inherited white. */
.affan-fx__select option{
	color:#252525;
	background:#fff;
	font-weight:600;
	letter-spacing:0;
}

.affan-fx__caret{
	position:absolute;
	right:9px;
	top:50%;
	transform:translateY(-50%);
	pointer-events:none;
	display:block;
	line-height:0;
	opacity:.8;
}
.affan-fx__caret svg{
	width:11px;
	height:11px;
	display:block;
}

/* --------------------------------------------------------------------------
   Solid header states
   Over the transparent hero the cluster is white; once the header goes solid
   it is charcoal, and the selector has to follow both.
   -------------------------------------------------------------------------- */
body.home #masthead:hover .affan-fx,
body.home #masthead.af-solid .affan-fx,
body:not(.home) .affan-fx{
	border-color:#E0E0DA;
	background:#FAFAF8;
}
body.home #masthead:hover .affan-fx:hover,
body.home #masthead.af-solid .affan-fx:hover,
body:not(.home) .affan-fx:hover,
body.home #masthead:hover .affan-fx:focus-within,
body.home #masthead.af-solid .affan-fx:focus-within,
body:not(.home) .affan-fx:focus-within{
	border-color:#F47C20;
	background:#FCF2E9;
	color:#B85A0E;
}

/* --------------------------------------------------------------------------
   Narrow screens
   The tool labels already hide below 1300px; the selector shrinks with them.
   -------------------------------------------------------------------------- */
@media (max-width:1300px){
	.affan-fx{
		height:32px;
		padding:0 23px 0 9px;
	}
	.affan-fx__select{ font-size:11px !important; }
	.affan-fx__caret{ right:8px; }
	.affan-fx__caret svg{ width:10px; height:10px; }
}

/* The desktop cluster is hidden below 922px, so the selector goes into the
   mobile drawer instead - see affan-mobilenav.css. */
@media (max-width:921px){
	.affan-hdr-right .affan-fx{ display:none; }
}

@media (prefers-reduced-motion:reduce){
	.affan-fx{ transition:none; }
}

/* --------------------------------------------------------------------------
   Drawer copy
   Below 922px the header cluster is hidden, so a clone is placed at the top of
   the off-canvas menu. Full width there, since it is a menu row rather than a
   compact header control.
   -------------------------------------------------------------------------- */
.affan-fx--drawer{
	display:flex !important;
	width:calc(100% - 40px);
	margin:14px 20px 6px;
	height:44px;
	padding:0 34px 0 16px;
	border-color:#E4E4DE;
	background:#FAFAF8;
	color:#252525;
	border-radius:12px;
	justify-content:flex-start;
}
.affan-fx--drawer .affan-fx__select{
	width:100% !important;
	font-size:12.5px !important;
	color:#252525 !important;
}
.affan-fx--drawer .affan-fx__caret{
	right:14px;
	opacity:1;
}
.affan-fx--drawer .affan-fx__caret svg{
	width:13px;
	height:13px;
}
.affan-fx--drawer:hover,
.affan-fx--drawer:focus-within{
	border-color:#F47C20;
	background:#FCF2E9;
	color:#B85A0E;
}

/* The clone lives inside the drawer, so the desktop hide rule must not
   catch it. */
@media (max-width:921px){
	.ast-mobile-popup-content .affan-fx,
	.affan-fx--drawer{ display:flex !important; }
}

/* --------------------------------------------------------------------------
   Globe icon
   Sized to sit optically with the 18px account/heart/cart glyphs beside it.
   It is decorative: the select's label carries the meaning for screen readers.
   -------------------------------------------------------------------------- */
.affan-fx{
	padding-left:9px;
	gap:7px;
}
.affan-fx__icon{
	width:15px;
	height:15px;
	flex:none;
	display:block;
	opacity:.92;
	pointer-events:none;
}
.affan-fx:hover .affan-fx__icon,
.affan-fx:focus-within .affan-fx__icon{
	opacity:1;
}

@media (max-width:1300px){
	.affan-fx{ padding-left:8px; gap:6px; }
	.affan-fx__icon{ width:14px; height:14px; }
}

/* Drawer copy gets a slightly larger glyph to match the menu's type scale. */
.affan-fx--drawer{
	padding-left:14px;
	gap:10px;
}
.affan-fx--drawer .affan-fx__icon{
	width:17px;
	height:17px;
}

/* ==========================================================================
   Mobile and tablet header copy

   Astra swaps to its own mobile header below 921px, which covers phones and
   iPad portrait. iPad landscape is 1024px wide and still gets the desktop
   cluster, so no separate handling is needed there.
   ========================================================================== */
.affan-fx--mobile{
	display:none;
	order:-1;
	flex:none;
	align-self:center;
	height:40px;
	margin-right:10px;
	padding:0 25px 0 11px;
	border-radius:11px;              /* squared to match the hamburger button */
	gap:7px;
}

@media (max-width:921px){
	.affan-fx--mobile{
		display:inline-flex !important;
	}

	/* Astra's right section is a flex row holding the menu toggle. */
	#ast-mobile-header .site-header-primary-section-right{
		display:flex !important;
		align-items:center;
		flex-wrap:nowrap;
	}

	.affan-fx--mobile .affan-fx__select{
		font-size:11px !important;
		letter-spacing:.06em;
	}
	.affan-fx--mobile .affan-fx__icon{
		width:15px;
		height:15px;
	}
	.affan-fx--mobile .affan-fx__caret{
		right:9px;
	}
	.affan-fx--mobile .affan-fx__caret svg{
		width:10px;
		height:10px;
	}

	/* Match the hamburger's two states rather than the desktop cluster's. */
	.affan-fx--mobile{
		border-color:#E4E4DE;
		background:transparent;
		color:#252525;
	}
	body.home #masthead:not(.af-solid) .affan-fx--mobile{
		border-color:rgba(255,255,255,.42);
		color:#fff;
	}
	.affan-fx--mobile:hover,
	.affan-fx--mobile:focus-within{
		border-color:#F47C20;
		background:rgba(244,124,32,.12);
		color:#B85A0E;
	}
	body.home #masthead:not(.af-solid) .affan-fx--mobile:focus-within{
		color:#fff;
		border-color:#F47C20;
	}
}

/* Very narrow phones: drop the code, keep the globe. The selected currency is
   still announced, and the symbol is visible on every price below. */
@media (max-width:400px){
	.affan-fx--mobile{
		width:40px;
		padding:0;
		justify-content:center;
		margin-right:8px;
	}
	.affan-fx--mobile .affan-fx__select{
		position:absolute;
		inset:0;
		width:100% !important;
		height:100% !important;
		opacity:0;
		cursor:pointer;
	}
	.affan-fx--mobile .affan-fx__caret{ display:none; }
	.affan-fx--mobile .affan-fx__icon{ width:17px; height:17px; }
}

/* ==========================================================================
   Mobile: icon only

   Globe alone below 921px, matching the hamburger button. The <select> is
   stretched invisibly over the button so the whole thing is the tap target and
   the native picker still opens. The active currency is not shown here, but
   its symbol appears on every price on the page.
   ========================================================================== */
@media (max-width:921px){
	.affan-fx--mobile{
		position:relative;
		width:42px;
		height:42px;
		padding:0 !important;
		margin-right:10px;
		justify-content:center;
		align-items:center;
		gap:0;
		border-radius:11px;
	}

	/* Invisible but still the control: keeps the OS picker, keyboard focus and
	   the accessible name. Hiding it with display:none would lose all three. */
	.affan-fx--mobile .affan-fx__select{
		position:absolute;
		inset:0;
		width:100% !important;
		height:100% !important;
		opacity:0;
		cursor:pointer;
		z-index:2;
	}

	.affan-fx--mobile .affan-fx__caret{
		display:none;
	}

	.affan-fx--mobile .affan-fx__icon{
		width:18px;
		height:18px;
		opacity:1;
	}
}

@media (max-width:400px){
	.affan-fx--mobile{
		width:40px;
		height:40px;
		margin-right:8px;
	}
	.affan-fx--mobile .affan-fx__icon{
		width:17px;
		height:17px;
	}
}