/* =============================================================
 * Minimog Child — Header style 08 redesign
 * Brand : #8022DB (purple)   Accent : #036133 (green)
 *
 * NOTE ON SPECIFICITY
 * The parent sets .header-08 .header-right { flex: 1 1 0px } and
 * .desktop-menu .header-08 .header-wrap { padding: 19px 0 }.
 * We work WITH those instead of fighting them: no min-height is
 * set on .header-wrap, and the contact block is sized by content.
 * ============================================================= */

:root {
	--bsp-purple: #8022DB;
	--bsp-purple-dark: #6A17BC;
	--bsp-green: #036133;
	--bsp-green-dark: #024A27;
	--bsp-ink: #1A1A2E;
	--bsp-muted: #6B7280;
	--bsp-line: #E6E6ED;
}

/* -------------------------------------------------------------
 * 1. Announcement strip (.header-above) — green, keep it thin
 * ----------------------------------------------------------- */
.header-08 .header-above {
	background-color: var(--bsp-green);
	border-bottom: 0;
}

.header-08 .header-above-wrap {
	min-height: 0;
	padding: 0;
}

.header-08 .header-above,
.header-08 .header-above a,
.header-08 .header-above .header-text {
	color: #FFF;
	font-size: 13px;
	font-weight: 500;
	line-height: 36px;
}

.header-08 .header-above .header-above-center {
	flex: 1 1 auto;
	text-align: center;
}

.header-08 .header-above a:hover {
	color: rgba(255, 255, 255, .78);
}

/* -------------------------------------------------------------
 * 1b. Top bar (.page-top-bar / .top-bar-01)
 *
 * This is a SEPARATE component from .header-above above. Minimog
 * paints its background from Theme Options as inline CSS on the ID
 * selector  #page-top-bar { background: ... }  which (a) outranks a
 * class selector and (b) is printed after this file. So we match
 * the ID here. The !important is needed only on the background,
 * because wp_add_inline_style() output always lands later in the
 * cascade than this stylesheet.
 * ----------------------------------------------------------- */
#page-top-bar,
#page-top-bar.top-bar-01 {
	background: var(--bsp-green) !important;
	border-bottom: 0;
}

#page-top-bar,
#page-top-bar a,
#page-top-bar .top-bar-text,
#page-top-bar .info-link,
#page-top-bar .info-text {
	color: #FFF;
}

#page-top-bar a:hover,
#page-top-bar .info-link:hover {
	color: rgba(255, 255, 255, .78);
}

/* Dividers inside the bar, if any, need to read on green. */
#page-top-bar .info-item + .info-item:before {
	background: rgba(255, 255, 255, .28);
}

/* -------------------------------------------------------------
 * 2. Main header row
 * The parent already supplies vertical padding — don't add height,
 * just align the three columns on one baseline.
 * ----------------------------------------------------------- */
.header-08 .header-wrap {
	border-bottom: 1px solid var(--bsp-line);
}

.header-08 .header-right > .header-content-inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: 18px;
}

/* -------------------------------------------------------------
 * 3. Contact info beside the cart
 *
 *      ✉ Contact@bodyskinpara.ma      ← quiet text link
 *      ╭──────────────────────────╮
 *      │ (☎)  +212 6 56 35 00 12  │   ← solid green pill
 *      ╰──────────────────────────╯
 *
 *    Both <li>s come from the same template, so they are told
 *    apart by position, matching the Info List repeater order in
 *    Theme Options (1st row = email, 2nd row = phone):
 *      :first-child = email (quiet link)
 *      :last-child  = phone (pill)
 *    Reordering those rows in the admin swaps these styles.
 * ----------------------------------------------------------- */
.header-08 .header-contact-inline {
	flex: 0 0 auto;
	margin-left: 0;
	margin-right: 6px;
}

.header-08 .header-contact-inline .header-info-list {
	margin: 0;
}

