/*
 * Site chrome: the parts that appear on every page.
 *
 * These rules used to live in home-sections.css, which is enqueued only on the
 * front page -- so the mega menu, the shipping strip and the size chart were
 * unstyled everywhere else. They belong in their own always-loaded sheet.
 */

/* ============================================================
   Mega menu panels
   The panels used to carry their layout in inline styles, which a media
   query cannot reach, so at mobile widths four columns with a fixed
   flex-basis and flex-wrap:nowrap crushed to 38-79px each: one letter per
   line, prices spilling over their neighbour, 33px thumbnails. Layout now
   lives here, and each column passes its desktop basis in --unu-mega-w.
   ============================================================ */
.unu-mega {
	max-width: 1240px;
	margin: 0 auto;
	padding: 34px 24px;
}

.unu-mega-row {
	display: flex;
	gap: 38px;
	/* One row on desktop. Letting these wrap dropped the card column onto a
	   second line, because the four columns' bases add up to slightly more
	   than the 1192px inner width -- flex-shrink absorbs that; wrapping does
	   not. Stacking happens only below 1023px, where the row becomes a block. */
	flex-wrap: nowrap;
	align-items: flex-start;
}

.unu-mega-col {
	flex: 1 1 var(--unu-mega-w, 300px);
	min-width: 0;
}

/* The card column keeps its basis: letting it grow stretches the images. */
.unu-mega-col--cards {
	flex-grow: 0;
}

.unu-mega-h {
	font: 700 12px/1.2 Manrope, sans-serif;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #111;
	margin: 0 0 18px;
}

