/*
 * 10-header.css - header (replica layout-urilor Divi 12746 / 12752), mega-meniu categorii, breadcrumbs.
 * Desktop (>= 981px) = identic cu live. Sub 981px = header mobil simplificat (.ms-mhdr).
 */

.ms-icon { display: inline-block; vertical-align: baseline; overflow: visible; }

/* Blurb (icon + text, ca modulul Divi "blurb" cu icon in stanga) */
.ms-blurb { display: table; position: relative; max-width: 550px; }
.ms-blurb__icon { display: table-cell; width: 32px; line-height: 0; }
.ms-blurb__icon .ms-icon { display: inline-block; vertical-align: baseline; }
.ms-blurb__body { display: table-cell; vertical-align: top; padding-left: 15px; }

/* Fara z-index pe .ms-header: un context de stivuire aici dezactiveaza antialiasing-ul LCD
   al textului din lista de categorii cand aceasta se suprapune peste slider (diferente fata de live).
   Stivuirea peste continut o face coloana "Categorii" (.ms-hdr-navcol--cats, z-index 99). */
.ms-header {
	position: relative;
	background: #fff;
}

/* ======================================================================= */
/* Desktop                                                                  */
/* ======================================================================= */
@media (min-width: 981px) {

	.ms-mhdr { display: none; }

	/* ---- Bara de anunt (doar prima pagina) ---- */
	.ms-topbar { background-color: #080042; }
	.ms-topbar__row {
		width: 80%;
		max-width: 1652px;
		margin: 0 auto;
		padding: 20px 0;
	}
	.ms-topbar__text { font-size: 15px; color: #fff; text-align: center; }
	.ms-topbar__hl { color: #f60; }

	/* ---- Randul cu logo, parteneri, cautare, telefon, iconite ---- */
	.ms-hdr-main { background-color: #fff; padding: 10px 0; }
	.ms-header--home .ms-hdr-main { padding: 8px 0; }
	.ms-hdr-row {
		display: flex;
		position: relative;
		width: 90%;
		max-width: 1650px;
		margin: 0 auto;
		padding: 10px 0;
	}
	.ms-hdr-col {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		min-height: 1px;
		z-index: 2;
	}
	.ms-hdr-col--logo { width: 15%; }
	.ms-hdr-col--partners { width: 40%; }
	.ms-hdr-col--search { width: 20%; justify-content: flex-end; }
	.ms-hdr-col--phone { width: 20%; justify-content: flex-end; }
	.ms-hdr-col--icons { width: 5%; justify-content: flex-end; }
	.ms-header--home .ms-hdr-col--search { width: 25%; }
	.ms-header--home .ms-hdr-col--phone { width: 15%; }
	.ms-header--home .ms-hdr-col--icons { justify-content: flex-start; }

	.ms-hdr-logo { display: block; line-height: 0; max-width: 100%; }
	.ms-hdr-logo img { display: block; width: auto; max-width: 100%; height: auto; }

	.ms-hdr-partners {
		width: 100%;
		margin: 1px -12px 0 -2px;
		padding: 0 0 0 13px;
		line-height: 0;
	}
	.ms-hdr-partners img { display: block; width: 100%; height: auto; }

	/* Telefon "Sales & Support" */
	.ms-hdr-phone {
		width: 91%;
		padding-right: 3px;
		border-right: 1px solid #fff;
		font-size: 16px;
		line-height: 1em;
		letter-spacing: -1px;
		color: rgba(0, 0, 0, .8);
	}
	.ms-header--home .ms-hdr-phone { font-weight: 300; }
	.ms-hdr-phone .ms-blurb { max-width: 100%; }
	.ms-hdr-phone .ms-blurb__icon .ms-icon { font-size: 33px; width: 1em; height: 1em; margin-right: -1px; color: rgba(0, 0, 0, .46); transition: color .3s; }
	.ms-hdr-phone:hover .ms-blurb__icon .ms-icon { color: var(--ms-blue-dark); }
	.ms-hdr-phone p { padding: 0; }
	.ms-hdr-phone a { color: var(--ms-blue); }

	/* Cont + cos */
	.ms-hdr-icon {
		display: table;
		position: relative;
		max-width: 550px;
		cursor: pointer;
		color: rgba(0, 0, 0, .4);
	}
	.ms-hdr-icon__cell { display: table-cell; width: 32px; line-height: 0; }
	.ms-hdr-icon__pad { display: table-cell; padding-left: 15px; }
	.ms-hdr-icon .ms-icon { display: inline-block; height: 1em; transition: color .3s; }
	.ms-hdr-icon--account .ms-icon { font-size: 21px; width: .875em; }
	.ms-hdr-icon--cart .ms-icon { font-size: 25px; width: 1em; }
	.ms-hdr-icon:hover .ms-icon, .ms-hdr-icon:focus-visible .ms-icon { color: var(--ms-blue-dark); }

	/* ---- Cautare (modulul Divi "search") ---- */
	.ms-search {
		position: relative;
		width: 296.5px;
		max-width: 100%;
		border: 1px solid #ddd;
		border-radius: 10px;
		overflow: hidden;
		background: #fff;
	}
	.ms-search__form { position: relative; display: flex; margin: 0; }
	.ms-search__input {
		flex: 1 1 0%;
		min-width: 0;
		height: auto;
		margin: 0;
		padding: 10.01px 80px 10.01px 10.01px !important;
		border: 0 !important;
		border-radius: 10px;
		background: #fff;
		font-family: var(--ms-font);
		font-size: 14px;
		font-weight: 300;
		line-height: normal;
		color: #666;
		-webkit-appearance: none;
		appearance: none;
	}
	.ms-search__input::placeholder { color: #666; opacity: 1; }
	.ms-search__submit {
		flex: 0 0 auto;
		min-height: 100%;
		margin: 0;
		padding: 10.01px;
		border: 0;
		background-color: var(--ms-blue);
		color: #fff;
		font-family: var(--ms-font);
		font-size: 14px;
		font-weight: 300;
		line-height: normal;
		letter-spacing: -1px;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	/* ---- Bara albastra ---- */
	.ms-hdr-nav { position: relative; background-color: var(--ms-navy); }
	.ms-hdr-nav__row {
		display: flex;
		position: relative;
		width: 90%;
		max-width: 1650px;
		margin: 0 auto;
	}
	.ms-hdr-navcol {
		display: flex;
		align-items: center;
		position: relative;
		min-height: 1px;
		z-index: 3;
	}
	.ms-hdr-navcol--cats {
		width: 20%;
		justify-content: flex-start;
		padding-left: 10px;
		background-color: var(--ms-cyan);
		/* doar coloana cu lista/mega-panourile formeaza context de stivuire peste continutul paginii;
		   restul barei ramane in afara lui (altfel textul meniului pierde antialiasing-ul LCD) */
		z-index: 99;
	}
	.ms-hdr-navcol--main { width: 60%; justify-content: flex-end; padding: 15px 0 15px 20px; }
	.ms-hdr-navcol--right { width: 20%; justify-content: flex-end; padding: 15px 0; }

	/* Butonul "Categorii" */
	.ms-cat-toggle {
		position: relative;
		font-size: 18px;
		font-weight: 300;
		line-height: 1.3em;
		letter-spacing: -1px;
		color: #fff;
		cursor: pointer;
		user-select: none;
		-webkit-user-select: none;
	}
	.ms-header--home .ms-cat-toggle { width: 100%; cursor: default; }
	.ms-cat-toggle .ms-blurb__icon { width: 32px; }
	.ms-cat-toggle__icon { display: inline-block; margin-left: 5px; line-height: 0; }
	.ms-cat-toggle__icon .ms-icon { font-size: 25px; width: 1em; height: 1em; margin-right: -1px; }
	.ms-cat-toggle p { margin-left: -15px; padding: 0; }

	/* Meniurile din bara (Divi et_pb_menu) */
	.ms-nav { position: relative; }
	.ms-nav--main { width: 100%; padding-left: 20px; }
	.ms-nav__list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: stretch;
		margin: 0 -11px;
		padding: 0;
		line-height: 1.7em;
		list-style: none;
	}
	.ms-nav__list > li {
		display: flex;
		align-items: stretch;
		position: relative;
		padding: 8px 11px 0;
		line-height: 14px;
		font-size: 14px;
	}
	.ms-nav__list > li > a {
		display: block;
		position: relative;
		padding-bottom: 8px;
		font-size: 18px;
		font-weight: 300;
		line-height: 0;
		letter-spacing: -1px;
		color: #fff;
		text-decoration: none;
		transition: all .4s ease-in-out;
	}
	.ms-nav__list > li > a:hover { opacity: .7; }

	/* ---- Lista verticala de categorii (Supreme Mega Menu) ---- */
	.ms-cat-menu {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		max-width: 1650px;
		padding-top: 46px;
		z-index: 5;
	}
	#vertical-menu.ms-cat-menu {
		display: none;
		box-shadow: 0 2px 18px 0 rgba(0, 0, 0, .3);
	}
	.ms-cat-menu__nav { display: flex; flex-direction: column; }
	.ms-cat-menu__list {
		display: flex;
		flex-direction: column;
		position: relative;
		margin: 0;
		padding: 0;
		list-style: none;
		line-height: 30px;
		font-size: 14px;
	}
	.ms-cat-menu__item { list-style: none; }
	.ms-header--home .ms-cat-menu__item:last-child {
		border-radius: 0 0 10px 10px;
		overflow: hidden;
	}
	.ms-cat-menu__link {
		display: flex;
		justify-content: left;
		padding: 0 0 0 20px;
		background-color: #fff;
		border-bottom: 1px solid rgba(45, 45, 45, .08);
		color: var(--ms-blue);
		text-decoration: none;
		transition: all .2s ease-out;
		/* strat propriu, opac: textul pastreaza antialiasing-ul LCD (ca pe live) si peste slider */
		transform: translateZ(0);
	}
	.ms-cat-menu__caret { flex: 0 0 16px; width: 16px; }
	.ms-cat-menu__icon {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		align-self: center;
		height: 30px;
		margin-right: 7px;
		font-size: 16px;
		line-height: 0;
	}
	.ms-cat-menu__icon .ms-icon { display: block; height: 1em; }
	.ms-cat-menu__item--4 .ms-cat-menu__icon .ms-icon { width: 19.25px; } /* latimea glifului fa-store randat pe live */
	.ms-cat-menu__text {
		margin-right: 7px;
		font-size: 16px;
		font-weight: 300;
		line-height: 2.3em;
		letter-spacing: -1px;
		color: #2d2d2d;
		text-align: left;
	}

	/* Mega-panou (layout-urile din Divi Library randate de motoshop_megamenu_panel) */
	.ms-cat-panel {
		position: absolute;
		top: 0;
		left: 100%;
		width: 1310px;
		visibility: hidden;
		opacity: 0;
		z-index: 1;
		line-height: 26px;
		transition: all .3s ease-in-out;
	}
	.ms-cat-menu__item:hover > .ms-cat-panel,
	.ms-cat-menu__item.is-open > .ms-cat-panel {
		visibility: visible;
		opacity: 1;
		z-index: 2147483647;
	}
	.ms-cat-panel__inner {
		background-color: #fff;
		padding: 0 0 20px 30px;
		box-shadow: 0 2px 18px 0 rgba(0, 0, 0, .3);
	}
	.ms-mm-section { position: relative; background-color: #fff; padding: 4% 0; }
	.ms-mm-row {
		display: flex;
		align-items: flex-start;
		position: relative;
		width: auto;
		max-width: 100%;
		margin: auto;
		padding: 2% 0;
		z-index: 3;
	}
	.ms-mm-col {
		position: relative;
		width: 17.6%;
		margin-right: 3%;
		min-height: 1px;
		flex: 0 0 auto;
		z-index: 3;
	}
	.ms-mm-col--last { margin-right: 0; }
	.ms-mm-col > * { margin-bottom: 8.523%; }
	.ms-mm-col > *:last-child { margin-bottom: 0; }
	.ms-mm-text {
		display: block;
		position: relative;
		font-weight: 300;
		letter-spacing: -1px;
		text-align: left;
		color: inherit;
		cursor: pointer;
	}
	.menu-title-megamenu {
		font-family: var(--ms-font);
		font-weight: 600;
		font-size: 15px;
		letter-spacing: -1px;
		color: #000;
	}
	.ms-mm-menu { position: relative; background-color: #fff; text-align: left; }
	.ms-mm-menu__list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: stretch;
		margin: 0 -11px;
		padding: 0;
		line-height: 1.7em;
		list-style: none;
	}
	.ms-mm-menu__list > li {
		display: flex;
		align-items: stretch;
		position: relative;
		width: 100%;
		padding: 8px 11px 0;
		line-height: 14px;
		font-size: 14px;
		list-style: none;
	}
	.ms-mm-menu__list > li > a {
		display: flex;
		position: relative;
		padding-bottom: 8px;
		font-weight: 300;
		letter-spacing: -1px;
		color: rgba(0, 0, 0, .6);
		text-decoration: none;
		transition: all .4s ease-in-out;
	}
	/* hover-ele din CSS-ul custom Divi (.pa-vertical-menu ...) */
	.ms-mm-menu__list > li:hover { background-color: rgba(0, 0, 0, .023); }
	.ms-mm-menu__list > li:hover > a { color: #a59f9f; opacity: .7; }
	.ms-mm-image { line-height: 0; text-align: left; }
	.ms-mm-image a { display: inline-block; }
	.ms-mm-image img { display: inline-block; max-width: 100%; height: auto; }
}

/* ======================================================================= */
/* Breadcrumbs (motoshop_breadcrumbs)                                       */
/* ======================================================================= */
.ms-breadcrumbs {
	position: relative;
	background-color: #f0f0f0;
}
.ms-breadcrumbs__row {
	width: 80%;
	max-width: 1652px;
	margin: 0 auto;
	padding: 12px 0 0;
}
.ms-breadcrumbs--wide .ms-breadcrumbs__row { width: 90%; max-width: 1650px; }
.ms-breadcrumbs .woocommerce-breadcrumb {
	margin: 0 0 14px;
	padding: 0;
	font-size: 14px;
	letter-spacing: -1px;
	color: #767676;
}
.ms-breadcrumbs .woocommerce-breadcrumb a { color: #767676; }
.ms-breadcrumbs .woocommerce-breadcrumb::before,
.ms-breadcrumbs .woocommerce-breadcrumb::after { content: " "; display: table; }
.ms-breadcrumbs .woocommerce-breadcrumb::after { clear: both; }
/* stilul 'lwp' (pluginul Divi Breadcrumbs): padding 12px sus si jos, "Acasa" albastru, sageata 14px */
.ms-breadcrumbs--lwp .ms-breadcrumbs__row { padding: 12px 0; }
.ms-breadcrumbs--lwp .lwp-breadcrumbs { font-size: 14px; color: #666; }
.ms-breadcrumbs--lwp .lwp-breadcrumbs a { color: var(--ms-blue); }
.ms-breadcrumbs--lwp .separator { display: inline-block; font-size: 14px; line-height: 14px; vertical-align: middle; }
.ms-breadcrumbs--lwp .separator .ms-icon { display: block; width: 1em; height: 1em; }

/* ======================================================================= */
/* Mobil / tableta (< 981px): header simplificat                           */
/* ======================================================================= */
@media (max-width: 980px) {
	.ms-topbar, .ms-hdr-main, .ms-hdr-nav { display: none; }

	.ms-header { box-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
	.ms-mhdr__bar {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 16px;
	}
	.ms-mhdr__burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: var(--ms-navy);
		color: #fff;
		font-size: 26px;
		cursor: pointer;
		flex: 0 0 auto;
	}
	.ms-mhdr__burger .ms-icon { width: 1em; height: 1em; }
	.ms-mhdr__logo { display: block; line-height: 0; flex: 0 1 auto; min-width: 0; }
	.ms-mhdr__logo img { display: block; width: auto; height: 44px; max-width: 100%; object-fit: contain; }
	.ms-mhdr__icons { display: flex; align-items: center; gap: 14px; margin-left: auto; }
	.ms-mhdr__icons a { display: inline-flex; color: rgba(0, 0, 0, .55); font-size: 23px; line-height: 0; }
	.ms-mhdr__icons .ms-icon { height: 1em; }
	.ms-mhdr__icons .ms-icon--phone, .ms-mhdr__icons .ms-icon--cart { width: 1em; }
	.ms-mhdr__icons .ms-icon--user { width: .875em; }

	.ms-mhdr__search { padding: 0 16px 12px; }
	.ms-search {
		display: block;
		width: 100%;
		border: 1px solid #ddd;
		border-radius: 10px;
		overflow: hidden;
		background: #fff;
	}
	.ms-search__form { display: flex; margin: 0; }
	.ms-search__input {
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
		padding: 11px 12px !important;
		border: 0 !important;
		font-size: 16px;
		font-weight: 300;
		color: #666;
		background: #fff;
		-webkit-appearance: none;
		appearance: none;
	}
	.ms-search__submit {
		flex: 0 0 auto;
		padding: 0 16px;
		border: 0;
		background: var(--ms-blue);
		color: #fff;
		font-size: 15px;
		font-weight: 400;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	.ms-mhdr__menu {
		border-top: 3px solid var(--ms-blue);
		background: #fff;
		max-height: 75vh;
		overflow-y: auto;
		box-shadow: 0 6px 12px rgba(0, 0, 0, .1);
	}
	.ms-mhdr__menu[hidden] { display: none; }
	.ms-mhdr__list, .ms-mhdr__list ul { margin: 0; padding: 0; list-style: none; }
	.ms-mhdr__list a {
		display: block;
		padding: 11px 16px;
		border-bottom: 1px solid rgba(0, 0, 0, .06);
		color: #333;
		font-size: 16px;
		line-height: 1.4;
	}
	.ms-mhdr__list ul a { padding-left: 32px; font-size: 15px; color: #555; }
	.ms-mhdr__list ul ul a { padding-left: 48px; }

	.ms-breadcrumbs__row, .ms-breadcrumbs--wide .ms-breadcrumbs__row { width: auto; margin: 0 16px; }
}

/* Bara "normal" (categorii, cautare, branduri): marginea de jos a breadcrumb-ului ramane in bara gri, ca in Divi
   (fara asta ieșea in afara barei si lasa ~14px albi sub ea). Produsul are min-height propriu, lwp are padding. */
.ms-breadcrumbs--normal:not(.ms-breadcrumbs--lwp) { display: flow-root; }