.header-08 .header-contact-inline ul.info-list {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-end;
	justify-content: center;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.header-08 .header-contact-inline li.info-item {
	display: block;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	line-height: 1;
	position: relative;
	border: 0;
}

.header-08 .header-contact-inline .info-link {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 7px;
	line-height: 1;
	white-space: nowrap;
	text-align: left;
	transition: color .25s ease, background-color .25s ease,
	            border-color .25s ease, box-shadow .25s ease,
	            transform .2s ease;
}

.header-08 .header-contact-inline .item-info {
	display: block;
	line-height: 1;
}

/* Label hidden visually, kept for assistive tech. */
.header-08 .header-contact-inline .info-sub-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.header-08 .header-contact-inline .info-text {
	display: block;
	line-height: 1;
}

/* ---- 1st item: PHONE — outlined pill, filled green icon ---- */
.header-08 .header-contact-inline li.info-item:last-child .info-link {
	padding: 7px 18px 7px 7px;
	border: 1px solid var(--bsp-green);
	border-radius: 8px;
	background-color: rgba(3, 97, 51, .07);
	color: var(--bsp-green);
	font-size: 14px;
	font-weight: 700;
	gap: 10px;
}

.header-08 .header-contact-inline li.info-item:last-child .info-link:hover {
	background-color: rgba(3, 97, 51, .14);
	border-color: var(--bsp-green-dark);
	color: var(--bsp-green-dark);
	transform: translateY(-1px);
}

.header-08 .header-contact-inline li.info-item:last-child .info-text {
	color: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .01em;
}

/* Solid green disc, white glyph. */
.header-08 .header-contact-inline li.info-item:last-child .info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border-radius: 8px;
	background-color: var(--bsp-green);
	color: #FFF;
	font-size: 14px;
	line-height: 1;
	transition: background-color .25s ease;
}

.header-08 .header-contact-inline li.info-item:last-child .info-link:hover .info-icon {
	background-color: var(--bsp-green-dark);
	color: #FFF;
}

.header-08 .header-contact-inline li.info-item:last-child .info-icon svg,
.header-08 .header-contact-inline li.info-item:last-child .info-icon img {
	width: 14px;
	height: 14px;
	display: block;
}

/* ---- EMAIL — hidden in the header ----
   Removed at the client's request. The row is still in the Info
   List repeater, so this hides it rather than deleting the data;
   it remains available in the mobile menu. Delete this rule to
   bring it back. */
.header-08 .header-contact-inline li.info-item:first-child {
	display: none;
}

/* -------------------------------------------------------------
 * 4. Search field
 *
 * IMPORTANT: Minimog does NOT put the border on the <input>. It
 * draws it on .popup-search-form:before, fed by CSS variables:
 *   --minimog-color-form-border
 *   --minimog-color-form-background
 *   --minimog-form-input-normal-rounded
 *   --minimog-form-input-normal-border-thickness
 *   --minimog-form-input-height
 * So we set the variables instead of styling the input directly —
 * that is why plain `border:` rules on .search-field do nothing.
 * ----------------------------------------------------------- */
.header-08 .header-center .popup-search-form,
.header-08 .header-search-form .search-form,
.page-search-popup .popup-search-form {
	--minimog-form-input-height: 48px;
	--minimog-form-input-normal-rounded: 8px;
	--minimog-form-input-normal-border-thickness: 1px;
	--minimog-color-form-border: var(--bsp-line);
	--minimog-color-form-background: #FAFAFC;
	--minimog-color-form-text: var(--bsp-ink);
	position: relative;
}

/* The painted border/background layer. */
.header-08 .header-center .popup-search-form::before,
.page-search-popup .popup-search-form::before {
	border-radius: 8px;
	transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

/* Focus: green ring, white field. */
.header-08 .header-center .popup-search-form:focus-within::before,
.page-search-popup .popup-search-form:focus-within::before {
	border-color: var(--bsp-green);
	background-color: #FFF;
	box-shadow: 0 0 0 3px rgba(3, 97, 51, .10);
}

/* Hover (not focused): subtle lift toward green. */
.header-08 .header-center .popup-search-form:hover:not(:focus-within)::before,
.page-search-popup .popup-search-form:hover:not(:focus-within)::before {
	border-color: #CFCFDA;
}

.header-08 .header-center .search-field,
.page-search-popup .search-field {
	height: var(--minimog-form-input-height, 48px);
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--bsp-ink);
	font-size: 14px;
	box-shadow: none;
}