.unu-mega-list {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.unu-mega-link {
	font: 400 14px/1.3 Manrope, sans-serif;
	color: #5a5a5a;
	text-decoration: none;
	display: block;
}

.unu-mega-link--split {
	display: flex;
	justify-content: space-between;
	gap: 18px;
}

.unu-mega-link:hover,
.unu-mega-link:focus {
	color: #0d1c57;
}

.unu-mega-muted {
	color: #9a9a9a;
}

.unu-mega-note {
	margin-top: 14px;
	font: 400 12px/1.4 Manrope, sans-serif;
	color: #9a9a9a;
}

.unu-mega-cards {
	display: flex;
	gap: 14px;
}

/* 230px is the card width in the Women and Mens panels; capping it keeps a
   panel that can only fill one card (Pakistan stocks Abaya but not Kaftan or
   Mukhawar) from stretching that card across the whole column. */
.unu-mega-card {
	flex: 1 1 0;
	min-width: 0;
	max-width: 230px;
	display: block;
	text-decoration: none;
}

/* The theme sets a blanket img { height: auto }, which defeats object-fit. */
.unu-mega-cards img {
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	aspect-ratio: 3 / 4;
	object-fit: cover !important;
	display: block;
	background: #f4f4f4;
}

.unu-mega-card__label {
	display: block;
	font: 400 11px/1.4 Manrope, sans-serif;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: #111;
	margin-top: 9px;
}

.unu-mega-footer {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid #ececec;
}

.unu-mega-footer a {
	font: 700 12px/1.4 Manrope, sans-serif;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #0d1c57;
	text-decoration: none;
}

/* Narrow desktop: let the columns wrap onto a second line rather than crush. */
@media (max-width: 1189px) {
	.unu-mega {
		padding: 28px 20px;
	}

	.unu-mega-row {
		gap: 26px 32px;
	}
}

/* The theme swaps to the off-canvas menu at 1023px, where a panel gets the
   width of one sliding pane (342px on a 390px phone), so the columns have to
   stack outright. The category list's column-count comes from an inline style
   in the country switcher's shortcode, so only !important reaches it. */
@media (max-width: 1023px) {
	.unu-mega {
		max-width: none;
		/* The off-canvas pane has no padding of its own -- it insets its own
		   rows -- so without this the panel ran flush to the screen edge while
		   the menu title above it sat 24px in. */
		padding: 2px 24px 10px;
	}

	.unu-mega-row {
		display: block;
	}

	.unu-mega-col {
		margin: 0 0 30px;
	}

	.unu-mega-col:last-child {
		margin-bottom: 0;
	}

	.unu-mega [style*="column-count"] {
		column-count: 2 !important;
		column-gap: 22px !important;
	}

	.unu-mega-h {
		margin-bottom: 12px;
	}

	.unu-mega-list {
		gap: 14px;
	}

	.unu-mega-link,
	.unu-mega [style*="column-count"] a {
		font-size: 15px !important;
	}

	.unu-mega-cards {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.unu-mega-card {
		max-width: none;
	}

	.unu-mega-footer {
		margin-top: 22px;
	}
}

/* Two columns of category names stop fitting once the pane is this narrow. */
@media (max-width: 479px) {
	.unu-mega [style*="column-count"] {
		column-count: 1 !important;
	}
}

/* ============================================================
   Free shipping strip above the header
   The theme drops the advert-bar page inside
   <div class="l-section"><div class="c-header__advert_bar--above">, both of
   which are width-capped and padded, so the black is painted by the strip
   itself and the wrappers are flattened here.
   ============================================================ */
.c-header__advert_bar--above {
	padding: 0 !important;
	margin: 0 !important;
}

.c-header__advert_bar--above .entry-content,
.c-header__advert_bar--above p {
	margin: 0 !important;
	padding: 0 !important;
}

.unu-ship-bar {
	background: #111;
	color: #fff;
	width: 100%;
}

.unu-ship-bar__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 9px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 10px;
	font: 500 12.5px/1.5 Manrope, sans-serif;
	letter-spacing: .3px;
	text-align: center;
}

.unu-ship-bar__msg {
	font-weight: 700;
	letter-spacing: .7px;
	text-transform: uppercase;
}

.unu-ship-bar__sep {
	color: rgba(255, 255, 255, .45);
}

/* The theme colours every anchor, so the links need saying twice. */
.unu-ship-bar a,
.unu-ship-bar a:hover,
.unu-ship-bar a:focus {
	color: #fff !important;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .38);
}

.unu-ship-bar a:hover {
	border-bottom-color: #fff;
}

/* On a phone the three parts will not sit on one line, so the offer keeps its
   own row and the two numbers share the next one. */
@media (max-width: 767px) {
	.unu-ship-bar__inner {
		padding: 7px 16px;
		font-size: 11.5px;
		gap: 2px 8px;
	}

	.unu-ship-bar__msg {
		flex: 0 0 100%;
		font-size: 11px;
	}

	.unu-ship-bar__sep:first-of-type {
		display: none;
	}
}

@media (max-width: 400px) {
	.unu-ship-bar__inner {
		font-size: 10.5px;
	}
}

/* ============================================================
   Abaya size chart
   ============================================================ */
.unu-sizechart__open {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 2px 0 14px;
	font: 600 12px/1 Manrope, sans-serif;
	letter-spacing: .7px;
	text-transform: uppercase;
	color: #0d1c57 !important;
	text-decoration: none;
	border-bottom: 1px solid rgba(13, 28, 87, .35);
	padding-bottom: 3px;
	cursor: pointer;
}

.unu-sizechart__open:hover {
	border-bottom-color: #0d1c57;
}

/* The theme fills every svg, which would blot out the little table icon. */
.unu-sizechart__open svg {
	fill: none !important;
	flex: 0 0 auto;
}

/* display:flex outranks the user-agent [hidden] rule, so without this the
   dialog stays laid over the page and swallows every click on it. */
.unu-sizechart[hidden] {
	display: none !important;
}

.unu-sizechart {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.unu-sizechart__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 14, 20, .72);
}

.unu-sizechart__panel {
	position: relative;
	background: #fff;
	max-width: 620px;
	width: 100%;
	max-height: calc(100vh - 48px);
	overflow: auto;
	padding: 16px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
}

.unu-sizechart__img {
	display: block;
	width: 100%;
	height: auto !important;
	max-width: 100% !important;
}

/* The theme's global button rules force display:block with a border and
   padding, which would stretch this across the panel. */
.unu-sizechart__close {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 34px !important;
	height: 34px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .92) !important;
	color: #111 !important;
	font: 400 26px/1 Manrope, sans-serif !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

body.unu-sizechart-open {
	overflow: hidden;
}

.unu-sizechart__tab {
	max-width: 620px;
}

.unu-sizechart__note {
	margin: 14px 0 0;
	font: 400 13px/1.6 Manrope, sans-serif;
	color: #5a5a5a;
}

@media (max-width: 767px) {
	.unu-sizechart {
		padding: 12px;
	}

	.unu-sizechart__panel {
		padding: 10px;
		max-height: calc(100vh - 24px);
	}
}