.header-08 .header-center .search-field:focus,
.page-search-popup .search-field:focus {
	outline: none;
	border: 0;
	box-shadow: none;
}

.header-08 .header-center .search-field::-webkit-input-placeholder,
.page-search-popup .search-field::-webkit-input-placeholder { color: #9A9AA8; }
.header-08 .header-center .search-field::-moz-placeholder,
.page-search-popup .search-field::-moz-placeholder          { color: #9A9AA8; }
.header-08 .header-center .search-field:-ms-input-placeholder,
.page-search-popup .search-field:-ms-input-placeholder      { color: #9A9AA8; }
.header-08 .header-center .search-field::placeholder,
.page-search-popup .search-field::placeholder               { color: #9A9AA8; }

/* Submit icon — primary purple.
   The SVGs inherit currentColor (the parent maps stroke/fill to it),
   so setting color on the button is enough. */
.header-08 .header-center .search-submit,
.header-08 .header-center .search-btn-icon,
.header-08 .header-center .search-field__icon,
.page-search-popup .search-submit,
.page-search-popup .search-btn-icon,
.page-search-popup .search-field__icon {
	color: var(--bsp-purple);
	background: transparent;
	border: 0;
	transition: color .25s ease;
}

.header-08 .header-center .search-submit:hover,
.header-08 .header-center .search-submit:hover .search-btn-icon,
.header-08 .header-center .popup-search-form:focus-within .search-submit,
.page-search-popup .search-submit:hover,
.page-search-popup .search-submit:hover .search-btn-icon,
.page-search-popup .popup-search-form:focus-within .search-submit {
	color: var(--bsp-purple-dark);
}

/* Category dropdown, when enabled, gets a matching divider. */
.header-08 .header-center .search-category-field {
	border-right: 1px solid var(--bsp-line);
}

/* -------------------------------------------------------------
 * 5. Cart icon + badge
 * ----------------------------------------------------------- */
.header-08 .header-right .header-icon {
	color: var(--bsp-ink);
	transition: color .25s ease;
}

.header-08 .header-right .header-icon:hover {
	color: var(--bsp-green);
}

.header-08 .mini-cart__button .icon-badge,
.header-08 .header-icon .icon-badge {
	background-color: var(--bsp-green);
	color: #FFF;
	font-size: 10px;
	font-weight: 700;
}

/* -------------------------------------------------------------
 * 6. Navigation bar — purple strip, white underline
 * ----------------------------------------------------------- */
/* Parent sets .header-08 .header-below { background: #000 } at the
   same specificity; this file loads after it, so the shorthand here
   wins. Nav link colour vars stay white, as the parent set them. */
.header-08 .header-below {
	background: var(--bsp-purple);
	border-top: 0;
}

.header-08 .header-below .menu--primary .menu__container > li > a .menu-item-title {
	position: relative;
}

.header-08 .header-below .menu--primary .menu__container > li > a .menu-item-title::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -5px;
	height: 2px;
	background-color: #FFF;
	transform: scaleX(0);
	transition: transform .28s ease;
}

.header-08 .header-below .menu--primary .menu__container > li:hover > a .menu-item-title::after,
.header-08 .header-below .menu--primary .menu__container > li.current-menu-item > a .menu-item-title::after,
.header-08 .header-below .menu--primary .menu__container > li.current-menu-ancestor > a .menu-item-title::after {
	transform: scaleX(1);
}

/* -------------------------------------------------------------
 * 7. Responsive
 *    Positions follow section 3: :first-child = phone pill,
 *    :last-child = email link.
 * ----------------------------------------------------------- */
@media (max-width: 1399px) {
	.header-08 .header-contact-inline li.info-item:last-child .info-link,
	.header-08 .header-contact-inline li.info-item:last-child .info-text {
		font-size: 13px;
	}

	.header-08 .header-contact-inline li.info-item:last-child .info-link {
		padding: 6px 15px 6px 6px;
	}
}

/* Very tight: pill collapses to a round icon-only button. */
@media (max-width: 1100px) {
	.header-08 .header-contact-inline li.info-item:last-child .info-link {
		padding: 5px;
		gap: 0;
		border-color: transparent;
	}

	.header-08 .header-contact-inline li.info-item:last-child .item-info {
		display: none;
	}
}

/* Below the theme's md breakpoint .hide-md hides the block entirely;
   contact details remain available in the mobile menu. */

/* -------------------------------------------------------------
 * 8. Dropdown menus — purple hover / active
 *
 * The shipped rule is a BARE selector, not scoped to .minimog-menu:
 *   .sub-menu>li:hover>a { background: rgba(61,61,80,.09);
 *                          color: var(--minimog-color-heading)!important }
 * (style.min.css). An earlier attempt scoped to `.minimog-menu`
 * never matched the primary nav, which renders as
 * #page-navigation .menu--primary. So we match inside the header
 * nav and keep the !important the parent forces on colour.
 * ----------------------------------------------------------- */
#page-header .sub-menu a,
#page-navigation .sub-menu a {
	border-radius: 6px;
	transition: background-color .2s ease, color .2s ease;
}

/* Hover + keyboard focus */
#page-header .sub-menu > li:hover > a,
#page-header .sub-menu > li > a:hover,
#page-header .sub-menu > li > a:focus,
#page-navigation .sub-menu > li:hover > a,
#page-navigation .sub-menu > li > a:hover,
#page-navigation .sub-menu > li > a:focus {
	background: var(--bsp-purple) !important;
	color: #FFF !important;
}

/* Current page / section */
#page-header .sub-menu > li.current-menu-item > a,
#page-header .sub-menu > li.current-menu-ancestor > a,
#page-header .sub-menu > li.current-menu-parent > a,
#page-navigation .sub-menu > li.current-menu-item > a,
#page-navigation .sub-menu > li.current-menu-ancestor > a,
#page-navigation .sub-menu > li.current-menu-parent > a {
	background: var(--bsp-purple) !important;
	color: #FFF !important;
}

/* Caret on items that open a further level. */
#page-header .sub-menu > li:hover > a:after,
#page-header .sub-menu > li.current-menu-item > a:after,
#page-navigation .sub-menu > li:hover > a:after,
#page-navigation .sub-menu > li.current-menu-item > a:after {
	color: #FFF;
}

/* =============================================================
 * 9. Search popup (#popup-search / .page-search-popup)
 *
 * The field itself is already handled in section 4 — those
 * selectors were extended to .page-search-popup rather than
 * duplicated here, so the popup field and the header field can
 * never drift apart.
 *
 * What is left is the popup's own chrome: the panel, the heading
 * row, the close control, the icon row and the popular-search
 * links.
 *
 * NOTE ON THE ICONS
 * Minimog prints these SVGs with a literal fill="#000000"
 * attribute, not fill="currentColor" like the header ones. A
 * `color:` rule therefore does nothing to them, which is why the
 * popup icons stayed black while the header icons took the brand
 * colour. The fill has to be overridden explicitly on the path.
 * ============================================================= */

/* -------------------------------------------------------------
 * 9a. The panel
 * ----------------------------------------------------------- */
.page-search-popup {
	background-color: rgba(26, 26, 46, .45);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.page-search-popup .inner {
	background-color: #FFF;
	border-bottom: 1px solid var(--bsp-line);
	box-shadow: 0 18px 40px rgba(26, 26, 46, .14);
	padding-bottom: 28px;
}

/* -------------------------------------------------------------
 * 9b. Heading row
 * ----------------------------------------------------------- */
.page-search-popup .search-popup-heading h4 {
	margin: 0;
	color: var(--bsp-ink);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.005em;
}

.page-search-popup .row-search-popup-heading {
	padding-bottom: 18px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--bsp-line);
}

/* Close: a real target, not a bare glyph. 40px square clears the
 * 24px minimum for a pointer target with room to spare. */
.page-search-popup .search-popup-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background-color: #F4F4F7;
	color: var(--bsp-ink);
	font-size: 16px;
	transition: background-color .25s ease, color .25s ease;
}

.page-search-popup .search-popup-close:hover,
.page-search-popup .search-popup-close:focus-visible {
	background-color: var(--bsp-purple);
	color: #FFF;
	outline: none;
}

/* -------------------------------------------------------------
 * 9c. Icon row (account / wishlist / cart)
 *
 * The explicit `fill` is the point — see the note at the top of
 * this section. `color` is set too, so the badge and any
 * currentColor-aware glyph follow along.
 * ----------------------------------------------------------- */
.page-search-popup .popup-search-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-left: 6px;
	border-radius: 8px;
	color: var(--bsp-ink);
	transition: background-color .25s ease, color .25s ease;
}

.page-search-popup .popup-search-icon svg path {
	fill: currentColor;
	transition: fill .25s ease;
}

.page-search-popup .popup-search-icon:hover {
	background-color: rgba(128, 34, 219, .08);
	color: var(--bsp-purple);
}

/* The search glyph inside the field follows the submit button, not
 * the icon row — same reason, the fill is hardcoded. */
.page-search-popup .search-field__icon svg path,
.page-search-popup .search-btn-icon svg path {
	fill: currentColor;
}

/* Badges: green for the cart (an order in progress), neutral for an
 * empty wishlist so a 0 does not read as something needing action. */
.page-search-popup .popup-search-icon .icon-badge {
	background-color: var(--bsp-green);
	color: #FFF;
	font-size: 10px;
	font-weight: 700;
}

.page-search-popup .popup-search-icon .icon-badge[data-count="0"] {
	background-color: #C9C9D4;
}

/* -------------------------------------------------------------
 * 9d. Logo
 * ----------------------------------------------------------- */
.page-search-popup .popup-search-logo img {
	width: auto;
	max-height: 46px;
}

/* -------------------------------------------------------------
 * 9e. Popular searches
 *
 * These are the popup's real job on first open: the field is empty,
 * so the only thing that can move a visitor forward is a suggested
 * route. Styled as tappable chips rather than a run of inline links.
 * ----------------------------------------------------------- */
.page-search-popup .row-popular-search-keywords {
	margin-top: 18px;
}

.page-search-popup .popular-search-keywords {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.page-search-popup .popular-search-keywords .label {
	margin-right: 2px;
	color: var(--bsp-muted);
	font-size: 13px;
	font-weight: 500;
}

.page-search-popup .popular-search-keywords a {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--bsp-line);
	border-radius: 999px;
	background-color: #FAFAFC;
	color: var(--bsp-ink);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	transition: background-color .25s ease, border-color .25s ease,
	            color .25s ease, transform .2s ease;
}

.page-search-popup .popular-search-keywords a:hover,
.page-search-popup .popular-search-keywords a:focus-visible {
	background-color: rgba(128, 34, 219, .07);
	border-color: var(--bsp-purple);
	color: var(--bsp-purple);
	transform: translateY(-1px);
	outline: none;
}

/* -------------------------------------------------------------
 * 9f. Results
 * ----------------------------------------------------------- */
.page-search-popup .popup-search-results {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--bsp-line);
}

.page-search-popup .popup-search-results-title {
	margin-bottom: 18px;
	color: var(--bsp-muted);
	font-size: 13px;
	font-weight: 500;
}

.page-search-popup .popup-search-current {
	color: var(--bsp-ink);
	font-weight: 700;
}

/* -------------------------------------------------------------
 * 9g. Small screens
 *
 * The logo and icon columns are chrome the header already shows;
 * on a phone they cost the field the width it needs.
 * ----------------------------------------------------------- */
@media (max-width: 767px) {
	.page-search-popup .col-search-popup-branding,
	.page-search-popup .col-search-popup-icons {
		display: none;
	}

	.page-search-popup .inner {
		padding-bottom: 20px;
	}

	.page-search-popup .popular-search-keywords {
		gap: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-search-popup .popular-search-keywords a:hover,
	.page-search-popup .popular-search-keywords a:focus-visible {
		transform: none;
	}
}